Update navigation links and global styles for improved branding and user engagement. Changed 'Contact' link to 'Let's Talk' and updated accent color in CSS for a more vibrant design.

src/components/Navigation.astro

@@ -9,11 +9,11 @@
         <a href="/blog"
             class="text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-colors">02.
             Blog</a>
-    </div>
+      </div>
 
-    <a href="mailto:nicholai@nicholai.work"
+    <a href="/contact"
         class="border border-slate-600 px-6 py-3 text-xs font-bold uppercase tracking-widest hover:border-brand-accent hover:bg-brand-accent/10 transition-all cursor-none-target">
-        Contact
+        Let's Talk
     </a>
 </nav>
 

src/pages/contact.astro

@@ -0,0 +1,122 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+---
+
+<BaseLayout title={`Contact | ${SITE_TITLE}`} description="Get in touch for collaboration or inquiries.">
+	<section class="container mx-auto px-6 lg:px-12">
+		<div class="mb-16">
+			<h1 class="text-6xl md:text-8xl font-bold uppercase text-white mb-4 tracking-tighter">
+				Let's <span class="text-transparent bg-clip-text bg-gradient-to-tr from-brand-accent to-white">Talk</span>
+			</h1>
+			<p class="text-slate-400 font-mono">/// GET IN TOUCH</p>
+		</div>
+
+		<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24">
+			<!-- Contact Form -->
+			<div class="lg:col-span-8">
+				<form class="space-y-6" action="#" method="POST">
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+						<div class="space-y-2">
+							<label for="name" class="text-xs font-bold uppercase tracking-widest text-slate-500">Name</label>
+							<input
+								type="text"
+								id="name"
+								name="name"
+								placeholder="Your Name"
+								class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600"
+								required
+							/>
+						</div>
+						<div class="space-y-2">
+							<label for="email" class="text-xs font-bold uppercase tracking-widest text-slate-500">Email</label>
+							<input
+								type="email"
+								id="email"
+								name="email"
+								placeholder="name@example.com"
+								class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600"
+								required
+							/>
+						</div>
+					</div>
+
+					<div class="space-y-2">
+						<label for="subject" class="text-xs font-bold uppercase tracking-widest text-slate-500">Subject</label>
+						<select
+							id="subject"
+							name="subject"
+							class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors appearance-none"
+						>
+							<option value="general" class="bg-brand-dark">General Inquiry</option>
+							<option value="project" class="bg-brand-dark">Project Collaboration</option>
+							<option value="freelance" class="bg-brand-dark">Freelance Availability</option>
+							<option value="other" class="bg-brand-dark">Other</option>
+						</select>
+					</div>
+
+					<div class="space-y-2">
+						<label for="message" class="text-xs font-bold uppercase tracking-widest text-slate-500">Message</label>
+						<textarea
+							id="message"
+							name="message"
+							rows="6"
+							placeholder="Tell me about your project..."
+							class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600 resize-none"
+							required
+						></textarea>
+					</div>
+
+					<div class="pt-4">
+						<button type="submit" class="btn-primary group relative overflow-hidden">
+							<span class="relative z-10">Send Message</span>
+							<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity"></div>
+						</button>
+					</div>
+				</form>
+			</div>
+
+			<!-- Sidebar Info -->
+			<div class="lg:col-span-4 space-y-12">
+				<div>
+					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Contact Info</h3>
+					<ul class="space-y-4">
+						<li>
+							<a href="mailto:nicholai@nicholai.work" class="text-xl text-white hover:text-brand-accent transition-colors font-mono block">
+								nicholai@nicholai.work
+							</a>
+						</li>
+						<li>
+							<a href="tel:7196604281" class="text-xl text-white hover:text-brand-accent transition-colors font-mono block">
+								719 660 4281
+							</a>
+						</li>
+					</ul>
+				</div>
+
+				<div>
+					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Location</h3>
+					<p class="text-lg text-slate-300">
+						Colorado Springs, CO<br/>
+						Mountain Standard Time (MST)
+					</p>
+				</div>
+
+				<div class="pt-8 border-t border-white/10">
+					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Availability</h3>
+					<div class="flex items-center gap-3">
+						<span class="relative flex h-3 w-3">
+						  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-accent opacity-75"></span>
+						  <span class="relative inline-flex rounded-full h-3 w-3 bg-brand-accent"></span>
+						</span>
+						<span class="text-sm font-bold text-brand-accent uppercase tracking-wide">Open to opportunities</span>
+					</div>
+					<p class="mt-4 text-slate-400 text-sm leading-relaxed">
+						Currently accepting new projects for Q3 2026. Reach out to schedule a discovery call.
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</BaseLayout>
+

src/styles/global.css

@@ -3,7 +3,7 @@
 @theme {
   --color-brand-dark: #0B0D11;
   --color-brand-panel: #151921;
-  --color-brand-accent: #FFB84C;
+  --color-brand-accent: #ff4d00;
   --color-brand-cyan: #22D3EE;
   --color-brand-red: #E11D48;