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