Skip to content

Commit

Permalink
Merge pull request #82 from Harshjosh361/main
Browse files Browse the repository at this point in the history 
fix: #2255 animate company logos in marquee
  • Loading branch information
@khareyash05
khareyash05 authored Oct 1, 2024
2 parents dae6b56 + e703630 commit 4b8c22d
Showing 1 changed file with 29 additions and 152 deletions.
181 changes: 29 additions & 152 deletions components/trustedBy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,167 +9,44 @@ import NutanixLogo from "@/public/images/users/Nutanix_Logo.svg";
import LambdaTestTestimonial from "@/public/images/users/LambdaTest-320-180.png";
import LeadsquareTestimonial from "@/public/images/users/leadsquare.png";
import EdurekaTestimonial from "@/public/images/users/edureka_logo.png";
import Marquee from "@/components/magicui/marquee";

export const TrustedBy =() =>{
const images = [
{ src: PixisTestimonial, alt: "Pixis Testimonial" },
{ src: InstaAstroTestimonial, alt: "InstaAstro Testimonial" },
{ src: AmazonLogo, alt: "Amazon" },
{ src: RelianceTestimonial, alt: "Reliance Testimonial" },
{ src: WhatfixTestimonial, alt: "Whatfix Testimonial" },
{ src: MarutiSuzukiLogo, alt: "Maruti Suzuki Logo" },
{ src: NutanixLogo, alt: "Nutanix Logo" },
{ src: LambdaTestTestimonial, alt: "LambdaTest Testimonial" },
{ src: LeadsquareTestimonial, alt: "Leadsquare Testimonial" },
{ src: EdurekaTestimonial, alt: "Edureka Testimonial" },
];

export const TrustedBy = () => {
return (
<div className="max-w-6xl mx-auto px-4 sm:px-6">
<div className="py-12 md:py-10 overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-200px),transparent_100%)] ">

<div className="py-12 md:py-10 overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-200px),transparent_100%)]">
{/* Section header */}
<div className="max-w-3xl mx-auto text-center ">
<div className="max-w-3xl mx-auto text-center">
<div className="h5 text-gray-500">Trusted by</div>
</div>

<div className="relative inline-flex flex-nowrap no-scrollbar ">
<div className="py-4 md:py-12 animate-marquee whitespace-nowrap flex items-center w-max">
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w- md:w-40"
src={PixisTestimonial}
alt="Pixis Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={InstaAstroTestimonial}
alt="Instaastro Testimonial"
/>
</span>
<span className="mx-2 flex-none">
<Image
className="relative w-32 md:pt-2 md:w-40"
src={AmazonLogo}
alt="Amazon"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:pb-3 md:w-40"
src={RelianceTestimonial}
alt="Reliance Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={WhatfixTestimonial}
alt="Whatfix Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={MarutiSuzukiLogo}
alt="Pixis Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={NutanixLogo}
alt="Pixis Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={LambdaTestTestimonial}
alt="Lambdatest Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={LeadsquareTestimonial}
alt="Leadsquare Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={EdurekaTestimonial}
alt="Edureka Testimonial"
/>
</span>
</div>
<div
className="py-4 md:py-12 animate-marquee whitespace-nowrap flex items-center w-max"
aria-hidden="true"
>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w- md:w-40"
src={PixisTestimonial}
alt="Pixis Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={InstaAstroTestimonial}
alt="Instaastro Testimonial"
/>
</span>
<span className="mx-2 flex-none">
<Image
className="relative w-32 md:pt-2 md:w-40"
src={AmazonLogo}
alt="Amazon"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:pb-3 md:w-40"
src={RelianceTestimonial}
alt="Reliance Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={WhatfixTestimonial}
alt="Whatfix Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={MarutiSuzukiLogo}
alt="Pixis Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={NutanixLogo}
alt="Pixis Testimonial"
/>
</span>
<span className="mx-4 flex-none">
{/* Marquee Component */}
<Marquee className="py-4 md:py-12" repeat={3} pauseOnHover>
{images.map(({ src, alt }) => (
<span key={alt} className="mx-4 flex-none flex items-center justify-center">
<Image
className="relative w-32 md:w-40"
src={LambdaTestTestimonial}
alt="Lambdatest Testimonial"
className="relative w-32 md:w-40 h-auto" // Ensure consistent height
src={src}
alt={alt}
style={{ objectFit: "contain" }} // Maintain aspect ratio
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={LeadsquareTestimonial}
alt="Leadsquare Testimonial"
/>
</span>
<span className="mx-4 flex-none">
<Image
className="relative w-32 md:w-40"
src={EdurekaTestimonial}
alt="Edureka Testimonial"
/>
</span>
</div>
</div>
))}
</Marquee>
</div>
</div>
)
}
);
};

0 comments on commit 4b8c22d

Please sign in to comment.