66 lines
3.0 KiB
TypeScript
66 lines
3.0 KiB
TypeScript
import { ArrowDown, Terminal } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="min-h-screen flex flex-col justify-center pt-20 pb-16">
|
|
<div className="max-w-4xl mx-auto px-6 w-full">
|
|
<div className="space-y-8">
|
|
{/* Terminal Style Intro */}
|
|
<div className="font-mono text-sm text-muted-foreground flex items-center gap-2">
|
|
<Terminal size={14} className="text-primary" />
|
|
<span className="text-primary">~</span>
|
|
<span>whoami</span>
|
|
</div>
|
|
|
|
{/* Name */}
|
|
<h1 className="text-4xl md:text-6xl font-bold text-foreground tracking-tight text-balance">atticl</h1>
|
|
|
|
{/* Tagline */}
|
|
<p className="text-xl md:text-2xl text-muted-foreground font-light max-w-2xl text-pretty">
|
|
Backend Developer. Co-Founder.
|
|
<br />
|
|
<span className="text-foreground">I build systems that scale.</span>
|
|
</p>
|
|
|
|
{/* Subtitles */}
|
|
<div className="font-mono text-sm text-muted-foreground space-y-1">
|
|
<p>
|
|
<span className="text-primary">→</span> APIs, databases, architecture
|
|
</p>
|
|
<p>
|
|
<span className="text-primary">→</span> Performance & security at scale
|
|
</p>
|
|
<p>
|
|
<span className="text-primary">→</span> Co-Founder @{" "}
|
|
<Link href="https://crowware.com" target="_blank" className="text-primary hover:underline">
|
|
crowware.com
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="flex flex-wrap gap-4 pt-4">
|
|
<Link
|
|
href="#projects"
|
|
className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground font-medium rounded-md hover:bg-primary/90 transition-colors"
|
|
>
|
|
View Projects
|
|
</Link>
|
|
<Link
|
|
href="#contact"
|
|
className="inline-flex items-center gap-2 px-5 py2.5 border border-border text-foreground font-medium rounded-md hover:bg-secondary transition-colors"
|
|
>
|
|
Get in Touch
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<div className=" mt-20 flex justify-center">
|
|
<ArrowDown size={20} className="text-muted-foreground animate-bounce" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |