aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/components/pages/landing
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components/pages/landing')
-rw-r--r--docs/components/pages/landing/HydroRollAI.tsx27
-rw-r--r--docs/components/pages/landing/HydroRollTRPG.tsx27
-rw-r--r--docs/components/pages/landing/TurboHeroBackground.tsx33
-rw-r--r--docs/components/pages/landing/index.module.css184
-rw-r--r--docs/components/pages/landing/index.tsx197
-rw-r--r--docs/components/pages/landing/turbohero-background.module.css108
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&apos;水系 是一个基于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;
- }
-}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-21 04:40:41 +0000