diff options
| author | 2023-11-03 21:13:33 +0800 | |
|---|---|---|
| committer | 2023-11-03 21:13:33 +0800 | |
| commit | 9f0d43fe099a95ab1516ae951dcb60a89e76a5a5 (patch) | |
| tree | 51614fe47bff8bb11028a07d4a35c34c9ff6594a /docs/components/pages/landing | |
| parent | 8f135707d069c900e055dae71e69909d6b9a41bb (diff) | |
| download | HydroRoll-9f0d43fe099a95ab1516ae951dcb60a89e76a5a5.tar.gz HydroRoll-9f0d43fe099a95ab1516ae951dcb60a89e76a5a5.zip | |
chore: delete useless codes
Diffstat (limited to 'docs/components/pages/landing')
| -rw-r--r-- | docs/components/pages/landing/HydroRollAI.tsx | 27 | ||||
| -rw-r--r-- | docs/components/pages/landing/HydroRollTRPG.tsx | 27 | ||||
| -rw-r--r-- | docs/components/pages/landing/TurboHeroBackground.tsx | 33 | ||||
| -rw-r--r-- | docs/components/pages/landing/index.module.css | 184 | ||||
| -rw-r--r-- | docs/components/pages/landing/index.tsx | 197 | ||||
| -rw-r--r-- | docs/components/pages/landing/turbohero-background.module.css | 108 |
6 files changed, 0 insertions, 576 deletions
diff --git a/docs/components/pages/landing/HydroRollAI.tsx b/docs/components/pages/landing/HydroRollAI.tsx deleted file mode 100644 index 8bb778e..0000000 --- a/docs/components/pages/landing/HydroRollAI.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Image from "next/image"; - -export function HydroRollAI() { - return ( - <div className="relative w-24 h-24"> - <div className="pointer-events-none absolute w-[261px] h-[261px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-b from-[#FF3358] to-[#FF4FD8] mix-blend-normal opacity-5 dark:opacity-[0.15] blur-[60px]" /> - <div className="contents dark:hidden"> - <Image - alt="HydroRollAI Logo" - src={`/images/docs/AI/repo-hero-logo-light.svg`} - width={120} - height={120} - className="absolute w-[84px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" - /> - </div> - <div className="dark:contents hidden"> - <Image - alt="HydroRollAI Logo" - src={`/images/docs/AI/repo-hero-logo-dark.svg`} - width={120} - height={120} - className="hidden dark:block absolute w-[84px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" - /> - </div> - </div> - ); -} diff --git a/docs/components/pages/landing/HydroRollTRPG.tsx b/docs/components/pages/landing/HydroRollTRPG.tsx deleted file mode 100644 index 27cd838..0000000 --- a/docs/components/pages/landing/HydroRollTRPG.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Image from "next/image"; - -export function HydroRollTRPG() { - return ( - <div className="relative w-24 h-24"> - <div className="pointer-events-none absolute w-[261px] h-[261px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-b from-[#4EBFFF] to-[#BD69FF] mix-blend-normal opacity-5 dark:opacity-[0.15] blur-[60px]" /> - <div className="contents dark:hidden"> - <Image - alt="" - src={`/images/docs/TRPG/turbopack-hero-logo-light.svg`} - width={120} - height={136.15} - className="absolute w-[84px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" - /> - </div> - <div className="dark:contents hidden"> - <Image - alt="" - src={`/images/docs/TRPG/turbopack-hero-logo-dark.svg`} - width={120} - height={136.15} - className="hidden dark:block absolute w-[84px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" - /> - </div> - </div> - ); -} diff --git a/docs/components/pages/landing/TurboHeroBackground.tsx b/docs/components/pages/landing/TurboHeroBackground.tsx deleted file mode 100644 index dffa5b6..0000000 --- a/docs/components/pages/landing/TurboHeroBackground.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import cn from "classnames"; -import styles from "./turbohero-background.module.css"; - -export function TurboheroBackground(): JSX.Element { - return ( - <div - className={cn( - "![perspective:1000px] sm:![perspective:1000px] md:![perspective:1000px] lg:![perspective:1000px]", - styles.container - )} - > - <div - className="z-[100] absolute inset-0 [--gradient-stop-1:0px] [--gradient-stop-2:50%]" - style={{ - background: - "linear-gradient(to top, rgba(0,0,0,0) 0px, var(--geist-foreground) 50%)", - }} - /> - <div - style={{ - transform: "rotateX(75deg)", - position: "absolute", - top: 0, - bottom: 0, - left: 0, - right: 0, - }} - > - <div className={styles.lines} /> - </div> - </div> - ); -} diff --git a/docs/components/pages/landing/index.module.css b/docs/components/pages/landing/index.module.css deleted file mode 100644 index a492233..0000000 --- a/docs/components/pages/landing/index.module.css +++ /dev/null @@ -1,184 +0,0 @@ -.leftLights::before { - content: ""; - position: absolute; - pointer-events: none; - width: 25%; - height: 900px; - left: -12.5%; - top: calc(50% - 900px / 2 + 151px); - opacity: 0.2; - background: linear-gradient(180deg, #77b8ff 0%, rgba(42, 138, 246, 0.4) 100%); - filter: blur(125px); - transform: rotate(-15deg); - border-bottom-left-radius: 25% 25%; - border-bottom-right-radius: 25% 25%; - border-top-left-radius: 100% 100%; - border-top-right-radius: 100% 100%; - z-index: 200; - will-change: filter; - mix-blend-mode: normal; -} - -.leftLights::after { - content: ""; - position: absolute; - pointer-events: none; - width: 40%; - height: 422px; - left: 0px; - top: calc(50% - 422px / 2 + 298px); - opacity: 0.5; - background: linear-gradient( - 180deg, - rgba(29, 92, 162, 0.2) 0%, - rgba(42, 138, 246, 0.4) 100% - ); - filter: blur(125px); - will-change: filter; - mix-blend-mode: normal; -} - -.rightLights::before { - z-index: 200; - content: ""; - position: absolute; - pointer-events: none; - width: 25%; - height: 900px; - right: -12.5%; - top: calc(50% - 900px / 2 + 151px); - background-image: linear-gradient( - 180deg, - rgba(53, 25, 92, 0.4) 0%, - rgb(99, 42, 233) 100% - ); - filter: blur(125px); - transform: rotate(15deg); - border-bottom-left-radius: 25% 25%; - border-bottom-right-radius: 25% 25%; - border-top-left-radius: 100% 100%; - border-top-right-radius: 100% 100%; - opacity: 0.2; - overflow: hidden; - will-change: filter; - mix-blend-mode: normal; -} - -.rightLights::after { - content: ""; - position: absolute; - pointer-events: none; - width: 40%; - height: 422px; - right: 0px; - top: calc(50% - 422px / 2 + 298px); - opacity: 0.25; - - background: linear-gradient( - 180deg, - rgba(151, 164, 236, 0.4) 0%, - rgb(115, 42, 233) 100% - ); - transform: matrix(-1, 0, 0, 1, 0, 0); - filter: blur(125px); - will-change: filter; - mix-blend-mode: normal; -} - -.counter-border { - --border-radius: 12px; - --border-size: 1px; - --padding: 1px; - --border-bg: conic-gradient( - from 180deg at 50% 50%, - #2a2ae9 0deg, - #a853ba 112.5deg, - #2a8af6 228.75deg, - rgba(42, 138, 246, 0) 360deg - ); - position: relative; - overflow: hidden; - font-size: 2rem; - padding: calc(var(--padding) + var(--border-size)); - border-radius: var(--border-radius); - display: inline-block; - z-index: 0; - backface-visibility: hidden; - perspective: 1000; - transform: translate3d(0, 0, 0); -} - -.counter-border:hover { - cursor: pointer; -} - -.counter-border i { - content: ""; - position: absolute; - top: var(--border-size); - right: var(--border-size); - bottom: var(--border-size); - left: var(--border-size); - padding: var(--border-size); - mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); - mask-composite: exclude; - z-index: -1; - border-radius: calc(var(--border-radius) + var(--border-size)); -} - -.counter-border i::before { - content: ""; - display: block; - background: var(--border-bg); - box-shadow: 0px 0px 40px 20px --var(--border-bg); - width: calc(100% * 1.41421356237); - padding-bottom: calc(100% * 1.41421356237); - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - border-radius: 100%; - z-index: -2; - animation: spin 5s linear infinite; -} - -@media (prefers-reduced-motion) { - .counter-border i::before { - animation: none; - } -} - -@keyframes spin { - from { - transform: translate(-50%, -50%) rotate(360deg); - } - to { - transform: translate(-50%, -50%) rotate(0); - } -} - -.leftBottomLights { - position: absolute; - width: 387px; - height: 404px; - left: calc(50% - 387px / 2 - 80px); - bottom: -32px; - background: linear-gradient(180deg, #58a5ff 0%, #a67af4 100%); - mix-blend-mode: normal; - opacity: 0.15; - filter: blur(50px); - will-change: filter; -} - -.rightBottomLights { - position: absolute; - width: 387px; - height: 404px; - left: calc(50% - 387px / 2 + 81px); - bottom: -32px; - background: linear-gradient(180deg, #3333ff 0%, #4fdfff 100%); - mix-blend-mode: normal; - opacity: 0.15; - filter: blur(50px); - will-change: filter; -} diff --git a/docs/components/pages/landing/index.tsx b/docs/components/pages/landing/index.tsx deleted file mode 100644 index 0cf3ea3..0000000 --- a/docs/components/pages/landing/index.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import React from "react"; -import Head from "next/head"; -import cn from "classnames"; -import Link from "next/link"; -import { motion } from "framer-motion"; -import { Clients } from "../../clients/Clients"; -import { Marquee } from "../../clients/Marquee"; -import { TurboheroBackground } from "./TurboHeroBackground"; -import { HydroRollAI } from "./HydroRollAI"; -import { HydroRollTRPG } from "./HydroRollTRPG"; -import { FadeIn } from "../home-shared/FadeIn"; -import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles"; -import styles from "./index.module.css"; -import PackLogo from "../../logos/TRPGLogo"; -import RepoLogo from "../../logos/AILogo"; - -function Background() { - return ( - <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"> - <div - className={cn( - "z-[-1] absolute w-full h-full [--gradient-stop-1:60%] [--gradient-stop-2:85%] lg:[--gradient-stop-1:50%] lg:[--gradient-stop-2:90%]", - "[--gradient-color-1=rgba(0,0,0,1)] [--gradient-color-2=rgba(0,0,0,0.8)] [--gradient-color-3=rgba(0,0,0,0)]", - "dark:[--gradient-color-1=rgba(255,255,255,1)] dark:[--gradient-color-2=rgba(255,255,255,0.8)] dark:[--gradient-color-3=rgba(255,255,255,0)]" - )} - style={{ - background: - "linear-gradient(180deg, var(--gradient-color-1) 0%, var(--gradient-color-2) var(--gradient-stop-1), var(--gradient-color-3) var(--gradient-stop-2), 100% transparent)", - }} - /> - <span className={cn(styles.leftLights, "opacity-50 dark:opacity-100")} /> - <span className={cn(styles.rightLights, "opacity-50 dark:opacity-100")} /> - <span className="absolute bottom-0 left-0 w-full h-48 bg-gradient-to-t dark:from-black from-white to-transparent" /> - <span className="bg-gradient-to-b dark:from-black from-white to-transparent absolute top-[20vh] left-0 w-full h-[50vh]" /> - <TurboheroBackground /> - </div> - ); -} - -export function CardBadge({ children }: { children: React.ReactNode }) { - return ( - <div className="font-mono font-bold text-xs text-black/50 dark:text-white/50 px-[6px] py-[3.25px] tracking-[-0.01em] rounded-[6px] uppercase flex justify-center items-center bg-black/5 dark:bg-white/[0.15] border border-black/[0.1] dark:border-white/[0.1]"> - {children} - </div> - ); -} - -const variants = { - hidden: { opacity: 0 }, - active: { opacity: 1 }, -}; - -function Card({ - alt, - href, - title, - icon: Icon, - className, - children, -}: { - href: string; - icon: React.ElementType; - title: "AI" | "TRPG"; - alt?: string; - className?: string; - children: React.ReactNode; -}) { - const [hovering, setHovering] = React.useState(false); - return ( - <Link - href={href} - className={cn( - styles["counter-border"], - "w-[calc(100%_-_0px)] h-[304]px sm:!w-[488px] sm:h-[352px]" - )} - onMouseEnter={() => setHovering(true)} - onMouseLeave={() => setHovering(false)} - > - <motion.i - initial="hidden" - animate={hovering ? "active" : "hidden"} - variants={variants} - aria-hidden="true" - ></motion.i> - <div - className={cn( - "relative w-full h-full max-w-full !pb-12 pt-8 md:!pb-4 md:!pt-4 p-3 rounded-xl overflow-hidden flex flex-col items-center justify-center border border-[rgba(255,255,255,0.05)]", - className - )} - > - <div className="flex items-center justify-center flex-1 mb-7 md:mb-0"> - <Icon /> - </div> - - <div className="flex flex-col items-center flex-1"> - {title == "TRPG" ? ( - <PackLogo - alt={alt} - className="w-[160px] md:w-[220px] mb-3 fill-black dark:fill-white" - /> - ) : ( - <RepoLogo - alt={alt} - className="w-[160px] md:w-[220px] mb-3 fill-black dark:fill-white" - /> - )} - {children} - </div> - </div> - </Link> - ); -} - -function SiteCards() { - return ( - <div className="flex w-full container items-center justify-center gap-6 px-6 sm:mx-0 mt-8 md:!mt-14 lg:!mt-15 md:mb-0 flex-col lg:!flex-row z-10 lg:!translate-y-0"> - <FadeIn delay={0.1}> - <Card - title="AI" - alt="HydroRollAI" - icon={HydroRollAI} - href="/AI" - className="turborepoCardBg" - > - <p className="text-lg !w-[280px] md:!w-[340px] font-space-grotesk text-center opacity-50 dark:opacity-70"> - 水系核心——AI模块 - </p> - </Card> - </FadeIn> - <FadeIn delay={0.2}> - <Card - title="TRPG" - alt="HydroRollTRPG" - icon={HydroRollTRPG} - href="/TRPG" - className="turbopackCardBg" - > - <div className="absolute top-3 left-3"> - <CardBadge>alpha</CardBadge> - </div> - <p className="text-lg !w-[280px] md:!w-[340px] font-space-grotesk text-center opacity-50 dark:opacity-70 "> - 阅读水系TRPG模块文档 - </p> - </Card> - </FadeIn> - </div> - ); -} - -function Teams() { - return ( - <div className="mx-auto "> - <p className="bg-contain mb-2 md:!mb-4 text-sm font-semibold tracking-wide text-center text-[#666666] dark:text-[#888888] uppercase"> - Thx by teams from - <br className="inline md:hidden" /> around the world - <br></br> - 感谢以下来自世界各地的团队或组织的贡献 - </p> - <div className="z-50 grid grid-flow-col grid-rows-6 sm:grid-rows-3 md:grid-rows-2 lg:grid-rows-1"> - <Clients - companyList={[ - "Vercel", - "AWS", - "Microsoft", - "Adobe" - ]} - staticWidth - /> - </div> - </div> - ); -} - -function LandingPage() { - return ( - <> - <LandingPageGlobalStyles /> - <main className="relative flex flex-col items-center justify-center w-full h-full overflow-hidden [--geist-foreground:#fff] dark:[--geist-foreground:#000] [--gradient-stop-1:0px] [--gradient-stop-2:120px] sm:[--gradient-stop-1:0px] sm:[--gradient-stop-2:120px]"> - <Background /> - <FadeIn className="z-10 flex flex-col items-center justify-center w-full h-full"> - <h1 className="mt-12 lg:!mt-20 mx-6 w-[300px] md:!w-full font-extrabold text-5xl lg:text-6xl leading-tight text-center mb-4 bg-clip-text text-transparent bg-gradient-to-b from-black/80 to-black dark:from-white dark:to-[#AAAAAA]"> - Make it Happen - </h1> - <p className="mx-6 text-xl max-h-[112px] md:max-h-[96px] w-[315px] md:w-[660px] md:text-2xl font-space-grotesk text-center text-[#666666] dark:text-[#888888]"> - HydroRoll'水系 是一个基于nlp多任务模型的跨平台骰系,尽管只是作为深度学习框架iamai的插件并且借鉴了大量其它骰系较好的机制,但它仍然有自己的创新之处与标准遵循。 - </p> - </FadeIn> - <SiteCards /> - <FadeIn delay={0.3} className="z-10 py-16"> - <Teams /> - </FadeIn> - </main> - </> - ); -} - -export default LandingPage; diff --git a/docs/components/pages/landing/turbohero-background.module.css b/docs/components/pages/landing/turbohero-background.module.css deleted file mode 100644 index 8f157e1..0000000 --- a/docs/components/pages/landing/turbohero-background.module.css +++ /dev/null @@ -1,108 +0,0 @@ -.container { - position: absolute; - z-index: -6; - overflow: hidden; - inset: 0; - transition: perspective 3000ms ease 0s; -} - -.lines { - --right: #f8cde8; - --left: #b9ddff; - position: absolute; - width: 200vw; - margin-left: -50%; - transform: translateY(0); - background-image: linear-gradient( - to right, - var(--left) 45%, - rgba(0, 0, 0, 0) 50%, - var(--right) 55% - ); - mask-image: linear-gradient( - to right, - rgba(0, 0, 0, 1) 2px, - rgba(0, 0, 0, 0) 1px - ), - linear-gradient(to bottom, rgba(0, 0, 0, 1) 2px, rgba(0, 0, 0, 0) 1px); - mask-size: 60px 60px; - overflow: hidden; - mask-repeat: repeat repeat; - display: flex; - align-items: center; - justify-content: center; - inset: -100% 0px; - background-position-y: 100%; - mask-position: 50% 0px; - animation: go-up 60s linear infinite; -} - -@media (min-width: 1024px) { - .lines { - animation-duration: 30s; - mask-size: 80px 80px; - } -} - -:global(.dark) .lines { - --right: #4c2638; - --left: #223b67; -} - -@keyframes go-up { - 0% { - transform: translateY(0); - } - - 100% { - transform: translateY(calc(50% + 28px)); - } -} - -.pulse::before { - content: ""; - position: absolute; - inset: 0px; - animation: pulse-frames ease-out 8s infinite; - animation-delay: 0s; - background: rgba(0, 0, 0, 0) - linear-gradient( - to top, - rgba(0, 0, 0, 0) 45%, - var(--pulse-color) 50%, - rgba(0, 0, 0, 0) 90% - ) - no-repeat; - z-index: 211; - animation-delay: var(--delay); -} - -@keyframes pulse-frames { - 0% { - transform: translateY(0%); - } - 50% { - transform: translateY(200%); - } - 100% { - transform: translateY(200%); - } -} - -@media (prefers-reduced-motion) { - .lines { - animation: none; - } - .pulse::before { - animation: none; - } -} - -@media (prefers-reduced-motion) { - .lines { - animation: none; - } - .pulse::before { - animation: none; - } -} |
