Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -13,6 +13,7 @@ import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TextAbout from '@/components/sections/about/TextAbout';
 import { MessageCircle, Sparkles, Star, Users } from "lucide-react";
 
 export default function LandingPage() {
@@ -27,7 +28,7 @@ export default function LandingPage() {
         cardStyle="outline"
         primaryButtonStyle="flat"
         secondaryButtonStyle="radial-glow"
-        headingFontWeight="light"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
@@ -57,8 +58,8 @@ export default function LandingPage() {
       <HeroBillboard
       background={{
         variant: "radial-gradient"}}
-      title="Churrascaria e Pizzaria Colonial"
+      title="Fogo. Tradição. Sabor."
-      description="Experimente o sabor autêntico do churrasco e as pizzas artesanais mais deliciosas da cidade em um ambiente que combina tradição e elegância."
+      description="Onde a brasa encontra a massa, e a tradição vira experiência."
       tag="Sabor e Tradição"
       tagIcon={Sparkles}
       tagAnimation="blur-reveal"
@@ -99,12 +100,23 @@ export default function LandingPage() {
       ]}
       marqueeSpeed={30}
       showMarqueeCard={true}
+      titleClassName="font-serif text-6xl md:text-7xl lg:text-8xl"
+      descriptionClassName="italic"
+    />
+  </div>
+
+  <div id="intro-text" data-section="intro-text">
+      <TextAbout
+      useInvertedBackground={true}
+      title="No coração de [Cidade], o Colonial Restaurant é o ponto de encontro de sabores inesquecíveis. Desde 1990, servimos o melhor da culinária brasileira e italiana, com um toque de inovação e o calor da tradição."
+      titleClassName="font-serif text-3xl md:text-4xl lg:text-5xl"
+      className="bg-background text-foreground"
     />
   </div>
 
   <div id="about" data-section="about">
       <InlineImageSplitTextAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       heading={[
         {
           type: "text",          content: "Nossa História de Sabor e Paixão"},
@@ -121,7 +133,7 @@ export default function LandingPage() {
   <div id="features" data-section="features">
       <FeatureBento
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       animationType="slide-up"
       features={[
         {
@@ -165,7 +177,7 @@ export default function LandingPage() {
       animationType="scale-rotate"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       products={[
         {
           id: "1",          name: "Picanha Especial",          price: "R$ 79,90",          variant: "100g",          imageSrc: "http://img.b2bpic.net/free-photo/grilled-beef-steak_93675-128217.jpg",          imageAlt: "Picanha grelhada"},
@@ -189,7 +201,7 @@ export default function LandingPage() {
       <PricingCardTwo
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       plans={[
         {
           id: "basic-rodizio",          badge: "Clássico",          price: "R$ 99,90",          subtitle: "Por Pessoa",          buttons: [
@@ -228,7 +240,7 @@ export default function LandingPage() {
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTwelve
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       testimonials={[
         {
           id: "1",          name: "Ana Silva",          imageSrc: "http://img.b2bpic.net/free-photo/adorable-young-female-with-dark-long-hair-dressed-striped-t-shirt-coffee-shop-drinks-fresh-juice-espresso_273609-2787.jpg",          imageAlt: "Foto de Ana Silva"},
@@ -255,7 +267,7 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       members={[
         {
           id: "1",          name: "Chef Ricardo",          role: "Mestre Churrasqueiro",          description: "Com anos de experiência e paixão pela brasa, Ricardo é o coração da nossa churrascaria.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-kitchen_23-2149631673.jpg",          imageAlt: "Foto do Chef Ricardo"},
@@ -272,7 +284,7 @@ export default function LandingPage() {
   <div id="social-proof" data-section="social-proof">
       <SocialProofOne
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       names={[
         "Críticos Culinários",        "Guia de Sabores",        "Melhores Restaurantes",        "Revista Gourmet",        "Chef's Choice",        "Parceiro Premium",        "Prêmio de Ouro"]}
       title="Reconhecimento da Qualidade"
@@ -284,7 +296,7 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactCTA
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       background={{
         variant: "sparkles-gradient"}}
       tag="Entre em Contato"

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-libre-baskerville), serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #1A1208;
-  --card: #dad6cd;
+  --card: #2A1B0C;
-  --foreground: #2a2928;
+  --foreground: #F5EFE0;
-  --primary-cta: #2a2928;
+  --primary-cta: #C8530A;
-  --primary-cta-text: #f5f4ef;
+  --primary-cta-text: #1A1208;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #F5EFE0;
-  --secondary-cta-text: #2a2928;
+  --secondary-cta-text: #1A1208;
-  --accent: #ffffff;
+  --accent: #D4A847;
-  --background-accent: #c6b180;
+  --background-accent: #3A2A1A;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);