194 lines
11 KiB
TypeScript
194 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
const banners = [
|
|
{
|
|
subTitle: "METATRONCUBE SOFTWARE SOLUTION",
|
|
title: "WEB AND APP DEVELOPMENT PIONEERING INNOVATION",
|
|
text: "Elevate your digital landscape with Metatroncube's cutting-edge web and mobile app solutions.",
|
|
btnLabel: "Book Your Call Now",
|
|
btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
|
images: {
|
|
center: "/assets/images/home/banner/web/centre.webp",
|
|
leftBottom: "/assets/images/home/banner/web/left-bottom.webp",
|
|
topRight: "/assets/images/home/banner/web/top-right.webp",
|
|
rightBottom: "/assets/images/home/banner/web/right-bottom.webp",
|
|
}
|
|
},
|
|
{
|
|
subTitle: "METATRONCUBE SOFTWARE SOLUTION",
|
|
title: "DIGITAL MARKETING AMPLIFYING YOUR ONLINE VOICE",
|
|
text: "Explore Metatroncube's innovative strategies to connect, engage, and grow your audience in the digital realm.",
|
|
btnLabel: "Schedule Appointment",
|
|
btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
|
images: {
|
|
center: "/assets/images/home/banner/digital/centre.webp",
|
|
leftBottom: "/assets/images/home/banner/digital/right-bottom.png",
|
|
topRight: "/assets/images/home/banner/digital/top-right.webp",
|
|
rightBottom: "/assets/images/home/banner/digital/left-bottom.webp",
|
|
}
|
|
},
|
|
{
|
|
subTitle: "METATRONCUBE SOFTWARE SOLUTION",
|
|
title: "SEO STRATEGIES PAVING YOUR PATH TO SUCCESS",
|
|
text: "Maximize visibility and drive traffic with Metatroncube's expert SEO strategies.",
|
|
btnLabel: "REQUEST CONSULTATION",
|
|
btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
|
images: {
|
|
center: "/assets/images/home/banner/seo/centre.webp",
|
|
leftBottom: "/assets/images/home/banner/seo/left-bottom.webp",
|
|
topRight: "/assets/images/home/banner/seo/top-right.webp",
|
|
rightBottom: "/assets/images/home/banner/seo/right-bottom.webp",
|
|
}
|
|
},
|
|
{
|
|
subTitle: "METATRONCUBE SOFTWARE SOLUTION",
|
|
title: "GRAPHIC DESIGN CREATING VISUAL IMPACT",
|
|
text: "Craft compelling visuals that enhance your brand identity with Metatroncube's graphic design services",
|
|
btnLabel: "BOOK YOUR FREE CONSULTATION",
|
|
btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
|
images: {
|
|
center: "/assets/images/home/banner/graphic/centre.webp",
|
|
leftBottom: "/assets/images/home/banner/graphic/left-bottom.webp",
|
|
topRight: "/assets/images/home/banner/graphic/top-right.webp",
|
|
rightBottom: "/assets/images/home/banner/graphic/right-bottom.webp",
|
|
}
|
|
},
|
|
];
|
|
|
|
const serviceCategories = [
|
|
{ title: "Web Dev", image: "/assets/images/home/banner/web.webp", link: "/service/website-development-company" },
|
|
{ title: "Mobile App", image: "/assets/images/home/banner/mbl.webp", link: "/service/mobile-application-development" },
|
|
{ title: "Graphic Design", image: "/assets/images/home/banner/graphic.webp", link: "/service/graphic-designing-company" },
|
|
{ title: "UI/UX", image: "/assets/images/home/banner/ui-ux.webp", link: "/service/ui-ux-designing" },
|
|
{ title: "SEO", image: "/assets/images/home/banner/seo.webp", link: "/service/search-engine-optimization-seo-content-writing" },
|
|
{ title: "Digital Marketing", image: "/assets/images/home/banner/digital.webp", link: "/service/digital-marketing-agency-in-canada" },
|
|
{ title: "ERP", image: "/assets/images/home/banner/erp.webp", link: "/service/erp-development-implementation" },
|
|
];
|
|
|
|
const BannerSection = () => {
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
const [currentBanner, setCurrentBanner] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const serviceTimer = setInterval(() => {
|
|
setCurrentSlide((prev) => (prev + 1) % serviceCategories.length);
|
|
}, 2000);
|
|
|
|
const bannerTimer = setInterval(() => {
|
|
setCurrentBanner((prev) => (prev + 1) % banners.length);
|
|
}, 9000);
|
|
|
|
return () => {
|
|
clearInterval(serviceTimer);
|
|
clearInterval(bannerTimer);
|
|
};
|
|
}, []);
|
|
|
|
const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % serviceCategories.length);
|
|
const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + serviceCategories.length) % serviceCategories.length);
|
|
|
|
const goToBanner = (index: number) => setCurrentBanner(index);
|
|
|
|
return (
|
|
<section className="hero-1" suppressHydrationWarning>
|
|
<div className="hero-1-bg" suppressHydrationWarning></div>
|
|
|
|
<div className="banner-active" suppressHydrationWarning>
|
|
<div className="banner-slider-wrapper" style={{ transform: `translateX(-${currentBanner * 100}%)` }} suppressHydrationWarning>
|
|
{banners.map((banner, i) => (
|
|
<div key={i} className={`custom-swiper-slide ${i === currentBanner ? 'active' : ''}`} suppressHydrationWarning>
|
|
<div className="custom-container" suppressHydrationWarning>
|
|
<div className="hero-layout-wrapper" suppressHydrationWarning>
|
|
|
|
{/* Left Side: Hero Text Content */}
|
|
<div className="hero-content" suppressHydrationWarning>
|
|
<span className="banner-sub-title">{banner.subTitle}</span>
|
|
<h1>{banner.title}</h1>
|
|
<p>{banner.text}</p>
|
|
<a
|
|
className="theme-btn"
|
|
href={banner.btnHref}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{banner.btnLabel}
|
|
</a>
|
|
</div>
|
|
|
|
{/* Right Side: Floating Image Group + Category Slider */}
|
|
<div className="hero-right-content" suppressHydrationWarning>
|
|
<div className="hero-img-group" suppressHydrationWarning>
|
|
{/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/t-shirt-bg.png" alt="shape" className="circle-shape" /> */}
|
|
<img loading="lazy" src={banner.images.center} alt="t-shirt" className="main-shirt" />
|
|
{/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/mockup-shape.png" alt="shape" className="mockup-shape" /> */}
|
|
<img loading="lazy" src={banner.images.leftBottom} alt="shape" className="cup-shape" />
|
|
<img loading="lazy" src={banner.images.topRight} alt="shape" className="t-shirt-shape" />
|
|
<img loading="lazy" src={banner.images.rightBottom} alt="shape" className="cap-shape" />
|
|
</div>
|
|
|
|
{/* Bottom Right "Our Service" Slider */}
|
|
<div className="our-services-slider" suppressHydrationWarning>
|
|
<div className="slider-header" suppressHydrationWarning>
|
|
<span>Our Service</span>
|
|
<div className="slider-progress-bar" suppressHydrationWarning>
|
|
<div className="slider-progress-line" style={{ left: `calc(${(currentSlide % serviceCategories.length)} * var(--slider-slide-width))` }} suppressHydrationWarning></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="slider-track-container" suppressHydrationWarning>
|
|
|
|
{/* Left Arrow (Overlapping Image) */}
|
|
<button className="custom-slider-arrow" onClick={prevSlide} suppressHydrationWarning>
|
|
<i className="fa-solid fa-arrow-left"></i>
|
|
</button>
|
|
|
|
<div style={{ overflow: "hidden", width: "100%", padding: "5px 0" }} suppressHydrationWarning>
|
|
<div className="slider-track" style={{ transform: `translateX(calc(-1 * ${currentSlide} * var(--slider-slide-width)))` }} suppressHydrationWarning>
|
|
{[...serviceCategories, ...serviceCategories].map((cat, idx) => (
|
|
<div key={idx} className="slider-item" suppressHydrationWarning>
|
|
<div className="slider-image-node" suppressHydrationWarning>
|
|
<a href={cat.link}>
|
|
<img loading="lazy" src={cat.image} alt={cat.title} />
|
|
</a>
|
|
</div>
|
|
<div className="slider-category-title" suppressHydrationWarning>
|
|
<a href={cat.link}>
|
|
{cat.title} <span>→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Banner Pagination Dots */}
|
|
<div className="banner-pagination" suppressHydrationWarning>
|
|
{banners.map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`banner-dot ${i === currentBanner ? 'active' : ''}`}
|
|
onClick={() => goToBanner(i)}
|
|
suppressHydrationWarning
|
|
></div>
|
|
))}
|
|
</div>
|
|
|
|
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BannerSection;
|