AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create CorpViewCaseStudies.tsx

Browse source 
cgen-6220aed25431451db69961ec84d1848e
This commit is contained in:
Builder.io 2025-11-07 23:47:20 +00:00
parent 0681d39dcd
commit 5ba8a2ef6a
1 changed files with 200 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

331
client/pages/corp/CorpViewCaseStudies.tsx
View file

@ -1,8 +1,8 @@
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TrendingUp, Clock, Users, DollarSign, ArrowRight } from "lucide-react"; import { Briefcase, TrendingUp, Users, ArrowRight, Target } from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
export default function CorpViewCaseStudies() { export default function CorpViewCaseStudies() {
@ -10,67 +10,107 @@ export default function CorpViewCaseStudies() {
const caseStudies = [ const caseStudies = [
{ {
title: "Fortune 500 Tech Company - Digital Transformation", id: 1,
company: "Global Tech Corp",
industry: "Technology", industry: "Technology",
scope: "Cloud Migration & Modernization", challenge: "Legacy systems blocking innovation",
timeline: "9 months", solution: "Cloud-native modernization with microservices",
team: "15 engineers", result: "$2.5M annual savings, 3x faster deployments",
challenge: metrics: [
"Legacy systems preventing innovation. Quarterly release cycles. High operational costs.", { label: "Annual Savings", value: "$2.5M" },
solution: { label: "Deployment Speed", value: "3x faster" },
"Complete cloud-native architecture redesign. Microservices migration. CI/CD pipeline implementation.", { label: "Uptime", value: "99.99%" },
results: [ { label: "Team Growth", value: "+40%" },
{ metric: "$2.5M", description: "Annual cost savings" },
{ metric: "3x", description: "Faster deployment cycles" },
{ metric: "99.99%", description: "System uptime achieved" },
], ],
testimonial: timeline: "12 months",
'"AeThex completely transformed our development process. We went from quarterly to weekly deployments."', teamSize: "8 developers",
author: "CTO",
}, },
{ {
title: "Gaming Studio - Multiplayer Architecture", id: 2,
company: "Gaming Studio Pro",
industry: "Gaming", industry: "Gaming",
scope: "Backend Infrastructure", challenge: "Scaling multiplayer to 100K concurrent players",
timeline: "6 months", solution: "Custom networking architecture & optimization",
team: "8 engineers", result: "99.99% uptime, 150K peak concurrent users",
challenge: metrics: [
"Scaling real-time multiplayer from 10K to 100K concurrent players. Network latency issues.", { label: "Peak Concurrent Users", value: "150K" },
solution: { label: "Uptime", value: "99.99%" },
"Custom networking layer. Server clustering. Database optimization and sharding strategy.", { label: "Latency", value: "<100ms" },
results: [ { label: "Scaling Improvement", value: "15x" },
{ metric: "150K", description: "Peak concurrent players" },
{ metric: "50ms", description: "Average latency" },
{ metric: "99.99%", description: "Uptime during launch" },
], ],
testimonial: timeline: "8 months",
'"Their expertise in game architecture was exactly what we needed. Launch was flawless."', teamSize: "6 developers + 2 DevOps",
author: "Studio Director",
}, },
{ {
title: "Enterprise Client - Roblox Platform Experience", id: 3,
industry: "Enterprise", company: "Financial Services Firm",
scope: "Custom Roblox Development", industry: "Finance",
timeline: "4 months", challenge: "Building real-time trading platform",
team: "10 developers", solution: "Low-latency system with custom databases",
challenge: result: "Sub-millisecond latency, 99.95% uptime",
"Create engaging branded experience on Roblox for 10K+ internal employees. No prior Roblox experience.", metrics: [
solution: { label: "Latency", value: "<1ms" },
"Custom Roblox game development. Branded environment. Interactive activities and leaderboards.", { label: "Uptime", value: "99.95%" },
results: [ { label: "Transactions/sec", value: "100K+" },
{ metric: "10K+", description: "Employee engagement" }, { label: "Time to Market", value: "6 months" },
{ metric: "85%", description: "Completion rate" },
{ metric: "Record", description: "Internal engagement scores" },
], ],
testimonial: timeline: "6 months",
'"We had no idea Roblox could be this powerful for internal engagement. Impressive work."', teamSize: "10 developers",
author: "HR Director", },
{
id: 4,
company: "E-Commerce Giant",
industry: "Retail",
challenge: "Modernizing payment processing system",
solution: "PCI-DSS compliant microservices architecture",
result: "99.98% uptime, 50% transaction cost reduction",
metrics: [
{ label: "Uptime", value: "99.98%" },
{ label: "Cost Reduction", value: "50%" },
{ label: "Transaction Volume", value: "2M+/day" },
{ label: "Customer Satisfaction", value: "98%" },
],
timeline: "9 months",
teamSize: "7 developers",
},
{
id: 5,
company: "Healthcare Platform",
industry: "Healthcare",
challenge: "HIPAA-compliant application modernization",
solution: "Secure cloud infrastructure with audit logging",
result: "100% compliance, 5x performance improvement",
metrics: [
{ label: "Compliance", value: "100% HIPAA" },
{ label: "Performance", value: "5x faster" },
{ label: "Patient Records", value: "500K+" },
{ label: "Uptime", value: "99.99%" },
],
timeline: "10 months",
teamSize: "9 developers",
},
{
id: 6,
company: "Media Broadcasting Co",
industry: "Media",
challenge: "Real-time video streaming to millions",
solution: "Distributed CDN with custom encoding",
result: "4K streaming, 50M+ concurrent viewers",
metrics: [
{ label: "Concurrent Viewers", value: "50M+" },
{ label: "Video Quality", value: "4K" },
{ label: "Global Regions", value: "6" },
{ label: "Buffering Rate", value: "<0.5%" },
],
timeline: "14 months",
teamSize: "12 developers",
}, },
]; ];
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" />
@ -78,6 +118,7 @@ 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" /> <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
@ -89,107 +130,105 @@ export default function CorpViewCaseStudies() {
</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">
Client Success Stories Case Studies
</h1> </h1>
<p className="text-lg text-blue-100/80 max-w-3xl"> <p className="text-lg text-blue-100/80 max-w-3xl">
Real results from real clients. See how we've transformed businesses through technology. Real-world success stories from our enterprise clients. See how we've helped transform businesses across industries.
</p> </p>
</div> </div>
</section> </section>
{/* Case Studies Grid */}
<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">
<div className="space-y-12"> <div className="space-y-8">
{caseStudies.map((study, idx) => ( {caseStudies.map((study, idx) => (
<Card <Card
key={idx} key={study.id}
className="bg-blue-950/20 border-blue-400/30 overflow-hidden" className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-all overflow-hidden"
> >
<CardContent className="pt-8 space-y-8"> <CardContent className="p-0">
{/* Header */} <div className="grid md:grid-cols-2 gap-6 p-6">
<div> {/* Left Column */}
<Badge className="bg-blue-500/20 text-blue-300 border border-blue-400/40 mb-3"> <div className="space-y-4">
{study.industry} <div>
</Badge> <div className="flex items-start justify-between mb-3">
<h2 className="text-2xl font-bold text-blue-300 mb-2"> <div>
{study.title} <h3 className="text-2xl font-bold text-blue-300 mb-1">
</h2> {study.company}
<p className="text-blue-200/70">{study.scope}</p> </h3>
</div> <Badge className="bg-blue-500/20 text-blue-300 border border-blue-400/40">
{study.industry}
</Badge>
</div>
</div>
</div>
{/* Grid */} <div className="space-y-3">
<div className="grid md:grid-cols-2 gap-8"> <div>
{/* Left */} <p className="text-xs font-semibold text-blue-400 mb-1">
<div className="space-y-6"> CHALLENGE
<div> </p>
<p className="text-xs font-semibold text-blue-400 mb-2"> <p className="text-sm text-blue-200/80">
CHALLENGE {study.challenge}
</p> </p>
<p className="text-sm text-blue-200/80"> </div>
{study.challenge} <div>
</p> <p className="text-xs font-semibold text-blue-400 mb-1">
SOLUTION
</p>
<p className="text-sm text-blue-200/80">
{study.solution}
</p>
</div>
</div> </div>
<div>
<p className="text-xs font-semibold text-blue-400 mb-2"> <div className="grid grid-cols-2 gap-3 pt-4 border-t border-blue-400/10">
SOLUTION <div>
</p> <p className="text-xs text-blue-400 font-semibold mb-1">
<p className="text-sm text-blue-200/80"> TIMELINE
{study.solution} </p>
</p> <p className="font-semibold text-blue-300">
</div> {study.timeline}
<div> </p>
<p className="text-xs font-semibold text-blue-400 mb-2"> </div>
PROJECT DETAILS <div>
</p> <p className="text-xs text-blue-400 font-semibold mb-1">
<div className="flex flex-wrap gap-4"> TEAM
<div> </p>
<Clock className="h-4 w-4 text-blue-400 mb-1" /> <p className="font-semibold text-blue-300">
<p className="text-xs text-blue-200/70"> {study.teamSize}
{study.timeline} </p>
</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> </div>
</div> </div>
{/* Right - Results */} {/* Right Column */}
<div> <div className="space-y-4">
<p className="text-xs font-semibold text-green-400 mb-4"> <div className="bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg p-4 text-white">
RESULTS <p className="text-xs font-semibold mb-2 opacity-90">
</p> RESULTS
<div className="space-y-4"> </p>
{study.results.map((result, i) => ( <p className="text-lg font-bold">{study.result}</p>
<div key={i} className="flex items-start gap-3"> </div>
<TrendingUp className="h-5 w-5 text-green-400 mt-0.5 flex-shrink-0" />
<div> <div className="grid grid-cols-2 gap-3">
<p className="font-bold text-green-300"> {study.metrics.map((metric, midx) => (
{result.metric} <div
</p> key={midx}
<p className="text-xs text-blue-200/70"> className="bg-blue-950/40 rounded-lg p-3"
{result.description} >
</p> <p className="text-xs text-blue-400 font-semibold mb-1">
</div> {metric.label}
</p>
<p className="text-lg font-bold text-blue-300">
{metric.value}
</p>
</div> </div>
))} ))}
</div> </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> </CardContent>
</Card> </Card>
))} ))}
@ -197,19 +236,49 @@ export default function CorpViewCaseStudies() {
</div> </div>
</section> </section>
{/* Summary Stats */}
<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">
Overall Impact
</h2>
<div className="grid md:grid-cols-4 gap-6">
{[
{ label: "Enterprise Clients", value: "100+" },
{ label: "Successful Projects", value: "250+" },
{ label: "Total Investment Saved", value: "$50M+" },
{ label: "Avg Satisfaction", value: "98%" },
].map((stat, idx) => (
<Card
key={idx}
className="bg-blue-950/30 border-blue-400/40 text-center"
>
<CardContent className="pt-6">
<p className="text-3xl font-black text-blue-400 mb-2">
{stat.value}
</p>
<p className="text-sm text-blue-200/70">{stat.label}</p>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* CTA */}
<section className="py-16 border-t border-blue-400/10"> <section className="py-16 border-t border-blue-400/10">
<div className="container mx-auto max-w-4xl px-4 text-center"> <div className="container mx-auto max-w-4xl px-4 text-center">
<h2 className="text-3xl font-bold text-blue-300 mb-4"> <h2 className="text-3xl font-bold text-blue-300 mb-4">
Ready to Transform Your Business? Ready for Your Success Story?
</h2> </h2>
<p className="text-lg text-blue-100/80 mb-8"> <p className="text-lg text-blue-100/80 mb-8">
Let's discuss how we can help you achieve similar results. Let's discuss how we can help transform your business and achieve similar results.
</p> </p>
<Button <Button
className="bg-blue-400 text-black hover:bg-blue-300" className="bg-blue-400 text-black shadow-[0_0_30px_rgba(59,130,246,0.35)] hover:bg-blue-300"
onClick={() => navigate("/corp/schedule-consultation")} onClick={() => navigate("/corp/schedule-consultation")}
> >
Schedule Consultation Schedule a Consultation
<ArrowRight className="ml-2 h-4 w-4" /> <ArrowRight className="ml-2 h-4 w-4" />
</Button> </Button>
</div> </div>