98 lines
4.2 KiB
TypeScript
98 lines
4.2 KiB
TypeScript
import { ArrowRight, Github, Linkedin, Youtube } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
|
|
{/* Background Effects */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-background via-background to-card" />
|
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
|
|
|
|
<div className="container mx-auto px-6 relative z-10">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
{/* Status Badge */}
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-8 animate-fade-in">
|
|
<span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
|
|
<span className="text-sm text-muted-foreground">
|
|
Available for new projects
|
|
</span>
|
|
</div>
|
|
|
|
{/* Main Heading */}
|
|
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 animate-fade-in-up">
|
|
<span className="text-foreground">Building</span>{" "}
|
|
<span className="text-gradient-gold">exceptional</span>
|
|
<br />
|
|
<span className="text-foreground">digital experiences</span>
|
|
</h1>
|
|
|
|
{/* Subheading */}
|
|
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 animate-fade-in-delay-1">
|
|
I'm{" "}
|
|
<span className="text-foreground font-medium">Klesti Selimaj</span>,
|
|
a 16-year-old software engineer with 6+ years of experience.
|
|
Passionate about low-level systems, modern web apps, and crafting
|
|
tools that make a difference.
|
|
</p>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12 animate-fade-in-delay-2">
|
|
<Link
|
|
href="/pricing"
|
|
className="group flex items-center gap-2 bg-accent text-accent-foreground px-8 py-4 rounded-xl font-medium hover:bg-accent/90 transition-all hover:gap-3"
|
|
>
|
|
Work with me
|
|
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
|
</Link>
|
|
<a
|
|
href="https://github.com/selimaj-dev"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 bg-secondary text-secondary-foreground px-8 py-4 rounded-xl font-medium hover:bg-secondary/80 transition-colors"
|
|
>
|
|
<Github className="w-4 h-4" />
|
|
View GitHub
|
|
</a>
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<div className="flex items-center justify-center gap-6 animate-fade-in-delay-3">
|
|
<a
|
|
href="https://github.com/selimaj-dev"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted-foreground hover:text-accent transition-colors"
|
|
>
|
|
<Github className="w-5 h-5" />
|
|
</a>
|
|
<a
|
|
href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted-foreground hover:text-accent transition-colors"
|
|
>
|
|
<Linkedin className="w-5 h-5" />
|
|
</a>
|
|
<a
|
|
href="https://www.youtube.com/@0xkleo"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted-foreground hover:text-accent transition-colors"
|
|
>
|
|
<Youtube className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
|
<div className="w-6 h-10 border-2 border-muted-foreground/30 rounded-full flex items-start justify-center p-2">
|
|
<div className="w-1 h-2 bg-accent rounded-full animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|