200 lines
9.4 KiB
TypeScript
200 lines
9.4 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Slider from "react-slick";
|
|
import { MobileAppServicesData } from "@/utils/constant.utils";
|
|
import GsapReveal from "@/components/mobile-app-development-service/support/common/GsapReveal";
|
|
import ImageLightbox from "@/components/mobile-app-development-service/support/common/ImageLightbox";
|
|
|
|
const tabs = [
|
|
{ label: "All", value: "*" },
|
|
{ label: "Live", value: "live" },
|
|
{ label: "Coming Soon", value: "coming-soon" },
|
|
];
|
|
|
|
const CaseStudies = () => {
|
|
const [activeTab, setActiveTab] = useState("*");
|
|
const [selectedImage, setSelectedImage] = useState<string | null>(null);
|
|
const [isLightboxOpen, setIsLightboxOpen] = useState(false);
|
|
|
|
const openLightbox = (image: string) => {
|
|
setSelectedImage(image);
|
|
setIsLightboxOpen(true);
|
|
};
|
|
|
|
const closeLightbox = () => {
|
|
setIsLightboxOpen(false);
|
|
setSelectedImage(null);
|
|
};
|
|
|
|
const filteredItems =
|
|
activeTab === "*"
|
|
? MobileAppServicesData
|
|
: MobileAppServicesData.filter((item) => item.category === activeTab);
|
|
|
|
const settings = {
|
|
dots: false,
|
|
infinite: filteredItems.length > 3,
|
|
speed: 1000,
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
autoplay: true,
|
|
autoplaySpeed: 3000,
|
|
arrows: false,
|
|
pauseOnHover: true,
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
infinite: filteredItems.length > 2,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 501,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
infinite: filteredItems.length > 1,
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
return (
|
|
<section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}>
|
|
|
|
<img src="/assets/img-app/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
|
|
<img src="/assets/img-app/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
|
|
|
|
{/* Floating Elements - Right (4) */}
|
|
<img src="/assets/img-app/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
|
|
<img src="/assets/img-app/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
|
|
|
|
|
|
<div className="container">
|
|
|
|
{/* Title Section */}
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className="consen-section-title upper text-center pb-80 heading2">
|
|
<GsapReveal y={20}>
|
|
<h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
|
|
<span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
|
|
Case Studies
|
|
</h5>
|
|
</GsapReveal>
|
|
<div className="space24"></div>
|
|
<GsapReveal y={20} delay={0.2}>
|
|
<h2 className="text-anime-style-3">
|
|
Apps That Deliver <br />
|
|
<span>Real Results</span>
|
|
</h2>
|
|
</GsapReveal>
|
|
<div className="space24"></div>
|
|
<GsapReveal y={20} delay={0.2}>
|
|
<p className="text-anime-style-3">
|
|
We have developed applications across industries including <br /> healthcare, education, finance, e-commerce, logistics, and startups.
|
|
</p>
|
|
</GsapReveal>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="col-lg-12 mb-80">
|
|
|
|
<div className="portfolio_nav">
|
|
<div className="portfolio_menu">
|
|
<ul className="menu-filtering d-flex justify-content-center flex-wrap gap-3 list-unstyled" style={{ margin: 0, padding: 0 }}>
|
|
{tabs.map((tab) => (
|
|
<li
|
|
key={tab.value}
|
|
className={`c-pointer ${activeTab === tab.value ? "current_menu_item" : ""}`}
|
|
style={{
|
|
padding: '8px 25px',
|
|
borderRadius: '50px',
|
|
border: '1px solid #e3eaf4',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
color: activeTab === tab.value ? '#fff' : '#4a5568',
|
|
background: activeTab === tab.value ? '#3779b9' : '#fff',
|
|
fontWeight: 700,
|
|
boxShadow: activeTab === tab.value ? '0 10px 20px rgba(55, 121, 185, 0.2)' : 'none',
|
|
fontSize: 'var(--body-size)'
|
|
}}
|
|
onClick={() => setActiveTab(tab.value)}
|
|
>
|
|
{tab.label}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Portfolio Slider */}
|
|
<div className="case-studies-slider-container">
|
|
<Slider key={activeTab} {...settings}>
|
|
{filteredItems.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="px-3"
|
|
>
|
|
<div className="case-study-single-box">
|
|
{/* Mobile Frame */}
|
|
<div
|
|
className="mobile-frame"
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={() => openLightbox(item.image)}
|
|
title="View Full Image"
|
|
>
|
|
<div className="mobile-screen">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.alt}
|
|
width={200}
|
|
height={200}
|
|
className="loaded"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="mobile-home-btn"></div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="case-study-content text-center mt-4">
|
|
<div className="case-study-title">
|
|
{/* <h6 style={{ color: '#3779b9', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 600, marginBottom: '5px' }}>{item.title}</h6> */}
|
|
<h3 style={{ margin: 0 }}>
|
|
<Link
|
|
href={item.link || "#"}
|
|
target={item.link && item.link !== "#" ? "_blank" : "_self"}
|
|
style={{ color: '#1a1f2b', textDecoration: 'none', transition: 'color 0.3s', fontWeight: 700 }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.color = '#3779b9')}
|
|
onMouseLeave={(e) => (e.currentTarget.style.color = '#1a1f2b')}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lightbox Component */}
|
|
<ImageLightbox
|
|
isOpen={isLightboxOpen}
|
|
onClose={closeLightbox}
|
|
imageUrl={selectedImage || ""}
|
|
/>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CaseStudies;
|