Marco
56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
import Image from "next/image";
|
|
|
|
export function About() {
|
|
return (
|
|
<section className="bg-white px-4 md:px-8 py-20">
|
|
<div className="flex flex-col md:flex-row items-start justify-between gap-12">
|
|
{/* Left: section label */}
|
|
<span className="font-mono text-sm text-[#1f1f1f] uppercase leading-[1.1] shrink-0">
|
|
[ About ]
|
|
</span>
|
|
|
|
{/* Right: text + portrait */}
|
|
<div className="flex flex-col md:flex-row items-end gap-8 flex-1">
|
|
{/* Text block with corner brackets */}
|
|
<div className="flex-1 flex items-stretch gap-3">
|
|
{/* Left brackets */}
|
|
<div className="flex flex-col justify-between shrink-0 w-4">
|
|
<img src="/bracket-tl.svg" alt="" className="w-4 h-4" />
|
|
<img src="/bracket-bl.svg" alt="" className="w-4 h-4 -rotate-90" />
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<p className="flex-1 text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3] py-3">
|
|
Placeholder paragraph one. This is where you introduce yourself
|
|
— your background, your passion for your craft, and what drives
|
|
you creatively. Two to three sentences work best here.{" "}
|
|
Placeholder paragraph two. Here you can describe your technical
|
|
approach, how you collaborate with clients, or what sets your
|
|
work apart from others in your field.
|
|
</p>
|
|
|
|
{/* Right brackets */}
|
|
<div className="flex flex-col justify-between shrink-0 w-4">
|
|
<img src="/bracket-tr.svg" alt="" className="w-4 h-4 rotate-90" />
|
|
<img src="/bracket-br.svg" alt="" className="w-4 h-4 rotate-180" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Portrait */}
|
|
<div className="flex flex-col items-start gap-6 shrink-0">
|
|
<span className="font-mono text-sm text-[#1f1f1f]">002</span>
|
|
<div className="relative w-full md:w-[436px] h-[400px] md:h-[614px] overflow-hidden">
|
|
<Image
|
|
src="/about-portrait.jpg"
|
|
alt="Portrait"
|
|
fill
|
|
className="object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|