😀

1 files changed, 118 insertions, 0 deletions

diff --git a/docs/components/pages/repo-home/RepoLetter.tsx b/docs/components/pages/repo-home/RepoLetter.tsx
new file mode 100644
index 0000000..7093a3a
--- /dev/null
+++ b/docs/components/pages/repo-home/RepoLetter.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 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&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/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>
+  );
+}