From e3999447d8917d8300a3f7c60ecb121acf6b7580 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 12 Mar 2026 05:29:10 +0000
Subject: [PATCH] Add src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 192 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 src/app/contact/page.tsx

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..44ea865
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -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>
+  );
+}
\ No newline at end of file