Fix the site

index.html

@@ -58,9 +58,9 @@
                 <a href="#contact" class="ds-navbar-link">Contact</a>
             </div>
             <div class="ds-navbar-actions">
-                <button class="ds-button ds-button-primary ds-button-glow">
+                <a href="#contact" class="ds-button ds-button-primary ds-button-glow">
                     <i data-feather="calendar" class="mr-2"></i>Book Now
-                </button>
+                </a>
             </div>
         </div>
     </nav>
@@ -76,20 +76,20 @@
                     Experience luxury hair care in an inclusive space designed for every body, every style, every you.
                 </p>
                 <div class="ds-hero-actions">
-                    <button class="ds-button ds-button-primary ds-button-lg ds-button-glow">
+                    <a href="#contact" class="ds-button ds-button-primary ds-button-lg ds-button-glow">
                         <i data-feather="calendar" class="mr-2"></i>Book Your Appointment
-                    </button>
-                    <button class="ds-button ds-button-secondary ds-button-lg">
+                    </a>
+                    <a href="#about" class="ds-button ds-button-secondary ds-button-lg">
                         <i data-feather="user" class="mr-2"></i>Meet Our Founder
-                    </button>
+                    </a>
                 </div>
             </div>
         </div>
         <div class="ds-hero-scroll-indicator">
-            <i data-feather="chevron-down"></i>
+            <a href="#services"><i data-feather="chevron-down"></i></a>
         </div>
     </section>
-    <!-- Services Section -->
+<!-- Services Section -->
     <section id="services" class="ds-section">
         <div class="ds-container">
             <div class="ds-section-header ds-text-center">
@@ -111,7 +111,7 @@
                     </p>
                     <div class="ds-card-footer">
                         <span class="ds-price">From $65</span>
-                        <button class="ds-button ds-button-primary ds-button-sm">Book Now</button>
+                        <a href="#contact" class="ds-button ds-button-primary ds-button-sm">Book Now</a>
                     </div>
                 </div>
                 
@@ -126,7 +126,7 @@
                     </p>
                     <div class="ds-card-footer">
                         <span class="ds-price">From $95</span>
-                        <button class="ds-button ds-button-primary ds-button-sm">Book Now</button>
+                        <a href="#contact" class="ds-button ds-button-primary ds-button-sm">Book Now</a>
                     </div>
                 </div>
                 
@@ -141,60 +141,64 @@
                     </p>
                     <div class="ds-card-footer">
                         <span class="ds-price">From $50</span>
-                        <button class="ds-button ds-button-primary ds-button-sm">Book Now</button>
+                        <a href="#contact" class="ds-button ds-button-primary ds-button-sm">Book Now</a>
                     </div>
                 </div>
-            </div>
+</div>
         </div>
     </section>
-<!-- About Section -->
-    <section id="about" class="py-20 bg-gradient-to-br from-slate-900 to-slate-800">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex flex-col lg:flex-row items-center gap-12">
-                <div class="lg:w-1/2">
-                    <div class="relative">
-                        <div class="bg-slate-700 rounded-2xl overflow-hidden border-4 border-pink-500/20">
-                            <img src="http://static.photos/people/640x360/78" alt="Salon Owner" class="w-full h-auto">
-                        </div>
-                        <div class="absolute -bottom-6 -right-6 bg-amber-500 text-slate-900 py-3 px-6 rounded-xl font-bold">
-                            <i data-feather="award" class="inline mr-2"></i> 10+ Years Experience
-                        </div>
+    <!-- About Section -->
+    <section id="about" class="ds-section ds-section-alt">
+        <div class="ds-container">
+            <div class="ds-section-header">
+                <h2 class="ds-section-title">Meet <span class="ds-text-gradient">Maya</span>, Your Stylist & Founder</h2>
+                <p class="ds-section-subtitle">
+                    As a plus-size woman in the beauty industry, I created Curvy Cuts to provide a welcoming space where everyone feels beautiful.
+                </p>
+            </div>
+            
+            <div class="ds-grid ds-grid-cols-1 lg:ds-grid-cols-2 ds-gap-12 ds-items-center">
+                <div class="ds-about-image">
+                    <div class="ds-image-frame">
+                        <img src="http://static.photos/people/640x360/78" alt="Salon Owner Maya" class="ds-image">
+                    </div>
+                    <div class="ds-badge ds-badge-accent">
+                        <i data-feather="award" class="ds-badge-icon"></i>
+                        <span class="ds-badge-text">10+ Years Experience</span>
                     </div>
                 </div>
-                <div class="lg:w-1/2">
-                    <h2 class="text-3xl md:text-4xl font-bold mb-6">
-                        Meet <span class="text-pink-500">Maya</span>, Your Stylist & Founder
-                    </h2>
-                    <p class="text-slate-300 mb-6 text-lg">
-                        As a plus-size woman in the beauty industry, I created Curvy Cuts to provide a welcoming space where everyone feels beautiful. My journey began with a passion for making people feel confident in their own skin.
+                
+                <div class="ds-about-content">
+                    <p class="ds-text-lg ds-mb-6">
+                        My journey began with a passion for making people feel confident in their own skin. At Curvy Cuts, we believe beauty has no size, shape, or form.
                     </p>
-                    <p class="text-slate-400 mb-8">
-                        At Curvy Cuts, we believe beauty has no size, shape, or form. Our inclusive approach ensures every client receives personalized attention in a judgment-free environment. I'm committed to celebrating diversity through hair artistry.
+                    <p class="ds-text ds-mb-8">
+                        Our inclusive approach ensures every client receives personalized attention in a judgment-free environment. I'm committed to celebrating diversity through hair artistry.
                     </p>
-                    <div class="grid grid-cols-2 gap-4">
-                        <div class="flex items-center">
-                            <i data-feather="check-circle" class="text-pink-500 mr-2"></i>
-                            <span>Inclusive Environment</span>
+                    
+                    <div class="ds-grid ds-grid-cols-2 ds-gap-4">
+                        <div class="ds-feature-item">
+                            <i data-feather="check-circle" class="ds-feature-icon"></i>
+                            <span class="ds-feature-text">Inclusive Environment</span>
                         </div>
-                        <div class="flex items-center">
-                            <i data-feather="check-circle" class="text-pink-500 mr-2"></i>
-                            <span>Body Positive Philosophy</span>
+                        <div class="ds-feature-item">
+                            <i data-feather="check-circle" class="ds-feature-icon"></i>
+                            <span class="ds-feature-text">Body Positive Philosophy</span>
                         </div>
-                        <div class="flex items-center">
-                            <i data-feather="check-circle" class="text-pink-500 mr-2"></i>
-                            <span>Premium Products</span>
+                        <div class="ds-feature-item">
+                            <i data-feather="check-circle" class="ds-feature-icon"></i>
+                            <span class="ds-feature-text">Premium Products</span>
                         </div>
-                        <div class="flex items-center">
-                            <i data-feather="check-circle" class="text-pink-500 mr-2"></i>
-                            <span>Personalized Service</span>
+                        <div class="ds-feature-item">
+                            <i data-feather="check-circle" class="ds-feature-icon"></i>
+                            <span class="ds-feature-text">Personalized Service</span>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-
-    <!-- Team Section -->
+<!-- Team Section -->
     <section id="team" class="py-20 bg-slate-800">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">