import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from '@/components/ui/carousel';
export default function CarouselOfFeaturedProjects() {
const projects = [
{
title: 'E-commerce Website Redesign',
client: 'Fashion Boutique',
year: '2023',
category: 'Web Design',
description:
'Complete overhaul of an online fashion store, focusing on improved user experience, mobile responsiveness, and conversion optimization.',
image:
'https://images.unsplash.com/photo-1618221118493-9cfa1a1c00da?q=80&w=2062&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
link: '#',
},
{
title: 'Mobile Banking App',
client: 'Financial Services Inc.',
year: '2022',
category: 'App Development',
description:
'Streamlined banking application designed with security and ease of use at its core, featuring biometric authentication and personalized insights.',
image:
'https://images.unsplash.com/photo-1556742111-a301076d9d18?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
link: '#',
},
{
title: 'Corporate Identity Refresh',
client: 'Green Technologies',
year: '2023',
category: 'Branding',
description:
'Comprehensive brand refresh including logo redesign, typography system, color palette, and visual guidelines for a renewable energy company.',
image:
'https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
link: '#',
},
{
title: 'Interactive Data Dashboard',
client: 'Analytics Solutions',
year: '2022',
category: 'UI/UX Design',
description:
'Real-time analytics dashboard with customizable widgets, data visualization tools, and collaboration features for enterprise teams.',
image:
'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
link: '#',
},
{
title: 'Educational Platform Redesign',
client: 'Learning Hub',
year: '2023',
category: 'Web Application',
description:
'Learning management system with focus on accessibility, engagement, and personalized learning paths for students of all ages.',
image:
'https://images.unsplash.com/photo-1501504905252-473c47e087f8?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
link: '#',
},
];
return (
<section className="overflow-hidden py-16 md:py-24">
<div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
{/* Section Header */}
<div className="mb-12 text-center md:mb-16">
<h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
Featured Projects
</h2>
<p className="text-muted-foreground mx-auto max-w-3xl text-lg">
Explore my most impactful work that demonstrates my skills,
expertise, and creative approach.
</p>
</div>
{/* Carousel Container */}
<div className="relative">
<Carousel
opts={{
loop: true,
align: 'start',
}}
className="w-full"
>
<CarouselContent>
{projects.map((project, index) => (
<CarouselItem key={index} className="md:basis-full">
<div className="grid gap-6 md:grid-cols-2">
{/* Image */}
<div className="relative h-[250px] overflow-hidden rounded-lg md:h-[400px]">
<img
src={project.image}
alt={project.title}
className="object-cover"
/>
</div>
{/* Content */}
<div className="flex flex-col justify-center">
<div className="space-y-4">
<div className="flex flex-wrap gap-2">
<Badge variant="secondary">{project.category}</Badge>
<Badge variant="outline">{project.year}</Badge>
</div>
<h3 className="text-2xl font-bold md:text-3xl">
{project.title}
</h3>
<p className="text-muted-foreground text-sm font-medium">
Client: {project.client}
</p>
<p className="text-muted-foreground">
{project.description}
</p>
<div className="pt-4">
<Button asChild>
<a href={project.link}>View Case Study</a>
</Button>
</div>
</div>
</div>
</div>
</CarouselItem>
))}
</CarouselContent>
<div className="mt-6 flex items-center justify-center gap-2">
<CarouselPrevious className="static mr-2 translate-y-0" />
<CarouselNext className="static translate-y-0" />
</div>
</Carousel>
</div>
</div>
</section>
);
}