diff options
| author | 2023-05-03 01:09:49 +0800 | |
|---|---|---|
| committer | 2023-05-03 01:09:49 +0800 | |
| commit | a2f8df3b14979f74c03a79b2ffaf081739837899 (patch) | |
| tree | f2d8e8eb2a3d323502ebcec0a7d02ae9a8daed01 /docs/components/pages/repo-home | |
| parent | fade13d683c0420d83f523703d7038edbefe97f6 (diff) | |
| download | HydroRoll-a2f8df3b14979f74c03a79b2ffaf081739837899.tar.gz HydroRoll-a2f8df3b14979f74c03a79b2ffaf081739837899.zip | |
Diffstat (limited to 'docs/components/pages/repo-home')
| -rw-r--r-- | docs/components/pages/repo-home/RepoFeatures.tsx | 15 | ||||
| -rw-r--r-- | docs/components/pages/repo-home/RepoHero.tsx | 114 | ||||
| -rw-r--r-- | docs/components/pages/repo-home/RepoLetter.tsx | 118 | ||||
| -rw-r--r-- | docs/components/pages/repo-home/index.tsx | 22 |
4 files changed, 0 insertions, 269 deletions
diff --git a/docs/components/pages/repo-home/RepoFeatures.tsx b/docs/components/pages/repo-home/RepoFeatures.tsx deleted file mode 100644 index 4499725..0000000 --- a/docs/components/pages/repo-home/RepoFeatures.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { REPO_HOME_FEATURES } from "../../../content/features"; -import { FadeIn } from "../home-shared/FadeIn"; -import { FeaturesBento } from "../home-shared/FeaturesBento"; - -export function RepoFeatures() { - return ( - <FadeIn className="py-16 md:py-24 lg:py-32"> - <FeaturesBento - header="Why Turborepo?" - body="Turborepo reimagines build system techniques used by Facebook and Google to remove maintenance burden and overhead." - features={REPO_HOME_FEATURES} - /> - </FadeIn> - ); -} diff --git a/docs/components/pages/repo-home/RepoHero.tsx b/docs/components/pages/repo-home/RepoHero.tsx deleted file mode 100644 index a63777a..0000000 --- a/docs/components/pages/repo-home/RepoHero.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import cn from "classnames"; -import Image from "next/image"; -import Link from "next/link"; -import gradients from "../home-shared/gradients.module.css"; -import { HeroText, SectionSubtext } from "../home-shared/Headings"; -import { Gradient } from "../home-shared/Gradient"; -import { FadeIn } from "../home-shared/FadeIn"; -import { CTAButton } from "../home-shared/CTAButton"; -import RepoLogo from "../../logos/RepoLogo"; - -export function RepoHero() { - return ( - <> - <FadeIn - noVertical - className="font-sans w-auto pb-16 pt-[48px] md:pb-24 lg:pb-32 md:pt-16 lg:pt-20 flex justify-between gap-8 items-center flex-col relative z-0" - > - <FadeIn className="z-50 flex items-center justify-center w-full "> - <div className="absolute min-w-[614px] min-h-[614px]"> - {/* TODO: On dark mode, there should be a "breathing" gradient inside the inner circle */} - <Image - alt="Turborepo" - src="/images/docs/repo/repo-hero-circles-dark.svg" - width={614} - height={614} - className="hidden dark:block" - /> - <Image - alt="Turborepo" - src="/images/docs/repo/repo-hero-circles-light.svg" - width={614} - height={614} - className="block dark:hidden" - /> - </div> - <div className="absolute z-50 flex items-center justify-center w-64 h-64"> - <Gradient - small - width={120} - height={120} - conic - className="dark:opacity-100 opacity-40" - /> - </div> - - <div className="w-[120px] h-[120px] z-50"> - <Image - alt="" - src={`/images/docs/repo/repo-hero-logo-dark.svg`} - width={120} - height={120} - className="hidden dark:block" - /> - <Image - alt="" - src={`/images/docs/repo/repo-hero-logo-light.svg`} - width={120} - height={120} - className="block dark:hidden" - /> - </div> - </FadeIn> - <Gradient - width={1000} - height={1000} - className="top-[-500px] dark:opacity-20 opacity-[0.15]" - conic - /> - <div className="absolute top-0 z-10 w-full h-48 dark:from-black from-white to-transparent bg-gradient-to-b" /> - <FadeIn - delay={0.15} - className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6" - > - <RepoLogo - alt="Turborepo" - width="200" - className="w-[160px] md:w-[200px] fill-black dark:fill-white" - /> - <HeroText h1>The build system that makes ship happen</HeroText> - <SectionSubtext hero> - Turborepo is a high-performance build system for JavaScript and - TypeScript codebases. - </SectionSubtext> - </FadeIn> - <FadeIn - delay={0.3} - className="z-50 flex flex-col items-center w-full max-w-md gap-5 px-6" - > - <div className="flex flex-col w-full gap-3 md:!flex-row"> - <CTAButton> - <Link href="/repo/docs" className="block py-3"> - Get Started - </Link> - </CTAButton> - <CTAButton outline> - <a - target="_blank" - rel="noreferrer" - href="https://github.com/vercel/turbo" - className="block py-3" - > - GitHub - </a> - </CTAButton> - </div> - <p className="text-sm text-[#666666]">License: MPL-2.0</p> - </FadeIn> - <FadeIn delay={0.5} className="relative w-full"> - <div className="absolute bottom-0 w-full dark:from-black from-white to-transparent h-72 bg-gradient-to-t" /> - </FadeIn> - </FadeIn> - </> - ); -} diff --git a/docs/components/pages/repo-home/RepoLetter.tsx b/docs/components/pages/repo-home/RepoLetter.tsx deleted file mode 100644 index 7093a3a..0000000 --- a/docs/components/pages/repo-home/RepoLetter.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { HeroText } from "../home-shared/Headings"; -import Image from "next/image"; -import cn from "classnames"; -import gradients from "../home-shared/gradients.module.css"; -import { FadeIn } from "../home-shared/FadeIn"; -import { CTAButton } from "../home-shared/CTAButton"; -import Link from "next/link"; -import { Gradient } from "../home-shared/Gradient"; - -export function RepoLetter() { - return ( - <section className="relative flex flex-col items-center px-6 py-16 font-sans md:py-24 lg:py-32 gap-14"> - <FadeIn> - <HeroText className="lg:text-[65px]"> - Scaling your Codebase - <br /> - shouldn't be so difficult - </HeroText> - </FadeIn> - <div className="flex flex-col max-w-xl leading-6 md:text-lg lg:text-lg"> - <FadeIn className="opacity-70"> - <p> - The bigger your project grows, the slower it gets. Tasks like - linting, testing, and building begin to take enormous amounts of - time. - </p> - <br /> - <p> - If you're serving multiple applications, you might reach for a - monorepo. They're incredible for productivity, especially on - the frontend, but the tooling can be a nightmare. There's a lot - of stuff to do (and things to mess up). Nothing “just - works.” It's become completely normal to waste entire - days or weeks on plumbing—tweaking configs, writing one-off scripts, - and stitching stuff together. - </p> - <br /> - <p>We need something else.</p> - <br></br> - <p> - A fresh take on the whole setup. Designed to glue everything - together. A toolchain that works for you and not against you. With - sensible defaults, but even better escape hatches. Built with the - same techniques used by the big guys, but in a way that doesn't - require PhD to learn or a staff to maintain. - </p> - <br /> - <p>With Turborepo, we're doing just that.</p> - <br /> - <p> - We're building a build system that can keep up with your team. - You'll see your CI get faster, duplicated work get cut, and - your NPM scripts get simpler. You'll get a world-class - development environment, without the maintenance burden. - </p> - </FadeIn> - <FadeIn noVertical viewTriggerOffset className="relative h-2 md:h-12"> - <span - className={cn( - "w-full h-[1px] -bottom-8 md:-bottom-4 lg:-bottom-4 absolute", - gradients.letterLine - )} - /> - </FadeIn> - <FadeIn - viewTriggerOffset - noVertical - className="flex items-end justify-center gap-3 md:self-start md:-ml-4 lg:self-start lg:-ml-4 min-w-[300px]" - > - <div className="w-24 h-24 min-w-[96px] min-h-[96px] rounded-full border dark:border-white/10 border-black/10 flex items-center justify-center "> - <Image - alt="Image of Jared Palmer" - src="/images/people/jaredpalmer.jpeg" - width={64} - height={64} - className="rounded-full grayscale" - /> - </div> - <div className="flex flex-col"> - <Image - alt="Jared Palmer's hand written signature" - src="/images/docs/repo/jared-signature-light.svg" - width={190} - height={90} - className="block mt-3 mb-4 ml-3 dark:hidden" - /> - <Image - alt="Jared Palmer's hand written signature" - src="/images/docs/repo/jared-signature-dark.svg" - width={209} - height={116} - className="hidden -mt-2 dark:block" - /> - <div className="flex gap-2 flex-wrap text-sm leading-none text-[#888888] max-w-[156px] md:max-w-xl lg:max-w-xl"> - <p className="font-bold">Jared Palmer</p> - <p>Founder of Turborepo</p> - </div> - </div> - </FadeIn> - </div> - <FadeIn noVertical className="relative flex justify-center w-full mt-16"> - <div className="max-w-[180px] w-full"> - <CTAButton> - <Link href="/repo/docs" className="block py-3 font-sans"> - Start Building - </Link> - </CTAButton> - </div> - <Gradient - width={1200} - height={300} - className="bottom-[-200px] -z-10 opacity-20" - conic - /> - </FadeIn> - </section> - ); -} diff --git a/docs/components/pages/repo-home/index.tsx b/docs/components/pages/repo-home/index.tsx deleted file mode 100644 index 992a614..0000000 --- a/docs/components/pages/repo-home/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { RepoHero } from "./RepoHero"; -import { RepoFeatures } from "./RepoFeatures"; -import { RepoLetter } from "./RepoLetter"; -import { GradientSectionBorder } from "../home-shared/GradientSectionBorder"; -import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles"; - -export default function Home() { - return ( - <> - <LandingPageGlobalStyles /> - <main className="relative"> - <RepoHero /> - <GradientSectionBorder> - <RepoFeatures /> - </GradientSectionBorder> - <GradientSectionBorder> - <RepoLetter /> - </GradientSectionBorder> - </main> - </> - ); -} |
