src/app/contact/page.tsx

@@ -14,11 +14,11 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="medium"
         sizing="medium"
-        background="circleGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">

src/app/page.tsx

@@ -7,6 +7,7 @@ import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGaller
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function LandingPage() {
   return (
@@ -16,11 +17,11 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="medium"
         sizing="medium"
-        background="circleGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
@@ -76,6 +77,17 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="contact" data-section="contact">
+    <ContactCTA
+      tag="Consultation"
+      title="Book Your Appointment"
+      description="Take the first step toward a healthier smile today. Our team is ready to assist you."
+      buttons={[{ text: "Submit Request" }]}
+      background={{ variant: "plain" }}
+      useInvertedBackground={false}
+    />
+  </div>
+
   <div id="footer" data-section="footer">
       <FooterBaseCard
       logoText="Brickell Perio"

src/app/resources/page.tsx

@@ -14,11 +14,11 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="medium"
         sizing="medium"
-        background="circleGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #1c1c1c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #e5e5e5;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #000000;
+  --background-accent: #f5f5f5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);