Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -33,17 +33,11 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "Assortiment",
+          name: "Assortiment",          id: "features"},
-          id: "features",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="Mazar Supermarkt"
     />
@@ -52,104 +46,61 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Welkom bij Mazar Supermarkt"
       description="Jouw vertrouwde supermarkt in Houthalen voor dagelijks vers brood, groenten, fruit en authentieke oosterse smaken."
       leftCarouselItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/beatiful-pensive-girl-glasses-is-buying-fresh-carrots-local-farmer-s-market_613910-5522.jpg?_wi=1",
+          imageSrc: "http://img.b2bpic.net/free-photo/beatiful-pensive-girl-glasses-is-buying-fresh-carrots-local-farmer-s-market_613910-5522.jpg?_wi=1",          imageAlt: "fresh grocery produce market"},
-          imageAlt: "fresh grocery produce market",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/autumnal-arrangement-fresh-vegetables_23-2148647893.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/autumnal-arrangement-fresh-vegetables_23-2148647893.jpg",          imageAlt: "fresh organic vegetables and fruits"},
-          imageAlt: "fresh organic vegetables and fruits",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/sliced-bun-cutting-board_23-2148229097.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/sliced-bun-cutting-board_23-2148229097.jpg",          imageAlt: "freshly baked traditional bread loaf"},
-          imageAlt: "freshly baked traditional bread loaf",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-butcher-waiting-order_7502-4764.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/senior-butcher-waiting-order_7502-4764.jpg",          imageAlt: "raw halal chicken meat fresh"},
-          imageAlt: "raw halal chicken meat fresh",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/smoothie-fruits_23-2147717543.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/smoothie-fruits_23-2147717543.jpg",          imageAlt: "fresh fruit juice bottles collection"},
-          imageAlt: "fresh fruit juice bottles collection",
-        },
       ]}
       rightCarouselItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/plate-cookies-cinnamon-sticks-star-anise-bowl-palm-marble-ground_140725-52799.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/plate-cookies-cinnamon-sticks-star-anise-bowl-palm-marble-ground_140725-52799.jpg",          imageAlt: "turkish baklava sweets box"},
