Marco
83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import Image from "next/image";
|
|
|
|
const services = [
|
|
{
|
|
number: "1",
|
|
title: "Brand Discovery",
|
|
description:
|
|
"Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
|
|
image: "/service-1.jpg",
|
|
},
|
|
{
|
|
number: "2",
|
|
title: "Web design & Dev",
|
|
description:
|
|
"Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
|
|
image: "/service-2.jpg",
|
|
},
|
|
{
|
|
number: "3",
|
|
title: "Marketing",
|
|
description:
|
|
"Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
|
|
image: "/service-3.jpg",
|
|
},
|
|
{
|
|
number: "4",
|
|
title: "Photography",
|
|
description:
|
|
"Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
|
|
image: "/service-4.jpg",
|
|
},
|
|
];
|
|
|
|
export function Services() {
|
|
return (
|
|
<section className="bg-black px-4 md:px-8 py-20 flex flex-col gap-12">
|
|
{/* Label */}
|
|
<span className="font-mono text-sm text-white uppercase leading-[1.1]">
|
|
[ services ]
|
|
</span>
|
|
|
|
{/* "[4] DELIVERABLES" heading */}
|
|
<div className="flex items-center justify-between font-light text-white uppercase tracking-[-0.08em] text-[clamp(48px,6.67vw,96px)] leading-normal">
|
|
<span>[4]</span>
|
|
<span>Deliverables</span>
|
|
</div>
|
|
|
|
{/* Service list */}
|
|
<div className="flex flex-col gap-12">
|
|
{services.map((service) => (
|
|
<div key={service.number} className="flex flex-col gap-[9px]">
|
|
{/* Number + divider */}
|
|
<span className="font-mono text-sm text-white uppercase leading-[1.1]">
|
|
[ {service.number} ]
|
|
</span>
|
|
<hr className="border-t border-white/30" />
|
|
|
|
{/* Title + description + image */}
|
|
<div className="flex flex-wrap items-start justify-between gap-6 pt-1">
|
|
<p className="font-bold italic text-white uppercase text-[36px] tracking-[-0.04em] leading-[1.1] shrink-0">
|
|
{service.title}
|
|
</p>
|
|
<div className="flex flex-wrap gap-6 items-start">
|
|
<p className="text-white text-sm tracking-[-0.035em] leading-[1.3] max-w-[393px]">
|
|
{service.description}
|
|
</p>
|
|
<div className="relative size-[151px] shrink-0 overflow-hidden">
|
|
<Image
|
|
src={service.image}
|
|
alt={service.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|