feat: template from chef

app/components/hero-section.tsx

@@ -0,0 +1,107 @@
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Github, Linkedin, Mail, MapPin, Phone } from "lucide-react";
+
+interface HeroSectionProps {
+	profile: {
+		name: string;
+		title: string;
+		bio: string;
+		email: string;
+		phone?: string;
+		location: string;
+		githubUrl?: string;
+		linkedinUrl?: string;
+	};
+}
+
+export function HeroSection({ profile }: HeroSectionProps) {
+	const scrollToSection = (sectionId: string) => {
+		const element = document.getElementById(sectionId);
+		if (element) {
+			element.scrollIntoView({ behavior: "smooth" });
+		}
+	};
+
+	return (
+		<section
+			id="about"
+			className="pt-16 min-h-screen flex items-center bg-gradient-to-br from-primary/5 to-secondary/5"
+		>
+			<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+				<div className="text-center">
+					<div className="mb-8">
+						<Avatar className="w-32 h-32 mx-auto mb-6">
+							<AvatarFallback className="text-4xl font-bold bg-gradient-to-br from-primary to-primary/80 text-primary-foreground">
+								{profile.name
+									.split(" ")
+									.map((n) => n[0])
+									.join("")}
+							</AvatarFallback>
+						</Avatar>
+						<h1 className="text-5xl md:text-6xl font-bold mb-4">
+							{profile.name}
+						</h1>
+						<h2 className="text-2xl md:text-3xl text-primary font-medium mb-6">
+							{profile.title}
+						</h2>
+						<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+							{profile.bio}
+						</p>
+					</div>
+
+					<div className="flex flex-wrap justify-center gap-4 mb-8">
+						{profile.githubUrl && (
+							<Button asChild>
+								<a
+									href={profile.githubUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									<Github className="mr-2 h-4 w-4" />
+									GitHub
+								</a>
+							</Button>
+						)}
+						{profile.linkedinUrl && (
+							<Button asChild variant="outline">
+								<a
+									href={profile.linkedinUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									<Linkedin className="mr-2 h-4 w-4" />
+									LinkedIn
+								</a>
+							</Button>
+						)}
+						<Button
+							onClick={() => scrollToSection("contact")}
+							variant="secondary"
+						>
+							<Mail className="mr-2 h-4 w-4" />
+							Get In Touch
+						</Button>
+					</div>
+
+					<div className="flex flex-wrap justify-center gap-6 text-muted-foreground">
+						<div className="flex items-center">
+							<MapPin className="mr-2 h-4 w-4" />
+							{profile.location}
+						</div>
+						<div className="flex items-center">
+							<Mail className="mr-2 h-4 w-4" />
+							{profile.email}
+						</div>
+						{profile.phone && (
+							<div className="flex items-center">
+								<Phone className="mr-2 h-4 w-4" />
+								{profile.phone}
+							</div>
+						)}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}