353 lines
13 KiB
TypeScript
353 lines
13 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import {
|
||
|
|
ArrowRight,
|
||
|
|
Clock,
|
||
|
|
FileText,
|
||
|
|
Lightbulb,
|
||
|
|
Users,
|
||
|
|
Code2,
|
||
|
|
Smartphone,
|
||
|
|
Building2,
|
||
|
|
Heart,
|
||
|
|
ShoppingCart,
|
||
|
|
GraduationCap,
|
||
|
|
Briefcase,
|
||
|
|
Cpu,
|
||
|
|
Utensils,
|
||
|
|
MapPin,
|
||
|
|
Scale,
|
||
|
|
Leaf,
|
||
|
|
Music,
|
||
|
|
MessageCircle,
|
||
|
|
Truck,
|
||
|
|
Star as StarIcon,
|
||
|
|
Church,
|
||
|
|
Shield,
|
||
|
|
Database,
|
||
|
|
Zap
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { navigateTo } from '../App';
|
||
|
|
import { Navigation } from '@/components/Navigation';
|
||
|
|
import { Badge } from '@/components/ui/badge';
|
||
|
|
import { Card, CardContent } from '@/components/ui/card';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Footer } from '@/components/Footer';
|
||
|
|
|
||
|
|
interface CaseStudyComingSoonProps {
|
||
|
|
projectTitle?: string;
|
||
|
|
industry?: string;
|
||
|
|
subtitle?: string;
|
||
|
|
expectedLaunch?: string;
|
||
|
|
description?: string;
|
||
|
|
services?: string[];
|
||
|
|
technologies?: string[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
|
||
|
|
projectTitle,
|
||
|
|
industry = "Technology",
|
||
|
|
subtitle,
|
||
|
|
expectedLaunch = "Q2 2024",
|
||
|
|
description,
|
||
|
|
services = [],
|
||
|
|
technologies = []
|
||
|
|
}) => {
|
||
|
|
const getIndustryIcon = (industry: string) => {
|
||
|
|
const icons = {
|
||
|
|
"Technology": Smartphone,
|
||
|
|
"E-commerce": ShoppingCart,
|
||
|
|
"Education": GraduationCap,
|
||
|
|
"FinTech": Building2,
|
||
|
|
"Entertainment": Music,
|
||
|
|
"Real Estate": Building2,
|
||
|
|
"IoT": Cpu,
|
||
|
|
"Healthcare": Heart,
|
||
|
|
"Social Media": MessageCircle,
|
||
|
|
"Government": Shield,
|
||
|
|
"Automotive": Building2,
|
||
|
|
"Food & Beverage": Utensils,
|
||
|
|
"Agriculture": Leaf,
|
||
|
|
"Enterprise Software": Database,
|
||
|
|
"Travel": MapPin,
|
||
|
|
"Legal": Scale,
|
||
|
|
"Logistics": Truck,
|
||
|
|
"Wellness": StarIcon,
|
||
|
|
"Religious": Church,
|
||
|
|
"HR Tech": Briefcase
|
||
|
|
};
|
||
|
|
return icons[industry as keyof typeof icons] || Building2;
|
||
|
|
};
|
||
|
|
|
||
|
|
const IconComponent = getIndustryIcon(industry);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="dark min-h-screen bg-background">
|
||
|
|
<Navigation />
|
||
|
|
|
||
|
|
{/* Hero Section */}
|
||
|
|
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
|
||
|
|
{/* Background Pattern */}
|
||
|
|
<div className="absolute inset-0 opacity-5">
|
||
|
|
<div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(229,25,94,0.1)_50%,transparent_75%)] bg-[length:60px_60px]" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="container mx-auto px-6 lg:px-8 relative">
|
||
|
|
<div className="max-w-4xl mx-auto text-center">
|
||
|
|
{/* Coming Soon Badge */}
|
||
|
|
<div className="flex items-center justify-center gap-2 mb-6">
|
||
|
|
<Clock className="w-5 h-5 text-[#E5195E]" />
|
||
|
|
<Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E] font-manrope">
|
||
|
|
Case Study Coming Soon
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Project Title */}
|
||
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent font-manrope">
|
||
|
|
{projectTitle}
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
{/* Subtitle */}
|
||
|
|
{subtitle && (
|
||
|
|
<p className="text-xl md:text-2xl text-white/80 mb-8 font-manrope">
|
||
|
|
{subtitle}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Industry Badge */}
|
||
|
|
<div className="flex items-center justify-center gap-2 mb-8">
|
||
|
|
<Badge
|
||
|
|
variant="outline"
|
||
|
|
className="bg-white/5 border-white/20 text-white font-manrope px-4 py-2"
|
||
|
|
>
|
||
|
|
<IconComponent className="w-4 h-4 mr-2" />
|
||
|
|
{industry}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Description */}
|
||
|
|
{description ? (
|
||
|
|
<p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto font-manrope">
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto font-manrope">
|
||
|
|
We're currently working on documenting this exciting project case study.
|
||
|
|
Our team is gathering comprehensive insights, results, and learnings to share with you soon.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Expected Launch */}
|
||
|
|
<div className="flex items-center justify-center gap-6 text-sm text-muted-foreground font-manrope mb-8">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Clock className="w-4 h-4 text-[#E5195E]" />
|
||
|
|
<span>Expected: {expectedLaunch}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* What to Expect Section */}
|
||
|
|
<section className="py-16 bg-card/30 border-y border-white/10">
|
||
|
|
<div className="container mx-auto px-6 lg:px-8">
|
||
|
|
<div className="max-w-4xl mx-auto text-center mb-12">
|
||
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white font-manrope">
|
||
|
|
What to Expect
|
||
|
|
</h2>
|
||
|
|
<p className="text-lg text-muted-foreground font-manrope">
|
||
|
|
This case study will provide detailed insights into our development process, challenges overcome, and results achieved.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||
|
|
{/* Development Process */}
|
||
|
|
<Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
|
||
|
|
<CardContent className="p-6 text-center">
|
||
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
|
||
|
|
<Code2 className="w-8 h-8 text-[#E5195E]" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-bold text-white mb-3 font-manrope">
|
||
|
|
Development Journey
|
||
|
|
</h3>
|
||
|
|
<p className="text-muted-foreground font-manrope">
|
||
|
|
Detailed breakdown of our technical approach, architecture decisions, and development methodology.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Challenges & Solutions */}
|
||
|
|
<Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
|
||
|
|
<CardContent className="p-6 text-center">
|
||
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
|
||
|
|
<Lightbulb className="w-8 h-8 text-[#E5195E]" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-bold text-white mb-3 font-manrope">
|
||
|
|
Challenges & Solutions
|
||
|
|
</h3>
|
||
|
|
<p className="text-muted-foreground font-manrope">
|
||
|
|
Key obstacles encountered during development and innovative solutions implemented by our team.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Results & Impact */}
|
||
|
|
<Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
|
||
|
|
<CardContent className="p-6 text-center">
|
||
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
|
||
|
|
<Users className="w-8 h-8 text-[#E5195E]" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-bold text-white mb-3 font-manrope">
|
||
|
|
Results & Impact
|
||
|
|
</h3>
|
||
|
|
<p className="text-muted-foreground font-manrope">
|
||
|
|
Measurable outcomes, user feedback, and business impact achieved through our solution.
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Project Preview Section */}
|
||
|
|
{(services.length > 0 || technologies.length > 0) && (
|
||
|
|
<section className="py-16 bg-background">
|
||
|
|
<div className="container mx-auto px-6 lg:px-8">
|
||
|
|
<div className="max-w-4xl mx-auto">
|
||
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-12 text-center text-white font-manrope">
|
||
|
|
Project Overview
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
|
|
{/* Services */}
|
||
|
|
{services.length > 0 && (
|
||
|
|
<Card className="bg-card/50 backdrop-blur-sm border-white/10">
|
||
|
|
<CardContent className="p-6">
|
||
|
|
<h3 className="text-xl font-bold text-white mb-4 font-manrope">
|
||
|
|
Services Provided
|
||
|
|
</h3>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{services.map((service, index) => (
|
||
|
|
<Badge
|
||
|
|
key={index}
|
||
|
|
variant="outline"
|
||
|
|
className="bg-white/5 border-white/20 text-white font-manrope"
|
||
|
|
>
|
||
|
|
{service}
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Technologies */}
|
||
|
|
{technologies.length > 0 && (
|
||
|
|
<Card className="bg-card/50 backdrop-blur-sm border-white/10">
|
||
|
|
<CardContent className="p-6">
|
||
|
|
<h3 className="text-xl font-bold text-white mb-4 font-manrope">
|
||
|
|
Technologies Used
|
||
|
|
</h3>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{technologies.map((tech, index) => (
|
||
|
|
<Badge
|
||
|
|
key={index}
|
||
|
|
variant="outline"
|
||
|
|
className="bg-[#E5195E]/10 border-[#E5195E]/30 text-[#E5195E] font-manrope"
|
||
|
|
>
|
||
|
|
{tech}
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Progress Indicator */}
|
||
|
|
<section className="py-16 bg-card/30 border-y border-white/10">
|
||
|
|
<div className="container mx-auto px-6 lg:px-8">
|
||
|
|
<div className="max-w-2xl mx-auto text-center">
|
||
|
|
<h2 className="text-2xl font-bold mb-8 text-white font-manrope">
|
||
|
|
Documentation Progress
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
{/* Progress Bar */}
|
||
|
|
<div className="mb-8">
|
||
|
|
<div className="flex justify-between text-sm text-muted-foreground mb-2 font-manrope">
|
||
|
|
<span>Research & Analysis</span>
|
||
|
|
<span>75%</span>
|
||
|
|
</div>
|
||
|
|
<div className="w-full bg-white/10 rounded-full h-2">
|
||
|
|
<div className="bg-[#E5195E] h-2 rounded-full w-3/4 transition-all duration-300"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p className="text-muted-foreground mb-8 font-manrope">
|
||
|
|
Our team is currently gathering detailed project insights, conducting stakeholder interviews,
|
||
|
|
and preparing comprehensive documentation to showcase this project's journey and impact.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Subscribe for Updates */}
|
||
|
|
<Card className="bg-card/50 backdrop-blur-sm border-white/10 p-6">
|
||
|
|
<h3 className="text-lg font-bold text-white mb-4 font-manrope">
|
||
|
|
Get Notified When Published
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-muted-foreground mb-4 font-manrope">
|
||
|
|
Join our mailing list to be the first to know when this case study goes live.
|
||
|
|
</p>
|
||
|
|
<Button
|
||
|
|
onClick={() => navigateTo('/contact-us')}
|
||
|
|
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
|
||
|
|
>
|
||
|
|
Notify Me
|
||
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
||
|
|
</Button>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Explore Other Case Studies */}
|
||
|
|
<section className="py-16 bg-background">
|
||
|
|
<div className="container mx-auto px-6 lg:px-8">
|
||
|
|
<div className="text-center max-w-4xl mx-auto">
|
||
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-white font-manrope">
|
||
|
|
Explore Our Published Case Studies
|
||
|
|
</h2>
|
||
|
|
<p className="text-lg text-muted-foreground mb-8 font-manrope">
|
||
|
|
While you wait for this case study, discover other successful projects we've completed for our clients.
|
||
|
|
</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 border-none font-manrope"
|
||
|
|
onClick={() => navigateTo('/case-studies')}
|
||
|
|
>
|
||
|
|
View All Case Studies
|
||
|
|
<ArrowRight className="w-5 h-5 ml-2" />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
size="lg"
|
||
|
|
variant="outline"
|
||
|
|
className="border-white/20 text-white hover:bg-white/10 font-manrope"
|
||
|
|
onClick={() => navigateTo('/start-a-project')}
|
||
|
|
>
|
||
|
|
Start Your Project
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<Footer />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
export default CaseStudyComingSoon;
|