49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { ProjectCard } from '@/components/ui/ProjectCard'
|
|
import type { Project } from '@/types'
|
|
|
|
interface ProjectsSectionProps {
|
|
projects: Project[]
|
|
}
|
|
|
|
export function ProjectsSection({ projects }: ProjectsSectionProps) {
|
|
return (
|
|
<section id="projects" className="py-32 relative">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-surface/20 to-transparent" />
|
|
|
|
<div className="relative z-10 max-w-6xl mx-auto px-6">
|
|
{/* Header */}
|
|
<div className="text-center mb-16">
|
|
<span className="text-accent font-mono text-sm tracking-widest uppercase">
|
|
Work
|
|
</span>
|
|
<h2 className="font-display font-bold text-4xl md:text-5xl text-foreground mt-3">
|
|
Featured Projects
|
|
</h2>
|
|
<p className="text-foreground-muted mt-4 max-w-xl mx-auto">
|
|
Production-grade systems I've built — from concept to deployment
|
|
</p>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{projects.map((project, index) => (
|
|
<ProjectCard key={project.id} project={project} index={index} />
|
|
))}
|
|
</div>
|
|
|
|
{/* View more */}
|
|
<div className="text-center mt-12">
|
|
<a
|
|
href="https://github.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 px-6 py-3 border border-border hover:border-accent/40 text-foreground-muted hover:text-foreground rounded-xl transition-all hover:-translate-y-0.5 duration-200"
|
|
>
|
|
View All on GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|