605 lines
20 KiB
TypeScript
605 lines
20 KiB
TypeScript
import React, { useState, useRef } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Navigation } from "../components/Navigation";
|
|
import { Footer } from "../components/Footer";
|
|
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 { RadioGroup, RadioGroupItem } from "../components/ui/radio-group";
|
|
import { Label } from "../components/ui/label";
|
|
import { GridPattern } from "../components/GridPattern";
|
|
import CustomReCaptcha, { ReCaptchaRef } from "../components/CustomReCaptcha";
|
|
import { useStoreContactUsMutation } from "@/src/services/storeContactUs";
|
|
import { useNavigate } from "react-router-dom";
|
|
import * as Yup from "yup";
|
|
import {
|
|
Rocket,
|
|
Users,
|
|
Target,
|
|
Heart,
|
|
Mail,
|
|
Phone,
|
|
Calendar,
|
|
Upload,
|
|
FileText,
|
|
CheckCircle,
|
|
ArrowRight,
|
|
Briefcase,
|
|
Settings,
|
|
Eye,
|
|
Trophy,
|
|
Star,
|
|
Lightbulb,
|
|
Monitor,
|
|
Building,
|
|
Globe,
|
|
MapPin,
|
|
Clock,
|
|
Headphones,
|
|
Shield,
|
|
} from "lucide-react";
|
|
import GlobalOffices from "@/components/GlobalOffices";
|
|
import { AboutYourProject } from "@/components/AboutYourProject";
|
|
|
|
|
|
|
|
// Hero Section
|
|
const HeroSection = () => {
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="mb-6"
|
|
>
|
|
<Badge
|
|
variant="outline"
|
|
className="border-[#E5195E]/20 text-[#E5195E] mb-6"
|
|
>
|
|
Start Your Project
|
|
</Badge>
|
|
</motion.div>
|
|
|
|
<div className="space-y-6 mb-12">
|
|
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold leading-tight">
|
|
<span className="text-white">Turn Your Next Big Idea into </span>
|
|
<span className="text-[#E5195E]">Reality</span>
|
|
</h1>
|
|
<p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
|
|
Connect with Mobile App and AI Development Experts Today.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Make Your Vision Come to Life Section
|
|
const VisionSection = () => {
|
|
const navigate = useNavigate();
|
|
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-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
|
|
<span className="text-white">
|
|
Make Your Vision Come to Life with{" "}
|
|
</span>
|
|
<span className="text-[#E5195E]">
|
|
Best-in-Class App Development
|
|
</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-8">
|
|
Have a big idea and are looking for customised solutions? From
|
|
bespoke app development to AI-enabled platforms, and scalable system
|
|
upgrades, our experts can turn ideas into premium digital products.
|
|
Let's connect and create scalable and thriving solutions.
|
|
</p>
|
|
|
|
<Button
|
|
size="lg"
|
|
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white text-lg px-8 py-4"
|
|
onClick={() => navigate("/contact/schedule-a-discovery-call")}
|
|
>
|
|
<Calendar className="w-5 h-5 mr-2" />
|
|
Book Appointment
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// We'd love to talk to you Section
|
|
const ProcessStepsSection = () => {
|
|
const steps = [
|
|
{
|
|
step: "1",
|
|
title: "Enter Details",
|
|
description:
|
|
"Fill in the required information correctly to initiate the process. This will ensure that your request is handled efficiently and smoothly.",
|
|
icon: FileText,
|
|
},
|
|
{
|
|
step: "2",
|
|
title: "Submit Details",
|
|
description:
|
|
"Carefully review your entries and submit them to ensure smooth processing. It is a simple step for confirmation of your request.",
|
|
icon: CheckCircle,
|
|
},
|
|
{
|
|
step: "3",
|
|
title: "Book Appointment",
|
|
description:
|
|
"Select your convenient time slot, so that planning is made easier and on-time support can be received from our consultancy expertise.",
|
|
icon: Calendar,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-wdi-grey">
|
|
<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-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
|
|
<span className="text-white">We'd love to </span>
|
|
<span className="text-[#E5195E]">talk to you</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-12">
|
|
Need guidance or a development partner for next-generation
|
|
application development? WDI will be your trusted partner for
|
|
secure, scalable, cutting-edge solutions. Start here and fill out
|
|
the following form to begin bringing your vision to life into
|
|
something truly remarkable.
|
|
</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-3 gap-8 mb-12"
|
|
>
|
|
{steps.map((step, index) => {
|
|
const IconComponent = step.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center mx-auto mb-6 relative">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
<div className="absolute -top-2 -right-2 w-8 h-8 bg-[#E5195E] rounded-full flex items-center justify-center">
|
|
<span className="text-white text-sm font-bold">
|
|
{step.step}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* <motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white text-lg px-8 py-4"
|
|
onClick={() => navigate("/contact")}
|
|
>
|
|
<Mail className="w-5 h-5 mr-2" />
|
|
Tell Us More
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</motion.div> */}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Join WDI Section
|
|
const JoinWDISection = () => {
|
|
const navigate = useNavigate();
|
|
const benefits = [
|
|
{
|
|
icon: Rocket,
|
|
title: "Innovative Projects",
|
|
description:
|
|
"Work on cutting-edge technology projects with global impact",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Collaborative Culture",
|
|
description:
|
|
"Be part of a supportive team that values diversity and inclusion",
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: "Growth Opportunities",
|
|
description:
|
|
"Continuous learning, training, and career advancement opportunities",
|
|
},
|
|
{
|
|
icon: Heart,
|
|
title: "Work-Life Balance",
|
|
description: "Flexible working arrangements and comprehensive benefits",
|
|
},
|
|
];
|
|
|
|
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-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
|
|
<span className="text-white">
|
|
Join the WDI Family & Shape the Future of{" "}
|
|
</span>
|
|
<span className="text-[#E5195E]">Technology</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto mb-12">
|
|
We're always looking for passionate, talented individuals to join
|
|
our growing team. If you're ready to work on innovative projects and
|
|
make a real impact, we'd love to hear from you.
|
|
</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 lg:grid-cols-4 gap-8 mb-12"
|
|
>
|
|
{benefits.map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-[#E5195E]/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-[#E5195E]" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="text-center space-y-6"
|
|
>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
size="lg"
|
|
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white text-lg px-8 py-4"
|
|
onClick={() => navigate("/careers")}
|
|
>
|
|
<Briefcase className="w-5 h-5 mr-2" />
|
|
View Open Positions
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
|
|
{/* <Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-gray-600 text-white hover:bg-gray-800 text-lg px-8 py-4"
|
|
onClick={() => navigate("/careers/send-your-cv")}
|
|
>
|
|
<Upload className="w-5 h-5 mr-2" />
|
|
Send Your CV
|
|
</Button> */}
|
|
</div>
|
|
|
|
<p className="text-gray-400 text-sm">
|
|
Ready to build the future with us? Let's create something amazing
|
|
together.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Why Partner with WDI Section
|
|
const WhyPartnerSection = () => {
|
|
const features = [
|
|
{
|
|
icon: Trophy,
|
|
title: "Award-Winning Team",
|
|
description:
|
|
"Recognized expertise in mobile app development and AI solutions",
|
|
},
|
|
{
|
|
icon: Star,
|
|
title: "5-Star Client Satisfaction",
|
|
description:
|
|
"Consistently rated 4.9/5 on Clutch with 47+ verified reviews",
|
|
},
|
|
{
|
|
icon: Lightbulb,
|
|
title: "Innovation-First Approach",
|
|
description:
|
|
"Cutting-edge solutions using the latest technologies and methodologies",
|
|
},
|
|
{
|
|
icon: Monitor,
|
|
title: "End-to-End Solutions",
|
|
description:
|
|
"From concept to deployment, we handle every aspect of your project",
|
|
},
|
|
{
|
|
icon: Building,
|
|
title: "Enterprise-Grade Security",
|
|
description:
|
|
"Robust security measures and compliance with industry standards",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Global Reach",
|
|
description:
|
|
"Serving clients worldwide with 24/7 support and communication",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-wdi-grey">
|
|
<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-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
|
|
<span className="text-white">Why Partner with </span>
|
|
<span className="text-[#E5195E]">WDI?</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto">
|
|
Choose WDI for your next project and experience the difference of
|
|
working with a team that's committed to your success.
|
|
</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 lg:grid-cols-3 gap-8"
|
|
>
|
|
{features.map((feature, index) => {
|
|
const IconComponent = feature.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
className="bg-gray-900/30 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-8 text-center hover:border-[#E5195E]/30 transition-all duration-300"
|
|
>
|
|
<div className="w-16 h-16 bg-[#E5195E]/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-[#E5195E]" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Contact Information Section
|
|
const ContactInfoSection = () => {
|
|
const navigate = useNavigate();
|
|
const contactMethods = [
|
|
{
|
|
icon: Mail,
|
|
title: "Email Us",
|
|
description: "Get in touch via email",
|
|
contact: "ideas@wdipl.com",
|
|
action: "mailto:ideas@wdipl.com",
|
|
},
|
|
{
|
|
icon: Phone,
|
|
title: "Call Us",
|
|
description: "Speak with our team",
|
|
contact: "+91 7700900039",
|
|
action: "tel:+91 7700900039",
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
title: "Visit Us",
|
|
description: "Our office locations",
|
|
contact: "614, 6th floor Palm spring centre, Malad west, Mumbai Maharshatra",
|
|
action: () => navigate("/company/office-locations"),
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: "Business Hours",
|
|
description: "We're available",
|
|
contact: "Mon-Fri 11AM-8PM",
|
|
action: () => navigate("/contact/schedule-a-discovery-call"),
|
|
},
|
|
];
|
|
|
|
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-center mb-16"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-8">
|
|
<span className="text-white">Get in Touch with </span>
|
|
<span className="text-[#E5195E]">Our Experts</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-gray-300 leading-relaxed max-w-4xl mx-auto">
|
|
Ready to discuss your project? Our team is here to help you every
|
|
step of the way.
|
|
</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 lg:grid-cols-4 gap-8 mb-12"
|
|
>
|
|
{contactMethods.map((method, index) => {
|
|
const IconComponent = method.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
className="bg-gray-900/30 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-8 text-center hover:border-[#E5195E]/30 transition-all duration-300 cursor-pointer"
|
|
onClick={() => {
|
|
if (typeof method.action === "string") {
|
|
window.open(method.action, "_blank");
|
|
} else {
|
|
method.action();
|
|
}
|
|
}}
|
|
>
|
|
<div className="w-16 h-16 bg-[#E5195E]/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-[#E5195E]" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-2">
|
|
{method.title}
|
|
</h3>
|
|
<p className="text-gray-400 text-sm mb-4">
|
|
{method.description}
|
|
</p>
|
|
<p className="text-[#E5195E] font-medium">{method.contact}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white text-lg px-8 py-4"
|
|
onClick={() => navigate("/contact/schedule-a-discovery-call")}
|
|
>
|
|
<Headphones className="w-5 h-5 mr-2" />
|
|
Schedule a Call
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Main component
|
|
export const StartAProject = () => {
|
|
return (
|
|
<div className="dark min-h-screen bg-background">
|
|
{/* <Navigation /> */}
|
|
<HeroSection />
|
|
<AboutYourProject />
|
|
<VisionSection />
|
|
<ProcessStepsSection />
|
|
<WhyPartnerSection />
|
|
<JoinWDISection />
|
|
<ContactInfoSection />
|
|
{/* <Footer /> */}
|
|
</div>
|
|
);
|
|
};
|