-          imageAlt: "turkish baklava sweets box",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/three-colorful-smoothies-red-background_23-2148303033.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/three-colorful-smoothies-red-background_23-2148303033.jpg",          imageAlt: "fresh fruit juice bottles collection"},
-          imageAlt: "fresh fruit juice bottles collection",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-with-kid_23-2149445491.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-with-kid_23-2149445491.jpg",          imageAlt: "assortment of ice cream flavors"},
-          imageAlt: "assortment of ice cream flavors",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/stacked-breads-baker-shop_23-2147975213.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/stacked-breads-baker-shop_23-2147975213.jpg",          imageAlt: "freshly baked traditional bread loaf"},
-          imageAlt: "freshly baked traditional bread loaf",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/uncooked-chicken-legs-pink-plate-high-quality-photo_114579-64797.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/uncooked-chicken-legs-pink-plate-high-quality-photo_114579-64797.jpg",          imageAlt: "raw halal chicken meat fresh"},
-          imageAlt: "raw halal chicken meat fresh",
-        },
       ]}
       buttons={[
         {
-          text: "Bekijk Assortiment",
+          text: "Bekijk Assortiment",          href: "#products"},
-          href: "#products",
-        },
       ]}
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/vertical-shot-positive-stylish-woman-returns-happy-after-day-shopping-carries-paper-bags-satisfied-with-sale-discounts-dressed-fashionable-clothes-walks-outdoors-people-lifestyle-concept_273609-59144.jpg",
+          src: "http://img.b2bpic.net/free-photo/vertical-shot-positive-stylish-woman-returns-happy-after-day-shopping-carries-paper-bags-satisfied-with-sale-discounts-dressed-fashionable-clothes-walks-outdoors-people-lifestyle-concept_273609-59144.jpg",          alt: "Happy customer 1"},
-          alt: "Happy customer 1",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/happy-african-american-man-holding-shopping-bags-yellow-background-holidays-concept_1258-117649.jpg",
+          src: "http://img.b2bpic.net/free-photo/happy-african-american-man-holding-shopping-bags-yellow-background-holidays-concept_1258-117649.jpg",          alt: "Happy customer 2"},
-          alt: "Happy customer 2",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/girl-looking-away-medium-shot_23-2148225705.jpg",
+          src: "http://img.b2bpic.net/free-photo/girl-looking-away-medium-shot_23-2148225705.jpg",          alt: "Happy customer 3"},
-          alt: "Happy customer 3",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/girl-posing-with-her-eyes-closed_23-2148225669.jpg",
+          src: "http://img.b2bpic.net/free-photo/girl-posing-with-her-eyes-closed_23-2148225669.jpg",          alt: "Happy customer 4"},
-          alt: "Happy customer 4",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/smiled-beautiful-mulatto-woman-is-holding-package-full-with-food-one-hand-apple-other-modern-white-kitchen_8353-10015.jpg",
+          src: "http://img.b2bpic.net/free-photo/smiled-beautiful-mulatto-woman-is-holding-package-full-with-food-one-hand-apple-other-modern-white-kitchen_8353-10015.jpg",          alt: "Happy customer 5"},
-          alt: "Happy customer 5",
-        },
       ]}
       avatarText="Al 500+ tevreden buurtbewoners"
       marqueeItems={[
         {
-          type: "text",
+          type: "text",          text: "Vers Dagelijks"},
-          text: "Vers Dagelijks",
-        },
         {
-          type: "text",
+          type: "text",          text: "Halal Vlees"},
-          text: "Halal Vlees",
-        },
         {
-          type: "text",
+          type: "text",          text: "Oosterse Smaken"},
-          text: "Oosterse Smaken",
-        },
         {
-          type: "text",
+          type: "text",          text: "Zondag Open"},
-          text: "Zondag Open",
-        },
         {
-          type: "text",
+          type: "text",          text: "Kwaliteit"},
-          text: "Kwaliteit",
-        },
       ]}
     />
   </div>
@@ -159,14 +110,9 @@ export default function LandingPage() {
       useInvertedBackground={false}
       heading={[
         {
-          type: "text",
+          type: "text",          content: "Uw Buurtsupermarkt met Versheid als Prioriteit"},
-          content: "Uw Buurtsupermarkt met Versheid als Prioriteit",
-        },
         {
-          type: "image",
+          type: "image",          src: "http://img.b2bpic.net/free-photo/supermarket-owner-promoting-his-bio-food_482257-76583.jpg",          alt: "friendly supermarket owner local shop"},
-          src: "http://img.b2bpic.net/free-photo/supermarket-owner-promoting-his-bio-food_482257-76583.jpg",
-          alt: "friendly supermarket owner local shop",
-        },
       ]}
     />
   </div>
@@ -178,34 +124,16 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "f1",
+          id: "f1",          label: "Versheid",          title: "Dagelijks Vers",          items: [
-          label: "Versheid",
+            "Vers brood",            "Verse groenten",            "Vers fruit"],
-          title: "Dagelijks Vers",
-          items: [
-            "Vers brood",
-            "Verse groenten",
-            "Vers fruit",
-          ],
         },
         {
-          id: "f2",
+          id: "f2",          label: "Authentiek",          title: "Authentieke Producten",          items: [
-          label: "Authentiek",
+            "Oosterse lekkernijen",            "Natuurlijke honing",            "Diverse specerijen"],
-          title: "Authentieke Producten",
-          items: [
-            "Oosterse lekkernijen",
-            "Natuurlijke honing",
-            "Diverse specerijen",
-          ],
         },
         {
-          id: "f3",
+          id: "f3",          label: "Gemak",          title: "Altijd Open",          items: [
-          label: "Gemak",
+            "Geopend op zondag",            "Ook feestdagen open",            "Vriendelijke service"],
-          title: "Altijd Open",
-          items: [
-            "Geopend op zondag",
-            "Ook feestdagen open",
-            "Vriendelijke service",
-          ],
         },
       ]}
       title="Waarom Mazar Supermarkt?"
