Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -10,16 +10,16 @@ import { TrendingUp, Users, Clock, DollarSign, Zap } from "lucide-react";
 
 export default function AboutPage() {
   const navItems = [
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Services", id: "services" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "#" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "#" },
@@ -27,8 +27,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Contact", href: "/contact" },
@@ -36,8 +35,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Industries",
-      items: [
+      title: "Industries",      items: [
         { label: "Dental Practices", href: "/industries" },
         { label: "Salons & Spas", href: "/industries" },
         { label: "Restaurants", href: "/industries" },
@@ -45,8 +43,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -71,7 +68,7 @@ export default function AboutPage() {
         <NavbarLayoutFloatingInline
           brandName="Romèra"
           navItems={navItems}
-          button={{ text: "Book a Demo", href: "#contact" }}
+          button={{ text: "Book a Demo", href: "/contact" }}
           animateOnLoad={true}
         />
       </div>
@@ -84,7 +81,7 @@ export default function AboutPage() {
           tag="Our Story"
           tagIcon={Zap}
           tagAnimation="slide-up"
-          buttons={[{ text: "Book a Demo", href: "#contact" }]}
+          buttons={[{ text: "Book a Demo", href: "/contact" }]}
           buttonAnimation="slide-up"
           mediaAnimation="none"
         />
@@ -113,4 +110,4 @@ export default function AboutPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -4,21 +4,22 @@ import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import ContactForm from "@/components/form/ContactForm";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Zap } from "lucide-react";
+import { Zap, Mail } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Services", id: "services" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "#" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "#" },
@@ -26,8 +27,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Contact", href: "/contact" },
@@ -35,8 +35,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Industries",
-      items: [
+      title: "Industries",      items: [
         { label: "Dental Practices", href: "/industries" },
         { label: "Salons & Spas", href: "/industries" },
         { label: "Restaurants", href: "/industries" },
@@ -44,8 +43,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -70,7 +68,7 @@ export default function ContactPage() {
         <NavbarLayoutFloatingInline
           brandName="Romèra"
           navItems={navItems}
-          button={{ text: "Book a Demo", href: "#contact" }}
+          button={{ text: "Book a Demo", href: "/contact" }}
           animateOnLoad={true}
         />
       </div>
@@ -84,22 +82,26 @@ export default function ContactPage() {
           tagIcon={Zap}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Book Your Demo Now", href: "#contact" },
-            { text: "Schedule a Call", href: "#contact" },
+            { text: "Book Your Demo Now", href: "#contact-form" },
+            { text: "Schedule a Call", href: "#contact-form" },
           ]}
           buttonAnimation="slide-up"
           mediaAnimation="none"
         />
       </div>
 
-      <div id="contact-section" data-section="contact-section">
-        <HeroBillboard
+      <div id="contact-form" data-section="contact-form">
+        <ContactForm
           title="Get in Touch with Our Team"
           description="Whether you have questions about our AI automation platform or want to see a live demo, our team is ready to help you transform your business."
-          background={{ variant: "gradient-bars" }}
-          buttons={[{ text: "Start Your Demo Today", href: "#" }]}
-          buttonAnimation="slide-up"
-          mediaAnimation="none"
+          tag="Contact Us"
+          tagIcon={Mail}
+          inputPlaceholder="Enter your email"
+          buttonText="Send"
+          termsText="By contacting us, you agree to our Terms and Conditions."
+          onSubmit={(email) => console.log("Contact from:", email)}
+          centered={true}
+          useInvertedBackground={false}
         />
       </div>
 
@@ -112,4 +114,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/how-it-works/page.tsx

@@ -10,16 +10,16 @@ import { Zap } from "lucide-react";
 
 export default function HowItWorksPage() {
   const navItems = [
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Services", id: "services" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "#" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "#" },
@@ -27,8 +27,7 @@ export default function HowItWorksPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Contact", href: "/contact" },
@@ -36,8 +35,7 @@ export default function HowItWorksPage() {
       ],
     },
     {
-      title: "Industries",
-      items: [
+      title: "Industries",      items: [
         { label: "Dental Practices", href: "/industries" },
         { label: "Salons & Spas", href: "/industries" },
         { label: "Restaurants", href: "/industries" },
@@ -45,8 +43,7 @@ export default function HowItWorksPage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -71,7 +68,7 @@ export default function HowItWorksPage() {
         <NavbarLayoutFloatingInline
           brandName="Romèra"
           navItems={navItems}
-          button={{ text: "Book a Demo", href: "#contact" }}
+          button={{ text: "Book a Demo", href: "/contact" }}
           animateOnLoad={true}
         />
       </div>
@@ -84,7 +81,7 @@ export default function HowItWorksPage() {
           tag="Complete Process"
           tagIcon={Zap}
           tagAnimation="slide-up"
-          buttons={[{ text: "Book a Demo", href: "#contact" }]}
+          buttons={[{ text: "Book a Demo", href: "/contact" }]}
           buttonAnimation="slide-up"
           mediaAnimation="none"
         />
@@ -97,29 +94,14 @@ export default function HowItWorksPage() {
           textboxLayout="default"
           features={[
             {
-              id: "01",
-              title: "Lead Capture - Phone & Web",
-              description:
-                "Customers call your business or fill out web forms. Our system instantly captures every interaction with full context and customer details.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/a-sleek-modern-ai-automation-dashboard-i-1772616014011-f54bc382.png?_wi=2",
-              imageAlt: "Lead Capture",
-            },
+              id: "01",              title: "Lead Capture - Phone & Web",              description:
+                "Customers call your business or fill out web forms. Our system instantly captures every interaction with full context and customer details.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/a-sleek-modern-ai-automation-dashboard-i-1772616014011-f54bc382.png?_wi=2",              imageAlt: "Lead Capture"},
             {
-              id: "02",
-              title: "AI Responds Instantly",
-              description:
-                "Our AI phone assistant answers calls in seconds. It understands customer needs, answers questions, and begins booking the appointment right away.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/modern-icon-illustration-of-an-ai-phone--1772616011904-5ce4a475.png?_wi=1",
-              imageAlt: "AI Response",
-            },
+              id: "02",              title: "AI Responds Instantly",              description:
+                "Our AI phone assistant answers calls in seconds. It understands customer needs, answers questions, and begins booking the appointment right away.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/modern-icon-illustration-of-an-ai-phone--1772616011904-5ce4a475.png?_wi=1",              imageAlt: "AI Response"},
             {
-              id: "03",
-              title: "Appointment Confirmed",
-              description:
-                "The system checks availability in real-time and books the appointment into your calendar. Customer receives instant SMS and email confirmation.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/clean-illustration-of-an-automated-appoi-1772616012781-fac0203e.png?_wi=1",
-              imageAlt: "Confirmation",
-            },
+              id: "03",              title: "Appointment Confirmed",              description:
+                "The system checks availability in real-time and books the appointment into your calendar. Customer receives instant SMS and email confirmation.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/clean-illustration-of-an-automated-appoi-1772616012781-fac0203e.png?_wi=1",              imageAlt: "Confirmation"},
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -134,29 +116,14 @@ export default function HowItWorksPage() {
           textboxLayout="default"
           features={[
             {
-              id: "01",
-              title: "Smart Reminders",
-              description:
-                "Automated SMS and email reminders sent at optimal times. Customers get friendly notifications reducing no-shows by up to 60%.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/sms-and-email-reminder-notifications-int-1772616013213-506475ca.png?_wi=1",
-              imageAlt: "Reminders",
-            },
+              id: "01",              title: "Smart Reminders",              description:
+                "Automated SMS and email reminders sent at optimal times. Customers get friendly notifications reducing no-shows by up to 60%.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/sms-and-email-reminder-notifications-int-1772616013213-506475ca.png?_wi=1",              imageAlt: "Reminders"},
             {
-              id: "02",
-              title: "CRM Pipeline Management",
-              description:
-                "Every lead flows through your automated CRM pipeline. Track status, engagement, and follow-ups in real-time from your dashboard.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/crm-pipeline-visualization-showing-custo-1772616015814-67975784.png?_wi=1",
-              imageAlt: "CRM Pipeline",
-            },
+              id: "02",              title: "CRM Pipeline Management",              description:
+                "Every lead flows through your automated CRM pipeline. Track status, engagement, and follow-ups in real-time from your dashboard.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/crm-pipeline-visualization-showing-custo-1772616015814-67975784.png?_wi=1",              imageAlt: "CRM Pipeline"},
             {
-              id: "03",
-              title: "Complete Analytics Dashboard",
-              description:
-                "Real-time metrics show calls handled, appointment rates, no-show reduction, and ROI. Make data-driven business decisions instantly.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/comprehensive-analytics-dashboard-showin-1772616014429-1b98c036.png?_wi=1",
-              imageAlt: "Analytics",
-            },
+              id: "03",              title: "Complete Analytics Dashboard",              description:
+                "Real-time metrics show calls handled, appointment rates, no-show reduction, and ROI. Make data-driven business decisions instantly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/comprehensive-analytics-dashboard-showin-1772616014429-1b98c036.png?_wi=1",              imageAlt: "Analytics"},
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -173,4 +140,4 @@ export default function HowItWorksPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/industries/page.tsx

@@ -10,16 +10,16 @@ import { Zap } from "lucide-react";
 
 export default function IndustriesPage() {
   const navItems = [
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Services", id: "services" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "#" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "#" },
@@ -27,8 +27,7 @@ export default function IndustriesPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Contact", href: "/contact" },
@@ -36,8 +35,7 @@ export default function IndustriesPage() {
       ],
     },
     {
-      title: "Industries",
-      items: [
+      title: "Industries",      items: [
         { label: "Dental Practices", href: "/industries" },
         { label: "Salons & Spas", href: "/industries" },
         { label: "Restaurants", href: "/industries" },
@@ -45,8 +43,7 @@ export default function IndustriesPage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -71,7 +68,7 @@ export default function IndustriesPage() {
         <NavbarLayoutFloatingInline
           brandName="Romèra"
           navItems={navItems}
-          button={{ text: "Book a Demo", href: "#contact" }}
+          button={{ text: "Book a Demo", href: "/contact" }}
           animateOnLoad={true}
         />
       </div>
@@ -84,7 +81,7 @@ export default function IndustriesPage() {
           tag="Industry Solutions"
           tagIcon={Zap}
           tagAnimation="slide-up"
-          buttons={[{ text: "Book a Demo", href: "#contact" }]}
+          buttons={[{ text: "Book a Demo", href: "/contact" }]}
           buttonAnimation="slide-up"
           mediaAnimation="none"
         />
@@ -97,15 +94,7 @@ export default function IndustriesPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           names={[
-            "Dental Clinics",
-            "Medical Practices",
-            "Barbershops",
-            "Hair Salons",
-            "Restaurants",
-            "Real Estate Offices",
-            "Fitness Studios",
-            "Legal Offices",
-          ]}
+            "Dental Clinics",            "Medical Practices",            "Barbershops",            "Hair Salons",            "Restaurants",            "Real Estate Offices",            "Fitness Studios",            "Legal Offices"]}
           showCard={true}
           speed={35}
         />
@@ -120,4 +109,4 @@ export default function IndustriesPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/layout.tsx

@@ -1,41 +1,32 @@
 import type { Metadata } from "next";
-import { Source_Sans_3 } from "next/font/google";
+import { Playfair_Display, Source_Sans_3 } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
+const playfairDisplay = Playfair_Display({
+  variable: "--font-playfair-display",  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800", "900"],
+});
+
 const sourceSans3 = Source_Sans_3({
-  variable: "--font-source-sans-3",
-  subsets: ["latin"],
+  variable: "--font-source-sans-3",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Romèra | AI Automation for Appointment Bookings",
-  description: "Turn missed calls into booked appointments with AI automation. 24/7 customer communication, intelligent booking, and lead capture for local service businesses.",
-  keywords: "AI automation, appointment booking, lead capture, customer communication, dental, salons, restaurants, real estate automation",
-  robots: {
+  title: "Romèra | AI Automation for Appointment Bookings",  description: "Turn missed calls into booked appointments with AI automation. 24/7 customer communication, intelligent booking, and lead capture for local service businesses.",  keywords: "AI automation, appointment booking, lead capture, customer communication, dental, salons, restaurants, real estate automation",  robots: {
     index: true,
     follow: true,
   },
   openGraph: {
-    title: "Romèra - AI Automation for Appointment Bookings",
-    description: "Stop losing appointments. Automate calls, bookings, and reminders with AI. Perfect for dentists, salons, restaurants, and local services.",
-    siteName: "Romèra",
-    type: "website",
-    images: [
+    title: "Romèra - AI Automation for Appointment Bookings",    description: "Stop losing appointments. Automate calls, bookings, and reminders with AI. Perfect for dentists, salons, restaurants, and local services.",    siteName: "Romèra",    type: "website",    images: [
       {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/a-sleek-modern-ai-automation-dashboard-i-1772616014011-f54bc382.png",
-        alt: "Romèra AI Automation Dashboard",
-      },
+        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/a-sleek-modern-ai-automation-dashboard-i-1772616014011-f54bc382.png",        alt: "Romèra AI Automation Dashboard"},
     ],
   },
   twitter: {
-    card: "summary_large_image",
-    title: "Romèra - AI Automation for Appointment Bookings",
-    description: "Turn missed calls into booked appointments. 24/7 AI automation for local service businesses.",
-    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/a-sleek-modern-ai-automation-dashboard-i-1772616014011-f54bc382.png",
-    ],
+    card: "summary_large_image",    title: "Romèra - AI Automation for Appointment Bookings",    description: "Turn missed calls into booked appointments. 24/7 AI automation for local service businesses.",    images: [
+      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/a-sleek-modern-ai-automation-dashboard-i-1772616014011-f54bc382.png"],
   },
 };
 
@@ -47,7 +38,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${sourceSans3.variable} antialiased`}>
+        <body className={`${playfairDisplay.variable} ${sourceSans3.variable} antialiased`}>
           <Tag />
           {children}
         
@@ -1421,4 +1412,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -14,16 +14,16 @@ import { Zap, TrendingUp, Users, Clock, DollarSign, Phone, Brain, CheckCircle, Q
 
 export default function HomePage() {
   const navItems = [
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Services", id: "services" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "#" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "#" },
@@ -31,8 +31,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Contact", href: "/contact" },
@@ -40,8 +39,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Industries",
-      items: [
+      title: "Industries",      items: [
         { label: "Dental Practices", href: "/industries" },
         { label: "Salons & Spas", href: "/industries" },
         { label: "Restaurants", href: "/industries" },
@@ -49,8 +47,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -75,26 +72,26 @@ export default function HomePage() {
         <NavbarLayoutFloatingInline
           brandName="Romèra"
           navItems={navItems}
-          button={{ text: "Book a Demo", href: "#contact" }}
+          button={{ text: "Book a Demo", href: "/contact" }}
           animateOnLoad={true}
         />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroBillboard
-          title="Turn missed calls into booked appointments with AI automation."
+          title="Turn missed calls into booked appointments."
           description="We build automated communication systems that capture leads, book appointments and follow up with customers — 24/7."
           background={{ variant: "sparkles-gradient" }}
           tag="AI-Powered Automation"
           tagIcon={Zap}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Book a Demo", href: "#contact" },
-            { text: "See How It Works", href: "#how-it-works" },
+            { text: "Book a Demo", href: "/contact" },
+            { text: "See How It Works", href: "/how-it-works" },
           ]}
           buttonAnimation="slide-up"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/a-sleek-modern-ai-automation-dashboard-i-1772616014011-f54bc382.png?_wi=1"
-          imageAlt="AI Automation Dashboard"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/uploaded-1772616716219-in40uuml.png"
+          imageAlt="Romèra AI Automation Logo"
           mediaAnimation="slide-up"
         />
       </div>
@@ -106,26 +103,11 @@ export default function HomePage() {
           textboxLayout="default"
           features={[
             {
-              id: "01",
-              title: "Missed Calls Cost Money",
-              description: "40% of customers never call back after getting voicemail. You lose leads while staff are busy.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/illustration-showing-a-frustrated-busine-1772616012371-c1e7fdbb.png",
-              imageAlt: "Missed Calls",
-            },
+              id: "01",              title: "Missed Calls Cost Money",              description: "40% of customers never call back after getting voicemail. You lose leads while staff are busy.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/illustration-showing-a-frustrated-busine-1772616012371-c1e7fdbb.png",              imageAlt: "Missed Calls"},
             {
-              id: "02",
-              title: "No-Shows Hurt Revenue",
-              description: "Manual reminders fail. Automated SMS & email reminders reduce no-shows by up to 60%.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/visual-representation-of-appointment-no--1772616012421-0acac2aa.png",
-              imageAlt: "No-Shows",
-            },
+              id: "02",              title: "No-Shows Hurt Revenue",              description: "Manual reminders fail. Automated SMS & email reminders reduce no-shows by up to 60%.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/visual-representation-of-appointment-no--1772616012421-0acac2aa.png",              imageAlt: "No-Shows"},
             {
-              id: "03",
-              title: "Manual Scheduling Wastes Time",
-              description: "Booking appointments manually takes hours per week. AI handles it instantly while you focus on service delivery.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/illustration-of-a-business-owner-manuall-1772616014703-299e6a07.png",
-              imageAlt: "Manual Scheduling",
-            },
+              id: "03",              title: "Manual Scheduling Wastes Time",              description: "Booking appointments manually takes hours per week. AI handles it instantly while you focus on service delivery.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/illustration-of-a-business-owner-manuall-1772616014703-299e6a07.png",              imageAlt: "Manual Scheduling"},
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -140,23 +122,14 @@ export default function HomePage() {
           textboxLayout="default"
           metrics={[
             {
-              id: "1",
-              icon: Phone,
-              title: "Step 1: Capture",
-              value: "Calls & Forms",
-            },
+              id: "1",              icon: Phone,
+              title: "Step 1: Capture",              value: "Calls & Forms"},
             {
-              id: "2",
-              icon: Brain,
-              title: "Step 2: AI Responds",
-              value: "Books Instantly",
-            },
+              id: "2",              icon: Brain,
+              title: "Step 2: AI Responds",              value: "Books Instantly"},
             {
-              id: "3",
-              icon: CheckCircle,
-              title: "Step 3: Automated Follow-up",
-              value: "Reminders Sent",
-            },
+              id: "3",              icon: CheckCircle,
+              title: "Step 3: Automated Follow-up",              value: "Reminders Sent"},
           ]}
           animationType="slide-up"
           useInvertedBackground={false}
@@ -184,15 +157,7 @@ export default function HomePage() {
           textboxLayout="default"
           useInvertedBackground={false}
           names={[
-            "Dental Clinics",
-            "Medical Practices",
-            "Barbershops",
-            "Hair Salons",
-            "Restaurants",
-            "Real Estate Offices",
-            "Fitness Studios",
-            "Legal Offices",
-          ]}
+            "Dental Clinics",            "Medical Practices",            "Barbershops",            "Hair Salons",            "Restaurants",            "Real Estate Offices",            "Fitness Studios",            "Legal Offices"]}
           showCard={true}
           speed={35}
         />
@@ -207,65 +172,29 @@ export default function HomePage() {
           showRating={true}
           testimonials={[
             {
-              id: "1",
-              name: "Dr. Sarah Mitchell",
-              handle: "@sarahdental",
-              testimonial:
-                "Romèra cut our missed appointments in half within the first month. Our team can actually focus on patient care instead of answering phones.",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-female-dentis-1772616012808-1b3f0132.png",
-              imageAlt: "Dr. Sarah Mitchell",
-            },
+              id: "1",              name: "Dr. Sarah Mitchell",              handle: "@sarahdental",              testimonial:
+                "Romèra cut our missed appointments in half within the first month. Our team can actually focus on patient care instead of answering phones.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-female-dentis-1772616012808-1b3f0132.png",              imageAlt: "Dr. Sarah Mitchell"},
             {
-              id: "2",
-              name: "Marco Rossi",
-              handle: "@marcobarber",
-              testimonial:
-                "The AI answers calls while we're with clients. No more lost bookings. Revenue is up 40% and we're not even trying harder.",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-male-barber-i-1772616012181-67c16658.png",
-              imageAlt: "Marco Rossi",
-            },
+              id: "2",              name: "Marco Rossi",              handle: "@marcobarber",              testimonial:
+                "The AI answers calls while we're with clients. No more lost bookings. Revenue is up 40% and we're not even trying harder.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-male-barber-i-1772616012181-67c16658.png",              imageAlt: "Marco Rossi"},
             {
-              id: "3",
-              name: "Jessica Chen",
-              handle: "@jessicasalon",
-              testimonial:
-                "Setup was painless and support is incredible. The system pays for itself in week one with the appointments we recover.",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-female-salon--1772616011953-dd36dd11.png",
-              imageAlt: "Jessica Chen",
-            },
+              id: "3",              name: "Jessica Chen",              handle: "@jessicasalon",              testimonial:
+                "Setup was painless and support is incredible. The system pays for itself in week one with the appointments we recover.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-female-salon--1772616011953-dd36dd11.png",              imageAlt: "Jessica Chen"},
             {
-              id: "4",
-              name: "Tom Bradley",
-              handle: "@tombradley_realestate",
-              testimonial:
-                "As a real estate agent, I was losing leads constantly. Romèra's AI now books my consultations automatically. Game changer.",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-male-real-est-1772616011726-917aa582.png",
-              imageAlt: "Tom Bradley",
-            },
+              id: "4",              name: "Tom Bradley",              handle: "@tombradley_realestate",              testimonial:
+                "As a real estate agent, I was losing leads constantly. Romèra's AI now books my consultations automatically. Game changer.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-male-real-est-1772616011726-917aa582.png",              imageAlt: "Tom Bradley"},
             {
-              id: "5",
-              name: "Priya Patel",
-              handle: "@priyaclinic",
-              testimonial:
-                "The dashboard shows exactly what's happening. I can see every interaction, every booking, every reminder. Total transparency and control.",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-female-clinic-1772616012202-4f191e47.png",
-              imageAlt: "Priya Patel",
-            },
+              id: "5",              name: "Priya Patel",              handle: "@priyaclinic",              testimonial:
+                "The dashboard shows exactly what's happening. I can see every interaction, every booking, every reminder. Total transparency and control.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-female-clinic-1772616012202-4f191e47.png",              imageAlt: "Priya Patel"},
             {
-              id: "6",
-              name: "Alex Gomez",
-              handle: "@alexfitnessco",
-              testimonial:
-                "The SMS reminders alone reduced our no-shows from 25% to 8%. Our gym is running so much more efficiently now.",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-male-fitness--1772616014715-f0b2ca88.png",
-              imageAlt: "Alex Gomez",
-            },
+              id: "6",              name: "Alex Gomez",              handle: "@alexfitnessco",              testimonial:
+                "The SMS reminders alone reduced our no-shows from 25% to 8%. Our gym is running so much more efficiently now.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/professional-headshot-of-a-male-fitness--1772616014715-f0b2ca88.png",              imageAlt: "Alex Gomez"},
           ]}
           animationType="slide-up"
         />
@@ -280,4 +209,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -4,22 +4,22 @@ import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
+import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
 import { Zap, Rocket, Sparkles, Crown } from "lucide-react";
 
 export default function PricingPage() {
   const navItems = [
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Services", id: "services" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "#" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "#" },
@@ -27,8 +27,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Contact", href: "/contact" },
@@ -36,8 +35,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Industries",
-      items: [
+      title: "Industries",      items: [
         { label: "Dental Practices", href: "/industries" },
         { label: "Salons & Spas", href: "/industries" },
         { label: "Restaurants", href: "/industries" },
@@ -45,8 +43,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -71,7 +68,7 @@ export default function PricingPage() {
         <NavbarLayoutFloatingInline
           brandName="Romèra"
           navItems={navItems}
-          button={{ text: "Book a Demo", href: "#contact" }}
+          button={{ text: "Book a Demo", href: "/contact" }}
           animateOnLoad={true}
         />
       </div>
@@ -84,67 +81,36 @@ export default function PricingPage() {
           tag="Flexible Plans"
           tagIcon={Zap}
           tagAnimation="slide-up"
-          buttons={[{ text: "Book a Demo", href: "#contact" }]}
+          buttons={[{ text: "Book a Demo", href: "/contact" }]}
           buttonAnimation="slide-up"
           mediaAnimation="none"
         />
       </div>
 
       <div id="pricing" data-section="pricing">
-        <PricingCardOne
+        <PricingCardEight
           title="Transparent Pricing for Every Stage"
           description="Choose the package that fits your business. All plans include 24/7 AI automation and priority support."
           textboxLayout="default"
           useInvertedBackground={false}
           plans={[
             {
-              id: "starter",
-              badge: "Getting Started",
-              badgeIcon: Rocket,
-              price: "€2,500 + €397/mo",
-              subtitle: "Perfect for small service businesses ready to automate leads",
+              id: "starter",              badge: "Getting Started",              badgeIcon: Rocket,
+              price: "€2,500 + €397/mo",              subtitle: "Perfect for small service businesses ready to automate leads",              buttons: [{ text: "Get Started", href: "/contact" }],
               features: [
-                "Lead Capture Website",
-                "AI Lead Form Handler",
-                "Basic CRM Pipeline",
-                "Email Notifications",
-                "Mobile Dashboard",
-                "7-day Setup",
-              ],
+                "Lead Capture Website",                "AI Lead Form Handler",                "Basic CRM Pipeline",                "Email Notifications",                "Mobile Dashboard",                "7-day Setup"],
             },
             {
-              id: "growth",
-              badge: "Most Popular",
-              badgeIcon: Sparkles,
-              price: "€5,000 + €750/mo",
-              subtitle: "For growing businesses scaling their automation",
+              id: "growth",              badge: "Most Popular",              badgeIcon: Sparkles,
+              price: "€5,000 + €750/mo",              subtitle: "For growing businesses scaling their automation",              buttons: [{ text: "Get Started", href: "/contact" }],
               features: [
-                "Everything in Starter",
-                "AI Phone Assistant",
-                "Automated SMS Reminders",
-                "Email Reminder Sequences",
-                "Advanced Pipeline Automation",
-                "Customizable Workflows",
-                "Priority Support",
-                "14-day Setup",
-              ],
+                "Everything in Starter",                "AI Phone Assistant",                "Automated SMS Reminders",                "Email Reminder Sequences",                "Advanced Pipeline Automation",                "Customizable Workflows",                "Priority Support",                "14-day Setup"],
             },
             {
-              id: "elite",
-              badge: "Premium",
-              badgeIcon: Crown,
-              price: "€8,000 + €1,250/mo",
-              subtitle: "For established businesses maximizing every booking",
+              id: "elite",              badge: "Premium",              badgeIcon: Crown,
+              price: "€8,000 + €1,250/mo",              subtitle: "For established businesses maximizing every booking",              buttons: [{ text: "Get Started", href: "/contact" }],
               features: [
-                "Everything in Growth",
-                "Multi-Channel AI Assistant",
-                "Advanced CRM Integration",
-                "Predictive Analytics",
-                "Custom API Access",
-                "Dedicated Account Manager",
-                "Monthly Optimization Sessions",
-                "21-day Setup",
-              ],
+                "Everything in Growth",                "Multi-Channel AI Assistant",                "Advanced CRM Integration",                "Predictive Analytics",                "Custom API Access",                "Dedicated Account Manager",                "Monthly Optimization Sessions",                "21-day Setup"],
             },
           ]}
           animationType="slide-up"
@@ -160,4 +126,4 @@ export default function PricingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -10,16 +10,16 @@ import { Zap } from "lucide-react";
 
 export default function ServicesPage() {
   const navItems = [
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Services", id: "services" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "#" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "#" },
@@ -27,8 +27,7 @@ export default function ServicesPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Contact", href: "/contact" },
@@ -36,8 +35,7 @@ export default function ServicesPage() {
       ],
     },
     {
-      title: "Industries",
-      items: [
+      title: "Industries",      items: [
         { label: "Dental Practices", href: "/industries" },
         { label: "Salons & Spas", href: "/industries" },
         { label: "Restaurants", href: "/industries" },
@@ -45,8 +43,7 @@ export default function ServicesPage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -71,7 +68,7 @@ export default function ServicesPage() {
         <NavbarLayoutFloatingInline
           brandName="Romèra"
           navItems={navItems}
-          button={{ text: "Book a Demo", href: "#contact" }}
+          button={{ text: "Book a Demo", href: "/contact" }}
           animateOnLoad={true}
         />
       </div>
@@ -84,7 +81,7 @@ export default function ServicesPage() {
           tag="Services & Features"
           tagIcon={Zap}
           tagAnimation="slide-up"
-          buttons={[{ text: "Book a Demo", href: "#contact" }]}
+          buttons={[{ text: "Book a Demo", href: "/contact" }]}
           buttonAnimation="slide-up"
           mediaAnimation="none"
         />
@@ -98,47 +95,17 @@ export default function ServicesPage() {
           useInvertedBackground={true}
           products={[
             {
-              id: "1",
-              name: "AI Phone Assistant",
-              price: "Included",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/modern-icon-illustration-of-an-ai-phone--1772616011904-5ce4a475.png?_wi=2",
-              imageAlt: "AI Phone Assistant",
-            },
+              id: "1",              name: "AI Phone Assistant",              price: "Included",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/modern-icon-illustration-of-an-ai-phone--1772616011904-5ce4a475.png?_wi=2",              imageAlt: "AI Phone Assistant"},
             {
-              id: "2",
-              name: "Automated Booking",
-              price: "Included",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/clean-illustration-of-an-automated-appoi-1772616012781-fac0203e.png?_wi=2",
-              imageAlt: "Automated Booking",
-            },
+              id: "2",              name: "Automated Booking",              price: "Included",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/clean-illustration-of-an-automated-appoi-1772616012781-fac0203e.png?_wi=2",              imageAlt: "Automated Booking"},
             {
-              id: "3",
-              name: "CRM Pipeline System",
-              price: "Included",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/crm-pipeline-visualization-showing-custo-1772616015814-67975784.png?_wi=2",
-              imageAlt: "CRM Pipeline",
-            },
+              id: "3",              name: "CRM Pipeline System",              price: "Included",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/crm-pipeline-visualization-showing-custo-1772616015814-67975784.png?_wi=2",              imageAlt: "CRM Pipeline"},
             {
-              id: "4",
-              name: "SMS & Email Reminders",
-              price: "Included",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/sms-and-email-reminder-notifications-int-1772616013213-506475ca.png?_wi=2",
-              imageAlt: "Reminders",
-            },
+              id: "4",              name: "SMS & Email Reminders",              price: "Included",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/sms-and-email-reminder-notifications-int-1772616013213-506475ca.png?_wi=2",              imageAlt: "Reminders"},
             {
-              id: "5",
-              name: "Lead Capture Website",
-              price: "Included",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/modern-lead-capture-website-template-wit-1772616014607-6c94ba3c.png",
-              imageAlt: "Lead Capture",
-            },
+              id: "5",              name: "Lead Capture Website",              price: "Included",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/modern-lead-capture-website-template-wit-1772616014607-6c94ba3c.png",              imageAlt: "Lead Capture"},
             {
-              id: "6",
-              name: "Dashboard & Reporting",
-              price: "Included",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/comprehensive-analytics-dashboard-showin-1772616014429-1b98c036.png?_wi=2",
-              imageAlt: "Dashboard",
-            },
+              id: "6",              name: "Dashboard & Reporting",              price: "Included",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQa0XDiPrZb0VqVlNL1FosFpos/comprehensive-analytics-dashboard-showin-1772616014429-1b98c036.png?_wi=2",              imageAlt: "Dashboard"},
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -150,7 +117,7 @@ export default function ServicesPage() {
           title="Ready to Transform Your Business?"
           description="See all of these services in action. Book a personalized demo with our team and discover how much revenue you can capture."
           background={{ variant: "radial-gradient" }}
-          buttons={[{ text: "Book Your Demo Now", href: "#contact" }]}
+          buttons={[{ text: "Book Your Demo Now", href: "/contact" }]}
           buttonAnimation="slide-up"
           mediaAnimation="none"
         />
@@ -165,4 +132,4 @@ export default function ServicesPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

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

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #0a0a0a;;
-  --card: #1a1a1a;;
-  --foreground: #f5f5f5;;
-  --primary-cta: #dfff1c;;
-  --secondary-cta: #1a1a1a;;
-  --accent: #dfff1c;;
-  --background-accent: #5d6b00;; */
+  /* --background: #FDFDFD;;
+  --card: #F8F7F7;;
+  --foreground: #2b2b2b;;
+  --primary-cta: #CEB28F;;
+  --secondary-cta: #F8F7F7;;
+  --accent: #EDD2A3;;
+  --background-accent: #AF8E67;; */
 
-  --background: #0a0a0a;;
-  --card: #1a1a1a;;
-  --foreground: #f5f5f5;;
-  --primary-cta: #dfff1c;;
+  --background: #FDFDFD;;
+  --card: #F8F7F7;;
+  --foreground: #2b2b2b;;
+  --primary-cta: #CEB28F;;
   --primary-cta-text: #0a0a0a;;
-  --secondary-cta: #1a1a1a;;
+  --secondary-cta: #F8F7F7;;
   --secondary-cta-text: #ffffff;;
-  --accent: #dfff1c;;
-  --background-accent: #5d6b00;;
+  --accent: #EDD2A3;;
+  --background-accent: #AF8E67;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);