123 lines
3.8 KiB
TypeScript
123 lines
3.8 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">
|
|
<a
|
|
href={`mailto:${profile.email}`}
|
|
className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors ring-0 hover:ring-2 hover:ring-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/60"
|
|
style={{ textDecoration: "none" }}
|
|
>
|
|
<Mail className="h-5 w-5 text-primary" />
|
|
<div>
|
|
<p className="font-medium">Email</p>
|
|
<span className="text-muted-foreground hover:text-primary transition-colors">
|
|
{profile.email}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
{profile.phone && (
|
|
<a
|
|
href={`https://wa.me/${profile.phone.replace(/\s+/g, "")}`}
|
|
className="flex items-center space-x-3 p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors ring-0 hover:ring-2 hover:ring-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/60"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{ textDecoration: "none" }}
|
|
>
|
|
<Phone className="h-5 w-5 text-primary" />
|
|
<div>
|
|
<p className="font-medium">Phone</p>
|
|
<span className="text-muted-foreground hover:text-primary transition-colors">
|
|
{profile.phone}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
)}
|
|
|
|
<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 && profile.githubUrl.length > 0 && (
|
|
<>
|
|
<Button asChild>
|
|
<a
|
|
href={profile.githubUrl[0]}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Github className="mr-2 h-4 w-4" />
|
|
GitHub (Main)
|
|
</a>
|
|
</Button>
|
|
{profile.githubUrl[1] && (
|
|
<Button asChild variant="outline">
|
|
<a
|
|
href={profile.githubUrl[1]}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Github className="mr-2 h-4 w-4" />
|
|
GitHub (Alt)
|
|
</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>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|