663 lines
27 KiB
TypeScript
663 lines
27 KiB
TypeScript
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Navigation } from "../components/Navigation";
|
|
import { Footer } from "../components/Footer";
|
|
import { ProcessSection } from "../components/ProcessSection";
|
|
import { FAQSection } from "../components/FAQSection";
|
|
import { AnimatedGradientText } from "../components/AnimatedGradientText";
|
|
import { Button } from "../components/ui/button";
|
|
import { ShimmerButton } from "../components/ui/shimmer-button";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import { Input } from "../components/ui/input";
|
|
import { Textarea } from "../components/ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
|
|
import { Checkbox } from "../components/ui/checkbox";
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
|
|
import { GridPattern } from "../components/GridPattern";
|
|
import { navigateTo } from "../App";
|
|
import {
|
|
Mail, FileCheck, Phone, UserPlus, Headphones, MapPin, MessageSquare,
|
|
Calendar, ArrowRight, Globe, Clock, Users, Target, Send,
|
|
Coffee, Monitor, Shield, Award, Rocket
|
|
} from "lucide-react";
|
|
|
|
// Enhanced Hero Section
|
|
const HeroWithCTA = () => {
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-8"
|
|
>
|
|
{/* Contact Label */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-white/70 text-sm font-medium">Contact WDI</span>
|
|
</motion.div>
|
|
|
|
{/* Main Heading - Left aligned, reduced font size */}
|
|
<div className="space-y-6">
|
|
<h1 className="text-4xl sm:text-5xl md:text-6xl font-semibold leading-tight text-left">
|
|
<span className="text-white">Connect with </span>
|
|
<span className="text-[#E5195E]">WDI</span>
|
|
<span className="text-white">: Your Digital Partner </span>
|
|
<span className="text-[#E5195E]">Awaits</span>
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
|
Let's discuss your project, answer your questions, or explore collaboration opportunities.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('#contact-form')}>
|
|
<div className="inline-flex items-center gap-2">
|
|
<MessageSquare className="w-4 h-4 flex-shrink-0" />
|
|
<span>Send a Message</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
className="text-lg px-8 py-4"
|
|
onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
|
|
>
|
|
<Phone className="w-4 h-4 flex-shrink-0" />
|
|
<span>Schedule a Call</span>
|
|
</Button>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side with stats */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative flex flex-col items-center"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
className="grid grid-cols-2 gap-8 text-center"
|
|
>
|
|
<div className="space-y-2 flex flex-col items-center">
|
|
<div className="text-3xl lg:text-4xl font-bold text-white">24/7</div>
|
|
<div className="text-sm text-gray-400 leading-tight">Support Available</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 flex flex-col items-center">
|
|
<div className="text-3xl lg:text-4xl font-bold text-white"><24h</div>
|
|
<div className="text-sm text-gray-400 leading-tight">Response Time</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 flex flex-col items-center">
|
|
<div className="text-3xl lg:text-4xl font-bold text-white">5+</div>
|
|
<div className="text-sm text-gray-400 leading-tight">Global Offices</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 flex flex-col items-center">
|
|
<div className="text-3xl lg:text-4xl font-bold text-white">100%</div>
|
|
<div className="text-sm text-gray-400 leading-tight">Client Satisfaction</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Enhanced Horizontal Tag Scroller with Contact Options
|
|
const HorizontalTagScroller = () => {
|
|
const contactOptions = [
|
|
{ name: "General Inquiry", icon: Mail, color: "text-blue-400" },
|
|
{ name: "Request Proposal", icon: FileCheck, color: "text-green-400" },
|
|
{ name: "Schedule Call", icon: Phone, color: "text-purple-400" },
|
|
{ name: "Career Opportunities", icon: UserPlus, color: "text-orange-400" },
|
|
{ name: "Client Support", icon: Headphones, color: "text-cyan-400" },
|
|
{ name: "Office Locations", icon: MapPin, color: "text-yellow-400" }
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-background">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-left mb-20"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold mb-8">
|
|
<span className="text-white">Choose Your Best Way to </span>
|
|
<span className="text-[#E5195E]">Connect</span>
|
|
</h2>
|
|
<p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
|
|
We're here to provide the answers and support you need.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="relative overflow-hidden"
|
|
>
|
|
<div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
|
|
<div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
|
|
|
|
<div className="flex animate-marquee hover:animate-marquee-paused">
|
|
{/* First set */}
|
|
{contactOptions.map((option, index) => {
|
|
const IconComponent = option.icon;
|
|
return (
|
|
<motion.div
|
|
key={`first-${option.name}-${index}`}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="group flex-shrink-0 mx-3"
|
|
>
|
|
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`w-8 h-8 flex items-center justify-center ${option.color}`}>
|
|
<IconComponent className="w-6 h-6" />
|
|
</div>
|
|
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
|
{option.name}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
|
|
{/* Second and third sets for seamless loop */}
|
|
{[...contactOptions, ...contactOptions].map((option, index) => {
|
|
const IconComponent = option.icon;
|
|
return (
|
|
<motion.div
|
|
key={`loop-${option.name}-${index}`}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: (index + contactOptions.length) * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="group flex-shrink-0 mx-3"
|
|
>
|
|
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`w-8 h-8 flex items-center justify-center ${option.color}`}>
|
|
<IconComponent className="w-6 h-6" />
|
|
</div>
|
|
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
|
{option.name}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Why Choose WDI for Contact Section
|
|
const SideBySideContentWithIcons = () => {
|
|
const advantages = [
|
|
{
|
|
id: "response",
|
|
title: "Fast Response Time",
|
|
icon: Clock
|
|
},
|
|
{
|
|
id: "expert",
|
|
title: "Expert Consultation",
|
|
icon: Target
|
|
},
|
|
{
|
|
id: "global",
|
|
title: "Global Support",
|
|
icon: Globe
|
|
},
|
|
{
|
|
id: "dedicated",
|
|
title: "Dedicated Account Management",
|
|
icon: Users
|
|
},
|
|
{
|
|
id: "transparent",
|
|
title: "Transparent Communication",
|
|
icon: Shield
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-left mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
|
|
<span className="text-white">Responsive & </span>
|
|
<span className="text-[#E5195E]">Professional Support</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-gray-300 leading-relaxed">
|
|
Connect with confidence knowing our team is ready to help.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 max-w-7xl mx-auto"
|
|
>
|
|
{advantages.map((advantage, index) => {
|
|
const IconComponent = advantage.icon;
|
|
|
|
return (
|
|
<motion.div
|
|
key={advantage.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -8, scale: 1.02 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full overflow-hidden">
|
|
<CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
|
|
<div className="mb-6">
|
|
<IconComponent className="w-10 h-10 text-accent mx-auto" />
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-white leading-tight">
|
|
{advantage.title}
|
|
</h3>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Contact Form Section
|
|
const ContactFormSection = () => {
|
|
return (
|
|
<section id="contact-form" className="py-32 bg-background">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-left mb-20"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
|
|
Send Us a Message
|
|
</h2>
|
|
<p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
|
|
We aim to respond to all inquiries within 24-48 business hours.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-2xl mx-auto"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 rounded-2xl overflow-hidden">
|
|
<CardContent className="p-8">
|
|
<form className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-white">Full Name *</label>
|
|
<Input placeholder="Your full name" className="bg-gray-800/50 border-gray-600 text-white" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-white">Email Address *</label>
|
|
<Input type="email" placeholder="your.email@company.com" className="bg-gray-800/50 border-gray-600 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-white">Phone Number</label>
|
|
<Input placeholder="+1 (555) 123-4567" className="bg-gray-800/50 border-gray-600 text-white" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-white">Company Name *</label>
|
|
<Input placeholder="Your company name" className="bg-gray-800/50 border-gray-600 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-white">I'm interested in... *</label>
|
|
<Select>
|
|
<SelectTrigger className="bg-gray-800/50 border-gray-600 text-white">
|
|
<SelectValue placeholder="Select your interest" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="software-development">Software Development</SelectItem>
|
|
<SelectItem value="talent-hire">Talent Hire</SelectItem>
|
|
<SelectItem value="partnership">Partnership</SelectItem>
|
|
<SelectItem value="career">Career</SelectItem>
|
|
<SelectItem value="other">Other</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-white">Your Message *</label>
|
|
<Textarea
|
|
placeholder="Tell us about your project, requirements, or questions..."
|
|
rows={5}
|
|
className="bg-gray-800/50 border-gray-600 text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-white">How did you hear about us?</label>
|
|
<Select>
|
|
<SelectTrigger className="bg-gray-800/50 border-gray-600 text-white">
|
|
<SelectValue placeholder="Select an option" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="google">Google Search</SelectItem>
|
|
<SelectItem value="referral">Referral</SelectItem>
|
|
<SelectItem value="social-media">Social Media</SelectItem>
|
|
<SelectItem value="linkedin">LinkedIn</SelectItem>
|
|
<SelectItem value="event">Event/Conference</SelectItem>
|
|
<SelectItem value="other">Other</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-2">
|
|
<Checkbox id="privacy" />
|
|
<label htmlFor="privacy" className="text-sm text-gray-300">
|
|
I agree to WDI's Privacy Policy and consent to being contacted about my inquiry. *
|
|
</label>
|
|
</div>
|
|
|
|
<ShimmerButton className="w-full py-4 text-lg rounded-xl shadow-lg hover:shadow-xl">
|
|
<div className="inline-flex items-center justify-center gap-2">
|
|
<Send className="w-5 h-5 flex-shrink-0" />
|
|
<span>Submit Message</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Updated CTA Section with new design
|
|
const InlineCTA = () => {
|
|
return (
|
|
<section className="py-20 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-left max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
{/* Ready to Launch Badge */}
|
|
<div className="inline-block">
|
|
<div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<Rocket className="w-4 h-4 text-[#E5195E]" />
|
|
<span className="text-[#E5195E] text-sm font-medium">Ready to Launch?</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Heading */}
|
|
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
|
|
<span className="text-white">Book Your Free Discovery Call with </span>
|
|
<span className="text-[#E5195E]">WDI Experts</span>
|
|
</h2>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
|
|
Get expert advice, project estimates, and strategic guidance without any commitment.
|
|
</p>
|
|
|
|
{/* CTA Button */}
|
|
<div className="flex flex-col items-start gap-4">
|
|
<ShimmerButton
|
|
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
|
onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Calendar className="w-6 h-6 flex-shrink-0" />
|
|
<span>Schedule a Discovery Call</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
|
|
{/* Small benefit text */}
|
|
<p className="text-sm text-gray-400">
|
|
Free consultation • Expert guidance • Rapid response
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Office Locations Section
|
|
const OfficeLocationsSection = () => {
|
|
const offices = [
|
|
{
|
|
title: "New York, USA",
|
|
icon: MapPin,
|
|
address: "123 Tech Avenue, Suite 500",
|
|
phone: "+1 (555) 123-4567",
|
|
iconBg: "bg-blue-500",
|
|
iconColor: "text-white",
|
|
link: "/contact/office-locations"
|
|
},
|
|
{
|
|
title: "Mumbai, India",
|
|
icon: MapPin,
|
|
address: "456 Innovation Park, BKC",
|
|
phone: "+91 22 1234 5678",
|
|
iconBg: "bg-orange-500",
|
|
iconColor: "text-white",
|
|
link: "/contact/office-locations"
|
|
},
|
|
{
|
|
title: "London, UK",
|
|
icon: MapPin,
|
|
address: "789 Digital District, Canary Wharf",
|
|
phone: "+44 20 1234 5678",
|
|
iconBg: "bg-green-500",
|
|
iconColor: "text-white",
|
|
link: "/contact/office-locations"
|
|
},
|
|
{
|
|
title: "Sydney, Australia",
|
|
icon: MapPin,
|
|
address: "321 Tech Tower, CBD",
|
|
phone: "+61 2 1234 5678",
|
|
iconBg: "bg-purple-500",
|
|
iconColor: "text-white",
|
|
link: "/contact/office-locations"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-background">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-left mb-20"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold mb-8">
|
|
<span className="text-white">Our </span>
|
|
<span className="text-[#E5195E]">Global Presence</span>
|
|
</h2>
|
|
<p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
|
|
Connect with us at any of our worldwide locations.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 xl:grid-cols-4 gap-8"
|
|
>
|
|
{offices.map((office, index) => {
|
|
const IconComponent = office.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -8, scale: 1.02 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
|
<CardContent className="p-0 flex flex-col h-full">
|
|
{/* Header */}
|
|
<div className="p-8 pb-6">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className={`w-12 h-12 ${office.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
|
|
<IconComponent className={`w-6 h-6 ${office.iconColor}`} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
|
Office Location
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
|
{office.title}
|
|
</h3>
|
|
|
|
<div className="space-y-2 text-sm text-muted-foreground">
|
|
<p>{office.address}</p>
|
|
<p>{office.phone}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="p-8 pt-0 mt-auto space-y-3">
|
|
<ShimmerButton
|
|
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
|
|
onClick={() => navigateTo(office.link)}
|
|
>
|
|
<div className="inline-flex items-center justify-center gap-2">
|
|
<MapPin className="w-4 h-4 flex-shrink-0" />
|
|
<span className="font-medium">Get Directions</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// FAQ data for Contact
|
|
const contactFAQs = [
|
|
{
|
|
question: "What happens after I submit a contact form?",
|
|
answer: "We typically respond within 24-48 business hours. Our team will review your inquiry and connect you with the most appropriate specialist to discuss your needs in detail."
|
|
},
|
|
{
|
|
question: "How long does it take to get a proposal?",
|
|
answer: "For most projects, we provide initial proposals within 3-5 business days after our discovery call. Complex enterprise projects may require additional time for detailed analysis and estimation."
|
|
},
|
|
{
|
|
question: "Do you offer free consultations?",
|
|
answer: "Yes, we offer complimentary discovery calls to understand your project requirements and provide initial guidance. This helps us create more accurate proposals and recommendations."
|
|
},
|
|
{
|
|
question: "Can I visit your offices?",
|
|
answer: "Absolutely! We welcome office visits by appointment. Please contact us in advance to schedule a meeting with our team at any of our global locations."
|
|
},
|
|
{
|
|
question: "What time zone are you in?",
|
|
answer: "We operate across multiple time zones with offices in the US (EST) and India (IST). Our global presence allows us to provide support and communication that fits your business hours."
|
|
}
|
|
];
|
|
|
|
export function ContactMain() {
|
|
return (
|
|
<div className="dark min-h-screen bg-background">
|
|
<Navigation />
|
|
<HeroWithCTA />
|
|
<HorizontalTagScroller />
|
|
<SideBySideContentWithIcons />
|
|
<ContactFormSection />
|
|
<InlineCTA />
|
|
<OfficeLocationsSection />
|
|
<FAQSection
|
|
title="Contact Questions"
|
|
subtitle="Get answers to common questions about reaching out to WDI."
|
|
faqs={contactFAQs}
|
|
/>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
} |