Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 116ef55c by gaurav
Options

change

1 parent cb6b188a
Inline Side-by-side
Showing 2 changed files with 79 additions and 69 deletions
components/reuseables/IndustryClientele.js
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import React, { useRef, useEffect, useState } from "react";
import Image from "next/image";
import SwiperNav from "./SwiperNav";
import { cleanImage } from "@/layout/imageHandling";
const IndustryClientele = ({
const IndustryClienteleMarquee = ({
partners = [],
spaceBetween = 10,
autoplayDelay = 3000,
slidesPerViewBreakpoints = {
0: { slidesPerView: 2 },
576: { slidesPerView: 3 },
768: { slidesPerView: 4 },
992: { slidesPerView: 4 },
},
sliderClassName = "partner-slides position-relative",
itemClassName = "single-partner-item",
baseSpeed = 100, // Pixels per second
}) => {
console.log("clientlogo",partners)
const trackRef = useRef(null);
const [animationDuration, setAnimationDuration] = useState(60);
useEffect(() => {
if (trackRef.current) {
const trackWidth = trackRef.current.scrollWidth;
const duration = trackWidth / baseSpeed;
setAnimationDuration(duration);
}
}, [partners, baseSpeed]);
return (
<div className="partner-area pb-100">
<div className="partner-area pb-100 overflow-hidden">
<div className="container">
<div className="position-relative">
<Swiper
spaceBetween={spaceBetween}
breakpoints={slidesPerViewBreakpoints}
loop={true}
autoplay={{
delay: autoplayDelay,
disableOnInteraction: true,
pauseOnMouseEnter: true,
}}
// navigation={{
// nextEl: ".custom-swiper-button-next",
// prevEl: ".custom-swiper-button-prev",
// }}
modules={[Autoplay]}
className={sliderClassName}
<div className="marquee-wrapper position-relative">
<div
className="marquee-track d-flex"
ref={trackRef}
style={{ animationDuration: `${animationDuration}s` }}
>
{partners &&
partners?.map((logo) => (
<SwiperSlide className={itemClassName} key={logo.id}>
<div className="justify-content-center align-items-center ">
<Image
alt={logo?.alternativeText ? logo?.alternativeText : "image"}
src={cleanImage(logo?.url)}
fill
className="img-fluid image industry-logo"
/>
</div>
</SwiperSlide>
))}
</Swiper>
{/* <div className="cust_nav text-center mt-md-4 mt-2">
<SwiperNav />
</div> */}
{/* Duplicate for seamless effect */}
{[...partners, ...partners].map((logo, index) => (
<div
className={`${itemClassName} d-flex justify-content-center align-items-center`}
key={`${logo.id}-${index}`}
style={{ flex: "0 0 auto", width: "250px", height: "80px" }}
>
<Image
alt={logo?.alternativeText || "partner logo"}
src={cleanImage(logo?.url)}
width={120}
height={60}
className="img-fluid industry-logo"
/>
</div>
))}
</div>
</div>
</div>
<style jsx>{`
.marquee-wrapper {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee-track {
display: flex;
width: max-content;
animation: scroll-left linear infinite;
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
`}</style>
</div>
);
};
export default IndustryClientele;
export default IndustryClienteleMarquee;
pages/industry.js
......@@ -10,10 +10,10 @@ import IndustryClientele from "@/components/reuseables/IndustryClientele";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
const industry = ({ IndustryPage , conversionData }) => {
const industry = ({ IndustryPage, conversionData }) => {
console.log("conatct", IndustryPage)
const dynamicdata = IndustryPage?.IndustryDetails;
console.log(dynamicdata , "dynamicdata")
console.log(dynamicdata, "dynamicdata")
const banners = [
{
imageSrc: cleanImage(IndustryPage?.Banner?.Image?.url),
......@@ -26,31 +26,31 @@ const industry = ({ IndustryPage , conversionData }) => {
const seo = IndustryPage?.seo;
const code = conversionData?.conversion;
// console.log(seo, "seo")
return (
<>
<Seo seo={seo} />
<PageBanner banners={banners} />
<ConversionCode code={code} />
<PageBanner banners={banners} />
<ConversionCode code={code} />
<section className="industry-details-page">
<section className="industry-details-page">
{dynamicdata &&
dynamicdata?.map((section, index) => {
console.log("section", section);
switch (section.__component) {
case "layout.industry-overview":
return <IndustryOverview title={section?.title} subtitle={section?.subtitle} description={section?.Description} image={section?.Image}/>;
case "layout.cfo-service":
return <IndustryTab
return <IndustryOverview title={section?.title} subtitle={section?.subtitle} description={section?.Description} image={section?.Image} />;
case "layout.cfo-service":
return <IndustryTab
serviceTitle={section?.Title}
services={section?.IndustryServiceList}
services={section?.IndustryServiceList}
/>
case "layout.clientel":
return <IndustryClientele
case "layout.clientel":
return <IndustryClientele
partners={section?.logos}
/>
default:
return null;
......@@ -81,10 +81,10 @@ export async function getServerSideProps() {
"IndustryDetails.logos",
"IndustryDetails.IndustryServiceList",
"IndustryDetails.IndustryServiceList.CfoList",
"IndustryDetails.IndustryServiceList.CfoList.Icon",
"seo",
"seo.metaImage",
"seo.schema",
"IndustryDetails.IndustryServiceList.CfoList.Icon",
"seo",
"seo.metaImage",
"seo.schema",
],
};
......@@ -113,7 +113,7 @@ export async function getServerSideProps() {
const conversionData = response2.data.data;
return {
props: { IndustryPage , conversionData },
props: { IndustryPage, conversionData },
};
} catch (error) {
console.log("Error", error);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!