Merge version_6 into main

Merge version_6 into main

src/app/page.tsx

@@ -9,7 +9,7 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Award, Scissors, MessageSquare, TrendingUp, Phone, Users, Star, Clock } from 'lucide-react';
+import { Award, Scissors, MessageSquare, TrendingUp, Phone, Users, Star, Clock, MapPin } from 'lucide-react';
 
 export default function LandingPage() {
   const navItems = [
@@ -216,22 +216,97 @@ export default function LandingPage() {
       </div>
 
       <div id="metrics" data-section="metrics">
-        <MetricCardThree
-          title="Why Choose Arez"
-          description="Our commitment to excellence reflected in numbers"
-          tag="Our Impact"
-          tagIcon={TrendingUp}
-          tagAnimation="slide-up"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          metrics={[
-            { id: '1', icon: Users, title: 'Satisfied Clients', value: '100+' },
-            { id: '2', icon: Award, title: 'Expert Barbers', value: '5+' },
-            { id: '3', icon: Star, title: '5-Star Reviews', value: '95%' },
-            { id: '4', icon: Clock, title: 'Years Experience', value: '10+' }
-          ]}
-        />
+        <a href="/contact" className="block">
+          <MetricCardThree
+            title="Why Choose Arez"
+            description="Trusted by 100+ clients with 95% 5-star reviews and 10+ years of expertise"
+            tag="Our Impact"
+            tagIcon={TrendingUp}
+            tagAnimation="slide-up"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            metrics={[
+              { id: '1', icon: Users, title: 'Satisfied Clients', value: '100+' },
+              { id: '2', icon: Award, title: 'Expert Barbers', value: '5+' },
+              { id: '3', icon: Star, title: '5-Star Reviews', value: '95%' },
+              { id: '4', icon: Clock, title: 'Years Experience', value: '10+' }
+            ]}
+          />
+        </a>
+      </div>
+
+      <div id="location-contact" data-section="location-contact" className="w-full py-16 md:py-20 px-4 md:px-6">
+        <div className="max-w-4xl mx-auto">
+          <div className="mb-12 text-center md:text-left">
+            <div className="inline-flex items-center gap-2 mb-4">
+              <MapPin className="w-5 h-5" />
+              <span className="text-sm font-medium">Location & Contact</span>
+            </div>
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">Visit Us in Erbil</h2>
+            <p className="text-foreground/75 text-lg">Find us and get in touch with our team for premium barbering services</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+            <div className="rounded-lg overflow-hidden shadow-lg h-80 md:h-96">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3155.8974300000003!2d44.0059!3d36.1914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2sArez%20Barbershop%20Erbil!5e0!3m2!1sen!2siq!4v1234567890"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Arez Barbershop Location Map"
+                className="w-full h-full"
+              />
+            </div>
+
+            <div className="space-y-8">
+              <div className="flex gap-4">
+                <div className="flex-shrink-0">
+                  <Phone className="w-6 h-6 text-primary-cta mt-1" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">Phone</h3>
+                  <a href="tel:+9647504925292" className="text-foreground/75 hover:text-primary-cta transition-colors">
+                    +964 750 492 5292
+                  </a>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-shrink-0">
+                  <MessageSquare className="w-6 h-6 text-primary-cta mt-1" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">WhatsApp</h3>
+                  <a href="https://wa.me/9647504925292" target="_blank" rel="noopener noreferrer" className="text-foreground/75 hover:text-primary-cta transition-colors">
+                    Message us on WhatsApp
+                  </a>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-shrink-0">
+                  <Clock className="w-6 h-6 text-primary-cta mt-1" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">Business Hours</h3>
+                  <div className="text-foreground/75 space-y-1 text-sm md:text-base">
+                    <p>Thursday: 8:30 AM - 12:00 AM</p>
+                    <p>Friday: 2:00 PM - 12:00 AM</p>
+                    <p>Saturday: 8:30 AM - 12:00 AM</p>
+                    <p>Sunday: 8:30 AM - 12:00 AM</p>
+                    <p>Monday: 8:30 AM - 12:00 AM</p>
+                    <p>Tuesday: 8:30 AM - 12:00 AM</p>
+                    <p>Wednesday: 8:30 AM - 12:00 AM (Eid al-Fitr)</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="contact" data-section="contact">
@@ -255,18 +330,18 @@ export default function LandingPage() {
             {
               title: 'Services',
               items: [
-                { label: 'Haircuts', href: '#services' },
-                { label: 'Beard Grooming', href: '#services' },
-                { label: 'Hair Treatment', href: '#services' },
-                { label: 'Shaving', href: '#services' }
+                { label: 'Haircuts', href: 'services' },
+                { label: 'Beard Grooming', href: 'services' },
+                { label: 'Hair Treatment', href: 'services' },
+                { label: 'Shaving', href: 'services' }
               ]
             },
             {
               title: 'Company',
               items: [
-                { label: 'About Us', href: '#about' },
-                { label: 'Testimonials', href: '#testimonials' },
-                { label: 'Contact', href: '#contact' },
+                { label: 'About Us', href: 'about' },
+                { label: 'Testimonials', href: 'testimonials' },
+                { label: 'Contact', href: 'contact' },
                 { label: 'Privacy Policy', href: '#' }
               ]
             },
@@ -275,14 +350,14 @@ export default function LandingPage() {
               items: [
                 { label: 'Facebook', href: 'https://facebook.com' },
                 { label: 'Instagram', href: 'https://instagram.com' },
-                { label: 'WhatsApp', href: '#' },
+                { label: 'WhatsApp', href: 'https://wa.me/9647504925292' },
                 { label: 'Email', href: 'mailto:contact@arezbarbershop.com' }
               ]
             }
           ]}
-          copyrightText="© 2025 Arez Barbershop | Erbil, Iraq"
+          copyrightText="© 2025 Arez Barbershop | Erbil, Iraq | Premium Barber Services"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #120a00e6;
-  --primary-cta: #ff8c42;
+  --background: #1a1a1a;
+  --card: #242424;
+  --foreground: #f5f5f5;
+  --primary-cta: #d4af37;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #2a2a2a;
   --secondary-cta-text: #120a00e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #d4af37;
+  --background-accent: #3a3a3a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);