feat: template from chef

app/components/contact-section.tsx

@@ -0,0 +1,111 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Mail, Phone, MapPin, Github, Linkedin } from "lucide-react";
+
+interface ContactSectionProps {
+	profile: {
+		name: string;
+		email: string;
+		phone?: string;
+		location: string;
+		githubUrl?: string;
+		linkedinUrl?: string;
+	};
+}
+
+export function ContactSection({ profile }: ContactSectionProps) {
+	return (
+		<section id="contact" className="py-20 bg-muted/30">
+			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+				<h2 className="text-4xl font-bold text-center mb-16">Get In Touch</h2>
+				<Card className="max-w-2xl mx-auto">
+					<CardHeader className="text-center">
+						<CardTitle className="text-2xl">Let's Work Together</CardTitle>
+						<CardDescription className="text-lg">
+							I'm always interested in new opportunities and exciting projects.
+							Feel free to reach out if you'd like to collaborate!
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-6">
+						<div className="grid gap-4">
+							<div className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50">
+								<Mail className="h-5 w-5 text-primary" />
+								<div>
+									<p className="font-medium">Email</p>
+									<a
+										href={`mailto:${profile.email}`}
+										className="text-muted-foreground hover:text-primary transition-colors"
+									>
+										{profile.email}
+									</a>
+								</div>
+							</div>
+
+							{profile.phone && (
+								<div className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50">
+									<Phone className="h-5 w-5 text-primary" />
+									<div>
+										<p className="font-medium">Phone</p>
+										<a
+											href={`tel:${profile.phone}`}
+											className="text-muted-foreground hover:text-primary transition-colors"
+										>
+											{profile.phone}
+										</a>
+									</div>
+								</div>
+							)}
+
+							<div className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50">
+								<MapPin className="h-5 w-5 text-primary" />
+								<div>
+									<p className="font-medium">Location</p>
+									<p className="text-muted-foreground">{profile.location}</p>
+								</div>
+							</div>
+						</div>
+
+						<div className="flex justify-center space-x-4 pt-6">
+							{profile.githubUrl && (
+								<Button variant="outline" size="lg" asChild>
+									<a
+										href={profile.githubUrl}
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<Github className="mr-2 h-5 w-5" />
+										GitHub
+									</a>
+								</Button>
+							)}
+							{profile.linkedinUrl && (
+								<Button variant="outline" size="lg" asChild>
+									<a
+										href={profile.linkedinUrl}
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<Linkedin className="mr-2 h-5 w-5" />
+										LinkedIn
+									</a>
+								</Button>
+							)}
+							<Button size="lg" asChild>
+								<a href={`mailto:${profile.email}`}>
+									<Mail className="mr-2 h-5 w-5" />
+									Send Email
+								</a>
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</section>
+	);
+}