Update src/app/page.tsx

src/app/page.tsx

@@ -41,7 +41,7 @@ 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."
@@ -54,7 +54,7 @@ export default function LandingPage() {
         />
       </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={[
@@ -67,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."
@@ -114,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"
@@ -145,7 +145,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" style={{ backgroundColor: "var(--background)" }}>
         <TestimonialCardTwo
           title="What Our Guests Say"
           description="Real stories from people who have experienced the warmth and flavors of our restaurant"
@@ -200,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(--card)" }}>
         <SocialProofOne
           title="Trusted by Italy's Best"
           description="Partnerships with prestigious organizations and local suppliers"
@@ -220,7 +220,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" style={{ backgroundColor: "var(--background)" }}>
         <ContactSplit
           tag="Reserve Your Table"
           title="Join Us for an Unforgettable Evening"
@@ -235,7 +235,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" style={{ backgroundColor: "var(--card)" }}>
         <FooterLogoEmphasis
           logoText="Ristorante Italia"
           columns={[