project init

frontend/components/contact.tsx

@@ -0,0 +1,80 @@
+import { Mail, Github, Twitter, Linkedin } from "lucide-react"
+import Link from "next/link"
+
+const socialLinks = [
+  { icon: Github, label: "GitHub", href: "https://github.com/JulianRadix" },
+  { icon: Twitter, label: "Twitter", href: "https://cdn.prod.website-files.com/65ba70a5bb6f912baf0094a3/692588c50754ada9941bfd11_glenncatteeuw.com_404(1440).webp" },
+  { icon: Linkedin, label: "LinkedIn", href: "https://linkedin.com/in/JulianRadix" },
+]
+
+export function Contact() {
+  return (
+    <section id="contact" className="py-24 border-t border-border">
+      <div className="max-w-4xl mx-auto px-6">
+        <div className="grid md:grid-cols-[200px_1fr] gap-8 md:gap-12">
+          {/* Section label */}
+          <div>
+            <h2 className="font-mono text-sm text-muted-foreground uppercase tracking-wider">Contact</h2>
+            <div className="mt-2 w-12 h-px bg-primary" />
+          </div>
+
+          {/* Content */}
+          <div className="space-y-8">
+            <div className="space-y-4">
+              <p className="text-lg text-foreground">
+                Want to discuss a project, ask a technical question, or just say hello?
+              </p>
+              <p className="text-muted-foreground">
+                I'm always open to interesting conversations about backend systems, infrastructure, or building
+                developer tools.
+              </p>
+            </div>
+
+            {/* Email */}
+            <div className="space-y-3">
+              <h3 className="font-mono text-xs text-muted-foreground uppercase tracking-wider">Email</h3>
+              <div className="flex items-center gap-3">
+                <Mail size={16} className="text-primary" />
+                <a
+                  href="mailto:hello@atticl.com"
+                  className="font-mono text-foreground hover:text-primary transition-colors"
+                >
+                  hello@atticl.com
+                </a>
+              </div>
+            </div>
+
+            {/* Social links */}
+            <div className="space-y-3">
+              <h3 className="font-mono text-xs text-muted-foreground uppercase tracking-wider">Elsewhere</h3>
+              <div className="flex flex-wrap gap-4">
+                {socialLinks.map((link) => (
+                  <Link
+                    key={link.label}
+                    href={link.href}
+                    target="_blank"
+                    className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <link.icon size={18} />
+                    <span className="text-sm">{link.label}</span>
+                  </Link>
+                ))}
+              </div>
+            </div>
+
+            {/* Terminal-style response time */}
+            <div className="bg-card border border-border rounded-lg p-4 font-mono text-sm">
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <span className="text-primary">$</span>
+                <span>response_time</span>
+              </div>
+              <div className="mt-2 text-muted-foreground">
+                <span className="text-terminal">{">"} Usually within 24-48 hours</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}