@@ -221,59 +149,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
+          id: "p1",          brand: "Mazar",          name: "Dagelijks Vers Brood",          price: "Dagelijks",          rating: 5,
-          brand: "Mazar",
+          reviewCount: "12",          imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-brioche-baked-concept-fresh-homemade-organic-brioche-bun-rustic-table-top-view-vertical-frame-closeup-selective-focus_166373-2345.jpg"},
-          name: "Dagelijks Vers Brood",
-          price: "Dagelijks",
-          rating: 5,
-          reviewCount: "12",
-          imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-brioche-baked-concept-fresh-homemade-organic-brioche-bun-rustic-table-top-view-vertical-frame-closeup-selective-focus_166373-2345.jpg",
-        },
         {
-          id: "p2",
+          id: "p2",          brand: "Mazar",          name: "Ijsjes & Desserts",          price: "Diverse",          rating: 5,
-          brand: "Mazar",
+          reviewCount: "8",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-ice-cream-flavors_23-2148268180.jpg"},
-          name: "Ijsjes & Desserts",
-          price: "Diverse",
-          rating: 5,
-          reviewCount: "8",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-ice-cream-flavors_23-2148268180.jpg",
-        },
         {
-          id: "p3",
+          id: "p3",          brand: "Mazar",          name: "Exotische Dranken",          price: "Vanaf €1.99",          rating: 5,
-          brand: "Mazar",
+          reviewCount: "20",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-different-type-packed-mushrooms-blue-crate_23-2147916192.jpg"},
-          name: "Exotische Dranken",
-          price: "Vanaf €1.99",
-          rating: 5,
-          reviewCount: "20",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-different-type-packed-mushrooms-blue-crate_23-2147916192.jpg",
-        },
         {
-          id: "p4",
+          id: "p4",          brand: "Mazar",          name: "Vers Halal Vlees",          price: "Variabel",          rating: 5,
-          brand: "Mazar",
+          reviewCount: "15",          imageSrc: "http://img.b2bpic.net/free-photo/fresh-organic-chicken-meats-blue-plate-grey-table_114579-66154.jpg"},
-          name: "Vers Halal Vlees",
-          price: "Variabel",
-          rating: 5,
-          reviewCount: "15",
-          imageSrc: "http://img.b2bpic.net/free-photo/fresh-organic-chicken-meats-blue-plate-grey-table_114579-66154.jpg",
-        },
         {
-          id: "p5",
+          id: "p5",          brand: "Mazar",          name: "Turkse Baklava",          price: "Vanaf €5.00",          rating: 5,
-          brand: "Mazar",
+          reviewCount: "30",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-yummy-dessert-with-cookies-strawberrries-dark-grey-background-nut-biscuit-sweet-fruits-cookie-sugar_140725-121748.jpg"},
-          name: "Turkse Baklava",
-          price: "Vanaf €5.00",
-          rating: 5,
-          reviewCount: "30",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-yummy-dessert-with-cookies-strawberrries-dark-grey-background-nut-biscuit-sweet-fruits-cookie-sugar_140725-121748.jpg",
-        },
         {
-          id: "p6",
+          id: "p6",          brand: "Mazar",          name: "Verse Groenten & Fruit",          price: "Seizoensgebonden",          rating: 5,
-          brand: "Mazar",
+          reviewCount: "40",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-ripe-delicious-vegetables_23-2149082595.jpg"},
-          name: "Verse Groenten & Fruit",
-          price: "Seizoensgebonden",
-          rating: 5,
-          reviewCount: "40",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-ripe-delicious-vegetables_23-2149082595.jpg",
-        },
       ]}
       title="Populaire Producten"
       description="Ontdek onze selectie van versproducten en authentieke smaken."
