4 files changed, 269 insertions, 0 deletions

diff --git a/docs/components/pages/AI-home/AIFeatures.tsx b/docs/components/pages/AI-home/AIFeatures.tsx
new file mode 100644
index 0000000..466c0ae
--- /dev/null
+++ b/docs/components/pages/AI-home/AIFeatures.tsx
@@ -0,0 +1,15 @@
+import { REPO_HOME_FEATURES } from "../../../content/features";
+import { FadeIn } from "../home-shared/FadeIn";
+import { FeaturesBento } from "../home-shared/FeaturesBento";
+
+export function AIFeatures() {
+  return (
+    <FadeIn className="py-16 md:py-24 lg:py-32">
+      <FeaturesBento
+        header="Why AI?"
+        body="AI balabala..."
+        features={REPO_HOME_FEATURES}
+      />
+    </FadeIn>
+  );
+}
diff --git a/docs/components/pages/AI-home/AIHero.tsx b/docs/components/pages/AI-home/AIHero.tsx
new file mode 100644
index 0000000..5636cc2
--- /dev/null
+++ b/docs/components/pages/AI-home/AIHero.tsx
@@ -0,0 +1,114 @@
+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 AIHero() {
+  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="AI"
+              src="/images/docs/AI/repo-hero-circles-dark.svg"
+              width={614}
+              height={614}
+              className="hidden dark:block"
+            />
+            <Image
+              alt="AI"
+              src="/images/docs/AI/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/AI/repo-hero-logo-dark.svg`}
+              width={120}
+              height={120}
+              className="hidden dark:block"
+            />
+            <Image
+              alt=""
+              src={`/images/docs/AI/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="AI"
+            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="/AI/docs" className="block py-3">
+                Get Started
+              </Link>
+            </CTAButton>
+            <CTAButton outline>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href="https://github.com/retrofor/HydroRoll"
+                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/AI-home/AILetter.tsx b/docs/components/pages/AI-home/AILetter.tsx
new file mode 100644
index 0000000..a92f9dd
--- /dev/null
+++ b/docs/components/pages/AI-home/AILetter.tsx
@@ -0,0 +1,118 @@
+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 AILetter() {
+  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&apos;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&apos;re serving multiple applications, you might reach for a
+            monorepo. They&apos;re incredible for productivity, especially on
+            the frontend, but the tooling can be a nightmare. There&apos;s a lot
+            of stuff to do (and things to mess up). Nothing &ldquo;just
+            works.&rdquo; It&apos;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&apos;t
+            require PhD to learn or a staff to maintain.
+          </p>
+          <br />
+          <p>With Turborepo, we&apos;re doing just that.</p>
+          <br />
+          <p>
+            We&apos;re building a build system that can keep up with your team.
+            You&apos;ll see your CI get faster, duplicated work get cut, and
+            your NPM scripts get simpler. You&apos;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/AI/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/AI/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="/AI/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/AI-home/index.tsx b/docs/components/pages/AI-home/index.tsx
new file mode 100644
index 0000000..b65040c
--- /dev/null
+++ b/docs/components/pages/AI-home/index.tsx
@@ -0,0 +1,22 @@
+import { AIHero } from "./AIHero";
+import { AIFeatures } from "./AIFeatures";
+import { AILetter } from "./AILetter";
+import { GradientSectionBorder } from "../home-shared/GradientSectionBorder";
+import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles";
+
+export default function HydroRollAIHome() {
+  return (
+    <>
+      <LandingPageGlobalStyles />
+      <main className="relative">
+        <AIHero />
+        <GradientSectionBorder>
+          <AIFeatures />
+        </GradientSectionBorder>
+        <GradientSectionBorder>
+          <AILetter />
+        </GradientSectionBorder>
+      </main>
+    </>
+  );
+}