fix(docs): remove Berit font, opt for SVGs (vercel#178)

Co-authored-by: Thomas Knickman <[email protected]>

docs/components/pages/landing/index.tsx

@@ -12,6 +12,7 @@ import { Turbopack } from "./Turbopack";
 import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles";
 
 import styles from "./index.module.css";
+import Image from "next/future/image";
 
 function Background() {
   return (
@@ -56,7 +57,7 @@ function Card({
 }: {
   href: string;
   icon: React.ElementType;
-  title: string;
+  title: "repo" | "pack";
   className?: string;
   children: React.ReactNode;
 }) {
@@ -90,9 +91,13 @@ function Card({
           <div className="mb-7">
             <Icon />
           </div>
-          <p className="mb-3 text-xl font-bold tracking-wider uppercase font-wide md:text-3xl dark:text-white">
-            {title}
-          </p>
+          <Image
+            alt="Turbopack"
+            src={`/images/docs/${title}/${title}-type-logo.svg`}
+            width={220}
+            height={100}
+            className="w-[160px] md:w-[220px] mb-3"
+          />
           {children}
         </motion.div>
       </a>
@@ -105,7 +110,7 @@ function SiteCards() {
     <AnimatePresence>
       <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">
         <Card
-          title="Turborepo"
+          title="repo"
           icon={Turborepo}
           href="/repo"
           className="turborepoCardBg"
@@ -116,7 +121,7 @@ function SiteCards() {
           </p>
         </Card>
         <Card
-          title="Turbopack"
+          title="pack"
           icon={Turbopack}
           href="/pack"
           className="turbopackCardBg"

docs/components/pages/pack-home/PackHero.tsx

@@ -14,7 +14,7 @@ export function PackHero() {
     <>
       <div className="absolute top-0 z-10 w-full h-48 dark:from-black from-white to-transparent bg-gradient-to-b" />
       <FadeIn 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">
-        <div className="flex items-center justify-center w-full ">
+        <div className="flex items-center justify-center w-full mb-8">
           <div className="absolute z-50 min-w-[614px] min-h-[614px]">
             <Image
               alt="Turbopack"
@@ -68,14 +68,13 @@ export function PackHero() {
           delay={0.2}
           className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6"
         >
-          <span
-            className={cn(
-              "font-bold font-wide text-[20px] lg:text-2xl tracking-[0.07em]",
-              gradients.turbopackHeaderText
-            )}
-          >
-            TURBOPACK
-          </span>
+          <Image
+            alt="Turbopack"
+            src="/images/docs/pack/pack-type-logo.svg"
+            width={200}
+            height={100}
+            className="w-[160px] md:w-[200px]"
+          />
           <HeroText h1>The Rust-based successor to Webpack</HeroText>
           <SectionSubtext hero>
             Turbo is an incremental, distributed bundler optimized for

docs/components/pages/repo-home/RepoHero.tsx

@@ -67,14 +67,13 @@ export function RepoHero() {
           delay={0.2}
           className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6"
         >
-          <h3
-            className={cn(
-              "font-bold font-wide text-[20px] lg:text-2xl tracking-[0.07em]",
-              gradients.turbopackHeaderText
-            )}
-          >
-            TURBOREPO
-          </h3>
+          <Image
+            alt="Turborepo"
+            src="/images/docs/repo/repo-type-logo.svg"
+            width={200}
+            height={100}
+            className="w-[160px] md:w-[200px]"
+          />
           <HeroText>
             The build system that
             <br />

docs/custom.css

@@ -6,20 +6,6 @@ code {
   filter: invert(1) brightness(1.8);
 }
 
-@font-face {
-  font-family: Breit;
-  font-weight: 700;
-  font-display: auto;
-  src: url(./public/fonts/TestSohneBreit-Fett.woff2) format("woff2");
-}
-
-@font-face {
-  font-family: Breit;
-  font-weight: 600;
-  font-display: auto;
-  src: url(./public/fonts/TestSohneBreit-Kraftig.woff2) format("woff2");
-}
-
 @font-face {
   font-family: "Space Grotesk";
   font-style: normal;

docs/tailwind.config.js

@@ -12,7 +12,6 @@ module.exports = {
       fontFamily: {
         sans: [`"Inter"`, "sans-serif"],
         "space-grotesk": ["Space Grotesk", "monospace"],
-        wide: ["Breit", "Inter", "sans-serif"],
         mono: [
           "Menlo",
           "Monaco",