WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

add dynamic no. in contat page and other changes

Browse Source
This commit is contained in:
priyanshuvish
2025-07-24 19:00:07 +05:30
parent 08d33fb2cf
commit 5fba23e5cc
7 changed files with 82 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
App.tsx
View File

@@ -374,7 +374,7 @@ export default function App() {
"/solutions": Solutions, "/solutions": Solutions,
"/industries": Industries, "/industries": Industries,
"/resources": Resources, "/resources": Resources,
"/company": Company, // "/company": Company,
// "/contact": ContactMain, // "/contact": ContactMain,
"/web-cloud": WebCloudServices, "/web-cloud": WebCloudServices,
"/software-engineering": SoftwareEngineering, "/software-engineering": SoftwareEngineering,

2
components/Navigation.tsx
View File

@@ -967,7 +967,7 @@ export const Navigation = () => {
case "Services": case "Services":
return "/services"; return "/services";
case "Company": case "Company":
return "/company"; return "/company/about-wdi";
case "Resources": case "Resources":
return "/resources"; return "/resources";
case "Contact": case "Contact":

13
pages/AboutWDI.tsx
View File

@@ -17,6 +17,7 @@ import {
BookOpen, MessageSquare, Briefcase, Mail BookOpen, MessageSquare, Briefcase, Mail
} from "lucide-react"; } from "lucide-react";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { CarouselTestimonials } from "@/components/CarouselTestimonials";
// Enhanced Hero Section // Enhanced Hero Section
const HeroWithCTA = () => { const HeroWithCTA = () => {
@@ -414,15 +415,17 @@ const TestimonialSection = () => {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
viewport={{ once: true }} viewport={{ once: true }}
className="text-left mb-16" // className="text-left mb-16"
> >
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6"> {/* <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
<span className="text-white">What Our </span> <span className="text-white">What Our </span>
<span className="text-[#E5195E]">Clients Say</span> <span className="text-[#E5195E]">Clients Say</span>
</h2> </h2> */}
<CarouselTestimonials />
</motion.div> </motion.div>
<motion.div
{/* <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
@@ -454,7 +457,7 @@ const TestimonialSection = () => {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</motion.div> </motion.div> */}
</div> </div>
</section> </section>
); );

2
pages/Contact.tsx
View File

@@ -39,7 +39,7 @@ export const Contact = () => {
]; ];
const contactMethods = [ const contactMethods = [
{ icon: Mail, title: "Email", value: "info@wdi.com", description: "Send us an email and we'll respond within 24 hours" }, { icon: Mail, title: "Email", value: "ideas@wdipl.com", description: "Send us an email and we'll respond within 24 hours" },
{ icon: Phone, title: "Phone", value: "+1 (555) 123-4567", description: "Call us during business hours for immediate assistance" }, { icon: Phone, title: "Phone", value: "+1 (555) 123-4567", description: "Call us during business hours for immediate assistance" },
{ icon: MapPin, title: "Address", value: "123 Innovation Drive, Tech City, TC 12345", description: "Visit our headquarters for in-person meetings" }, { icon: MapPin, title: "Address", value: "123 Innovation Drive, Tech City, TC 12345", description: "Visit our headquarters for in-person meetings" },
{ icon: Clock, title: "Business Hours", value: "Mon-Fri: 9:00 AM - 6:00 PM EST", description: "We're available to help during business hours" } { icon: Clock, title: "Business Hours", value: "Mon-Fri: 9:00 AM - 6:00 PM EST", description: "We're available to help during business hours" }

2
pages/OfficeLocations.tsx
View File

@@ -394,7 +394,7 @@ export const OfficeLocations = () => {
<CardContent className="p-6 text-center"> <CardContent className="p-6 text-center">
<Mail className="w-8 h-8 text-[#E5195E] mx-auto mb-4" /> <Mail className="w-8 h-8 text-[#E5195E] mx-auto mb-4" />
<h3 className="text-lg font-semibold text-white mb-2">Global Email</h3> <h3 className="text-lg font-semibold text-white mb-2">Global Email</h3>
<p className="text-muted-foreground mb-4">info@wdi.com</p> <p className="text-muted-foreground mb-4">ideas@wdipl.com</p>
<Button variant="outline" className="border-white/20 text-white hover:bg-white/10"> <Button variant="outline" className="border-white/20 text-white hover:bg-white/10">
Send Email Send Email
</Button> </Button>

62
pages/ScheduleDiscoveryCall.tsx
View File

@@ -102,12 +102,12 @@ export const ScheduleDiscoveryCall = () => {
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true); setIsSubmitting(true);
// Simulate booking submission // Simulate booking submission
await new Promise(resolve => setTimeout(resolve, 2000)); await new Promise(resolve => setTimeout(resolve, 2000));
alert(`Great! Your discovery call has been scheduled for ${selectedDate} at ${selectedTime}. You'll receive a confirmation email shortly with meeting details.`); alert(`Great! Your discovery call has been scheduled for ${selectedDate} at ${selectedTime}. You'll receive a confirmation email shortly with meeting details.`);
// Reset form // Reset form
setFormData({ setFormData({
name: "", email: "", company: "", phone: "", callPurpose: "", meetingType: "video" name: "", email: "", company: "", phone: "", callPurpose: "", meetingType: "video"
@@ -123,7 +123,7 @@ export const ScheduleDiscoveryCall = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="pt-24 pb-16 bg-background"> <section className="pt-24 pb-16 bg-background">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -162,15 +162,15 @@ export const ScheduleDiscoveryCall = () => {
<section className="py-16 bg-card/50"> <section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-3 gap-12"> <div className="grid lg:grid-cols-3 gap-12">
{/* Booking Form */} {/* Booking Form */}
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<Card className="bg-background/50 border-white/10"> <Card className="bg-background/50 border-white/10">
<CardContent className="p-8"> <CardContent className="p-8">
<h2 className="text-2xl font-bold text-white mb-6">Book Your Discovery Call</h2> <h2 className="text-2xl font-bold text-white mb-6">Book Your Discovery Call</h2>
<form onSubmit={handleSubmit} className="space-y-8"> <form onSubmit={handleSubmit} className="space-y-8">
{/* Contact Information */} {/* Contact Information */}
<div> <div>
<h3 className="text-lg font-semibold text-white mb-4">Contact Information</h3> <h3 className="text-lg font-semibold text-white mb-4">Contact Information</h3>
@@ -185,7 +185,7 @@ export const ScheduleDiscoveryCall = () => {
className="bg-card/50 border-white/10" className="bg-card/50 border-white/10"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-white mb-2">Email *</label> <label className="block text-sm font-medium text-white mb-2">Email *</label>
<Input <Input
@@ -197,7 +197,7 @@ export const ScheduleDiscoveryCall = () => {
className="bg-card/50 border-white/10" className="bg-card/50 border-white/10"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-white mb-2">Company Name *</label> <label className="block text-sm font-medium text-white mb-2">Company Name *</label>
<Input <Input
@@ -208,7 +208,7 @@ export const ScheduleDiscoveryCall = () => {
className="bg-card/50 border-white/10" className="bg-card/50 border-white/10"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-white mb-2">Phone Number</label> <label className="block text-sm font-medium text-white mb-2">Phone Number</label>
<Input <Input
@@ -239,7 +239,7 @@ export const ScheduleDiscoveryCall = () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-white mb-2">Preferred Expert</label> <label className="block text-sm font-medium text-white mb-2">Preferred Expert</label>
<Select value={selectedExpert} onValueChange={setSelectedExpert}> <Select value={selectedExpert} onValueChange={setSelectedExpert}>
@@ -257,7 +257,7 @@ export const ScheduleDiscoveryCall = () => {
</Select> </Select>
</div> </div>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-white mb-2">Brief purpose of the call *</label> <label className="block text-sm font-medium text-white mb-2">Brief purpose of the call *</label>
<Textarea <Textarea
@@ -284,18 +284,18 @@ export const ScheduleDiscoveryCall = () => {
<SelectContent> <SelectContent>
{availableDates.map((date) => ( {availableDates.map((date) => (
<SelectItem key={date} value={date}> <SelectItem key={date} value={date}>
{new Date(date).toLocaleDateString('en-US', { {new Date(date).toLocaleDateString('en-US', {
weekday: 'long', weekday: 'long',
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
day: 'numeric' day: 'numeric'
})} })}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-white mb-2">Preferred Time (EST) *</label> <label className="block text-sm font-medium text-white mb-2">Preferred Time (EST) *</label>
<Select value={selectedTime} onValueChange={setSelectedTime}> <Select value={selectedTime} onValueChange={setSelectedTime}>
@@ -329,15 +329,15 @@ export const ScheduleDiscoveryCall = () => {
{/* Sidebar Info */} {/* Sidebar Info */}
<div className="space-y-8"> <div className="space-y-8">
{/* Selected Expert Info */} {/* Selected Expert Info */}
{selectedExpertData && ( {selectedExpertData && (
<Card className="bg-background/50 border-white/10"> <Card className="bg-background/50 border-white/10">
<CardContent className="p-6"> <CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-4">Your Expert Consultant</h3> <h3 className="text-lg font-semibold text-white mb-4">Your Expert Consultant</h3>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<img <img
src={selectedExpertData.image} src={selectedExpertData.image}
alt={selectedExpertData.name} alt={selectedExpertData.name}
className="w-16 h-16 rounded-full object-cover" className="w-16 h-16 rounded-full object-cover"
/> />
@@ -388,10 +388,12 @@ export const ScheduleDiscoveryCall = () => {
<p className="text-muted-foreground text-sm mb-4"> <p className="text-muted-foreground text-sm mb-4">
If scheduling isn't convenient, you can reach us directly via email. If scheduling isn't convenient, you can reach us directly via email.
</p> </p>
<Button variant="outline" className="w-full border-white/20 text-white hover:bg-white/10"> <a href="mailto:ideas@wdipl.com" className="block w-full">
<Mail className="w-4 h-4 mr-2" /> <Button variant="outline" className="w-full border-white/20 text-white hover:bg-white/10">
Send Email to info@wdi.com <Mail className="w-4 h-4 mr-2" />
</Button> Send Email to ideas@wdipl.com
</Button>
</a>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -400,7 +402,7 @@ export const ScheduleDiscoveryCall = () => {
</section> </section>
{/* Our Experts Section */} {/* Our Experts Section */}
<section className="py-16 bg-background"> {/* <section className="py-16 bg-background">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl font-bold text-white mb-4">Meet Our Expert Consultants</h2> <h2 className="text-3xl font-bold text-white mb-4">Meet Our Expert Consultants</h2>
@@ -433,7 +435,7 @@ export const ScheduleDiscoveryCall = () => {
))} ))}
</div> </div>
</div> </div>
</section> </section> */}
{/* Process Section */} {/* Process Section */}
<section className="py-16 bg-card/50"> <section className="py-16 bg-card/50">
@@ -442,7 +444,7 @@ export const ScheduleDiscoveryCall = () => {
<h2 className="text-3xl font-bold text-white mb-4">How It Works</h2> <h2 className="text-3xl font-bold text-white mb-4">How It Works</h2>
<p className="text-muted-foreground">Simple steps to get started with your discovery call</p> <p className="text-muted-foreground">Simple steps to get started with your discovery call</p>
</div> </div>
<div className="grid md:grid-cols-4 gap-8"> <div className="grid md:grid-cols-4 gap-8">
{[ {[
{ step: 1, title: "Book Your Call", description: "Choose your preferred date, time, and expert" }, { step: 1, title: "Book Your Call", description: "Choose your preferred date, time, and expert" },
@@ -473,7 +475,9 @@ export const ScheduleDiscoveryCall = () => {
Don't wait! Book your free discovery call today and take the first step toward bringing your vision to life. Don't wait! Book your free discovery call today and take the first step toward bringing your vision to life.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"> <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Book Your Free Consultation Now Book Your Free Consultation Now
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </Button>

51
pages/StartAProject.tsx
View File

@@ -278,9 +278,8 @@ const ProjectFormSection = () => {
<Input <Input
type={type} type={type}
placeholder={placeholder} placeholder={placeholder}
className={`bg-gray-800/30 border-gray-600/50 text-white h-12 text-base ${ className={`bg-gray-800/30 border-gray-600/50 text-white h-12 text-base ${errors[field] ? "border-red-500" : ""
errors[field] ? "border-red-500" : "" }`}
}`}
value={formData[field] as string} value={formData[field] as string}
onChange={(e) => setFormData({ ...formData, [field]: e.target.value })} onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
onBlur={() => handleBlur(field)} onBlur={() => handleBlur(field)}
@@ -295,7 +294,8 @@ const ProjectFormSection = () => {
field: keyof typeof formData, field: keyof typeof formData,
label: string, label: string,
placeholder: string, placeholder: string,
options: { value: string; label: string }[] options: { value: string; label: string }[],
onValueChange?: (value: string) => void
) => ( ) => (
<div className="space-y-3" id={field}> <div className="space-y-3" id={field}>
<label className="block text-sm font-medium text-white">{label} *</label> <label className="block text-sm font-medium text-white">{label} *</label>
@@ -306,12 +306,14 @@ const ProjectFormSection = () => {
setFormData(updated); setFormData(updated);
setTouched({ ...touched, [field]: true }); setTouched({ ...touched, [field]: true });
validateField(field, updated); validateField(field, updated);
if (onValueChange) {
onValueChange(value);
}
}} }}
> >
<SelectTrigger <SelectTrigger
className={`bg-gray-800/30 border-gray-600/50 text-white h-12 ${ className={`bg-gray-800/30 border-gray-600/50 text-white h-12 min-h-12 ${errors[field] ? "border-red-500" : ""
errors[field] ? "border-red-500" : "" }`}
}`}
> >
<SelectValue placeholder={placeholder} /> <SelectValue placeholder={placeholder} />
</SelectTrigger> </SelectTrigger>
@@ -329,6 +331,18 @@ const ProjectFormSection = () => {
</div> </div>
); );
// Add this near the top of your file with other constants
const COUNTRY_CODES: Record<string, string> = {
us: "+1",
uk: "+44",
ca: "+1",
au: "+61",
in: "+91",
de: "+49",
fr: "+33",
other: "+",
};
const renderTextarea = ( const renderTextarea = (
field: keyof typeof formData, field: keyof typeof formData,
label: string, label: string,
@@ -347,9 +361,8 @@ const ProjectFormSection = () => {
<Textarea <Textarea
placeholder={placeholder} placeholder={placeholder}
rows={rows} rows={rows}
className={`bg-gray-800/30 border-gray-600/50 text-white text-base resize-none ${ className={`bg-gray-800/30 border-gray-600/50 text-white text-base resize-none ${errors[field] ? "border-red-500" : ""
errors[field] ? "border-red-500" : "" }`}
}`}
value={formData[field] as string} value={formData[field] as string}
onChange={(e) => setFormData({ ...formData, [field]: e.target.value })} onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
onBlur={() => handleBlur(field)} onBlur={() => handleBlur(field)}
@@ -498,12 +511,22 @@ const ProjectFormSection = () => {
{ value: "de", label: "Germany" }, { value: "de", label: "Germany" },
{ value: "fr", label: "France" }, { value: "fr", label: "France" },
{ value: "other", label: "Other" }, { value: "other", label: "Other" },
] ],
(value) => {
// When country changes, update the phone field if it's empty or starts with a +
const updated = { ...formData, country: value };
if (!formData.phone || formData.phone.startsWith("+")) {
updated.phone = COUNTRY_CODES[value] || "";
}
setFormData(updated);
setTouched({ ...touched, country: true });
validateField("country", updated);
}
)} )}
{renderInputField( {renderInputField(
"phone", "phone",
"Contact Number", "Contact Number",
"+1 (555) 123-4567" formData.country ? `${COUNTRY_CODES[formData.country] || "+"} (XXX) XXX-XXXX` : "+XX (XXX) XXX-XXXX"
)} )}
</div> </div>
</div> </div>
@@ -728,8 +751,8 @@ const ProjectFormSection = () => {
{!formData.agreeTerms && !isRecaptchaVerified {!formData.agreeTerms && !isRecaptchaVerified
? "Please agree to terms and complete verification to submit" ? "Please agree to terms and complete verification to submit"
: !formData.agreeTerms : !formData.agreeTerms
? "Please agree to terms and conditions to submit" ? "Please agree to terms and conditions to submit"
: "Please complete the security verification to submit"} : "Please complete the security verification to submit"}
</p> </p>
)} )}
</div> </div>