Update src/app/page.tsx

Merge version_7 into main

src/app/ai-automation/page.tsx

@@ -5,7 +5,6 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 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 ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
@@ -110,30 +109,14 @@ export default function AIAutomationPage() {
       </div>
 
       <div id="process" data-section="process">
-        <MetricCardEleven
-          title="Our AI Automation Process"
-          description="A proven methodology for designing and implementing custom automation solutions tailored to your business."
-          tag="Implementation"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          metrics={[
-            {
-              id: "1",              value: "Analyze",              title: "Process Mapping",              description: "We audit your current workflows to identify bottlenecks and automation opportunities.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategic-discovery-and-consultation-pha-1773289188610-5fa5f564.png?_wi=1",              imageAlt: "Analysis"
-            },
-            {
-              id: "2",              value: "Design",              title: "Solution Architecture",              description: "We design custom workflows that integrate seamlessly with your existing systems.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategy-development-and-planning-phase--1773289187387-9ce04fbf.png?_wi=1",              imageAlt: "Design"
-            },
-            {
-              id: "3",              value: "Build",              title: "Development & Testing",              description: "Our engineers build, test, and refine the automation systems for reliability and performance.",              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"
-            },
-            {
-              id: "4",              value: "Deploy",              title: "Launch & Training",              description: "We implement the system and train your team to manage and optimize it.",              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: "Deploy"
-            }
-          ]}
-        />
+        <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">

src/app/ai-marketing/page.tsx

@@ -5,7 +5,6 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 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 ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
@@ -110,30 +109,14 @@ export default function AIMarketingPage() {
       </div>
 
       <div id="process" data-section="process">
-        <MetricCardEleven
-          title="Our AI Marketing Implementation"
-          description="A sophisticated process for building marketing systems that scale with your business."
-          tag="Implementation"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          metrics={[
-            {
-              id: "1",              value: "Audit",              title: "Market Analysis",              description: "We analyze your market, competitors, and customer journey to identify the best marketing opportunities.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/strategic-discovery-and-consultation-pha-1773289188610-5fa5f564.png?_wi=1",              imageAlt: "Analysis"
-            },
-            {
-              id: "2",              value: "Strategy",              title: "Marketing Strategy",              description: "We develop a comprehensive marketing strategy that leverages AI and automation to reach your ideal customers.",              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"
-            },
-            {
-              id: "3",              value: "Build",              title: "System Development",              description: "We build the complete AI marketing system: landing pages, email workflows, lead scoring, and analytics.",              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"
-            },
-            {
-              id: "4",              value: "Launch",              title: "Campaign Activation",              description: "We launch your campaigns and monitor performance closely, making real-time adjustments for optimal results.",              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"
-            }
-          ]}
-        />
+        <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">

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/page.tsx

@@ -52,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"
@@ -235,4 +235,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}