274 lines
12 KiB
TypeScript
274 lines
12 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import { Card, CardContent } from "./ui/card";
|
||
|
|
import { Button } from "./ui/button";
|
||
|
|
import { Badge } from "./ui/badge";
|
||
|
|
import { ArrowRight, ExternalLink, TrendingUp, Users, Clock, Star } from "lucide-react";
|
||
|
|
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||
|
|
import { navigateTo } from "../App";
|
||
|
|
|
||
|
|
// High-quality project images
|
||
|
|
const regroupImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
|
||
|
|
const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
|
||
|
|
const wokaAwardImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";
|
||
|
|
|
||
|
|
const caseStudies = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
title: "Regroup",
|
||
|
|
subtitle: "Social Networking Revolution",
|
||
|
|
description: "A comprehensive social platform that connects communities worldwide with advanced messaging, group management, and content sharing capabilities.",
|
||
|
|
image: regroupImage,
|
||
|
|
category: "Social Platform",
|
||
|
|
client: "Regroup Technologies",
|
||
|
|
duration: "8 months",
|
||
|
|
teamSize: "12 developers",
|
||
|
|
technologies: ["React Native", "Node.js", "MongoDB", "WebRTC", "AWS"],
|
||
|
|
results: [
|
||
|
|
{ metric: "User Engagement", value: "+240%" },
|
||
|
|
{ metric: "Active Communities", value: "50K+" },
|
||
|
|
{ metric: "Daily Messages", value: "2.5M+" }
|
||
|
|
],
|
||
|
|
awards: ["Best Social App 2023", "Innovation Award"],
|
||
|
|
link: "/projects/regroup",
|
||
|
|
featured: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
title: "Seezun",
|
||
|
|
subtitle: "Next-Gen E-commerce Platform",
|
||
|
|
description: "Revolutionary e-commerce solution with AI-powered recommendations, seamless checkout, and integrated inventory management for modern retailers.",
|
||
|
|
image: seezunImage,
|
||
|
|
category: "E-commerce",
|
||
|
|
client: "Seezun Retail",
|
||
|
|
duration: "6 months",
|
||
|
|
teamSize: "8 developers",
|
||
|
|
technologies: ["React", "Python", "PostgreSQL", "Redis", "Stripe"],
|
||
|
|
results: [
|
||
|
|
{ metric: "Conversion Rate", value: "+180%" },
|
||
|
|
{ metric: "Page Load Speed", value: "2.1s" },
|
||
|
|
{ metric: "Customer Satisfaction", value: "4.9/5" }
|
||
|
|
],
|
||
|
|
awards: ["E-commerce Excellence Award"],
|
||
|
|
link: "/projects/seezun",
|
||
|
|
featured: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
title: "Woka",
|
||
|
|
subtitle: "Award-Winning Fitness App",
|
||
|
|
description: "Comprehensive fitness and wellness platform with personalized workout plans, nutrition tracking, and community features that won multiple industry awards.",
|
||
|
|
image: wokaAwardImage,
|
||
|
|
category: "Health & Fitness",
|
||
|
|
client: "Woka Wellness",
|
||
|
|
duration: "10 months",
|
||
|
|
teamSize: "15 developers",
|
||
|
|
technologies: ["Flutter", "Firebase", "TensorFlow", "Apple HealthKit", "Google Fit"],
|
||
|
|
results: [
|
||
|
|
{ metric: "User Retention", value: "+320%" },
|
||
|
|
{ metric: "Workout Completions", value: "1M+" },
|
||
|
|
{ metric: "App Store Rating", value: "4.8/5" }
|
||
|
|
],
|
||
|
|
awards: ["App of the Year 2023", "Health Innovation Award", "User Choice Award"],
|
||
|
|
link: "/projects/woka",
|
||
|
|
featured: true
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
export const CaseStudyHighlight = () => {
|
||
|
|
return (
|
||
|
|
<section className="py-32 bg-background">
|
||
|
|
<div className="container mx-auto px-6 lg:px-8">
|
||
|
|
{/* Section Header */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
className="text-center mb-20"
|
||
|
|
>
|
||
|
|
<Badge variant="outline" className="mb-6 border-accent/20 text-accent">
|
||
|
|
Featured Work
|
||
|
|
</Badge>
|
||
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
|
|
Success Stories That <span className="text-accent">Define Excellence</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||
|
|
Explore our award-winning projects that have transformed businesses and delighted millions of users worldwide.
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Featured Case Studies Grid */}
|
||
|
|
<div className="grid lg:grid-cols-3 gap-8 mb-16">
|
||
|
|
{caseStudies.map((study, index) => (
|
||
|
|
<motion.div
|
||
|
|
key={study.id}
|
||
|
|
initial={{ opacity: 0, y: 40 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
whileHover={{ y: -8, scale: 1.02 }}
|
||
|
|
className="group cursor-pointer"
|
||
|
|
onClick={() => navigateTo(study.link)}
|
||
|
|
>
|
||
|
|
<Card className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-full">
|
||
|
|
<CardContent className="p-0 flex flex-col h-full">
|
||
|
|
{/* Image Header */}
|
||
|
|
<div className="relative overflow-hidden">
|
||
|
|
<ImageWithFallback
|
||
|
|
src={study.image}
|
||
|
|
alt={study.title}
|
||
|
|
className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"
|
||
|
|
/>
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
|
||
|
|
|
||
|
|
{/* Category Badge */}
|
||
|
|
<div className="absolute top-4 left-4">
|
||
|
|
<Badge className="bg-accent/90 text-white border-0">
|
||
|
|
{study.category}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Awards */}
|
||
|
|
{study.awards.length > 0 && (
|
||
|
|
<div className="absolute top-4 right-4">
|
||
|
|
<div className="bg-amber-500/90 text-white px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1">
|
||
|
|
<Star className="w-3 h-3 fill-current" />
|
||
|
|
Award Winner
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Project Title Overlay */}
|
||
|
|
<div className="absolute bottom-4 left-4 right-4">
|
||
|
|
<h3 className="text-2xl font-bold text-white mb-1">
|
||
|
|
{study.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-white/80 text-sm">
|
||
|
|
{study.subtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="p-8 flex-1 flex flex-col">
|
||
|
|
<p className="text-muted-foreground leading-relaxed mb-6 flex-1">
|
||
|
|
{study.description}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Key Metrics */}
|
||
|
|
<div className="grid grid-cols-3 gap-4 mb-6 p-4 bg-accent/5 rounded-lg border border-accent/10">
|
||
|
|
{study.results.slice(0, 3).map((result, idx) => (
|
||
|
|
<div key={idx} className="text-center">
|
||
|
|
<div className="text-lg font-bold text-accent">
|
||
|
|
{result.value}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-muted-foreground">
|
||
|
|
{result.metric}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Technologies */}
|
||
|
|
<div className="mb-6">
|
||
|
|
<p className="text-sm font-medium text-foreground mb-2">Technologies:</p>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{study.technologies.slice(0, 3).map((tech) => (
|
||
|
|
<Badge key={tech} variant="secondary" className="text-xs bg-muted/50">
|
||
|
|
{tech}
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
{study.technologies.length > 3 && (
|
||
|
|
<Badge variant="secondary" className="text-xs bg-muted/50">
|
||
|
|
+{study.technologies.length - 3} more
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Project Details */}
|
||
|
|
<div className="grid grid-cols-2 gap-4 mb-6 text-sm">
|
||
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
||
|
|
<Clock className="w-4 h-4" />
|
||
|
|
{study.duration}
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
||
|
|
<Users className="w-4 h-4" />
|
||
|
|
{study.teamSize}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Awards List */}
|
||
|
|
{study.awards.length > 0 && (
|
||
|
|
<div className="mb-6">
|
||
|
|
<p className="text-sm font-medium text-foreground mb-2">Awards:</p>
|
||
|
|
<div className="space-y-1">
|
||
|
|
{study.awards.slice(0, 2).map((award, idx) => (
|
||
|
|
<div key={idx} className="flex items-center gap-2 text-sm text-amber-600">
|
||
|
|
<Star className="w-3 h-3 fill-current" />
|
||
|
|
{award}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* CTA Button */}
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 mt-auto"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
navigateTo(study.link);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span>View Case Study</span>
|
||
|
|
<ArrowRight className="w-4 h-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Call-to-Action */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
className="text-center"
|
||
|
|
>
|
||
|
|
<div className="bg-gradient-to-r from-accent/10 via-accent/5 to-accent/10 rounded-2xl p-8 border border-accent/20">
|
||
|
|
<h3 className="text-2xl font-semibold text-foreground mb-4">
|
||
|
|
Ready to Create Your Success Story?
|
||
|
|
</h3>
|
||
|
|
<p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
|
||
|
|
Join the ranks of industry leaders who have transformed their businesses with our innovative solutions.
|
||
|
|
</p>
|
||
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
|
|
<Button
|
||
|
|
size="lg"
|
||
|
|
className="bg-accent hover:bg-accent/90 text-white"
|
||
|
|
onClick={() => navigateTo("/case-studies")}
|
||
|
|
>
|
||
|
|
View All Case Studies
|
||
|
|
<ExternalLink className="w-4 h-4 ml-2" />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
size="lg"
|
||
|
|
variant="outline"
|
||
|
|
onClick={() => navigateTo("/start-a-project")}
|
||
|
|
>
|
||
|
|
Start Your Project
|
||
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|