feat: hero section

src/app/globals.css

@@ -10,7 +10,7 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 0 89% 26%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
@@ -38,7 +38,7 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
+    --primary: 0 89% 26%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
@@ -73,4 +73,8 @@
     /** Configure Satoshi's alternate "t" to better match TT Norms. */
     font-feature-settings: "ss03" on;
   }
+
+  :root {
+    --brand: 181 69% 14%;
+  }
 }

src/app/page.tsx

@@ -1,17 +1,40 @@
+import Image from "next/image";
 import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/ui/logo";
 
 export default function Home() {
   return (
-    <main className="flex flex-col items-center p-24">
-      <div className="flex flex-col items-center gap-8">
-        <h1 className="font-bold text-4xl">Manual</h1>
-        <h2 className="font-medium text-2xl">Be good to yourself</h2>
-        <p className="mt-4">
-          We’re working around the clock to bring you a holistic approach to
-          your wellness. From top to bottom, inside and out.
-        </p>
-        <Button className="mt-4">Take the quiz</Button>
+    <main>
+      <div className="flex pt-8 bg-brand/25">
+        <div className="mx-auto max-w-2xl">
+          <div>
+            <span className="sr-only">Manual</span>
+            <Logo />
+          </div>
+          <div className="mt-28">
+            <h2 className="font-medium tracking-tight text-8xl text-brand">
+              Be good
+              <br /> to yourself
+            </h2>
+            <p className="mt-5 text-lg text-brand">
+              We’re working around the clock to bring you a holistic approach to
+              your wellness. From top to bottom, inside and out.
+            </p>
+            <Button size="lg" className="mt-9">
+              Take the quiz
+            </Button>
+          </div>
+        </div>
+        <Image
+          src="/images/hero-bg.png"
+          alt="Hero Logo"
+          className="flex-none mt-8 mr-8"
+          width={596}
+          height={697}
+          priority
+        />
       </div>
+
       <div className="flex flex-col items-center mt-8">
         <h3 className="font-medium text-xl">What we can help with</h3>
         <h4>Hair loss</h4>

src/components/ui/button.tsx

@@ -5,24 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap text-sm uppercase tracking-widest font-bold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
         icon: "h-10 w-10",
       },
     },

src/components/ui/logo.tsx

@@ -0,0 +1,18 @@
+type LogoProps = {
+  size?: number;
+  color?: string;
+};
+
+// TODO: Import the brand colour from the tailwind theme
+export function Logo({ size = 40, color = "#0B3B3C" }: LogoProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <path
+        fill={color}
+        fillRule="evenodd"
+        d="M10.7 37.038c-.678 0-1.102-.514-1.102-1.356 0-3.976 7.89-13.009 15.761-20.665-1.33 8.599-10.124 22.021-14.66 22.021ZM38.944 1.503c-1.083.026-3.305.11-5.254.138-.686.01-.96.318-.872.76.104.521.447.907.964.92.665.018 1.556-.093 2.699-.149-2.598 1.999-5.74 4.625-8.983 7.548-.38-2.94-1.744-5.292-4.426-5.292-3.898 0-7.796 5.932-9.491 9.237-.17-2.711-1.356-5.254-3.898-5.254C4.397 9.411 0 21.44 0 23.24c0 .615.704 1.087 1.127 1.087.509 0 .674-.254.844-.847 2.203-7.203 5.508-12.204 7.712-12.204 1.101 0 1.949 1.272 1.949 4.238 0 2.182-.372 3.507-.372 4.024 0 .808.71 1.23 1.134 1.23.509 0 .678-.254.933-.847 2.542-6.272 6.694-12.543 9.66-12.543 1.461 0 2.455 1.866 2.537 5.149C16.63 20.776 7.67 30.718 7.67 35.609c0 2.035 1.123 3.209 2.944 3.209 6.538 0 16.77-16.25 16.993-25.952 3.638-3.423 7.107-6.413 9.604-8.315-.384.954-.772 1.881-.969 2.574-.144.506-.056 1.063.566 1.306.394.153.745-.07.9-.51.938-2.676 1.421-3.774 1.995-5.306.375-1.002.335-1.138-.76-1.112Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

tailwind.config.ts

@@ -53,6 +53,10 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        brand: {
+          DEFAULT: "hsl(var(--brand))",
+          foreground: "hsl(var(--brand))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -82,4 +86,3 @@ const config = {
 } satisfies Config;
 
 export default config;
-