add tagline and about sections

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>
+  );
+}