Marco/my-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Testimonials, News, and Footer sections

Browse Source 
- 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>
This commit is contained in:
Marco
2026-06-30 12:02:48 +00:00
parent f5a2519701
commit d44db8165d
11 changed files with 416 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/News.tsx
+130
View File
@@ -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 (
<div className="border-b border-black flex items-center gap-2 py-1 w-fit">
<span className="font-medium text-sm text-black tracking-[-0.04em]">
Read more
</span>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="/arrow-diagonal.svg"
alt=""
className="size-[18px] -rotate-90 shrink-0"
/>
</div>
);
}
export function News() {
return (
<section className="bg-[#f3f3f3] px-4 md:px-8 py-[120px]">
{/* Mobile */}
<div className="md:hidden flex flex-col gap-10">
<h2 className="font-light text-black text-[clamp(32px,9vw,64px)] tracking-[-0.08em] uppercase leading-[0.86]">
Keep up with my latest
<br />
news &amp; achievements
</h2>
<div className="flex flex-col gap-12">
{articles.map((a) => (
<div key={a.id} className="flex flex-col gap-4">
<div className="relative w-full h-[260px] overflow-hidden">
<Image
src={a.image}
alt=""
fill
className="object-cover"
/>
</div>
<p className="text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ReadMore />
</div>
))}
</div>
</div>
{/* Desktop */}
<div className="hidden md:flex items-end justify-between gap-8">
{/* Rotated vertical heading */}
<div className="flex items-center justify-center shrink-0 w-[110px] h-[700px]">
<div className="-rotate-90 flex-none">
<div className="font-light text-black text-[64px] tracking-[-0.08em] uppercase whitespace-nowrap leading-[0.86]">
<p>Keep up with my latest</p>
<p>news &amp; achievements</p>
</div>
</div>
</div>
{/* 3 article cards separated by thin vertical lines */}
<div className="flex-1 flex items-start">
{/* Card 1 */}
<div className="flex-1 flex flex-col gap-4 h-[581px]">
<div className="relative flex-1 overflow-hidden">
<Image
src="/news-1.jpg"
alt=""
fill
className="object-cover"
/>
</div>
<p className="text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ReadMore />
</div>
{/* Divider */}
<div className="w-px self-stretch bg-[#1f1f1f] mx-8 shrink-0" />
{/* Card 2 — offset 120px down */}
<div className="flex-1 flex flex-col gap-4 pt-[120px]">
<div className="relative h-[469px] overflow-hidden">
<Image
src="/news-2.jpg"
alt=""
fill
className="object-cover"
/>
</div>
<p className="text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ReadMore />
</div>
{/* Divider */}
<div className="w-px self-stretch bg-[#1f1f1f] mx-8 shrink-0" />
{/* Card 3 */}
<div className="flex-1 flex flex-col gap-4 h-[581px]">
<div className="relative flex-1 overflow-hidden">
<Image
src="/news-3.jpg"
alt=""
fill
className="object-cover"
/>
</div>
<p className="text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ReadMore />
</div>
</div>
</div>
</section>
);
}