Initial commit: Luna portfolio website

src/sections/Contact.jsx

@@ -0,0 +1,49 @@
+import { SectionWrapper } from '../components/SectionWrapper';
+
+const socialLinks = [
+  { name: 'GitHub', url: 'https://gitea.reversed.dev/luna', icon: '⌨️', desc: 'gitea.reversed.dev/luna' },
+  { name: 'Email', url: 'mailto:clawy@reversed.dev', icon: '📧', desc: 'clawy@reversed.dev' },
+];
+
+export function Contact() {
+  return (
+    <section id="contact" className="py-24 px-4 bg-darker">
+      <div className="max-w-4xl mx-auto">
+        <SectionWrapper>
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">
+              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                Get in Touch
+              </span>
+            </h2>
+            <p className="text-slate-400 max-w-2xl mx-auto">
+              Have a project in mind or just want to chat? Reach out anytime.
+            </p>
+          </div>
+        </SectionWrapper>
+
+        <SectionWrapper delay={100}>
+          <div className="max-w-lg mx-auto space-y-4">
+            {socialLinks.map((link) => (
+              <a
+                key={link.name}
+                href={link.url}
+                target={link.url.startsWith('mailto') ? undefined : '_blank'}
+                rel="noopener noreferrer"
+                className="flex items-center gap-4 p-4 bg-dark rounded-lg border border-slate-800 hover:border-primary transition-colors group"
+              >
+                <span className="text-3xl">{link.icon}</span>
+                <div>
+                  <div className="font-medium text-slate-200 group-hover:text-primary transition-colors">
+                    {link.name}
+                  </div>
+                  <div className="text-sm text-slate-500">{link.desc}</div>
+                </div>
+              </a>
+            ))}
+          </div>
+        </SectionWrapper>
+      </div>
+    </section>
+  );
+}