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

13
pages/AboutWDI.tsx
View File

@@ -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>
);

2
pages/Contact.tsx
View File

@@ -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" }

2
pages/OfficeLocations.tsx
View File

@@ -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>

62
pages/ScheduleDiscoveryCall.tsx
View File

@@ -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>

51
pages/StartAProject.tsx
View File

@@ -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>