From 5fba23e5cc34dd1757fb083f8a7ac5ba1dc80c99 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Thu, 24 Jul 2025 19:00:07 +0530
Subject: [PATCH] add dynamic no. in contat page and other changes

---
 App.tsx                         |  2 +-
 components/Navigation.tsx       |  2 +-
 pages/AboutWDI.tsx              | 13 ++++---
 pages/Contact.tsx               |  2 +-
 pages/OfficeLocations.tsx       |  2 +-
 pages/ScheduleDiscoveryCall.tsx | 62 ++++++++++++++++++---------------
 pages/StartAProject.tsx         | 51 +++++++++++++++++++--------
 7 files changed, 82 insertions(+), 52 deletions(-)

diff --git a/App.tsx b/App.tsx
index 1def22e..db6a934 100644
--- a/App.tsx
+++ b/App.tsx
@@ -374,7 +374,7 @@ export default function App() {
     "/solutions": Solutions,
     "/industries": Industries,
     "/resources": Resources,
-    "/company": Company,
+    // "/company": Company,
     // "/contact": ContactMain,
     "/web-cloud": WebCloudServices,
     "/software-engineering": SoftwareEngineering,
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 9d0c3e9..85ad485 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -967,7 +967,7 @@ export const Navigation = () => {
       case "Services":
         return "/services";
       case "Company":
-        return "/company";
+        return "/company/about-wdi";
       case "Resources":
         return "/resources";
       case "Contact":
diff --git a/pages/AboutWDI.tsx b/pages/AboutWDI.tsx
index fba3ee7..ec5502d 100644
--- a/pages/AboutWDI.tsx
+++ b/pages/AboutWDI.tsx
@@ -17,6 +17,7 @@ import {
   BookOpen, MessageSquare, Briefcase, Mail
 } from "lucide-react";
 import { Helmet } from "react-helmet-async";
+import { CarouselTestimonials } from "@/components/CarouselTestimonials";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
@@ -414,15 +415,17 @@ const TestimonialSection = () => {
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           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-[#E5195E]">Clients Say</span>
-          </h2>
+          </h2> */}
+          <CarouselTestimonials />
         </motion.div>
 
-        <motion.div
+
+        {/* <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
@@ -454,7 +457,7 @@ const TestimonialSection = () => {
               </div>
             </CardContent>
           </Card>
-        </motion.div>
+        </motion.div> */}
       </div>
     </section>
   );
diff --git a/pages/Contact.tsx b/pages/Contact.tsx
index 3eb0330..afd70f3 100644
--- a/pages/Contact.tsx
+++ b/pages/Contact.tsx
@@ -39,7 +39,7 @@ export const Contact = () => {
   ];
 
   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: 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" }
diff --git a/pages/OfficeLocations.tsx b/pages/OfficeLocations.tsx
index e150dc7..c918d14 100644
--- a/pages/OfficeLocations.tsx
+++ b/pages/OfficeLocations.tsx
@@ -394,7 +394,7 @@ export const OfficeLocations = () => {
                 <CardContent className="p-6 text-center">
                   <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>
-                  <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">
                     Send Email
                   </Button>
diff --git a/pages/ScheduleDiscoveryCall.tsx b/pages/ScheduleDiscoveryCall.tsx
index 5498369..7301a99 100644
--- a/pages/ScheduleDiscoveryCall.tsx
+++ b/pages/ScheduleDiscoveryCall.tsx
@@ -102,12 +102,12 @@ export const ScheduleDiscoveryCall = () => {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSubmitting(true);
-    
+
     // Simulate booking submission
     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.`);
-    
+
     // Reset form
     setFormData({
       name: "", email: "", company: "", phone: "", callPurpose: "", meetingType: "video"
@@ -123,7 +123,7 @@ export const ScheduleDiscoveryCall = () => {
   return (
     <div className="dark min-h-screen bg-background">
       <Navigation />
-      
+
       {/* Hero Section */}
       <section className="pt-24 pb-16 bg-background">
         <div className="container mx-auto px-6 lg:px-8">
@@ -162,15 +162,15 @@ export const ScheduleDiscoveryCall = () => {
       <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="grid lg:grid-cols-3 gap-12">
-            
+
             {/* Booking Form */}
             <div className="lg:col-span-2">
               <Card className="bg-background/50 border-white/10">
                 <CardContent className="p-8">
                   <h2 className="text-2xl font-bold text-white mb-6">Book Your Discovery Call</h2>
-                  
+
                   <form onSubmit={handleSubmit} className="space-y-8">
-                    
+
                     {/* Contact Information */}
                     <div>
                       <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"
                           />
                         </div>
-                        
+
                         <div>
                           <label className="block text-sm font-medium text-white mb-2">Email *</label>
                           <Input
@@ -197,7 +197,7 @@ export const ScheduleDiscoveryCall = () => {
                             className="bg-card/50 border-white/10"
                           />
                         </div>
-                        
+
                         <div>
                           <label className="block text-sm font-medium text-white mb-2">Company Name *</label>
                           <Input
@@ -208,7 +208,7 @@ export const ScheduleDiscoveryCall = () => {
                             className="bg-card/50 border-white/10"
                           />
                         </div>
-                        
+
                         <div>
                           <label className="block text-sm font-medium text-white mb-2">Phone Number</label>
                           <Input
@@ -239,7 +239,7 @@ export const ScheduleDiscoveryCall = () => {
                             </SelectContent>
                           </Select>
                         </div>
-                        
+
                         <div>
                           <label className="block text-sm font-medium text-white mb-2">Preferred Expert</label>
                           <Select value={selectedExpert} onValueChange={setSelectedExpert}>
@@ -257,7 +257,7 @@ export const ScheduleDiscoveryCall = () => {
                           </Select>
                         </div>
                       </div>
-                      
+
                       <div>
                         <label className="block text-sm font-medium text-white mb-2">Brief purpose of the call *</label>
                         <Textarea
@@ -284,18 +284,18 @@ export const ScheduleDiscoveryCall = () => {
                             <SelectContent>
                               {availableDates.map((date) => (
                                 <SelectItem key={date} value={date}>
-                                  {new Date(date).toLocaleDateString('en-US', { 
-                                    weekday: 'long', 
-                                    year: 'numeric', 
-                                    month: 'long', 
-                                    day: 'numeric' 
+                                  {new Date(date).toLocaleDateString('en-US', {
+                                    weekday: 'long',
+                                    year: 'numeric',
+                                    month: 'long',
+                                    day: 'numeric'
                                   })}
                                 </SelectItem>
                               ))}
                             </SelectContent>
                           </Select>
                         </div>
-                        
+
                         <div>
                           <label className="block text-sm font-medium text-white mb-2">Preferred Time (EST) *</label>
                           <Select value={selectedTime} onValueChange={setSelectedTime}>
@@ -329,15 +329,15 @@ export const ScheduleDiscoveryCall = () => {
 
             {/* Sidebar Info */}
             <div className="space-y-8">
-              
+
               {/* Selected Expert Info */}
               {selectedExpertData && (
                 <Card className="bg-background/50 border-white/10">
                   <CardContent className="p-6">
                     <h3 className="text-lg font-semibold text-white mb-4">Your Expert Consultant</h3>
                     <div className="flex items-start gap-4">
-                      <img 
-                        src={selectedExpertData.image} 
+                      <img
+                        src={selectedExpertData.image}
                         alt={selectedExpertData.name}
                         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">
                     If scheduling isn't convenient, you can reach us directly via email.
                   </p>
-                  <Button variant="outline" className="w-full border-white/20 text-white hover:bg-white/10">
-                    <Mail className="w-4 h-4 mr-2" />
-                    Send Email to info@wdi.com
-                  </Button>
+                  <a href="mailto:ideas@wdipl.com" className="block w-full">
+                    <Button variant="outline" className="w-full border-white/20 text-white hover:bg-white/10">
+                      <Mail className="w-4 h-4 mr-2" />
+                      Send Email to ideas@wdipl.com
+                    </Button>
+                  </a>
                 </CardContent>
               </Card>
             </div>
@@ -400,7 +402,7 @@ export const ScheduleDiscoveryCall = () => {
       </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="text-center mb-12">
             <h2 className="text-3xl font-bold text-white mb-4">Meet Our Expert Consultants</h2>
@@ -433,7 +435,7 @@ export const ScheduleDiscoveryCall = () => {
             ))}
           </div>
         </div>
-      </section>
+      </section> */}
 
       {/* Process Section */}
       <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>
             <p className="text-muted-foreground">Simple steps to get started with your discovery call</p>
           </div>
-          
+
           <div className="grid md:grid-cols-4 gap-8">
             {[
               { 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.
             </p>
             <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
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
diff --git a/pages/StartAProject.tsx b/pages/StartAProject.tsx
index 94788fb..0f64ab6 100644
--- a/pages/StartAProject.tsx
+++ b/pages/StartAProject.tsx
@@ -278,9 +278,8 @@ const ProjectFormSection = () => {
       <Input
         type={type}
         placeholder={placeholder}
-        className={`bg-gray-800/30 border-gray-600/50 text-white h-12 text-base ${
-          errors[field] ? "border-red-500" : ""
-        }`}
+        className={`bg-gray-800/30 border-gray-600/50 text-white h-12 text-base ${errors[field] ? "border-red-500" : ""
+          }`}
         value={formData[field] as string}
         onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
         onBlur={() => handleBlur(field)}
@@ -295,7 +294,8 @@ const ProjectFormSection = () => {
     field: keyof typeof formData,
     label: string,
     placeholder: string,
-    options: { value: string; label: string }[]
+    options: { value: string; label: string }[],
+    onValueChange?: (value: string) => void
   ) => (
     <div className="space-y-3" id={field}>
       <label className="block text-sm font-medium text-white">{label} *</label>
@@ -306,12 +306,14 @@ const ProjectFormSection = () => {
           setFormData(updated);
           setTouched({ ...touched, [field]: true });
           validateField(field, updated);
+          if (onValueChange) {
+            onValueChange(value);
+          }
         }}
       >
         <SelectTrigger
-          className={`bg-gray-800/30 border-gray-600/50 text-white h-12 ${
-            errors[field] ? "border-red-500" : ""
-          }`}
+          className={`bg-gray-800/30 border-gray-600/50 text-white h-12 min-h-12 ${errors[field] ? "border-red-500" : ""
+            }`}
         >
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
@@ -329,6 +331,18 @@ const ProjectFormSection = () => {
     </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 = (
     field: keyof typeof formData,
     label: string,
@@ -347,9 +361,8 @@ const ProjectFormSection = () => {
       <Textarea
         placeholder={placeholder}
         rows={rows}
-        className={`bg-gray-800/30 border-gray-600/50 text-white text-base resize-none ${
-          errors[field] ? "border-red-500" : ""
-        }`}
+        className={`bg-gray-800/30 border-gray-600/50 text-white text-base resize-none ${errors[field] ? "border-red-500" : ""
+          }`}
         value={formData[field] as string}
         onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
         onBlur={() => handleBlur(field)}
@@ -498,12 +511,22 @@ const ProjectFormSection = () => {
                         { value: "de", label: "Germany" },
                         { value: "fr", label: "France" },
                         { 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(
                       "phone",
                       "Contact Number",
-                      "+1 (555) 123-4567"
+                      formData.country ? `${COUNTRY_CODES[formData.country] || "+"} (XXX) XXX-XXXX` : "+XX (XXX) XXX-XXXX"
                     )}
                   </div>
                 </div>
@@ -728,8 +751,8 @@ const ProjectFormSection = () => {
                       {!formData.agreeTerms && !isRecaptchaVerified
                         ? "Please agree to terms and complete verification to submit"
                         : !formData.agreeTerms
-                        ? "Please agree to terms and conditions to submit"
-                        : "Please complete the security verification to submit"}
+                          ? "Please agree to terms and conditions to submit"
+                          : "Please complete the security verification to submit"}
                     </p>
                   )}
                 </div>