add services section

app/components/Services.tsx

@@ -0,0 +1,82 @@
+import Image from "next/image";
+
+const services = [
+  {
+    number: "1",
+    title: "Brand Discovery",
+    description:
+      "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
+    image: "/service-1.jpg",
+  },
+  {
+    number: "2",
+    title: "Web design & Dev",
+    description:
+      "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
+    image: "/service-2.jpg",
+  },
+  {
+    number: "3",
+    title: "Marketing",
+    description:
+      "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
+    image: "/service-3.jpg",
+  },
+  {
+    number: "4",
+    title: "Photography",
+    description:
+      "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
+    image: "/service-4.jpg",
+  },
+];
+
+export function Services() {
+  return (
+    <section className="bg-black px-4 md:px-8 py-20 flex flex-col gap-12">
+      {/* Label */}
+      <span className="font-mono text-sm text-white uppercase leading-[1.1]">
+        [ services ]
+      </span>
+
+      {/* "[4] DELIVERABLES" heading */}
+      <div className="flex items-center justify-between font-light text-white uppercase tracking-[-0.08em] text-[clamp(48px,6.67vw,96px)] leading-normal">
+        <span>[4]</span>
+        <span>Deliverables</span>
+      </div>
+
+      {/* Service list */}
+      <div className="flex flex-col gap-12">
+        {services.map((service) => (
+          <div key={service.number} className="flex flex-col gap-[9px]">
+            {/* Number + divider */}
+            <span className="font-mono text-sm text-white uppercase leading-[1.1]">
+              [ {service.number} ]
+            </span>
+            <hr className="border-t border-white/30" />
+
+            {/* Title + description + image */}
+            <div className="flex flex-wrap items-start justify-between gap-6 pt-1">
+              <p className="font-bold italic text-white uppercase text-[36px] tracking-[-0.04em] leading-[1.1] shrink-0">
+                {service.title}
+              </p>
+              <div className="flex flex-wrap gap-6 items-start">
+                <p className="text-white text-sm tracking-[-0.035em] leading-[1.3] max-w-[393px]">
+                  {service.description}
+                </p>
+                <div className="relative size-[151px] shrink-0 overflow-hidden">
+                  <Image
+                    src={service.image}
+                    alt={service.title}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

app/page.tsx

@@ -2,6 +2,7 @@ import { Hero } from "./components/Hero";
 import { Tagline } from "./components/Tagline";
 import { About } from "./components/About";
 import { FullbleedImage } from "./components/FullbleedImage";
+import { Services } from "./components/Services";
 
 export default function Home() {
   return (
@@ -10,6 +11,7 @@ export default function Home() {
       <Tagline />
       <About />
       <FullbleedImage />
+      <Services />
     </main>
   );
 }