project init

frontend/components/hero.tsx

@@ -0,0 +1,66 @@
+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>
+    )
+}