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 React, { useRef, useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import Image from "next/image"; import Image from "next/image";
import SwiperNav from "./SwiperNav";
import { cleanImage } from "@/layout/imageHandling"; import { cleanImage } from "@/layout/imageHandling";
const IndustryClientele = ({ const IndustryClienteleMarquee = ({
partners = [], 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", 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 ( return (
<div className="partner-area pb-100"> <div className="partner-area pb-100 overflow-hidden">
<div className="container"> <div className="container">
<div className="position-relative"> <div className="marquee-wrapper position-relative">
<Swiper <div
spaceBetween={spaceBetween} className="marquee-track d-flex"
breakpoints={slidesPerViewBreakpoints} ref={trackRef}
loop={true} style={{ animationDuration: `${animationDuration}s` }}
autoplay={{
delay: autoplayDelay,
disableOnInteraction: true,
pauseOnMouseEnter: true,
}}
// navigation={{
// nextEl: ".custom-swiper-button-next",
// prevEl: ".custom-swiper-button-prev",
// }}
modules={[Autoplay]}
className={sliderClassName}
> >
{partners && {/* Duplicate for seamless effect */}
partners?.map((logo) => ( {[...partners, ...partners].map((logo, index) => (
<div
<SwiperSlide className={itemClassName} key={logo.id}> className={`${itemClassName} d-flex justify-content-center align-items-center`}
<div className="justify-content-center align-items-center "> key={`${logo.id}-${index}`}
<Image style={{ flex: "0 0 auto", width: "250px", height: "80px" }}
alt={logo?.alternativeText ? logo?.alternativeText : "image"} >
src={cleanImage(logo?.url)} <Image
fill alt={logo?.alternativeText || "partner logo"}
className="img-fluid image industry-logo" src={cleanImage(logo?.url)}
/> width={120}
</div> height={60}
</SwiperSlide> className="img-fluid industry-logo"
))} />
</Swiper> </div>
{/* <div className="cust_nav text-center mt-md-4 mt-2"> ))}
<SwiperNav /> </div>
</div> */}
</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> </div>
); );
}; };
export default IndustryClientele; export default IndustryClienteleMarquee;
pages/industry.js
...@@ -10,10 +10,10 @@ import IndustryClientele from "@/components/reuseables/IndustryClientele"; ...@@ -10,10 +10,10 @@ import IndustryClientele from "@/components/reuseables/IndustryClientele";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode"; import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
const industry = ({ IndustryPage , conversionData }) => { const industry = ({ IndustryPage, conversionData }) => {
console.log("conatct", IndustryPage) console.log("conatct", IndustryPage)
const dynamicdata = IndustryPage?.IndustryDetails; const dynamicdata = IndustryPage?.IndustryDetails;
console.log(dynamicdata , "dynamicdata") console.log(dynamicdata, "dynamicdata")
const banners = [ const banners = [
{ {
imageSrc: cleanImage(IndustryPage?.Banner?.Image?.url), imageSrc: cleanImage(IndustryPage?.Banner?.Image?.url),
...@@ -26,31 +26,31 @@ const industry = ({ IndustryPage , conversionData }) => { ...@@ -26,31 +26,31 @@ const industry = ({ IndustryPage , conversionData }) => {
const seo = IndustryPage?.seo; const seo = IndustryPage?.seo;
const code = conversionData?.conversion; const code = conversionData?.conversion;
// console.log(seo, "seo") // console.log(seo, "seo")
return ( return (
<> <>
<Seo seo={seo} /> <Seo seo={seo} />
<PageBanner banners={banners} /> <PageBanner banners={banners} />
<ConversionCode code={code} /> <ConversionCode code={code} />
<section className="industry-details-page"> <section className="industry-details-page">
{dynamicdata && {dynamicdata &&
dynamicdata?.map((section, index) => { dynamicdata?.map((section, index) => {
console.log("section", section); console.log("section", section);
switch (section.__component) { switch (section.__component) {
case "layout.industry-overview": case "layout.industry-overview":
return <IndustryOverview title={section?.title} subtitle={section?.subtitle} description={section?.Description} image={section?.Image}/>; return <IndustryOverview title={section?.title} subtitle={section?.subtitle} description={section?.Description} image={section?.Image} />;
case "layout.cfo-service": case "layout.cfo-service":
return <IndustryTab return <IndustryTab
serviceTitle={section?.Title} serviceTitle={section?.Title}
services={section?.IndustryServiceList} services={section?.IndustryServiceList}
/> />
case "layout.clientel": case "layout.clientel":
return <IndustryClientele return <IndustryClientele
partners={section?.logos} partners={section?.logos}
/> />
default: default:
return null; return null;
...@@ -81,10 +81,10 @@ export async function getServerSideProps() { ...@@ -81,10 +81,10 @@ export async function getServerSideProps() {
"IndustryDetails.logos", "IndustryDetails.logos",
"IndustryDetails.IndustryServiceList", "IndustryDetails.IndustryServiceList",
"IndustryDetails.IndustryServiceList.CfoList", "IndustryDetails.IndustryServiceList.CfoList",
"IndustryDetails.IndustryServiceList.CfoList.Icon", "IndustryDetails.IndustryServiceList.CfoList.Icon",
"seo", "seo",
"seo.metaImage", "seo.metaImage",
"seo.schema", "seo.schema",
], ],
}; };
...@@ -113,7 +113,7 @@ export async function getServerSideProps() { ...@@ -113,7 +113,7 @@ export async function getServerSideProps() {
const conversionData = response2.data.data; const conversionData = response2.data.data;
return { return {
props: { IndustryPage , conversionData }, props: { IndustryPage, conversionData },
}; };
} catch (error) { } catch (error) {
console.log("Error", 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!