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() {
|
export default function CorpScheduleConsultation() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [formData, setFormData] = useState({
|
const [selectedService, setSelectedService] = useState<string | null>(null);
|
||||||
name: "",
|
|
||||||
company: "",
|
|
||||||
email: "",
|
|
||||||
phone: "",
|
|
||||||
service: "custom-software",
|
|
||||||
timeline: "3-months",
|
|
||||||
budget: "100k-500k",
|
|
||||||
});
|
|
||||||
|
|
||||||
const services = [
|
const services = [
|
||||||
{ id: "custom-software", label: "Custom Software Development" },
|
{
|
||||||
{ id: "technology-consulting", label: "Technology Consulting" },
|
id: "custom-dev",
|
||||||
{ id: "game-dev", label: "Game Development Services" },
|
name: "Custom Software Development",
|
||||||
{ id: "design", label: "UX/UI Design" },
|
duration: "60 min",
|
||||||
{ id: "other", label: "Other" },
|
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 = [
|
const consultationProcess = [
|
||||||
{ id: "asap", label: "ASAP (Within 1 month)" },
|
{
|
||||||
{ id: "3-months", label: "3 Months" },
|
step: "1",
|
||||||
{ id: "6-months", label: "6 Months" },
|
title: "Initial Assessment",
|
||||||
{ id: "tbd", label: "TBD" },
|
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 = [
|
const availability = [
|
||||||
{ id: "50k-100k", label: "$50K - $100K" },
|
{ day: "Monday - Friday", time: "9:00 AM - 6:00 PM EST" },
|
||||||
{ id: "100k-500k", label: "$100K - $500K" },
|
{ day: "Saturday", time: "10:00 AM - 2:00 PM EST" },
|
||||||
{ id: "500k-1m", label: "$500K - $1M" },
|
{ day: "Sunday", time: "By appointment" },
|
||||||
{ id: "1m+", label: "$1M+" },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
<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 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 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" />
|
<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" />
|
<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">
|
<main className="relative z-10">
|
||||||
|
{/* Header */}
|
||||||
<section className="py-16">
|
<section className="py-16">
|
||||||
<div className="container mx-auto max-w-6xl px-4">
|
<div className="container mx-auto max-w-6xl px-4">
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -61,198 +113,151 @@ export default function CorpScheduleConsultation() {
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<h1 className="text-4xl lg:text-5xl font-black text-blue-300 mb-4">
|
<h1 className="text-4xl lg:text-5xl font-black text-blue-300 mb-4">
|
||||||
Schedule a Consultation
|
Schedule Your Consultation
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg text-blue-100/80 max-w-3xl">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Service Selection */}
|
||||||
<section className="py-16">
|
<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">
|
<div className="container mx-auto max-w-6xl px-4">
|
||||||
<h2 className="text-3xl font-bold text-blue-300 mb-8">
|
<h2 className="text-3xl font-bold text-blue-300 mb-8">
|
||||||
What to Expect
|
Select a Consultation Type
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid md:grid-cols-3 gap-6">
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
{[
|
{services.map((service) => (
|
||||||
{
|
|
||||||
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) => (
|
|
||||||
<Card
|
<Card
|
||||||
key={idx}
|
key={service.id}
|
||||||
className="bg-blue-950/20 border-blue-400/30 text-center"
|
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">
|
<CardHeader>
|
||||||
<div className="text-blue-400 mb-3 flex justify-center">
|
<div className="flex items-start justify-between">
|
||||||
{item.icon}
|
<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>
|
</div>
|
||||||
<h3 className="font-bold text-blue-300 mb-2">
|
</CardHeader>
|
||||||
{item.title}
|
<CardContent className="space-y-4">
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-blue-200/70">
|
<p className="text-sm text-blue-200/70">
|
||||||
{item.description}
|
{service.description}
|
||||||
</p>
|
</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>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue