Update src/app/page.tsx

Merge version_7 into main

src/app/ai-automation/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles, Zap, Award, CheckCircle } from 'lucide-react';
+
+export default function AIAutomationPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Services", id: "/" },
+            { name: "AI Automation", id: "/ai-automation" },
+            { name: "AI Marketing", id: "/ai-marketing" },
+            { name: "Website Design", id: "/website-design" },
+            { name: "Branding", id: "/branding" }
+          ]}
+          brandName="Vero AI"
+          bottomLeftText="Vero Marketing AI"
+          bottomRightText="hello@veroai.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="AI Automation & Workflows"
+          description="Custom automation workflows designed to eliminate repetitive tasks, accelerate your business processes, and free your team to focus on strategy. Smart systems that deliver real efficiency."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Service Detail"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Book a Consultation", href: "#contact" },
+            { text: "Back to Services", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png?_wi=1"
+          imageAlt="AI Automation Dashboard"
+          mediaAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="capabilities" data-section="capabilities">
+        <FeatureCardSeven
+          title="What AI Automation Does for Your Company"
+          description="Our automation workflows are tailored to your specific business needs, creating intelligent systems that handle complex processes with precision and speed."
+          tag="Key Capabilities"
+          tagIcon={CheckCircle}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="blur-reveal"
+          features={[
+            {
+              id: 1,
+              title: "Lead Capture & Qualification",              description: "Automatically capture leads from multiple channels, qualify them based on your criteria, and route them to the right team members instantly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png?_wi=1",              imageAlt: "Lead Capture"
+            },
+            {
+              id: 2,
+              title: "Workflow Automation",              description: "Build complex, multi-step workflows that handle everything from data entry to customer notifications—all without manual intervention.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png?_wi=1",              imageAlt: "Workflow Automation"
+            },
+            {
+              id: 3,
+              title: "Integration & Data Sync",              description: "Connect your entire tech stack—CRM, email, payment processors, databases—and keep data synchronized in real-time across all platforms.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png?_wi=1",              imageAlt: "Integration"
+            },
+            {
+              id: 4,
+              title: "Intelligent Reporting",              description: "Generate real-time dashboards and automated reports that give you instant visibility into key metrics and performance indicators.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png?_wi=1",              imageAlt: "Reporting"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="benefits" data-section="benefits">
+        <MetricSplitMediaAbout
+          tag="Business Impact"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          title="Measurable Results Through Automation"
+          description="Our clients experience significant improvements in efficiency, cost savings, and revenue generation. By automating repetitive tasks, your team can focus on high-value strategic work that drives real business growth."
+          metrics={[
+            { value: "70%", title: "Average Time Savings" },
+            { value: "$500K+", title: "Annual Savings Per Client" }
+          ]}
+          useInvertedBackground={true}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png?_wi=2"
+          imageAlt="Automation Results"
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
+        />
+      </div>
+
+      <div id="process" data-section="process">
+        <div className="flex flex-col items-center justify-center py-20 px-6">
+          <div className="max-w-2xl">
+            <h2 className="text-4xl font-bold mb-6 text-center">Our AI Automation Process</h2>
+            <p className="text-lg leading-relaxed text-center text-gray-700">
+              We follow a streamlined, professional approach to delivering AI automation solutions. Starting with a comprehensive analysis of your current workflows, we identify bottlenecks and opportunities for automation. From there, we design custom solutions that integrate seamlessly with your existing systems, build and rigorously test the automation frameworks, and finally implement them with full team training and support. This proven methodology ensures your automation systems are reliable, scalable, and deliver measurable results from day one.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardSixteen
+          title="Clients Powered by Automation"
+          description="Real businesses achieving remarkable results through intelligent AI automation systems."
+          tag="Success Stories"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          testimonials={[
+            {
+              id: "1",              name: "Marcus Richardson",              role: "CEO",              company: "Premium Ventures",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-confident-bus-1773289186556-a645a6b7.png?_wi=1"
+            },
+            {
+              id: "2",              name: "Sophia Chen",              role: "CMO",              company: "Luxury Brand Co",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-confident-mar-1773289186890-9d714eef.png?_wi=1"
+            },
+            {
+              id: "3",              name: "James Mitchell",              role: "Founder",              company: "Elite Solutions",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-successful-en-1773289186769-5f49b9f5.png?_wi=1"
+            }
+          ]}
+          kpiItems={[
+            { value: "70%", label: "Time Saved" },
+            { value: "50%", label: "Cost Reduction" },
+            { value: "3x", label: "Efficiency Gain" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get Started"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          title="Ready to Automate Your Business?"
+          description="Let's explore how AI automation can transform your operations. Schedule a consultation with our team to discuss your specific needs."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Schedule Consultation"
+          termsText="We respect your privacy. Unsubscribe at any time."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Vero AI"
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "AI Automation", href: "/ai-automation" },
+                { label: "AI Marketing", href: "/ai-marketing" },
+                { label: "Website Design", href: "/website-design" },
+                { label: "Branding", href: "/branding" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Home", href: "/" },
+                { label: "About", href: "/#why-vero" },
+                { label: "Contact", href: "/#contact" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Email", href: "mailto:hello@veroai.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+                { label: "Twitter", href: "https://twitter.com" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Vero Marketing AI. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/ai-marketing/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles, Zap, Award, CheckCircle } from 'lucide-react';
+
+export default function AIMarketingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Services", id: "/" },
+            { name: "AI Automation", id: "/ai-automation" },
+            { name: "AI Marketing", id: "/ai-marketing" },
+            { name: "Website Design", id: "/website-design" },
+            { name: "Branding", id: "/branding" }
+          ]}
+          brandName="Vero AI"
+          bottomLeftText="Vero Marketing AI"
+          bottomRightText="hello@veroai.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="AI Marketing Systems"
+          description="Intelligent automation frameworks that handle lead generation, nurturing, and conversion at scale. Built for brands that want to dominate their market with sophisticated, data-driven marketing strategies."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Service Detail"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Book a Consultation", href: "#contact" },
+            { text: "Back to Services", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png?_wi=1"
+          imageAlt="AI Marketing Systems Dashboard"
+          mediaAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="capabilities" data-section="capabilities">
+        <FeatureCardSeven
+          title="What AI Marketing Systems Do for Your Company"
+          description="Our marketing systems combine artificial intelligence with strategic thinking to create comprehensive marketing automation that drives growth."
+          tag="Key Capabilities"
+          tagIcon={CheckCircle}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="blur-reveal"
+          features={[
+            {
+              id: 1,
+              title: "Lead Generation & Scoring",              description: "AI-powered systems that identify and capture qualified leads, automatically score them based on engagement and fit, and route them to sales at the perfect moment.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png?_wi=1",              imageAlt: "Lead Generation"
+            },
+            {
+              id: 2,
+              title: "Email & Funnel Automation",              description: "Personalized email sequences and multi-channel nurture campaigns that adapt based on customer behavior, moving prospects from awareness to conversion.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png?_wi=1",              imageAlt: "Email Automation"
+            },
+            {
+              id: 3,
+              title: "Customer Segmentation",              description: "Intelligent segmentation based on behavior, demographics, and engagement patterns. Deliver targeted messaging to the right audience with the right message.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png?_wi=1",              imageAlt: "Segmentation"
+            },
+            {
+              id: 4,
+              title: "Analytics & Optimization",              description: "Real-time analytics dashboards showing campaign performance, conversion rates, and ROI. AI continuously tests and optimizes every element of your marketing.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png?_wi=1",              imageAlt: "Analytics"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="benefits" data-section="benefits">
+        <MetricSplitMediaAbout
+          tag="Business Impact"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          title="Results That Transform Your Revenue"
+          description="Our AI marketing systems don't just generate leads—they generate qualified, high-intent leads that convert. We've seen clients increase revenue by 3-5x while reducing customer acquisition costs by 40-60%."
+          metrics={[
+            { value: "340%", title: "Average ROI Increase" },
+            { value: "$500K+", title: "Revenue Generated Per Client" }
+          ]}
+          useInvertedBackground={true}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png?_wi=2"
+          imageAlt="Marketing Results"
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
+        />
+      </div>
+
+      <div id="process" data-section="process">
+        <div className="flex flex-col items-center justify-center py-20 px-6">
+          <div className="max-w-2xl">
+            <h2 className="text-4xl font-bold mb-6 text-center">Our AI Marketing Implementation</h2>
+            <p className="text-lg leading-relaxed text-center text-gray-700">
+              We take a sophisticated, data-driven approach to building your AI marketing system. We begin with a comprehensive market and competitive analysis to understand your landscape and opportunities. Next, we develop a tailored marketing strategy that leverages AI and automation to reach your ideal customers at scale. We then build the complete system—landing pages, email workflows, lead scoring, and analytics integration. Finally, we launch your campaigns with real-time monitoring and continuous optimization to ensure maximum performance and ROI.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardSixteen
+          title="Brands Accelerating Growth with AI"
+          description="Leading companies achieving breakthrough marketing results with our AI-powered systems."
+          tag="Success Stories"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          testimonials={[
+            {
+              id: "1",              name: "Marcus Richardson",              role: "CEO",              company: "Premium Ventures",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-confident-bus-1773289186556-a645a6b7.png?_wi=2"
+            },
+            {
+              id: "2",              name: "Sophia Chen",              role: "CMO",              company: "Luxury Brand Co",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-confident-mar-1773289186890-9d714eef.png?_wi=2"
+            },
+            {
+              id: "3",              name: "James Mitchell",              role: "Founder",              company: "Elite Solutions",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-successful-en-1773289186769-5f49b9f5.png?_wi=2"
+            }
+          ]}
+          kpiItems={[
+            { value: "340%", label: "ROI Improvement" },
+            { value: "60%", label: "CAC Reduction" },
+            { value: "3-5x", label: "Revenue Growth" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get Started"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          title="Ready to Scale Your Marketing?"
+          description="Let's build an AI marketing system that generates qualified leads and drives consistent revenue growth. Schedule a consultation to discuss your goals."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Schedule Consultation"
+          termsText="We respect your privacy. Unsubscribe at any time."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Vero AI"
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "AI Automation", href: "/ai-automation" },
+                { label: "AI Marketing", href: "/ai-marketing" },
+                { label: "Website Design", href: "/website-design" },
+                { label: "Branding", href: "/branding" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Home", href: "/" },
+                { label: "About", href: "/#why-vero" },
+                { label: "Contact", href: "/#contact" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Email", href: "mailto:hello@veroai.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+                { label: "Twitter", href: "https://twitter.com" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Vero Marketing AI. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/booking/page.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles } from 'lucide-react';
+import { useState } from 'react';
+
+export default function BookingPage() {
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    businessName: '',
+    businessService: '',
+    description: '',
+    phoneNumber: '',
+    email: ''
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('Booking form submitted:', formData);
+    // Reset form
+    setFormData({
+      firstName: '',
+      lastName: '',
+      businessName: '',
+      businessService: '',
+      description: '',
+      phoneNumber: '',
+      email: ''
+    });
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Services", id: "/" },
+            { name: "AI Automation", id: "/ai-automation" },
+            { name: "AI Marketing", id: "/ai-marketing" },
+            { name: "Website Design", id: "/website-design" },
+            { name: "Branding", id: "/branding" }
+          ]}
+          brandName="Vero AI"
+          bottomLeftText="Vero Marketing AI"
+          bottomRightText="hello@veroai.com"
+        />
+      </div>
+
+      <div id="booking" data-section="booking" className="min-h-screen py-20 px-6 flex items-center justify-center">
+        <div className="w-full max-w-2xl">
+          <div className="mb-12 text-center">
+            <h1 className="text-5xl font-bold mb-4">Book a Call</h1>
+            <p className="text-lg text-gray-600">Schedule a consultation with our team to discuss your marketing needs and goals.</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label htmlFor="firstName" className="block text-sm font-medium mb-2">
+                  First Name
+                </label>
+                <input
+                  type="text"
+                  id="firstName"
+                  name="firstName"
+                  value={formData.firstName}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 bg-white"
+                  placeholder="John"
+                />
+              </div>
+              <div>
+                <label htmlFor="lastName" className="block text-sm font-medium mb-2">
+                  Last Name
+                </label>
+                <input
+                  type="text"
+                  id="lastName"
+                  name="lastName"
+                  value={formData.lastName}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 bg-white"
+                  placeholder="Doe"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="businessName" className="block text-sm font-medium mb-2">
+                Business Name
+              </label>
+              <input
+                type="text"
+                id="businessName"
+                name="businessName"
+                value={formData.businessName}
+                onChange={handleInputChange}
+                required
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 bg-white"
+                placeholder="Your Company"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="businessService" className="block text-sm font-medium mb-2">
+                Business Service
+              </label>
+              <input
+                type="text"
+                id="businessService"
+                name="businessService"
+                value={formData.businessService}
+                onChange={handleInputChange}
+                required
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 bg-white"
+                placeholder="What service do you offer?"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="description" className="block text-sm font-medium mb-2">
+                Description of What You're Looking For
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={formData.description}
+                onChange={handleInputChange}
+                required
+                rows={5}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 bg-white"
+                placeholder="Tell us about your project and what you're looking to accomplish..."
+              />
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label htmlFor="phoneNumber" className="block text-sm font-medium mb-2">
+                  Phone Number
+                </label>
+                <input
+                  type="tel"
+                  id="phoneNumber"
+                  name="phoneNumber"
+                  value={formData.phoneNumber}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 bg-white"
+                  placeholder="(123) 456-7890"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-2">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 bg-white"
+                  placeholder="john@example.com"
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200"
+            >
+              Schedule Your Call
+            </button>
+          </form>
+
+          <p className="text-sm text-gray-500 text-center mt-6">
+            We respect your privacy. We'll only use your information to schedule your consultation.
+          </p>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Vero AI"
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "AI Automation", href: "/ai-automation" },
+                { label: "AI Marketing", href: "/ai-marketing" },
+                { label: "Website Design", href: "/website-design" },
+                { label: "Branding", href: "/branding" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Home", href: "/" },
+                { label: "Contact", href: "/#contact" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Email", href: "mailto:hello@veroai.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+                { label: "Twitter", href: "https://twitter.com" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Vero Marketing AI. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/branding/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles, Zap } from 'lucide-react';
+
+export default function BrandingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Services", id: "/services" },
+            { name: "AI Automation", id: "/ai-automation" },
+            { name: "AI Marketing", id: "/ai-marketing" },
+            { name: "Website Design", id: "/website-design" },
+            { name: "Branding", id: "/branding" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Vero AI"
+          bottomLeftText="Vero Marketing AI"
+          bottomRightText="veroai@veroaimarketing.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Strategic Branding & Creative Direction"
+          description="Build a premium brand that stands out and commands attention. From logo design to complete visual identity, we create brands that resonate with your ideal customers."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Brand Strategy"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Start Your Brand", href: "/contact" },
+            { text: "See Examples", href: "/services" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/premium-website-and-brand-design-showcas-1773289187253-99f3e4ce.png?_wi=5"
+          imageAlt="Branding & Design Showcase"
+          mediaAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <MetricCardEleven
+          title="Our Branding Services"
+          description="Complete brand development from strategy to implementation."
+          tag="Creative Solutions"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              value: "Strategy",              title: "Brand Positioning",              description: "Define your unique value proposition and market positioning",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategic-discovery-and-consultation-pha-1773289188610-5fa5f564.png?_wi=5",              imageAlt: "Brand Strategy"
+            },
+            {
+              id: "2",              value: "Design",              title: "Logo & Visual Identity",              description: "Custom logo design and comprehensive brand guidelines",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategy-development-and-planning-phase--1773289187387-9ce04fbf.png?_wi=5",              imageAlt: "Logo Design"
+            },
+            {
+              id: "3",              value: "Color",              title: "Color Palette & Typography",              description: "Strategic color psychology and typography selections",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/build-and-implementation-phase-showing-d-1773289188356-a18f1154.png?_wi=5",              imageAlt: "Design System"
+            },
+            {
+              id: "4",              value: "Creative",              title: "Marketing Collateral",              description: "Business cards, letterhead, presentation templates and more",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/launch-and-go-live-phase-showing-celebra-1773289187330-30f337d3.png?_wi=5",              imageAlt: "Collateral"
+            },
+            {
+              id: "5",              value: "Premium",              title: "Brand Guidelines",              description: "Complete documentation for consistent brand application",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/optimization-and-continuous-improvement--1773289188372-dc7422c2.png?_wi=5",              imageAlt: "Guidelines"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Ready to Brand?"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          title="Build Your Premium Brand Today"
+          description="Contact us at veroai@veroaimarketing.com or call 516-402-1199 to discuss your branding vision and get started on creating a brand that stands out."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Schedule Consultation"
+          termsText="We respect your privacy. Unsubscribe at any time."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Vero AI"
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Services", href: "/services" },
+                { label: "AI Automation", href: "/ai-automation" },
+                { label: "AI Marketing", href: "/ai-marketing" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Website Design", href: "/website-design" },
+                { label: "Branding", href: "/branding" },
+                { label: "About", href: "/about" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Email", href: "mailto:veroai@veroaimarketing.com" },
+                { label: "Phone", href: "tel:5164021199" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy", href: "#" },
+                { label: "Terms", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Vero AI Marketing. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -4,15 +4,18 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Sparkles, CheckCircle, Shield, Zap, Award, Briefcase } from 'lucide-react';
+import { Sparkles, CheckCircle, Zap, Award, Briefcase } from 'lucide-react';
 
 export default function LandingPage() {
+  const handleContactSubmit = (formData: any) => {
+    console.log('Contact form submitted:', formData);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -32,7 +35,6 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Process", id: "process" },
             { name: "Work", id: "portfolio" },
-            { name: "About", id: "why-vero" },
             { name: "Contact", id: "contact" }
           ]}
           brandName="Vero AI"
@@ -50,7 +52,7 @@ export default function LandingPage() {
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Book a Call", href: "#contact" },
+            { text: "Book a Call", href: "/booking" },
             { text: "See Our Services", href: "#services" }
           ]}
           buttonAnimation="slide-up"
@@ -73,39 +75,20 @@ export default function LandingPage() {
           features={[
             {
               id: 1,
-              title: "AI Automation and Workflows",              description: "Custom automation workflows that eliminate repetitive tasks and accelerate your business processes. Smart systems, real efficiency.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png",              imageAlt: "AI Automations"
+              title: "AI Automation and Workflows",              description: "Custom automation workflows that eliminate repetitive tasks and accelerate your business processes. Smart systems, real efficiency.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png?_wi=1",              imageAlt: "AI Automations"
             },
             {
               id: 2,
-              title: "Website Design and Development",              description: "Premium digital experiences designed to convert. Clean, fast, and strategically built for your ideal customer.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/premium-website-and-brand-design-showcas-1773289187253-99f3e4ce.png",              imageAlt: "Website Design"
+              title: "Website Design and Development",              description: "Premium digital experiences designed to convert. Clean, fast, and strategically built for your ideal customer.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/premium-website-and-brand-design-showcas-1773289187253-99f3e4ce.png?_wi=1",              imageAlt: "Website Design"
             },
             {
               id: 3,
-              title: "AI Marketing Systems",              description: "Intelligent automation frameworks that handle lead generation, nurturing, and conversion. Built for brands that want to scale efficiently.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png",              imageAlt: "AI Marketing Systems"
+              title: "AI Marketing Systems",              description: "Intelligent automation frameworks that handle lead generation, nurturing, and conversion. Built for brands that want to scale efficiently.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png?_wi=1",              imageAlt: "AI Marketing Systems"
             }
           ]}
         />
       </div>
 
-      <div id="why-vero" data-section="why-vero">
-        <MetricSplitMediaAbout
-          tag="Why Choose Vero AI"
-          tagIcon={Shield}
-          tagAnimation="slide-up"
-          title="Premium Systems for Ambitious Brands"
-          description="We don't build generic solutions. Every strategy, every design, every automation is tailored to your brand and built to deliver measurable results. We work exclusively with serious businesses that refuse to compromise on quality."
-          metrics={[
-            { value: "500+", title: "Successful Implementations" },
-            { value: "$2B+", title: "Client Revenue Generated" }
-          ]}
-          useInvertedBackground={true}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/a-sophisticated-ai-marketing-dashboard-i-1773289187082-284b3e5e.png?_wi=2"
-          imageAlt="Strategic Partnership"
-          mediaAnimation="slide-up"
-          metricsAnimation="slide-up"
-        />
-      </div>
-
       <div id="process" data-section="process">
         <MetricCardEleven
           title="Our Process"
@@ -118,19 +101,19 @@ export default function LandingPage() {
           animationType="slide-up"
           metrics={[
             {
-              id: "1",              value: "Discovery",              title: "Understanding Your Business",              description: "Deep dive into your goals, market, and competitive landscape",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategic-discovery-and-consultation-pha-1773289188610-5fa5f564.png",              imageAlt: "Discovery Phase"
+              id: "1",              value: "Discovery",              title: "Understanding Your Business",              description: "Deep dive into your goals, market, and competitive landscape",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategic-discovery-and-consultation-pha-1773289188610-5fa5f564.png?_wi=1",              imageAlt: "Discovery Phase"
             },
             {
-              id: "2",              value: "Strategy",              title: "Building Your Roadmap",              description: "Sophisticated strategy that aligns technology with business objectives",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategy-development-and-planning-phase--1773289187387-9ce04fbf.png",              imageAlt: "Strategy Phase"
+              id: "2",              value: "Strategy",              title: "Building Your Roadmap",              description: "Sophisticated strategy that aligns technology with business objectives",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategy-development-and-planning-phase--1773289187387-9ce04fbf.png?_wi=1",              imageAlt: "Strategy Phase"
             },
             {
-              id: "3",              value: "Build",              title: "Premium Implementation",              description: "Advanced systems built with precision and attention to detail",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/build-and-implementation-phase-showing-d-1773289188356-a18f1154.png",              imageAlt: "Build Phase"
+              id: "3",              value: "Build",              title: "Premium Implementation",              description: "Advanced systems built with precision and attention to detail",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/build-and-implementation-phase-showing-d-1773289188356-a18f1154.png?_wi=1",              imageAlt: "Build Phase"
             },
             {
-              id: "4",              value: "Launch",              title: "Smooth Activation",              description: "Strategic rollout designed for immediate impact and adoption",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/launch-and-go-live-phase-showing-celebra-1773289187330-30f337d3.png",              imageAlt: "Launch Phase"
+              id: "4",              value: "Launch",              title: "Smooth Activation",              description: "Strategic rollout designed for immediate impact and adoption",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/launch-and-go-live-phase-showing-celebra-1773289187330-30f337d3.png?_wi=1",              imageAlt: "Launch Phase"
             },
             {
-              id: "5",              value: "Optimize",              title: "Continuous Improvement",              description: "Ongoing refinement and optimization for sustained results",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/optimization-and-continuous-improvement--1773289188372-dc7422c2.png",              imageAlt: "Optimize Phase"
+              id: "5",              value: "Optimize",              title: "Continuous Improvement",              description: "Ongoing refinement and optimization for sustained results",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/optimization-and-continuous-improvement--1773289188372-dc7422c2.png?_wi=1",              imageAlt: "Optimize Phase"
             }
           ]}
         />
@@ -149,15 +132,15 @@ export default function LandingPage() {
           testimonials={[
             {
               id: "1",              name: "Marcus Richardson",              role: "CEO",              company: "Premium Ventures",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-confident-bus-1773289186556-a645a6b7.png"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-confident-bus-1773289186556-a645a6b7.png?_wi=3"
             },
             {
               id: "2",              name: "Sophia Chen",              role: "CMO",              company: "Luxury Brand Co",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-confident-mar-1773289186890-9d714eef.png"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-confident-mar-1773289186890-9d714eef.png?_wi=3"
             },
             {
               id: "3",              name: "James Mitchell",              role: "Founder",              company: "Elite Solutions",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-successful-en-1773289186769-5f49b9f5.png"
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/professional-portrait-of-a-successful-en-1773289186769-5f49b9f5.png?_wi=3"
             },
             {
               id: "4",              name: "Alexandra Price",              role: "VP Growth",              company: "Apex Collective",              rating: 5,
@@ -205,13 +188,14 @@ export default function LandingPage() {
           tag="Let's Talk"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          title="Let Your Brand Look as Advanced as Your Systems"
-          description="Ready to elevate your marketing? Schedule a strategy call with our team and discover how Vero AI can transform your business."
+          title="Transform Your Marketing in 30 Days"
+          description="Ready to elevate your marketing? Complete the form below and our team will reach out within 24 hours to discuss your goals."
           background={{ variant: "plain" }}
           useInvertedBackground={false}
           inputPlaceholder="Enter your email"
-          buttonText="Book Your Call"
+          buttonText="Get Started"
           termsText="We respect your privacy. Unsubscribe at any time."
+          onSubmit={handleContactSubmit}
         />
       </div>
 
@@ -228,7 +212,6 @@ export default function LandingPage() {
             },
             {
               title: "Company",              items: [
-                { label: "About", href: "#why-vero" },
                 { label: "Testimonials", href: "#testimonials" },
                 { label: "Contact", href: "#contact" }
               ]
@@ -252,4 +235,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles, CheckCircle } from 'lucide-react';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Services", id: "/services" },
+            { name: "AI Automation", id: "/ai-automation" },
+            { name: "AI Marketing", id: "/ai-marketing" },
+            { name: "Website Design", id: "/website-design" },
+            { name: "Branding", id: "/branding" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Vero AI"
+          bottomLeftText="Vero Marketing AI"
+          bottomRightText="veroai@veroaimarketing.com"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardSeven
+          title="Our Core Services"
+          description="We combine strategic thinking with advanced technology to deliver marketing systems that actually work. Each service is designed to drive real business growth."
+          tag="What We Offer"
+          tagIcon={CheckCircle}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="blur-reveal"
+          features={[
+            {
+              id: 1,
+              title: "AI Automation and Workflows",              description: "Custom automation workflows that eliminate repetitive tasks and accelerate your business processes. Smart systems, real efficiency. We build workflows that save your team 20+ hours per week.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/visual-representation-of-ai-automation-a-1773289187678-5a4ad895.png?_wi=2",              imageAlt: "AI Automations"
+            },
+            {
+              id: 2,
+              title: "Website Design and Development",              description: "Premium digital experiences designed to convert. Clean, fast, and strategically built for your ideal customer. Average client sees 150%+ improvement in conversion rates.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/premium-website-and-brand-design-showcas-1773289187253-99f3e4ce.png?_wi=2",              imageAlt: "Website Design"
+            },
+            {
+              id: 3,
+              title: "AI Marketing Systems",              description: "Intelligent automation frameworks that handle lead generation, nurturing, and conversion. Built for brands that want to scale efficiently. Generate qualified leads on autopilot.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/an-abstract-representation-of-ai-marketi-1773289187366-6f949836.png?_wi=2",              imageAlt: "AI Marketing Systems"
+            },
+            {
+              id: 4,
+              title: "Branding & Creative Direction",              description: "Strategic brand development that positions your company as a premium player in your market. Logo design, brand guidelines, and comprehensive visual identity.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/premium-website-and-brand-design-showcas-1773289187253-99f3e4ce.png?_wi=3",              imageAlt: "Branding & Creative"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Ready to Get Started?"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          title="Let's Build Your Marketing System"
+          description="Contact us at veroai@veroaimarketing.com or call 516-402-1199 to schedule a free strategy consultation and discover which services are right for your business."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Schedule Consultation"
+          termsText="We respect your privacy. Unsubscribe at any time."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Vero AI"
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Services", href: "/services" },
+                { label: "AI Automation", href: "/ai-automation" },
+                { label: "AI Marketing", href: "/ai-marketing" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Website Design", href: "/website-design" },
+                { label: "Branding", href: "/branding" },
+                { label: "About", href: "/about" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Email", href: "mailto:veroai@veroaimarketing.com" },
+                { label: "Phone", href: "tel:5164021199" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy", href: "#" },
+                { label: "Terms", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Vero AI Marketing. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #d4d4d4;
-  --primary-cta: #c0c0c0;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #d4d4d4;
-  --accent: #a9a9a9;
-  --background-accent: #808080;
+  --background: #000000;
+  --card: #f9f9f9;
+  --foreground: #a2a0a0;
+  --primary-cta: #15479c;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000000;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/website-design/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles, Zap } from 'lucide-react';
+
+export default function WebsiteDesignPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Services", id: "/services" },
+            { name: "AI Automation", id: "/ai-automation" },
+            { name: "AI Marketing", id: "/ai-marketing" },
+            { name: "Website Design", id: "/website-design" },
+            { name: "Branding", id: "/branding" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Vero AI"
+          bottomLeftText="Vero Marketing AI"
+          bottomRightText="veroai@veroaimarketing.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Premium Website Design & Development"
+          description="Beautiful, fast, and conversion-optimized websites that represent your premium brand and drive measurable business results."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Web Development"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Get a Quote", href: "/contact" },
+            { text: "See Portfolio", href: "/services" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/premium-website-and-brand-design-showcas-1773289187253-99f3e4ce.png?_wi=4"
+          imageAlt="Website Design Showcase"
+          mediaAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <MetricCardEleven
+          title="What We Deliver"
+          description="Every website is strategically designed to convert and built to perform."
+          tag="Our Approach"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              value: "150%+",              title: "Average Conversion Increase",              description: "Typical improvement in qualified leads from redesigned sites",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategic-discovery-and-consultation-pha-1773289188610-5fa5f564.png?_wi=4",              imageAlt: "Conversions"
+            },
+            {
+              id: "2",              value: "<2s",              title: "Average Load Time",              description: "Lightning-fast performance optimized for user experience",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategy-development-and-planning-phase--1773289187387-9ce04fbf.png?_wi=4",              imageAlt: "Performance"
+            },
+            {
+              id: "3",              value: "100%",              title: "Mobile Optimized",              description: "Responsive design perfect on all devices and screen sizes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/build-and-implementation-phase-showing-d-1773289188356-a18f1154.png?_wi=4",              imageAlt: "Mobile"
+            },
+            {
+              id: "4",              value: "SEO",              title: "Built for Search Ranking",              description: "Technical SEO best practices for organic visibility",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/launch-and-go-live-phase-showing-celebra-1773289187330-30f337d3.png?_wi=4",              imageAlt: "SEO"
+            },
+            {
+              id: "5",              value: "Premium",              title: "Brand Integration",              description: "Seamless alignment with your brand identity and messaging",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/optimization-and-continuous-improvement--1773289188372-dc7422c2.png?_wi=4",              imageAlt: "Branding"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Ready for a New Website?"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          title="Let's Build Something Amazing"
+          description="Contact us at veroai@veroaimarketing.com or call 516-402-1199 to discuss your website needs and get started on your digital transformation."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Get a Free Quote"
+          termsText="We respect your privacy. Unsubscribe at any time."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Vero AI"
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Services", href: "/services" },
+                { label: "AI Automation", href: "/ai-automation" },
+                { label: "AI Marketing", href: "/ai-marketing" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "Website Design", href: "/website-design" },
+                { label: "Branding", href: "/branding" },
+                { label: "About", href: "/about" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Email", href: "mailto:veroai@veroaimarketing.com" },
+                { label: "Phone", href: "tel:5164021199" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy", href: "#" },
+                { label: "Terms", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Vero AI Marketing. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}