add tagline and about sections

app/components/About.tsx

@@ -0,0 +1,55 @@
+import Image from "next/image";
+
+export function About() {
+  return (
+    <section className="bg-white px-4 md:px-8 py-20">
+      <div className="flex flex-col md:flex-row items-start justify-between gap-12">
+        {/* Left: section label */}
+        <span className="font-mono text-sm text-[#1f1f1f] uppercase leading-[1.1] shrink-0">
+          [ About ]
+        </span>
+
+        {/* Right: text + portrait */}
+        <div className="flex flex-col md:flex-row items-end gap-8 flex-1">
+          {/* Text block with corner brackets */}
+          <div className="flex-1 flex items-stretch gap-3">
+            {/* Left brackets */}
+            <div className="flex flex-col justify-between shrink-0 w-4">
+              <img src="/bracket-tl.svg" alt="" className="w-4 h-4" />
+              <img src="/bracket-bl.svg" alt="" className="w-4 h-4 -rotate-90" />
+            </div>
+
+            {/* Text */}
+            <p className="flex-1 text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3] py-3">
+              Placeholder paragraph one. This is where you introduce yourself
+              — your background, your passion for your craft, and what drives
+              you creatively. Two to three sentences work best here.{" "}
+              Placeholder paragraph two. Here you can describe your technical
+              approach, how you collaborate with clients, or what sets your
+              work apart from others in your field.
+            </p>
+
+            {/* Right brackets */}
+            <div className="flex flex-col justify-between shrink-0 w-4">
+              <img src="/bracket-tr.svg" alt="" className="w-4 h-4 rotate-90" />
+              <img src="/bracket-br.svg" alt="" className="w-4 h-4 rotate-180" />
+            </div>
+          </div>
+
+          {/* Portrait */}
+          <div className="flex flex-col items-start gap-6 shrink-0">
+            <span className="font-mono text-sm text-[#1f1f1f]">002</span>
+            <div className="relative w-full md:w-[436px] h-[400px] md:h-[614px] overflow-hidden">
+              <Image
+                src="/about-portrait.jpg"
+                alt="Portrait"
+                fill
+                className="object-cover object-center"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/Tagline.tsx

@@ -0,0 +1,53 @@
+export function Tagline() {
+  const textClass =
+    "font-light text-black uppercase leading-[0.84] tracking-[-0.08em] " +
+    "text-[clamp(40px,6.67vw,96px)]";
+
+  return (
+    <section className="bg-white px-4 md:px-8 py-[120px]">
+      {/* Top: label + divider */}
+      <div className="flex flex-col gap-3 items-end mb-6">
+        <span className="font-mono text-sm text-[#1f1f1f] uppercase leading-[1.1]">
+          [ 8+ years in industry ]
+        </span>
+        <hr className="w-full border-t border-[#1f1f1f]" />
+      </div>
+
+      {/* Staggered text block */}
+      <div className="flex flex-col gap-2">
+        {/* Line 1: "A CREATIVE DIRECTOR   /" + "001" */}
+        <div className="flex items-start gap-3">
+          <span className={textClass}>A creative director&nbsp;&nbsp;&nbsp;/</span>
+          <span className="font-mono text-sm text-[#1f1f1f] mt-1 shrink-0">001</span>
+        </div>
+
+        {/* Line 2: "PHOTOGRAPHER" — indented */}
+        <div className="md:pl-[214px]">
+          <span className={textClass}>Photographer</span>
+        </div>
+
+        {/* Line 3: "BORN & RAISED" — indented further */}
+        <div className="md:pl-[610px]">
+          <span className={textClass}>
+            Born{" "}
+            <em style={{ fontFamily: "var(--font-playfair)" }}>&amp;</em>{" "}
+            raised
+          </span>
+        </div>
+
+        {/* Line 4: "ON THE SOUTH SIDE" — no indent */}
+        <div>
+          <span className={textClass}>on the south side</span>
+        </div>
+
+        {/* Line 5: "OF CHICAGO." + "[ creative freelancer ]" label */}
+        <div className="flex items-start gap-4 md:pl-[606px]">
+          <span className={textClass}>of chicago.</span>
+          <span className="hidden md:block font-mono text-sm text-[#1f1f1f] shrink-0 translate-y-[26px]">
+            [ creative freelancer ]
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}

app/globals.css

@@ -10,6 +10,7 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-inter);
   --font-mono: var(--font-geist-mono);
+  --font-playfair: var(--font-playfair);
 }
 
 @media (prefers-color-scheme: dark) {

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Inter, Geist_Mono } from "next/font/google";
+import { Inter, Geist_Mono, Playfair_Display } from "next/font/google";
 import "./globals.css";
 
 const inter = Inter({
@@ -7,6 +7,12 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
+const playfair = Playfair_Display({
+  variable: "--font-playfair",
+  subsets: ["latin"],
+  style: ["italic"],
+});
+
 const geistMono = Geist_Mono({
   variable: "--font-geist-mono",
   subsets: ["latin"],
@@ -25,7 +31,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${inter.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${inter.variable} ${playfair.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>

app/page.tsx

@@ -1,9 +1,13 @@
 import { Hero } from "./components/Hero";
+import { Tagline } from "./components/Tagline";
+import { About } from "./components/About";
 
 export default function Home() {
   return (
     <main>
       <Hero />
+      <Tagline />
+      <About />
     </main>
   );
 }

public/bracket-bl.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16.5 16.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2" d="M16.5 0.5H0.5V16.5" stroke="var(--stroke-0, black)"/>
+</svg>

public/bracket-br.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16.5 16.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2" d="M16.5 0.5H0.5V16.5" stroke="var(--stroke-0, black)"/>
+</svg>

public/bracket-tl.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16.5 16.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 1" d="M16.5 0.5H0.5V16.5" stroke="var(--stroke-0, black)"/>
+</svg>

public/bracket-tr.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16.5 16.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 1" d="M16.5 0.5H0.5V16.5" stroke="var(--stroke-0, black)"/>
+</svg>