111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|