From 4838df315931bb883f704ec3e1abe2685f296cdf Mon Sep 17 00:00:00 2001 From: HsiangNianian Date: Sat, 22 Apr 2023 19:52:26 +0800 Subject: 😀 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/landing/TurboHeroBackground.tsx | 33 ++++ docs/components/pages/landing/Turbopack.tsx | 27 +++ docs/components/pages/landing/Turborepo.tsx | 27 +++ docs/components/pages/landing/index.module.css | 184 +++++++++++++++++++ docs/components/pages/landing/index.tsx | 199 +++++++++++++++++++++ .../pages/landing/turbohero-background.module.css | 108 +++++++++++ 6 files changed, 578 insertions(+) create mode 100644 docs/components/pages/landing/TurboHeroBackground.tsx create mode 100644 docs/components/pages/landing/Turbopack.tsx create mode 100644 docs/components/pages/landing/Turborepo.tsx create mode 100644 docs/components/pages/landing/index.module.css create mode 100644 docs/components/pages/landing/index.tsx create mode 100644 docs/components/pages/landing/turbohero-background.module.css (limited to 'docs/components/pages/landing') diff --git a/docs/components/pages/landing/TurboHeroBackground.tsx b/docs/components/pages/landing/TurboHeroBackground.tsx new file mode 100644 index 0000000..dffa5b6 --- /dev/null +++ b/docs/components/pages/landing/TurboHeroBackground.tsx @@ -0,0 +1,33 @@ +import cn from "classnames"; +import styles from "./turbohero-background.module.css"; + +export function TurboheroBackground(): JSX.Element { + return ( +
+
+
+
+
+
+ ); +} diff --git a/docs/components/pages/landing/Turbopack.tsx b/docs/components/pages/landing/Turbopack.tsx new file mode 100644 index 0000000..1db1076 --- /dev/null +++ b/docs/components/pages/landing/Turbopack.tsx @@ -0,0 +1,27 @@ +import Image from "next/image"; + +export function Turbopack() { + return ( +
+
+
+ +
+
+ +
+
+ ); +} diff --git a/docs/components/pages/landing/Turborepo.tsx b/docs/components/pages/landing/Turborepo.tsx new file mode 100644 index 0000000..022f37f --- /dev/null +++ b/docs/components/pages/landing/Turborepo.tsx @@ -0,0 +1,27 @@ +import Image from "next/image"; + +export function Turborepo() { + return ( +
+
+
+ Turborepo Logo +
+
+ Turborepo Logo +
+
+ ); +} diff --git a/docs/components/pages/landing/index.module.css b/docs/components/pages/landing/index.module.css new file mode 100644 index 0000000..ac18d80 --- /dev/null +++ b/docs/components/pages/landing/index.module.css @@ -0,0 +1,184 @@ +.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(236, 151, 207, 0.4) 0%, + rgba(233, 42, 103, 1) 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(236, 151, 207, 0.4) 0%, + rgba(233, 42, 103, 1) 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%, + #e92a67 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, #ff3358 0%, #ff4fd8 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 new file mode 100644 index 0000000..deb63f3 --- /dev/null +++ b/docs/components/pages/landing/index.tsx @@ -0,0 +1,199 @@ +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 { Turborepo } from "./Turborepo"; +import { Turbopack } from "./Turbopack"; +import { FadeIn } from "../home-shared/FadeIn"; +import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles"; +import styles from "./index.module.css"; +import PackLogo from "../../logos/PackLogo"; +import RepoLogo from "../../logos/RepoLogo"; + +function Background() { + return ( +
+
+ + + + + +
+ ); +} + +export function CardBadge({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} + +const variants = { + hidden: { opacity: 0 }, + active: { opacity: 1 }, +}; + +function Card({ + alt, + href, + title, + icon: Icon, + className, + children, +}: { + href: string; + icon: React.ElementType; + title: "repo" | "pack"; + alt?: string; + className?: string; + children: React.ReactNode; +}) { + const [hovering, setHovering] = React.useState(false); + return ( + setHovering(true)} + onMouseLeave={() => setHovering(false)} + > + +
+
+ +
+ +
+ {title == "pack" ? ( + + ) : ( + + )} + {children} +
+
+ + ); +} + +function SiteCards() { + return ( +
+ + +

+ High-performance build system for JavaScript and TypeScript + codebases. +

+ + + + +
+ alpha +
+

+ Introducing the Rust-powered successor to Webpack. +

+ + +
+ ); +} + +function Teams() { + return ( +
+

+ Trusted by teams from +
around the world +

+
+ +
+
+ ); +} + +function LandingPage() { + return ( + <> + +
+ + +

+ Make Ship Happen +

+

+ Turbo is an incremental bundler and build system optimized for + JavaScript and TypeScript, written in Rust. +

+ + + + + +
+ + ); +} + +export default LandingPage; diff --git a/docs/components/pages/landing/turbohero-background.module.css b/docs/components/pages/landing/turbohero-background.module.css new file mode 100644 index 0000000..8f157e1 --- /dev/null +++ b/docs/components/pages/landing/turbohero-background.module.css @@ -0,0 +1,108 @@ +.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; + } +} -- cgit v1.2.3-70-g09d2