feat(ui): redesign hero section with new copy and CTAs

index.html

@@ -53,10 +53,20 @@
     <!-- Particle Canvas -->
     <canvas id="particles" aria-hidden="true"></canvas>
     
-    <header class="text-center py-1">
+    <header class="hero-section">
-        <h1>d@n tech</h1>
+        <div class="container hero-content">
-        <p class="typewriter" data-text="Your partner in web development" aria-label="Your partner in web development"></p>
+            <h1 class="hero-title">Digital Experiences,<br>Perfectly Brewed.</h1>
-        <p><a href="https://dustin.coffee" target="_blank" class="text-white">Visit my main site</a></p>
+            <p class="typewriter hero-subtitle" data-text="Crafting robust, responsive, and elegant web solutions" aria-label="Crafting robust, responsive, and elegant web solutions"></p>
+            <div class="btn-group-custom">
+                <a href="mailto:info@dustin.coffee" class="btn btn-primary btn-lg">Start Your Project</a>
+                <a href="#portfolio" class="btn btn-outline-coffee btn-lg">View Portfolio</a>
+            </div>
+            <div class="mt-5 d-none d-md-block opacity-50 animate-bounce" aria-hidden="true">
+                <svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
+                </svg>
+            </div>
+        </div>
     </header>
     <div class="d-flex flex-column min-vh-100" style="position: relative;">
     <div class="container mt-4">
@@ -99,8 +109,9 @@
             
             </div>
         
-            <div class="container mt-4">
+            <div class="container mt-4" id="portfolio">
                 <h2>Portfolio</h2>
+
                 <div class="row">
                     <div class="col-md-6 mb-2">
                         <div class="card">