Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -41,22 +41,20 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="hero" data-section="hero" style={{ backgroundColor: "var(--background)" }}>
         <HeroSplit
           title="Authentic Italian Cuisine Since 1998"
           description="Experience the flavors of Italy in every bite. Our chefs craft traditional recipes with locally-sourced ingredients, bringing warmth and tradition to your table."
           tag="Experience Italy"
-          buttons={[
-            { text: "Make a Reservation", href: "contact" },
-            { text: "View Menu", href: "menu" }
-          ]}
+          buttons={[{ text: "Make a Reservation", href: "contact" },
+            { text: "View Menu", href: "menu" }]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766237434264-kf7vqb4g.jpg"
           imageAlt="Signature carbonara pasta dish"
           imagePosition="right"
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="about" data-section="about" style={{ backgroundColor: "var(--card)" }}>
         <AboutMetric
           title="A Slice of Italy in the Heart of the City"
           metrics={[
@@ -69,7 +67,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="menu" data-section="menu">
+      <div id="menu" data-section="menu" style={{ backgroundColor: "var(--background)" }}>
         <ProductCardFour
           title="Our Signature Menu"
           description="Handcrafted Italian dishes prepared fresh daily using the finest ingredients. Each plate tells a story of tradition and passion."
@@ -116,7 +114,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="features" data-section="features">
+      <div id="features" data-section="features" style={{ backgroundColor: "var(--card)" }}>
         <FeatureCardEleven
           title="The Italian Experience"
           description="Discover what makes our restaurant truly special"
@@ -147,7 +145,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" style={{ backgroundColor: "var(--card)" }}>
         <TestimonialCardTwo
           title="What Our Guests Say"
           description="Real stories from people who have experienced the warmth and flavors of our restaurant"
@@ -202,7 +200,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="social-proof" data-section="social-proof">
+      <div id="social-proof" data-section="social-proof" style={{ backgroundColor: "var(--background)" }}>
         <SocialProofOne
           title="Trusted by Italy's Best"
           description="Partnerships with prestigious organizations and local suppliers"
@@ -222,7 +220,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" style={{ backgroundColor: "var(--card)" }}>
         <ContactSplit
           tag="Reserve Your Table"
           title="Join Us for an Unforgettable Evening"
@@ -237,7 +235,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" style={{ backgroundColor: "var(--background)" }}>
         <FooterLogoEmphasis
           logoText="Ristorante Italia"
           columns={[