Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 85376215a1 | |||
| ddb7b2b9e9 | |||
| 9c11e9402d |
238
src/app/booking/page.tsx
Normal file
238
src/app/booking/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -52,7 +52,7 @@ export default function LandingPage() {
|
|||||||
tagIcon={Sparkles}
|
tagIcon={Sparkles}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "Book a Call", href: "#contact" },
|
{ text: "Book a Call", href: "/booking" },
|
||||||
{ text: "See Our Services", href: "#services" }
|
{ text: "See Our Services", href: "#services" }
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
|
|||||||
Reference in New Issue
Block a user