@@ -287,37 +179,17 @@ export default function LandingPage() {
       useInvertedBackground={true}
       plans={[
         {
-          id: "pay1",
+          id: "pay1",          title: "Contactloos",          price: "Bancontact",          period: "in winkel",          features: [
-          title: "Contactloos",
+            "Pinbetaling",            "Contactloos",            "Snel"],
-          price: "Bancontact",
-          period: "in winkel",
-          features: [
-            "Pinbetaling",
-            "Contactloos",
-            "Snel",
-          ],
           button: {
-            text: "Bezoek ons",
+            text: "Bezoek ons"},
-          },
+          imageSrc: "http://img.b2bpic.net/free-photo/delicious-marble-halva-with-sunflower-seeds-cocoa-powder-honey_114579-9133.jpg",          imageAlt: "turkish baklava sweets box"},
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-marble-halva-with-sunflower-seeds-cocoa-powder-honey_114579-9133.jpg",
-          imageAlt: "turkish baklava sweets box",
-        },
         {
-          id: "pay2",
+          id: "pay2",          title: "Cash",          price: "Contant",          period: "in winkel",          features: [
-          title: "Cash",
+            "Bankbiljetten",            "Muntgeld",            "Veilig"],
-          price: "Contant",
-          period: "in winkel",
-          features: [
-            "Bankbiljetten",
-            "Muntgeld",
-            "Veilig",
-          ],
           button: {
-            text: "Bezoek ons",
+            text: "Bezoek ons"},
-          },
+          imageSrc: "http://img.b2bpic.net/free-photo/beatiful-pensive-girl-glasses-is-buying-fresh-carrots-local-farmer-s-market_613910-5522.jpg?_wi=2",          imageAlt: "turkish baklava sweets box"},
-          imageSrc: "http://img.b2bpic.net/free-photo/beatiful-pensive-girl-glasses-is-buying-fresh-carrots-local-farmer-s-market_613910-5522.jpg?_wi=2",
-          imageAlt: "turkish baklava sweets box",
-        },
       ]}
       title="Onze Betalingsmogelijkheden"
       description="Wij accepteren diverse betaalmethoden in onze winkel."
@@ -331,20 +203,11 @@ export default function LandingPage() {
       tag="Statistieken"
       metrics={[
         {
-          id: "m1",
+          id: "m1",          value: "100+",          description: "Authentieke producten"},
-          value: "100+",
-          description: "Authentieke producten",
-        },
         {
-          id: "m2",
+          id: "m2",          value: "7/7",          description: "Elke dag geopend"},
-          value: "7/7",
-          description: "Elke dag geopend",
-        },
         {
-          id: "m3",
+          id: "m3",          value: "10+",          description: "Jaren ervaring"},
-          value: "10+",
-          description: "Jaren ervaring",
-        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -357,40 +220,15 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          name: "Sarah",          role: "Klant",          testimonial: "Altijd vers brood en super vriendelijk personeel!",          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-bearded-man-with-red-hair-enjoying-shopping-holding-bag-shoulder-smiling-standing_1258-147589.jpg"},
-          name: "Sarah",
-          role: "Klant",
-          testimonial: "Altijd vers brood en super vriendelijk personeel!",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-bearded-man-with-red-hair-enjoying-shopping-holding-bag-shoulder-smiling-standing_1258-147589.jpg",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Ahmed",          role: "Klant",          testimonial: "De beste plek voor authentieke Turkse producten in Houthalen.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-guy-admiring-natural-delicious-tomato-camera_482257-115890.jpg"},
-          name: "Ahmed",
-          role: "Klant",
-          testimonial: "De beste plek voor authentieke Turkse producten in Houthalen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-guy-admiring-natural-delicious-tomato-camera_482257-115890.jpg",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "Jan",          role: "Klant",          testimonial: "Zeer handig dat ze ook op zondag open zijn.",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-cheerful-adult-smiling-his-fresh-organic-produce_482257-115898.jpg"},
-          name: "Jan",
-          role: "Klant",
-          testimonial: "Zeer handig dat ze ook op zondag open zijn.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-cheerful-adult-smiling-his-fresh-organic-produce_482257-115898.jpg",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "Fatima",          role: "Klant",          testimonial: "Heerlijke verse groenten, aanrader!",          imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-woman-smiling-confident-holding-take-away-paper-bag-street_839833-1756.jpg"},
-          name: "Fatima",
-          role: "Klant",
-          testimonial: "Heerlijke verse groenten, aanrader!",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-woman-smiling-confident-holding-take-away-paper-bag-street_839833-1756.jpg",
-        },
         {
-          id: "t5",
+          id: "t5",          name: "Bart",          role: "Klant",          testimonial: "Goede service en altijd alles op voorraad.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-holding-organic-vegetables_23-2148493618.jpg"},
-          name: "Bart",
-          role: "Klant",
-          testimonial: "Goede service en altijd alles op voorraad.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-holding-organic-vegetables_23-2148493618.jpg",
-        },
       ]}
       title="Wat klanten zeggen"
       description="Onze klanten waarderen onze dagelijkse versheid en gastvrijheid in de winkel."
