Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -8,8 +8,8 @@ import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen
 import ProductCardFour from "@/components/sections/product/ProductCardFour";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
 import ContactFaq from "@/components/sections/contact/ContactFaq";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Award, Scissors, Image, Star, Phone } from "lucide-react";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Sparkles, Award, Scissors, Image, Star, Phone, Instagram, Facebook } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -84,8 +84,9 @@ export default function LandingPage() {
           title="Hårcenter - Premium möter precision"
           description="Hårcenter är en modern frisörsalong i Nyköping där stil, precision och service möts på högsta nivå. Med många nöjda kunder och ett betyg på 4.4 stjärnor erbjuder vi professionella klippningar och hårbehandlingar för både kvinnor och män. Vår dedikerad team arbetar med de senaste teknikerna och produkterna för att ge dig en oförglömlig upplevelse."
           metrics={[
+            { value: "10+", title: "Års erfarenhet" },
             { value: "4.4★", title: "Kundbetyg" },
-            { value: "10+", title: "Års erfarenhet" }
+            { value: "1000+", title: "Nöjda kunder" }
           ]}
           imageSrc="http://img.b2bpic.net/free-photo/professional-hairdresser-wearing-protective-face-mask-make-haircut-european-bearded-brutal-man-beauty-salon_343596-4462.jpg?_wi=2"
           imageAlt="Professional barber at work"
@@ -146,6 +147,56 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="instagram" data-section="instagram">
+        <div className="relative w-full py-20 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="text-center mb-16">
+              <p className="text-sm font-medium tracking-wide uppercase text-accent mb-4">Community</p>
+              <h2 className="text-4xl sm:text-5xl font-bold mb-6 leading-tight">Join the Svalna Community</h2>
+              <p className="text-lg text-foreground/70 max-w-2xl mx-auto">Discover how our customers style their premium fashion with confidence and elegance</p>
+            </div>
+            
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
+              {[
+                "http://img.b2bpic.net/free-photo/portrait-young-slim-sensual-girl-gray-dress-leaning-ag_613910-8706.jpg",                "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-5596.jpg",                "http://img.b2bpic.net/free-photo/young-handsome-groom-posing-looking-camera_1153-6076.jpg",                "http://img.b2bpic.net/free-photo/man-blue-suit-posing-white-artistic-wall-from-bricks_613910-3011.jpg",                "http://img.b2bpic.net/free-photo/portrait-young-slim-sensual-girl-gray-dress-leaning-ag_613910-8706.jpg",                "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-5596.jpg",                "http://img.b2bpic.net/free-photo/young-handsome-groom-posing-looking-camera_1153-6076.jpg",                "http://img.b2bpic.net/free-photo/man-blue-suit-posing-white-artistic-wall-from-bricks_613910-3011.jpg"
+              ].map((img, idx) => (
+                <div 
+                  key={idx}
+                  className="relative overflow-hidden rounded-lg aspect-square group cursor-pointer transition-all duration-500 ease-out hover:shadow-lg hover:shadow-accent/30"
+                >
+                  <img 
+                    src={img}
+                    alt={`Community member ${idx + 1}`}
+                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
+                    <div className="text-white text-center">
+                      <p className="font-semibold text-sm">@svalna_style</p>
+                    </div>
+                  </div>
+                  <div className="absolute top-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                    <Instagram className="w-5 h-5 text-white drop-shadow-lg" />
+                  </div>
+                </div>
+              ))}
+            </div>
+            
+            <div className="text-center mt-12">
+              <p className="text-foreground/60 mb-6">Tag us @svalna_style for a chance to be featured</p>
+              <a 
+                href="https://instagram.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-accent text-white font-semibold hover:shadow-lg hover:shadow-accent/50 transition-all duration-300 hover:-translate-y-1"
+              >
+                <Instagram className="w-5 h-5" />
+                Follow on Instagram
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardTen
           title="Våra kunder älskar oss"
@@ -202,24 +253,32 @@ export default function LandingPage() {
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase
+        <FooterBaseCard
           logoText="Hårcenter"
           copyrightText="© 2025 Hårcenter Nyköping. Alla rättigheter förbehållna."
           columns={[
             {
-              title: "Företaget",              items: [
+              title: "Om Hårcenter",              items: [
                 { label: "Om oss", href: "about" },
                 { label: "Tjänster", href: "services" },
                 { label: "Galleriet", href: "gallery" },
                 { label: "Recensioner", href: "testimonials" }
               ]
             },
+            {
+              title: "Shipping & Returns",              items: [
+                { label: "Leveranspolicy", href: "#" },
+                { label: "Returpolicy", href: "#" },
+                { label: "Spårning", href: "#" },
+                { label: "FAQ", href: "contact" }
+              ]
+            },
             {
               title: "Kontakt",              items: [
-                { label: "Östra Storgatan 5, 611 34 Nyköping", href: "#" },
                 { label: "Telefon: 0155-26 74 74", href: "tel:0155267474" },
                 { label: "E-post: info@harcenter.se", href: "mailto:info@harcenter.se" },
-                { label: "Öppettider: Mån-Fre 09:00-18:00", href: "#" }
+                { label: "Öppettider: Mån-Fre 09:00-18:00", href: "#" },
+                { label: "Östra Storgatan 5, 611 34 Nyköping", href: "#" }
               ]
             },
             {
@@ -231,8 +290,9 @@ export default function LandingPage() {
               ]
             }
           ]}
+          onPrivacyClick={() => console.log("Privacy policy clicked")}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0b0b0b;
+  --background: #0a0a0a;
   --card: #1a1a1a;
-  --foreground: #f5f5f5;
-  --primary-cta: #d4af37;
+  --foreground: #f0f0f0;
+  --primary-cta: #00ff88;
   --primary-cta-text: #0b0b0b;
   --secondary-cta: #1a1a1a;
   --secondary-cta-text: #d4af37;
-  --accent: #2a2a2a;
-  --background-accent: #d4af37;
+  --accent: #00ff88;
+  --background-accent: #ff1493;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);