Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -70,12 +70,13 @@ export default function LandingPage() {
           imageSrc: "http://img.b2bpic.net/free-photo/refreshing-cocktail-with-lime-with-sea_181624-8259.jpg",          imageAlt: "Drink especial"},
       ]}
       mediaAnimation="slide-up"
+      className="bg-blue-950"
     />
   </div>
 
   <div id="about" data-section="about">
       <MetricSplitMediaAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Pés na areia, alma na cozinha"
       description="Nossa cozinha combina o frescor do oceano com a tradição da culinária carioca, oferecendo uma experiência que vai muito além do paladar. Localizados na deslumbrante Praia de Piratininga, criamos um refúgio para quem busca sabores autênticos e o calor humano que só o Rio de Janeiro pode proporcionar."
       metrics={[
@@ -90,6 +91,7 @@ export default function LandingPage() {
       imageAlt="Ambiente do restaurante"
       mediaAnimation="slide-up"
       metricsAnimation="slide-up"
+      className="bg-blue-950 text-white"
     />
   </div>
 
@@ -121,7 +123,7 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="split"
       gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
         {
           title: "Vista Privilegiada",          description: "Debruçados sobre o mar de Piratininga.",          imageSrc: "http://img.b2bpic.net/free-photo/bottle-with-letter-lies-blue-serviette-dinner-table_1304-3688.jpg"},
@@ -136,6 +138,7 @@ export default function LandingPage() {
       ]}
       title="Mais que uma refeição"
       description="Nossa experiência é composta por elementos que traduzem a magia do litoral carioca."
+      className="bg-blue-950 text-white"
     />
   </div>
 
@@ -163,7 +166,7 @@ export default function LandingPage() {
 
   <div id="reservation" data-section="reservation">
       <ContactText
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       background={{
         variant: "gradient-bars"}}
       text="Reserve sua mesa e venha saborear o melhor do litoral de Niterói."
@@ -171,13 +174,14 @@ export default function LandingPage() {
         {
           text: "Reservar agora",          href: "#"},
       ]}
+      className="bg-blue-950 text-white"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <FaqSplitMedia
       textboxLayout="split"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
         {
           id: "1",          title: "Onde estamos?",          content: "Praia de Piratininga, Niterói - RJ."},
@@ -192,6 +196,7 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/beach-restaurant-evening_661209-253.jpg"
       imageAlt="Fachada do restaurante"
       mediaAnimation="slide-up"
+      className="bg-blue-950 text-white"
     />
   </div>
 
@@ -225,6 +230,7 @@ export default function LandingPage() {
       ]}
       bottomLeftText="© 2024 Maria da Praia"
       bottomRightText="Todos os direitos reservados"
+      className="bg-blue-950 text-white"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5ede0;
-  --card: #f0f0f0;
-  --foreground: #1a1a1a;
-  --primary-cta: #c9a96e;
+  --background: #f0f8ff;
+  --card: #e6f0fa;
+  --foreground: #001f3f;
+  --primary-cta: #003366;
   --primary-cta-text: #0d1b2a;
-  --secondary-cta: #f5ede0;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #0d1b2a;
-  --accent: #c9a96e;
-  --background-accent: #e8e0d5;
+  --accent: #0056b3;
+  --background-accent: #cce4f7;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);