@@ -403,20 +241,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
+          id: "q1",          title: "Wat zijn de openingstijden?",          content: "Wij zijn 7 dagen per week geopend voor uw gemak."},
-          title: "Wat zijn de openingstijden?",
-          content: "Wij zijn 7 dagen per week geopend voor uw gemak.",
-        },
         {
-          id: "q2",
+          id: "q2",          title: "Kan ik online bestellen?",          content: "Nee, Mazar Supermarkt is een fysieke winkel. Wij bieden geen online bestellingen aan."},
-          title: "Kan ik online bestellen?",
-          content: "Nee, Mazar Supermarkt is een fysieke winkel. Wij bieden geen online bestellingen aan.",
-        },
         {
-          id: "q3",
+          id: "q3",          title: "Waar kan ik parkeren?",          content: "Er is voldoende parkeergelegenheid rondom Sint-Trudo Plein 1."},
-          title: "Waar kan ik parkeren?",
-          content: "Er is voldoende parkeergelegenheid rondom Sint-Trudo Plein 1.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/woman-getting-food-bag-delivered_23-2148964027.jpg"
       mediaAnimation="slide-up"
@@ -430,14 +259,11 @@ export default function LandingPage() {
       <ContactText
       useInvertedBackground={true}
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
+      text="Bezoek ons op Sint-Trudo Plein 1, 3530 Houthalen. Wij staan voor u klaar met dagvers aanbod. Neem contact op via 0489 88 62 55 of stuur een e-mail naar mazarsupermarkt@gmail.com. Vind onze locatie direct op Google Maps."
-      text="Kom winkelen bij Mazar Supermarkt. Sint-Trudo Plein 1, 3530 Houthalen. 0489 88 62 55. mazarsupermarkt@gmail.com"
       buttons={[
         {
-          text: "Routebeschrijving",
+          text: "Bekijk locatie op Google Maps",          href: "https://www.google.com/maps/search/?api=1&query=Sint-Trudo+Plein+1,+3530+Houthalen"},
-          href: "https://maps.google.com",
-        },
       ]}
     />
   </div>
@@ -446,13 +272,9 @@ export default function LandingPage() {
       <FooterLogoReveal
       logoText="Mazar Supermarkt"
       leftLink={{
-        text: "Over Ons",
+        text: "Over Ons",        href: "#about"}}
-        href: "#about",
-      }}
       rightLink={{
-        text: "Contact",
+        text: "Contact",        href: "#contact"}}
-        href: "#contact",
-      }}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #fffefe;
-  --card: #f9f9f9;
+  --card: #f6f7f4;
-  --foreground: #120a00e6;
+  --foreground: #080908;
-  --primary-cta: #ff8c42;
+  --primary-cta: #0e3a29;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #e7eecd;
   --secondary-cta-text: #120a00e6;
-  --accent: #e2e2e2;
+  --accent: #35c18b;
-  --background-accent: #c4c4c4;
+  --background-accent: #ecebe4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);