Add Testimonials, News, and Footer sections

- Testimonials: scattered absolute-positioned cards with rotations over a giant background "Testimonials" text (desktop), stacked on mobile - News: bg-[#f3f3f3], rotated vertical heading, 3 article cards with vertical dividers, middle card offset 120px down - Footer: black bg, CTA + socials, hr, giant clipped H.Studio wordmark, "[ Coded By Claude ]" rotated label, legal links Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-30 12:02:48 +00:00
parent f5a2519701
commit d44db8165d
11 changed files with 416 additions and 0 deletions
@@ -0,0 +1,67 @@
+export function Footer() {
+  return (
+    <footer className="bg-black px-4 md:px-8 pt-12 flex flex-col gap-[120px]">
+      {/* Top bar: CTA | social (center) | social (right) */}
+      <div className="flex flex-col md:flex-row items-start md:items-start justify-between gap-8">
+        {/* CTA */}
+        <div className="flex flex-col gap-3">
+          <p className="font-light italic text-white text-2xl tracking-[-0.04em] uppercase leading-[1.1]">
+            Have a{" "}
+            <strong className="font-black not-italic">project</strong>{" "}
+            in mind?
+          </p>
+          <button className="self-start border border-white text-white text-sm font-medium tracking-[-0.04em] px-4 py-3 rounded-3xl">
+            Let&apos;s talk
+          </button>
+        </div>
+
+        {/* Center social */}
+        <div className="text-white text-[18px] tracking-[-0.04em] uppercase leading-[1.1] text-center">
+          <p>Facebook</p>
+          <p>Instagram</p>
+        </div>
+
+        {/* Right social */}
+        <div className="text-white text-[18px] tracking-[-0.04em] uppercase leading-[1.1] text-right">
+          <p>x.com</p>
+          <p>Linkedin</p>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <hr className="border-t border-white/30 -mt-[96px]" />
+
+      {/* Bottom: big H.Studio + legal links */}
+      <div className="flex items-end justify-between pb-8">
+        {/* H.Studio overflowing text + "[ Coded By Claude ]" */}
+        <div className="relative overflow-hidden h-[219px] flex-1 max-w-[1093px]">
+          {/* "[ Coded By Claude ]" rotated vertical */}
+          <div className="absolute left-0 top-1/2 -translate-y-1/2 flex items-center justify-center w-4 h-[160px]">
+            <div className="-rotate-90 flex-none">
+              <span className="font-mono text-white text-sm uppercase whitespace-nowrap">
+                [ Coded By Claude ]
+              </span>
+            </div>
+          </div>
+
+          {/* Giant H.Studio — clipped by overflow-hidden */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <p className="font-semibold text-white capitalize whitespace-nowrap leading-[0.8] tracking-[-0.06em] text-[clamp(120px,20vw,290px)]">
+              H.Studio
+            </p>
+          </div>
+        </div>
+
+        {/* Legal links */}
+        <div className="flex gap-8 pb-8 shrink-0">
+          <a href="#" className="text-white text-xs tracking-[-0.04em] uppercase underline">
+            licences
+          </a>
+          <a href="#" className="text-white text-xs tracking-[-0.04em] uppercase underline">
+            Privacy policy
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}