102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
"use client";
|
|
import React from 'react';
|
|
import Slider from 'react-slick';
|
|
import GsapReveal from '@/components/common/GsapReveal';
|
|
|
|
const BrandSlider = () => {
|
|
const brands = [
|
|
{ id: 1, src: "/assets/img/add/icon-1.webp", alt: "Brand 1" },
|
|
{ id: 2, src: "/assets/img/add/icon-2.webp", alt: "Brand 2" },
|
|
{ id: 3, src: "/assets/img/add/icon-3.webp", alt: "Brand 3" },
|
|
{ id: 4, src: "/assets/img/add/icon-4.webp", alt: "Brand 4" },
|
|
{ id: 5, src: "/assets/img/add/icon-1.webp", alt: "Brand 1" },
|
|
{ id: 6, src: "/assets/img/add/icon-2.webp", alt: "Brand 2" },
|
|
{ id: 7, src: "/assets/img/add/icon-3.webp", alt: "Brand 3" },
|
|
{ id: 8, src: "/assets/img/add/icon-4.webp", alt: "Brand 4" },
|
|
];
|
|
|
|
const settings = {
|
|
dots: false,
|
|
arrows: false,
|
|
infinite: true,
|
|
slidesToShow: 4,
|
|
slidesToScroll: 4,
|
|
autoplay: true,
|
|
speed: 1000,
|
|
autoplaySpeed: 3000,
|
|
cssEase: "ease",
|
|
pauseOnHover: true,
|
|
draggable: true,
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 4,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 768,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 400,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 320,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
return (
|
|
<div className="brand-slider-area sp2">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-8 m-auto text-center">
|
|
<div className="brand-header heading2 text-center">
|
|
<GsapReveal y={20}>
|
|
<h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5>
|
|
</GsapReveal>
|
|
<div className="space24"></div>
|
|
<GsapReveal y={20} delay={0.2}>
|
|
<h2 className="text-anime-style-3">Trusted by Growing Brands & Ambitious Businesses</h2>
|
|
</GsapReveal>
|
|
<div className="space16"></div>
|
|
<GsapReveal y={20} delay={0.3}>
|
|
<p>
|
|
From startups to enterprise clients, businesses trust us to build scalable and performance-driven websites.
|
|
</p>
|
|
</GsapReveal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space60"></div>
|
|
<div className="brand-slider-inner">
|
|
<Slider {...settings}>
|
|
{brands.map((brand) => (
|
|
<div key={brand.id} className="brand-item">
|
|
<img src={brand.src} alt={brand.alt} />
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BrandSlider;
|