Build CorpScheduleConsultation - Consultation booking form
cgen-9f7c209c9ac94730b154416e74d51172
This commit is contained in:
Builder.io
parent
99a0adaca8
commit
ba1e93cec1
3 changed files with 574 additions and 331 deletions
|
|
@ -1,17 +1,21 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Mail, Phone, MapPin, MessageSquare } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Mail, Phone, MapPin, Clock, ArrowRight } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function CorpContactUs() {
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated grid 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" />
|
||||
|
|
@ -19,121 +23,167 @@ export default function CorpContactUs() {
|
|||
<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">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden py-20 lg:py-28">
|
||||
<div className="container mx-auto max-w-6xl px-4 text-center">
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-blue-300 hover:bg-blue-500/10"
|
||||
onClick={() => navigate("/corp")}
|
||||
>
|
||||
← Back to Corp
|
||||
</Button>
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-blue-300 hover:bg-blue-500/10 mb-8"
|
||||
onClick={() => navigate("/corp")}
|
||||
>
|
||||
← Back to Corp
|
||||
</Button>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-blue-400/40 bg-blue-500/10 text-blue-300 shadow-[0_0_20px_rgba(59,130,246,0.2)]"
|
||||
>
|
||||
<Mail className="h-5 w-5 mr-2" />
|
||||
Contact Us
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-blue-300 sm:text-5xl lg:text-6xl">
|
||||
Get in Touch
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-blue-100/90 sm:text-xl">
|
||||
Reach out to our team. We're here to answer your questions and
|
||||
discuss how we can help your business.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-blue-400 text-black shadow-[0_0_30px_rgba(59,130,246,0.35)] transition hover:bg-blue-300"
|
||||
>
|
||||
<MessageSquare className="mr-2 h-5 w-5" />
|
||||
Send Message
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-blue-400/60 text-blue-300 hover:bg-blue-500/10"
|
||||
>
|
||||
View Office Locations
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-blue-300 mb-4">
|
||||
Get in Touch
|
||||
</h1>
|
||||
<p className="text-lg text-blue-100/80 max-w-3xl">
|
||||
Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Methods */}
|
||||
<section className="border-y border-blue-400/10 bg-black/80 py-16">
|
||||
<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">
|
||||
Contact Methods
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Mail className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">Email</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Send us an email at{" "}
|
||||
<a
|
||||
href="mailto:contact@aethex.corp"
|
||||
className="text-blue-400 hover:text-blue-300"
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-2xl font-bold text-blue-300 mb-8">
|
||||
Contact Information
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex gap-4">
|
||||
<Mail className="h-6 w-6 text-blue-400 flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-blue-400 mb-1">
|
||||
Email
|
||||
</p>
|
||||
<a
|
||||
href="mailto:info@aethex.biz"
|
||||
className="text-blue-300 hover:text-blue-200 transition-colors"
|
||||
>
|
||||
info@aethex.biz
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Phone className="h-6 w-6 text-blue-400 flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-blue-400 mb-1">
|
||||
Phone
|
||||
</p>
|
||||
<a
|
||||
href="tel:+13465567100"
|
||||
className="text-blue-300 hover:text-blue-200 transition-colors"
|
||||
>
|
||||
(346) 556-7100
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Clock className="h-6 w-6 text-blue-400 flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-blue-400 mb-1">
|
||||
Response Time
|
||||
</p>
|
||||
<p className="text-blue-300">
|
||||
Within 24 business hours
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-blue-400/10">
|
||||
<h3 className="text-lg font-bold text-blue-300 mb-4">
|
||||
Quick Links
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start text-blue-300 hover:bg-blue-500/10"
|
||||
onClick={() => navigate("/services")}
|
||||
>
|
||||
contact@aethex.corp
|
||||
</a>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Phone className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">Phone</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Call us at{" "}
|
||||
<a
|
||||
href="tel:+14365567100"
|
||||
className="text-blue-400 hover:text-blue-300"
|
||||
View Services →
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start text-blue-300 hover:bg-blue-500/10"
|
||||
onClick={() => navigate("/corp/view-case-studies")}
|
||||
>
|
||||
(346) 556-7100
|
||||
</a>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
Case Studies →
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start text-blue-300 hover:bg-blue-500/10"
|
||||
onClick={() => navigate("/corp/schedule-consultation")}
|
||||
>
|
||||
Schedule Consultation →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<MapPin className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">Office</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Queen Creek, Arizona
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Contact Form */}
|
||||
<div>
|
||||
<Card className="bg-blue-950/20 border-blue-400/30">
|
||||
<CardContent className="pt-8 space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-blue-300 mb-2">
|
||||
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>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<MessageSquare className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">Live Chat</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Chat with our team in real-time for quick support
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.message}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
message: e.target.value,
|
||||
})
|
||||
}
|
||||
rows={5}
|
||||
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="Tell us about your project..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button className="w-full bg-blue-400 text-black hover:bg-blue-300 py-6">
|
||||
Send Message
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,47 @@ import Layout from "@/components/Layout";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Briefcase, Calendar, Clock, Users } from "lucide-react";
|
||||
import { Calendar, Clock, Users, CheckCircle, ArrowRight } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
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 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" },
|
||||
];
|
||||
|
||||
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 budgets = [
|
||||
{ id: "50k-100k", label: "$50K - $100K" },
|
||||
{ id: "100k-500k", label: "$100K - $500K" },
|
||||
{ id: "500k-1m", label: "$500K - $1M" },
|
||||
{ id: "1m+", label: "$1M+" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated grid 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" />
|
||||
|
|
@ -19,121 +50,206 @@ 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">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden py-20 lg:py-28">
|
||||
<div className="container mx-auto max-w-6xl px-4 text-center">
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-blue-300 hover:bg-blue-500/10"
|
||||
onClick={() => navigate("/corp")}
|
||||
>
|
||||
← Back to Corp
|
||||
</Button>
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-blue-300 hover:bg-blue-500/10 mb-8"
|
||||
onClick={() => navigate("/corp")}
|
||||
>
|
||||
← Back to Corp
|
||||
</Button>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-blue-400/40 bg-blue-500/10 text-blue-300 shadow-[0_0_20px_rgba(59,130,246,0.2)]"
|
||||
>
|
||||
<Calendar className="h-5 w-5 mr-2" />
|
||||
Schedule Consultation
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-blue-300 sm:text-5xl lg:text-6xl">
|
||||
Let's Talk Strategy
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-blue-100/90 sm:text-xl">
|
||||
Book a consultation with our experts to discuss your digital
|
||||
transformation goals and how we can help.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-blue-400 text-black shadow-[0_0_30px_rgba(59,130,246,0.35)] transition hover:bg-blue-300"
|
||||
>
|
||||
<Calendar className="mr-2 h-5 w-5" />
|
||||
Book Now
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-blue-400/60 text-blue-300 hover:bg-blue-500/10"
|
||||
>
|
||||
View Availability
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-blue-300 mb-4">
|
||||
Schedule a 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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Consultation Types */}
|
||||
<section className="border-y border-blue-400/10 bg-black/80 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">
|
||||
<h2 className="text-3xl font-bold text-blue-300 mb-8">
|
||||
Consultation Options
|
||||
What to Expect
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Clock className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">
|
||||
30 Min Quick Sync
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
A focused discussion to understand your challenges and
|
||||
explore potential solutions.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Briefcase className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">
|
||||
1 Hour Strategy Session
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
In-depth consultation to develop a strategic roadmap for
|
||||
your digital goals.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Users className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">
|
||||
Team Workshop
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Collaborative session with your team to identify
|
||||
opportunities and align strategy.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Calendar className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">
|
||||
Discovery Engagement
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Comprehensive assessment of your current state and
|
||||
transformation priorities.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-blue-950/20 border-blue-400/30 text-center"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-blue-400 mb-3 flex justify-center">
|
||||
{item.icon}
|
||||
</div>
|
||||
<h3 className="font-bold text-blue-300 mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
{item.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,76 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Award, TrendingUp, Target, CheckCircle } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { TrendingUp, Clock, Users, DollarSign, ArrowRight } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function CorpViewCaseStudies() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
title: "Fortune 500 Tech Company - Digital Transformation",
|
||||
industry: "Technology",
|
||||
scope: "Cloud Migration & Modernization",
|
||||
timeline: "9 months",
|
||||
team: "15 engineers",
|
||||
challenge:
|
||||
"Legacy systems preventing innovation. Quarterly release cycles. High operational costs.",
|
||||
solution:
|
||||
"Complete cloud-native architecture redesign. Microservices migration. CI/CD pipeline implementation.",
|
||||
results: [
|
||||
{ metric: "$2.5M", description: "Annual cost savings" },
|
||||
{ metric: "3x", description: "Faster deployment cycles" },
|
||||
{ metric: "99.99%", description: "System uptime achieved" },
|
||||
],
|
||||
testimonial:
|
||||
'"AeThex completely transformed our development process. We went from quarterly to weekly deployments."',
|
||||
author: "CTO",
|
||||
},
|
||||
{
|
||||
title: "Gaming Studio - Multiplayer Architecture",
|
||||
industry: "Gaming",
|
||||
scope: "Backend Infrastructure",
|
||||
timeline: "6 months",
|
||||
team: "8 engineers",
|
||||
challenge:
|
||||
"Scaling real-time multiplayer from 10K to 100K concurrent players. Network latency issues.",
|
||||
solution:
|
||||
"Custom networking layer. Server clustering. Database optimization and sharding strategy.",
|
||||
results: [
|
||||
{ metric: "150K", description: "Peak concurrent players" },
|
||||
{ metric: "50ms", description: "Average latency" },
|
||||
{ metric: "99.99%", description: "Uptime during launch" },
|
||||
],
|
||||
testimonial:
|
||||
'"Their expertise in game architecture was exactly what we needed. Launch was flawless."',
|
||||
author: "Studio Director",
|
||||
},
|
||||
{
|
||||
title: "Enterprise Client - Roblox Platform Experience",
|
||||
industry: "Enterprise",
|
||||
scope: "Custom Roblox Development",
|
||||
timeline: "4 months",
|
||||
team: "10 developers",
|
||||
challenge:
|
||||
"Create engaging branded experience on Roblox for 10K+ internal employees. No prior Roblox experience.",
|
||||
solution:
|
||||
"Custom Roblox game development. Branded environment. Interactive activities and leaderboards.",
|
||||
results: [
|
||||
{ metric: "10K+", description: "Employee engagement" },
|
||||
{ metric: "85%", description: "Completion rate" },
|
||||
{ metric: "Record", description: "Internal engagement scores" },
|
||||
],
|
||||
testimonial:
|
||||
'"We had no idea Roblox could be this powerful for internal engagement. Impressive work."',
|
||||
author: "HR Director",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated grid 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" />
|
||||
|
|
@ -19,122 +78,140 @@ export default function CorpViewCaseStudies() {
|
|||
<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">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden py-20 lg:py-28">
|
||||
<div className="container mx-auto max-w-6xl px-4 text-center">
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-blue-300 hover:bg-blue-500/10"
|
||||
onClick={() => navigate("/corp")}
|
||||
>
|
||||
← Back to Corp
|
||||
</Button>
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-blue-300 hover:bg-blue-500/10 mb-8"
|
||||
onClick={() => navigate("/corp")}
|
||||
>
|
||||
← Back to Corp
|
||||
</Button>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-blue-400/40 bg-blue-500/10 text-blue-300 shadow-[0_0_20px_rgba(59,130,246,0.2)]"
|
||||
>
|
||||
<Award className="h-5 w-5 mr-2" />
|
||||
Case Studies
|
||||
</Badge>
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-blue-300 mb-4">
|
||||
Client Success Stories
|
||||
</h1>
|
||||
<p className="text-lg text-blue-100/80 max-w-3xl">
|
||||
Real results from real clients. See how we've transformed businesses through technology.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-blue-300 sm:text-5xl lg:text-6xl">
|
||||
Success Stories
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-blue-100/90 sm:text-xl">
|
||||
See how enterprises transformed their operations and achieved
|
||||
remarkable results with our solutions.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-blue-400 text-black shadow-[0_0_30px_rgba(59,130,246,0.35)] transition hover:bg-blue-300"
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="space-y-12">
|
||||
{caseStudies.map((study, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-blue-950/20 border-blue-400/30 overflow-hidden"
|
||||
>
|
||||
<Award className="mr-2 h-5 w-5" />
|
||||
Browse Cases
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-blue-400/60 text-blue-300 hover:bg-blue-500/10"
|
||||
>
|
||||
Get Custom Case
|
||||
</Button>
|
||||
</div>
|
||||
<CardContent className="pt-8 space-y-8">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<Badge className="bg-blue-500/20 text-blue-300 border border-blue-400/40 mb-3">
|
||||
{study.industry}
|
||||
</Badge>
|
||||
<h2 className="text-2xl font-bold text-blue-300 mb-2">
|
||||
{study.title}
|
||||
</h2>
|
||||
<p className="text-blue-200/70">{study.scope}</p>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Left */}
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-blue-400 mb-2">
|
||||
CHALLENGE
|
||||
</p>
|
||||
<p className="text-sm text-blue-200/80">
|
||||
{study.challenge}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-blue-400 mb-2">
|
||||
SOLUTION
|
||||
</p>
|
||||
<p className="text-sm text-blue-200/80">
|
||||
{study.solution}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-blue-400 mb-2">
|
||||
PROJECT DETAILS
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div>
|
||||
<Clock className="h-4 w-4 text-blue-400 mb-1" />
|
||||
<p className="text-xs text-blue-200/70">
|
||||
{study.timeline}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Users className="h-4 w-4 text-blue-400 mb-1" />
|
||||
<p className="text-xs text-blue-200/70">
|
||||
{study.team}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right - Results */}
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-green-400 mb-4">
|
||||
RESULTS
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
{study.results.map((result, i) => (
|
||||
<div key={i} className="flex items-start gap-3">
|
||||
<TrendingUp className="h-5 w-5 text-green-400 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-bold text-green-300">
|
||||
{result.metric}
|
||||
</p>
|
||||
<p className="text-xs text-blue-200/70">
|
||||
{result.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial */}
|
||||
<div className="pt-6 border-t border-blue-400/10">
|
||||
<p className="italic text-blue-200/80 mb-2">
|
||||
{study.testimonial}
|
||||
</p>
|
||||
<p className="text-xs text-blue-400 font-semibold">
|
||||
— {study.author}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Case Studies Grid */}
|
||||
<section className="border-y border-blue-400/10 bg-black/80 py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-blue-300 mb-8">
|
||||
Featured Case Studies
|
||||
<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">
|
||||
Ready to Transform Your Business?
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<TrendingUp className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">
|
||||
50% Revenue Growth
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Enterprise client achieved significant revenue growth
|
||||
through digital transformation.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Target className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">
|
||||
60% Cost Reduction
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Optimized operations and reduced overhead through
|
||||
strategic consulting.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<CheckCircle className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">
|
||||
3x Time to Market
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Accelerated product launches through process optimization
|
||||
and automation.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Award className="h-8 w-8 text-blue-400 mb-2" />
|
||||
<CardTitle className="text-blue-300">
|
||||
Industry Awards
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-blue-200/70">
|
||||
Recognized solutions that won industry awards for
|
||||
innovation and impact.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<p className="text-lg text-blue-100/80 mb-8">
|
||||
Let's discuss how we can help you achieve similar results.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-blue-400 text-black hover:bg-blue-300"
|
||||
onClick={() => navigate("/corp/schedule-consultation")}
|
||||
>
|
||||
Schedule Consultation
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue