95 lines
4.1 KiB
TypeScript
95 lines
4.1 KiB
TypeScript
const CARDS = [
|
|
{
|
|
title: 'Clean REST APIs',
|
|
detail: 'Spring Boot, OpenAPI, tested endpoints',
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
|
|
<path d="M8 9l3 3-3 3M13 15h3" stroke="#22d3ee" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<rect x="3" y="3" width="18" height="18" rx="3" stroke="#22d3ee" strokeWidth="2"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'Docker-Ready Deployments',
|
|
detail: 'Containerized services, Docker Compose',
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
|
|
<rect x="3" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
|
|
<rect x="6.5" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
|
|
<rect x="10" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
|
|
<rect x="10" y="6" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
|
|
<rect x="13.5" y="9" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
|
|
<rect x="6.5" y="6" width="3" height="2.5" rx=".5" fill="#22d3ee"/>
|
|
<path d="M21 11c-.5-1-2-1.25-2.75-1.25-.15-1.25-1-2.25-2-2.25h-.5c.25.5.25 1 .25 1.5H16V11h-3V9.5h-.5V8H9v1H8.5V7H6v2h-.5C4.5 9 4 9.5 4 10.5c0 2.5 1.75 4.5 4.25 4.5h9c2 0 3.75-1.25 4.25-3 .75 0 1.25 0 1.5-1z" fill="#22d3ee"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'CI/CD From Day One',
|
|
detail: 'GitLab pipelines, automated builds and deploys',
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
|
|
<circle cx="12" cy="12" r="2" fill="#22d3ee"/>
|
|
<circle cx="5" cy="7" r="2" fill="#22d3ee"/>
|
|
<circle cx="19" cy="7" r="2" fill="#22d3ee"/>
|
|
<circle cx="5" cy="17" r="2" fill="#22d3ee"/>
|
|
<circle cx="19" cy="17" r="2" fill="#22d3ee"/>
|
|
<path d="M7 7h10M7 17h10M12 10v4" stroke="#22d3ee" strokeWidth="1.5" strokeLinecap="round"/>
|
|
<path d="M12 10L5 7M12 10L19 7M12 14L5 17M12 14L19 17" stroke="#22d3ee" strokeWidth="1.5" strokeLinecap="round"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'Production Infrastructure',
|
|
detail: 'VPS, Nginx, SSL, monitoring',
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
|
|
<rect x="3" y="4" width="18" height="5" rx="1.5" stroke="#22d3ee" strokeWidth="2"/>
|
|
<rect x="3" y="11" width="18" height="5" rx="1.5" stroke="#22d3ee" strokeWidth="2"/>
|
|
<circle cx="7" cy="6.5" r="1" fill="#22d3ee"/>
|
|
<circle cx="7" cy="13.5" r="1" fill="#22d3ee"/>
|
|
<path d="M9 19c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="#22d3ee" strokeWidth="2" strokeLinecap="round"/>
|
|
<circle cx="12" cy="21" r="1" fill="#22d3ee"/>
|
|
</svg>
|
|
),
|
|
},
|
|
]
|
|
|
|
export function DeliverSection() {
|
|
return (
|
|
<section id="deliver" className="py-24 px-6">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="mb-14">
|
|
<p className="font-mono text-xs text-accent tracking-widest mb-3 uppercase">
|
|
Deliverables
|
|
</p>
|
|
<h2 className="font-heading font-bold text-4xl md:text-5xl text-white tracking-tight">
|
|
What I Deliver
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{CARDS.map(({ title, detail, icon }) => (
|
|
<div
|
|
key={title}
|
|
className="flex flex-col gap-4 p-6 bg-zinc-900 border border-zinc-800 rounded-lg hover:border-zinc-600 hover:bg-zinc-800/70 transition-all duration-200 group"
|
|
>
|
|
<div className="w-10 h-10 flex items-center justify-center rounded-md bg-zinc-800 group-hover:bg-zinc-700 transition-colors duration-200">
|
|
{icon}
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<span className="font-heading font-semibold text-white text-sm leading-snug">
|
|
{title}
|
|
</span>
|
|
<span className="font-mono text-xs text-zinc-500 leading-relaxed">
|
|
{detail}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|