From d44db8165d9091820cc31e022d69cbcc4957bc00 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 30 Jun 2026 12:02:48 +0000 Subject: [PATCH] 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 --- app/components/Footer.tsx | 67 ++++++++++++++++ app/components/News.tsx | 130 ++++++++++++++++++++++++++++++ app/components/Testimonials.tsx | 137 ++++++++++++++++++++++++++++++++ app/page.tsx | 6 ++ public/logo-lukas.svg | 20 +++++ public/logo-marko.svg | 19 +++++ public/logo-sarah.svg | 29 +++++++ public/logo-sofia.svg | 8 ++ public/news-1.jpg | Bin 0 -> 1033500 bytes public/news-2.jpg | Bin 0 -> 1253676 bytes public/news-3.jpg | Bin 0 -> 1266816 bytes 11 files changed, 416 insertions(+) create mode 100644 app/components/Footer.tsx create mode 100644 app/components/News.tsx create mode 100644 app/components/Testimonials.tsx create mode 100644 public/logo-lukas.svg create mode 100644 public/logo-marko.svg create mode 100644 public/logo-sarah.svg create mode 100644 public/logo-sofia.svg create mode 100644 public/news-1.jpg create mode 100644 public/news-2.jpg create mode 100644 public/news-3.jpg diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx new file mode 100644 index 0000000..0229d2a --- /dev/null +++ b/app/components/Footer.tsx @@ -0,0 +1,67 @@ +export function Footer() { + return ( +
+ {/* Top bar: CTA | social (center) | social (right) */} +
+ {/* CTA */} +
+

+ Have a{" "} + project{" "} + in mind? +

+ +
+ + {/* Center social */} +
+

Facebook

+

Instagram

+
+ + {/* Right social */} +
+

x.com

+

Linkedin

+
+
+ + {/* Divider */} +
+ + {/* Bottom: big H.Studio + legal links */} +
+ {/* H.Studio overflowing text + "[ Coded By Claude ]" */} +
+ {/* "[ Coded By Claude ]" rotated vertical */} +
+
+ + [ Coded By Claude ] + +
+
+ + {/* Giant H.Studio — clipped by overflow-hidden */} +
+

+ H.Studio +

+
+
+ + {/* Legal links */} +
+ + licences + + + Privacy policy + +
+
+
+ ); +} diff --git a/app/components/News.tsx b/app/components/News.tsx new file mode 100644 index 0000000..d547db3 --- /dev/null +++ b/app/components/News.tsx @@ -0,0 +1,130 @@ +import Image from "next/image"; + +const articles = [ + { id: 1, image: "/news-1.jpg", offset: false }, + { id: 2, image: "/news-2.jpg", offset: true }, + { id: 3, image: "/news-3.jpg", offset: false }, +]; + +function ReadMore() { + return ( +
+ + Read more + + {/* eslint-disable-next-line @next/next/no-img-element */} + +
+ ); +} + +export function News() { + return ( +
+ {/* Mobile */} +
+

+ Keep up with my latest +
+ news & achievements +

+
+ {articles.map((a) => ( +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ +
+ ))} +
+
+ + {/* Desktop */} +
+ {/* Rotated vertical heading */} +
+
+
+

Keep up with my latest

+

news & achievements

+
+
+
+ + {/* 3 article cards separated by thin vertical lines */} +
+ {/* Card 1 */} +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ +
+ + {/* Divider */} +
+ + {/* Card 2 — offset 120px down */} +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ +
+ + {/* Divider */} +
+ + {/* Card 3 */} +
+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ +
+
+
+
+ ); +} diff --git a/app/components/Testimonials.tsx b/app/components/Testimonials.tsx new file mode 100644 index 0000000..445503e --- /dev/null +++ b/app/components/Testimonials.tsx @@ -0,0 +1,137 @@ +const testimonials = [ + { + id: "marko", + name: "Marko Stojković", + logo: "/logo-marko.svg", + logoW: 143, + logoH: 19, + text: "A brilliant creative partner who transformed our vision into a unique, high-impact brand identity. Their ability to craft everything from custom mascots to polished logos is truly impressive.", + rotation: "-6.85deg", + left: 102, + top: 142, + }, + { + id: "lukas", + name: "Lukas Weber", + logo: "/logo-lukas.svg", + logoW: 138, + logoH: 19, + text: "Professional, precise, and incredibly fast at handling complex product visualizations and templates.", + rotation: "2.9deg", + left: 676, + top: 272, + }, + { + id: "sarah", + name: "Sarah Jenkins", + logo: "/logo-sarah.svg", + logoW: 109, + logoH: 31, + text: "A strategic partner who balances stunning aesthetics with high-performance UX for complex platforms. They don't just make things look good; they solve business problems through visual clarity.", + rotation: "2.23deg", + left: 305, + top: 553, + }, + { + id: "sofia", + name: "Sofia Martínez", + logo: "/logo-sofia.svg", + logoW: 81, + logoH: 36, + text: "An incredibly versatile designer who delivers consistent quality across a wide range of styles and formats.", + rotation: "-4.15deg", + left: 987, + top: 546, + }, +]; + +function Card({ + logo, + logoW, + logoH, + name, + text, +}: (typeof testimonials)[number]) { + return ( +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {name} +

+ {text} +

+

+ {name} +

+
+ ); +} + +export function Testimonials() { + return ( +
+ {/* ── Mobile: simple stacked column ── */} +
+

+ Testimonials +

+ {testimonials.map((t) => ( +
+ {/* on mobile, reset width to full */} +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {t.name} +

+ {t.text} +

+

+ {t.name} +

+
+
+ ))} +
+ + {/* ── Desktop: scattered absolute cards over massive background text ── */} +
+ {/* Background "Testimonials" — in flow so it drives section height, + centered vertically with absolute inset trick */} +
+

+ Testimonials +

+
+ + {/* Cards — z-10 so they sit above the background text */} + {testimonials.map((t) => ( +
+ +
+ ))} +
+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index 7f5597f..0ea4765 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,6 +4,9 @@ import { About } from "./components/About"; import { FullbleedImage } from "./components/FullbleedImage"; import { Services } from "./components/Services"; import { Portfolio } from "./components/Portfolio"; +import { Testimonials } from "./components/Testimonials"; +import { News } from "./components/News"; +import { Footer } from "./components/Footer"; export default function Home() { return ( @@ -14,6 +17,9 @@ export default function Home() { + + +