Untitled
import Image from "next/image"; import { useState, useEffect, useRef } from "react"; import { tabs, contentData, bannerData, contentData2 } from "./data"; import SolutionCard from "./SolutionCard"; import SolutionBackground from "./SolutionBackground"; import BusinessBenefits from "./BusinessBenefits"; export default function SolutionBody() { const [selectedTab, setSelectedTab] = useState("MVNx"); const [showContentData2, setShowContentData2] = useState(false); const [activeButton, setActiveButton] = useState(1); const scrollContainerRef = useRef(null); const [canScrollLeft, setCanScrollLeft] = useState(false); const [canScrollRight, setCanScrollRight] = useState(false); const currentBanner = bannerData[tabs.findIndex((tab) => tab.title === selectedTab)]; const [windowWidth, setWindowWidth] = useState(0); useEffect(() => { const handleResize = () => { setWindowWidth(window.innerWidth); }; window.addEventListener("resize", handleResize); handleResize(); return () => window.removeEventListener("resize", handleResize); }, []); useEffect(() => { const container = scrollContainerRef.current; const checkScroll = () => { if (container) { setCanScrollLeft(container.scrollLeft > 0); setCanScrollRight( container.scrollLeft < container.scrollWidth - container.clientWidth ); } }; if (container) { container.addEventListener("scroll", checkScroll); checkScroll(); return () => container.removeEventListener("scroll", checkScroll); } }, []); const scroll = (direction) => { const container = scrollContainerRef.current; if (container) { const cardWidth = windowWidth < 768 ? 280 : 343; const gap = windowWidth < 768 ? 40 : 80; const visibleCards = Math.floor( container.clientWidth / (cardWidth + gap) ); const scrollAmount = (cardWidth + gap) * Math.max(1, Math.floor(visibleCards / 2)); const targetScroll = direction === "left" ? Math.max(0, container.scrollLeft - scrollAmount) : Math.min( container.scrollWidth - container.clientWidth, container.scrollLeft + scrollAmount ); container.scrollTo({ left: targetScroll, behavior: "smooth" }); } }; const handleButtonClick = (buttonIndex) => { setActiveButton(buttonIndex); if (buttonIndex === 1) { setShowContentData2(false); } else { setShowContentData2(true); } }; const content = showContentData2 ? contentData2[selectedTab] : contentData[selectedTab]; const currentTab = tabs.find((tab) => tab.title === selectedTab); return ( <> {/* Banner Section */} <div className="w-full max-w-full mx-auto relative"> <div className="relative w-full h-[400px] md:h-[600px] lg:h-[720px]"> <Image unoptimized width={1920} height={812} alt="bg_image" src={currentBanner.backgroundImage} className="object-cover w-full h-full" priority /> <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4"> <h1 className="w-full md:w-[80%] lg:w-[905px] text-center text-white text-3xl md:text-4xl lg:text-5xl font-semibold mb-4 md:mb-6"> {currentBanner.title} </h1> <p className="w-full md:w-[80%] lg:w-[905px] text-center text-white text-base md:text-lg lg:text-xl font-medium mb-6 md:mb-8"> {currentBanner.description} </p> <div className="flex flex-col sm:flex-row gap-4"> <div className="w-[151px] md:w-[180px] lg:w-[220px] h-[45px] md:h-[55px] lg:h-[65px] px-4 py-3 bg-[#cbcbcb]/10 rounded-[37px] border border-[#219ebc] backdrop-blur-sm justify-center items-center gap-2.5 inline-flex"> <div className="w-[7px] h-[7px] bg-[#0b76a0] rounded-full" /> <div className="text-white text-sm md:text-base lg:text-lg font-normal"> Book a Demo </div> </div> <div className="w-[151px] md:w-[180px] lg:w-[220px] h-[45px] md:h-[55px] lg:h-[65px] px-4 py-3 bg-[#219ebc] rounded-[37px] border border-[#219ebc] backdrop-blur-sm justify-center items-center gap-2.5 inline-flex"> <div className="w-[7px] h-[7px] bg-white rounded-full" /> <div className="text-white text-sm md:text-base lg:text-lg font-normal"> Contact us </div> </div> </div> </div> </div> </div> <div className="w-full max-w-full bg-white relative"> <div className="w-full max-w-full mx-auto px-4 md:px-8 lg:px-[100px] pt-8 md:pt-12" style={{ backgroundImage: "url('/solution/newZig.png')", backgroundColor: "transparent", backgroundRepeat: "no-repeat", backgroundSize: "45% 35%", backgroundPosition: "right 2% top 12%", }} > <div className="flex flex-wrap justify-center items-center gap-6 md:gap-12 lg:gap-24 pb-6 md:pb-10"> {tabs.map((tab) => ( <button key={tab.id} onClick={() => setSelectedTab(tab.title)} className="flex items-center space-x-2 pb-2 relative" > <img src={tab.icon} alt={tab.title} className="w-4 md:w-5 h-4 md:h-5" /> <span className="text-[10px] md:text-[12px] text-gray-600"> {tab.title} </span> {selectedTab === tab.title && ( <div className="absolute bottom-0 left-0 w-full h-1 bg-gray-500"></div> )} </button> ))} </div> <hr /> <div className="flex flex-wrap justify-center items-center gap-3 md:gap-5 mt-8 md:mt-12"> <button className={`bg-[#219EBC] text-white py-2 px-4 rounded-[20px] text-sm md:text-base ${ activeButton === 1 ? "bg-[#219EBC]" : "bg-gray-300" }`} onClick={() => handleButtonClick(1)} > {currentTab?.button1 || "Dynamic Solutions"} </button> {currentTab?.button2 && ( <button className={`bg-[#219EBC] text-white py-2 px-4 rounded-[20px] text-sm md:text-base ${ activeButton === 2 ? "bg-[#219EBC]" : "bg-gray-300" }`} onClick={() => handleButtonClick(2)} > {currentTab?.button2} </button> )} </div> <div className="flex flex-col md:flex-row"> <div className="w-full md:w-[70%] lg:w-[995px]"> <h2 className="text-xl md:text-2xl font-bold mt-6"> {content?.title} </h2> <p className="mt-2 text-gray-600 text-sm md:text-base"> {content?.description} </p> </div> <div className="flex justify-center md:justify-end gap-4 items-center lg:ml-[12%] lg:mb-[3%] mt-6 md:mt-[250px]"> <button onClick={() => scroll("left")} disabled={!canScrollLeft} className="w-10 h-10 md:w-12 md:h-12 rounded-full border border-[#219EBC] text-black flex items-center justify-center transition-all duration-300" > ← </button> <button onClick={() => scroll("right")} disabled={!canScrollRight} className="w-10 h-10 md:w-12 md:h-12 rounded-full border border-[#219EBC] text-black flex items-center justify-center transition-all duration-300" > → </button> </div> </div> <div className="border-t border-b border-gray-300 mt-4"> <div ref={scrollContainerRef} className="flex gap-4 md:gap-8 overflow-x-hidden scroll-smooth pl-4 md:px-0" style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch", }} > {content?.images.map((src, index) => ( <div key={index} className="flex flex-shrink-0 border-r border-gray-300 pt-8 pb-8 first:pl-0 sm:first:pl-2 lg:pr-8 sm:mr-5 sm:ml-8 w-full sm:w-auto" style={{ scrollSnapAlign: "start", display: "flex", justifyContent: "center", }} > <div className="flex flex-col items-center sm:items-start"> <div className="group relative bg-gray-800 rounded-[22px] overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"> <Image src={src} alt={src} width={windowWidth < 768 ? 280 : 343} height={windowWidth < 768 ? 230 : 283} className="rounded-lg" /> </div> {content?.features[index] && ( <div className="mt-4 w-[280px] md:w-[343px] px-2 md:px-0 text-center sm:text-left"> <h5 className="text-base md:text-lg lg:text-xl font-semibold mb-2 md:mb-4"> {content.features[index].title} </h5> <p className="text-gray-600 text-xs md:text-sm lg:text-base leading-relaxed md:leading-relaxed"> {content.features[index].description} </p> </div> )} </div> </div> ))} </div> </div> </div> </div> <BusinessBenefits content={content} /> <SolutionCard /> <SolutionBackground content={content} /> </> ); }
Leave a Comment