mukeshs/3engines
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
mukesh13
2025-06-25 16:55:21 +05:30
parent 58e44ee8ab
commit a62d728bd3
18 changed files with 1214 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/components/Home/SolutionsCarousel.tsx Normal file
View File

@ -0,0 +1,208 @@
"use client"
import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
interface Solution {
id: string;
title: string;
description: string;
backgroundImage: string;
category: string;
}
const SolutionsCarousel: React.FC = () => {
const [activeTab, setActiveTab] = useState('E-Commerce');
const [currentSlide, setCurrentSlide] = useState(0);
const tabs = [
'E-Commerce',
'Automotive',
'Insurance',
'Media & Entertainment',
'Gaming',
'Industries'
];
const solutions: { [key: string]: Solution[] } = {
'E-Commerce': [
{
id: 'ecommerce-1',
title: 'E-Commerce',
description: 'Build scalable online retail platforms with secure payment processing, inventory management, and customer analytics to drive digital commerce growth.',
backgroundImage: '/images/ecommerce-bg.jpg',
category: 'E-Commerce'
}
],
'Automotive': [
{
id: 'automotive-1',
title: 'Automotive',
description: 'Transform the automotive industry with connected vehicle solutions, autonomous driving technologies, and smart manufacturing processes.',
backgroundImage: '/images/ecommerce-bg.jpg',
category: 'Automotive'
}
],
'Insurance': [
{
id: 'insurance-1',
title: 'Insurance',
description: 'Rapidly establish comprehensive insurance service systems to ease digital transformation with compliant, secure, and reliable infrastructure such as FinTech Cloud and Dedicated Cloud.',
backgroundImage: '/images/ecommerce-bg.jpg',
category: 'Insurance'
}
],
'Media & Entertainment': [
{
id: 'media-1',
title: 'Media & Entertainment',
description: 'Deliver high-quality streaming experiences with content delivery networks, media processing, and audience engagement platforms.',
backgroundImage: '/images/ecommerce-bg.jpg',
category: 'Media & Entertainment'
}
],
'Gaming': [
{
id: 'gaming-1',
title: 'Gaming',
description: 'Power immersive gaming experiences with low-latency infrastructure, real-time multiplayer capabilities, and scalable game backend services.',
backgroundImage: '/images/ecommerce-bg.jpg',
category: 'Gaming'
}
],
'Smart City': [
{
id: 'smartcity-1',
title: 'Industries',
description: 'Build intelligent urban infrastructure with IoT sensors, data analytics, and AI-powered solutions for sustainable city management.',
backgroundImage: '/images/ecommerce-bg.jpg',
category: 'Industries'
}
]
};
const currentSolutions = solutions[activeTab] || [];
const nextSlide = () => {
setCurrentSlide((prev) =>
prev === currentSolutions.length - 1 ? 0 : prev + 1
);
};
const prevSlide = () => {
setCurrentSlide((prev) =>
prev === 0 ? currentSolutions.length - 1 : prev - 1
);
};
// Reset current slide when tab changes
useEffect(() => {
setCurrentSlide(0);
}, [activeTab]);
return (
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Title */}
<div className="text-center mb-12">
<h2 className="text-4xl font-bold text-gray-700 max-w-4xl mx-auto leading-tight">
Solutions for Unleashing Digital and Powering Innovation
</h2>
</div>
{/* Tabs */}
<div className="mb-8">
<div className="flex flex-wrap justify-center gap-8 md:gap-12 lg:gap-16">
{tabs.map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`px-2 py-3 text-sm md:text-base font-medium transition-colors whitespace-nowrap ${
activeTab === tab
? 'text-gray-700 border-b-2 border-gray-900'
: 'text-gray-500 hover:text-gray-700'
}`}
>
{tab}
</button>
))}
</div>
</div>
{/* Carousel */}
<div className="relative">
{currentSolutions.length > 0 && (
<div className="relative h-96 md:h-[500px] rounded-2xl overflow-hidden">
{/* Background Image */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('${currentSolutions[currentSlide]?.backgroundImage}')`,
}}
>
{/* Overlay */}
<div className="absolute inset-0 bg-black/40"></div>
</div>
{/* Content */}
<div className="relative h-full flex items-center">
<div className="max-w-2xl px-8 md:px-16">
<h3 className="text-4xl md:text-5xl font-bold text-white mb-6">
{currentSolutions[currentSlide]?.title}
</h3>
<p className="text-lg md:text-xl text-white/90 mb-8 leading-relaxed">
{currentSolutions[currentSlide]?.description}
</p>
<button className="inline-flex items-center px-8 py-3 bg-transparent border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-gray-700 transition-colors">
Learn more
</button>
</div>
</div>
{/* Navigation Arrows */}
{currentSolutions.length > 1 && (
<>
<button
onClick={prevSlide}
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors backdrop-blur-sm"
>
<ChevronLeft className="w-6 h-6 text-white" />
</button>
<button
onClick={nextSlide}
className="absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors backdrop-blur-sm"
>
<ChevronRight className="w-6 h-6 text-white" />
</button>
</>
)}
{/* Dots Indicator */}
{currentSolutions.length > 1 && (
<div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2">
{currentSolutions.map((_, index) => (
<button
key={index}
onClick={() => setCurrentSlide(index)}
className={`w-3 h-3 rounded-full transition-colors ${
index === currentSlide ? 'bg-white' : 'bg-white/50'
}`}
/>
))}
</div>
)}
</div>
)}
{/* Empty State */}
{currentSolutions.length === 0 && (
<div className="h-96 md:h-[500px] bg-gray-100 rounded-2xl flex items-center justify-center">
<p className="text-gray-500 text-lg">No solutions available for this category</p>
</div>
)}
</div>
</div>
</section>
);
};
export default SolutionsCarousel;