Add src/app/contact/page.tsx
This commit is contained in:
192
src/app/contact/page.tsx
Normal file
192
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Sparkles, Mail, Phone, MapPin } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleContactSubmit = (email: string) => {
|
||||
console.log('Contact form submitted:', email);
|
||||
setSubmitted(true);
|
||||
setTimeout(() => setSubmitted(false), 3000);
|
||||
};
|
||||
|
||||
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: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
brandName="Vero AI"
|
||||
bottomLeftText="Vero Marketing AI"
|
||||
bottomRightText="hello@veroai.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="Let's Start Your Transformation"
|
||||
description="Have questions about our services? Need a custom quote? Our team is ready to help. Reach out and let's discuss how Vero AI can elevate your marketing."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get in Touch"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab9WrGggvouKVqc6dwqfHCHOvA/a-sophisticated-ai-marketing-dashboard-i-1773289187082-284b3e5e.png?_wi=1"
|
||||
imageAlt="Contact Vero AI"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info" className="py-20">
|
||||
<div className="mx-auto max-w-7xl px-6 md:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="flex flex-col items-center text-center p-8 rounded-2xl bg-card border border-accent/20">
|
||||
<div className="mb-4 p-4 rounded-full bg-primary-cta/10">
|
||||
<Mail className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Email</h3>
|
||||
<a href="mailto:hello@veroai.com" className="text-accent hover:text-primary-cta transition-colors">
|
||||
hello@veroai.com
|
||||
</a>
|
||||
<p className="text-sm text-foreground/70 mt-2">We typically respond within 24 hours</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center p-8 rounded-2xl bg-card border border-accent/20">
|
||||
<div className="mb-4 p-4 rounded-full bg-primary-cta/10">
|
||||
<Phone className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Phone</h3>
|
||||
<a href="tel:+1-555-0123" className="text-accent hover:text-primary-cta transition-colors">
|
||||
+1 (555) 0123
|
||||
</a>
|
||||
<p className="text-sm text-foreground/70 mt-2">Mon-Fri, 9am-6pm EST</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center p-8 rounded-2xl bg-card border border-accent/20">
|
||||
<div className="mb-4 p-4 rounded-full bg-primary-cta/10">
|
||||
<MapPin className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Location</h3>
|
||||
<p className="text-accent">New York, NY</p>
|
||||
<p className="text-sm text-foreground/70 mt-2">Serving clients globally</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form" className="py-20 px-6 md:px-8">
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="rounded-2xl bg-card border border-accent/20 p-10">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-2 text-center">Send us a Message</h2>
|
||||
<p className="text-center text-foreground/70 mb-8">Fill out the form below and our team will get back to you shortly</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Full Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
className="w-full px-4 py-3 rounded-lg border border-accent/20 bg-background focus:border-primary-cta focus:outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
className="w-full px-4 py-3 rounded-lg border border-accent/20 bg-background focus:border-primary-cta focus:outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Company</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your company name"
|
||||
className="w-full px-4 py-3 rounded-lg border border-accent/20 bg-background focus:border-primary-cta focus:outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Message</label>
|
||||
<textarea
|
||||
placeholder="Tell us about your project..."
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 rounded-lg border border-accent/20 bg-background focus:border-primary-cta focus:outline-none transition-colors resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleContactSubmit('')}
|
||||
className="w-full px-6 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:bg-primary-cta/90 transition-all duration-300"
|
||||
>
|
||||
{submitted ? '✓ Message Sent!' : 'Send Message'}
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-foreground/60 text-center">
|
||||
We respect your privacy. Your information will only be used to respond to your inquiry.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Vero AI"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Services", href: "/#services" },
|
||||
{ label: "Process", href: "/#process" },
|
||||
{ label: "Work", href: "/#portfolio" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/about" },
|
||||
{ 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" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Vero Marketing AI. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user