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>
   );
-}
+}