feat: template from chef

app/components/experience-section.tsx

@@ -0,0 +1,72 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+
+interface Experience {
+	_id: string;
+	company: string;
+	position: string;
+	duration: string;
+	description: string;
+	technologies: string[];
+	current: boolean;
+}
+
+interface ExperienceSectionProps {
+	experiences: Experience[];
+}
+
+export function ExperienceSection({ experiences }: ExperienceSectionProps) {
+	return (
+		<section id="experience" className="py-20">
+			<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+				<h2 className="text-4xl font-bold text-center mb-16">Experience</h2>
+				<div className="space-y-8">
+					{experiences.map((exp, index) => (
+						<div key={exp._id}>
+							<Card className="hover:shadow-lg transition-shadow">
+								<CardHeader>
+									<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+										<div>
+											<CardTitle className="text-xl">{exp.company}</CardTitle>
+											<CardDescription className="text-lg font-medium text-primary">
+												{exp.position}
+											</CardDescription>
+											<p className="text-sm text-muted-foreground">
+												{exp.duration}
+											</p>
+										</div>
+										{exp.current && (
+											<Badge variant="secondary" className="w-fit">
+												Current
+											</Badge>
+										)}
+									</div>
+								</CardHeader>
+								<CardContent>
+									<p className="text-muted-foreground mb-4 leading-relaxed">
+										{exp.description}
+									</p>
+									<div className="flex flex-wrap gap-2">
+										{exp.technologies.map((tech) => (
+											<Badge key={tech} variant="outline">
+												{tech}
+											</Badge>
+										))}
+									</div>
+								</CardContent>
+							</Card>
+							{index < experiences.length - 1 && <Separator className="my-8" />}
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}