203 lines
9.5 KiB
TypeScript
203 lines
9.5 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 { WebServicesData } from "@/utils/constant.utils";
|
|
import GsapReveal from "@/components/common/GsapReveal";
|
|
import ImageLightbox from "@/components/common/ImageLightbox";
|
|
|
|
const tabs = [
|
|
{ label: "All items", value: "*" },
|
|
{ label: "Next.js", value: "web" },
|
|
{ label: "Shopify Store", value: "shopify" },
|
|
{ label: "WordPress", value: "wordpress" },
|
|
];
|
|
|
|
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 === "*"
|
|
? WebServicesData
|
|
: WebServicesData.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/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
|
|
<img src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
|
|
|
|
{/* Floating Elements - Right (4) */}
|
|
<img src="/assets/img/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
|
|
<img src="/assets/img/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="/favicon.ico" alt="" /></span>
|
|
Case Studies
|
|
</h5>
|
|
</GsapReveal>
|
|
<div className="space24"></div>
|
|
<GsapReveal y={20} delay={0.2}>
|
|
<h2 className="text-anime-style-3">
|
|
Websites 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">
|
|
Here are some of the websites we've developed across industries including healthcare,<br /> education, real estate, finance, and e-commerce.
|
|
</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">
|
|
{/* Monitor Frame */}
|
|
<div
|
|
className="monitor-frame"
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={() => openLightbox(item.image)}
|
|
title="View Full Image"
|
|
>
|
|
<div className="monitor-screen">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.alt}
|
|
width={600}
|
|
height={400}
|
|
className="loaded"
|
|
priority
|
|
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="monitor-stand"></div>
|
|
<div className="monitor-base"></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;
|