Create CorpScheduleConsultation.tsx
cgen-549c4cb6369f4f4ea539928a186d91f4
This commit is contained in:
Builder.io
parent
9c357dbbf9
commit
0681d39dcd
1 changed files with 200 additions and 195 deletions
|
|
@ -8,41 +8,92 @@ import { useState } from "react";
|
|||
|
||||
export default function CorpScheduleConsultation() {
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
company: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
service: "custom-software",
|
||||
timeline: "3-months",
|
||||
budget: "100k-500k",
|
||||
});
|
||||
const [selectedService, setSelectedService] = useState<string | null>(null);
|
||||
|
||||
const services = [
|
||||
{ id: "custom-software", label: "Custom Software Development" },
|
||||
{ id: "technology-consulting", label: "Technology Consulting" },
|
||||
{ id: "game-dev", label: "Game Development Services" },
|
||||
{ id: "design", label: "UX/UI Design" },
|
||||
{ id: "other", label: "Other" },
|
||||
{
|
||||
id: "custom-dev",
|
||||
name: "Custom Software Development",
|
||||
duration: "60 min",
|
||||
description: "Discuss your project requirements and our development approach",
|
||||
details: [
|
||||
"Project scope assessment",
|
||||
"Technology stack recommendations",
|
||||
"Timeline & budget estimation",
|
||||
"Team composition planning",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "consulting",
|
||||
name: "Technology Consulting",
|
||||
duration: "45 min",
|
||||
description: "Strategic guidance for digital transformation initiatives",
|
||||
details: [
|
||||
"Architecture review",
|
||||
"Technology roadmap",
|
||||
"Risk assessment",
|
||||
"Implementation strategy",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "game-dev",
|
||||
name: "Game Development Services",
|
||||
duration: "60 min",
|
||||
description: "Specialized consultation for gaming and Roblox solutions",
|
||||
details: [
|
||||
"Game design review",
|
||||
"Technical architecture",
|
||||
"Optimization strategies",
|
||||
"Multiplayer systems",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
name: "Enterprise Solutions",
|
||||
duration: "90 min",
|
||||
description: "Comprehensive enterprise-level project planning",
|
||||
details: [
|
||||
"Full assessment",
|
||||
"Custom proposal",
|
||||
"Resource planning",
|
||||
"Governance setup",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const timelines = [
|
||||
{ id: "asap", label: "ASAP (Within 1 month)" },
|
||||
{ id: "3-months", label: "3 Months" },
|
||||
{ id: "6-months", label: "6 Months" },
|
||||
{ id: "tbd", label: "TBD" },
|
||||
const consultationProcess = [
|
||||
{
|
||||
step: "1",
|
||||
title: "Initial Assessment",
|
||||
description: "We learn about your business, challenges, and goals",
|
||||
},
|
||||
{
|
||||
step: "2",
|
||||
title: "Solution Design",
|
||||
description: "Our team designs a tailored solution approach",
|
||||
},
|
||||
{
|
||||
step: "3",
|
||||
title: "Proposal & Pricing",
|
||||
description: "Receive a detailed proposal with timeline and investment",
|
||||
},
|
||||
{
|
||||
step: "4",
|
||||
title: "Partnership Begins",
|
||||
description: "Start building with dedicated team support",
|
||||
},
|
||||
];
|
||||
|
||||
const budgets = [
|
||||
{ id: "50k-100k", label: "$50K - $100K" },
|
||||
{ id: "100k-500k", label: "$100K - $500K" },
|
||||
{ id: "500k-1m", label: "$500K - $1M" },
|
||||
{ id: "1m+", label: "$1M+" },
|
||||
const availability = [
|
||||
{ day: "Monday - Friday", time: "9:00 AM - 6:00 PM EST" },
|
||||
{ day: "Saturday", time: "10:00 AM - 2:00 PM EST" },
|
||||
{ day: "Sunday", time: "By appointment" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#3b82f6_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(59,130,246,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(59,130,246,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
|
||||
|
|
@ -50,6 +101,7 @@ export default function CorpScheduleConsultation() {
|
|||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-blue-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
|
|
@ -61,198 +113,151 @@ export default function CorpScheduleConsultation() {
|
|||
</Button>
|
||||
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-blue-300 mb-4">
|
||||
Schedule a Consultation
|
||||
Schedule Your Consultation
|
||||
</h1>
|
||||
<p className="text-lg text-blue-100/80 max-w-3xl">
|
||||
Tell us about your project and let's discuss how we can help transform your business.
|
||||
Get expert guidance from our enterprise solutions team. Choose a service, pick your time, and let's discuss how we can help transform your business.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Selection */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<Card className="bg-blue-950/20 border-blue-400/30">
|
||||
<CardContent className="pt-8 space-y-6">
|
||||
{/* Name & Company */}
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-blue-300 mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, name: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300 placeholder-blue-400/50"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-blue-300 mb-2">
|
||||
Company
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.company}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, company: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300 placeholder-blue-400/50"
|
||||
placeholder="Your company"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email & Phone */}
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-blue-300 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, email: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300 placeholder-blue-400/50"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-blue-300 mb-2">
|
||||
Phone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, phone: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300 placeholder-blue-400/50"
|
||||
placeholder="+1 (555) 000-0000"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-blue-300 mb-3">
|
||||
Service Needed
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{services.map((svc) => (
|
||||
<label key={svc.id} className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="service"
|
||||
value={svc.id}
|
||||
checked={formData.service === svc.id}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, service: e.target.value })
|
||||
}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-blue-300">{svc.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline & Budget */}
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-blue-300 mb-3">
|
||||
Project Timeline
|
||||
</label>
|
||||
<select
|
||||
value={formData.timeline}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, timeline: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300"
|
||||
>
|
||||
{timelines.map((t) => (
|
||||
<option key={t.id} value={t.id}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-blue-300 mb-3">
|
||||
Budget Range
|
||||
</label>
|
||||
<select
|
||||
value={formData.budget}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, budget: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300"
|
||||
>
|
||||
{budgets.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full bg-blue-400 text-black hover:bg-blue-300 py-6">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Schedule Consultation
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 border-t border-blue-400/10">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-blue-300 mb-8">
|
||||
What to Expect
|
||||
Select a Consultation Type
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: <Clock className="h-6 w-6" />,
|
||||
title: "30-Minute Call",
|
||||
description: "Initial discovery meeting with our team",
|
||||
},
|
||||
{
|
||||
icon: <Users className="h-6 w-6" />,
|
||||
title: "Technical Discussion",
|
||||
description: "Deep dive into your requirements and challenges",
|
||||
},
|
||||
{
|
||||
icon: <CheckCircle className="h-6 w-6" />,
|
||||
title: "Proposal",
|
||||
description: "Custom proposal with timeline and pricing",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{services.map((service) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-blue-950/20 border-blue-400/30 text-center"
|
||||
key={service.id}
|
||||
className={`cursor-pointer transition-all ${
|
||||
selectedService === service.id
|
||||
? "bg-blue-500/20 border-blue-300 shadow-[0_0_20px_rgba(59,130,246,0.3)]"
|
||||
: "bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60"
|
||||
}`}
|
||||
onClick={() => setSelectedService(service.id)}
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-blue-400 mb-3 flex justify-center">
|
||||
{item.icon}
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-blue-300 text-lg">
|
||||
{service.name}
|
||||
</CardTitle>
|
||||
<Badge className="bg-blue-500/20 text-blue-300 border border-blue-400/40">
|
||||
<Clock className="h-3 w-3 mr-1" />
|
||||
{service.duration}
|
||||
</Badge>
|
||||
</div>
|
||||
<h3 className="font-bold text-blue-300 mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-blue-200/70">
|
||||
{item.description}
|
||||
{service.description}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{service.details.map((detail, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="flex items-center gap-2 text-sm text-blue-300"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 text-blue-400 flex-shrink-0" />
|
||||
{detail}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Consultation Process */}
|
||||
<section className="py-16 border-t border-blue-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-blue-300 mb-12">
|
||||
How It Works
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{consultationProcess.map((process, idx) => (
|
||||
<div key={idx} className="relative">
|
||||
<Card className="bg-blue-950/20 border-blue-400/30">
|
||||
<CardContent className="pt-6">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center text-white font-bold mb-4">
|
||||
{process.step}
|
||||
</div>
|
||||
<h3 className="font-bold text-blue-300 mb-2">
|
||||
{process.title}
|
||||
</h3>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
{process.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{idx < consultationProcess.length - 1 && (
|
||||
<div className="hidden md:block absolute top-1/2 right-0 translate-x-1/2 transform">
|
||||
<ArrowRight className="h-6 w-6 text-blue-400/40" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Availability */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-blue-300 mb-8">
|
||||
Our Availability
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{availability.map((slot, idx) => (
|
||||
<Card key={idx} className="bg-blue-950/20 border-blue-400/30">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<p className="font-semibold text-blue-300">
|
||||
{slot.day}
|
||||
</p>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
{slot.time}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="bg-blue-400 text-black hover:bg-blue-300"
|
||||
size="sm"
|
||||
>
|
||||
Book Now
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Next Steps */}
|
||||
<section className="py-16 border-t border-blue-400/10">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-blue-300 mb-4">
|
||||
What to Expect
|
||||
</h2>
|
||||
<p className="text-lg text-blue-100/80 mb-8">
|
||||
Our consultants will assess your needs, provide expert recommendations, and create a customized solution proposal tailored to your business goals.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-blue-400 text-black shadow-[0_0_30px_rgba(59,130,246,0.35)] hover:bg-blue-300"
|
||||
onClick={() => navigate("/corp/contact-us")}
|
||||
>
|
||||
Continue to Contact Form
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue