logos1

FREE
TRUSTED and loved by 20+ tech first teams

1// This template requires the Embla Auto Scroll plugin to be installed:
2//
3// npm install embla-carousel-auto-scroll
4//
5// Finally, edit the company logos in the logosRow1, logosRow2, and logosRow3 arrays to customize the logos displayed on the page.
6
7'use client';
8
9import AutoScroll from 'embla-carousel-auto-scroll';
10
11import {
12    Carousel,
13    CarouselContent,
14    CarouselItem,
15} from '@/components/ui/carousel';
16
17const logosRow1 = [
18    { id: 'adobe', alt: 'Adobe logo', image: '/logos/adobe.svg' },
19    { id: 'gitlab', alt: 'GitLab logo', image: '/logos/gitlab.svg' },
20    { id: 'github', alt: 'GitHub logo', image: '/logos/github.svg' },
21    { id: 'hubspot', alt: 'HubSpot logo', image: '/logos/hubspot.svg' },
22    { id: 'mailchimp', alt: 'Mailchimp logo', image: '/logos/mailchimp.svg' },
23    { id: 'shopify', alt: 'Shopify logo', image: '/logos/shopify.svg' },
24    { id: 'stripe', alt: 'Stripe logo', image: '/logos/stripe.svg' },
25];
26
27const logosRow2 = [
28    { id: 'asana', alt: 'Asana logo', image: '/logos/asana.svg' },
29    { id: 'canva', alt: 'Canva logo', image: '/logos/canva.svg' },
30    { id: 'framer', alt: 'Framer logo', image: '/logos/framer.svg' },
31    { id: 'grammarly', alt: 'Grammarly logo', image: '/logos/grammarly.svg' },
32    { id: 'instagram', alt: 'Instagram logo', image: '/logos/instagram_word.svg' },
33    { id: 'medium', alt: 'Medium logo', image: '/logos/medium.svg' },
34    { id: 'slack', alt: 'Slack logo', image: '/logos/slack.svg' },
35    { id: 'tinder', alt: 'Tinder logo', image: '/logos/tinder.svg' },
36];
37
38const logosRow3 = [
39    { id: 'atlassian', alt: 'Atlassian logo', image: '/logos/atlassian.svg' },
40    { id: 'dribbble', alt: 'Dribbble logo', image: '/logos/dribbble.svg' },
41    { id: 'gumroad', alt: 'Gumroad logo', image: '/logos/gumroad.svg' },
42    { id: 'linear', alt: 'Linear logo', image: '/logos/linear.svg' },
43    { id: 'notion', alt: 'Notion logo', image: '/logos/notion.svg' },
44    { id: 'spotify', alt: 'Spotify logo', image: '/logos/spotify.svg' },
45    { id: 'whatsapp', alt: 'WhatsApp logo', image: '/logos/whatsapp.svg' }
46];
47
48const Logos1 = () => {
49    return (
50        <div>
51            <div className="container flex flex-col items-center text-center">
52                <h2 className="my-6 text-pretty text-xl font-bold lg:text-2xl">
53                    TRUSTED and loved by 20+ tech first teams
54                </h2>
55            </div>
56            <CarouselWrapper direction="ltr" logos={logosRow1} />
57            <CarouselWrapper direction="rtl" logos={logosRow2} />
58            <CarouselWrapper direction="ltr" logos={logosRow3} />
59        </div>
60    );
61};
62
63export default Logos1;
64
65
66type CarouselWrapperProps = {
67    direction?: 'ltr' | 'rtl';
68    logos: { id: string; alt: string; image: string }[];
69};
70
71const CarouselWrapper = ({ direction = 'ltr', logos }: CarouselWrapperProps) => {
72    return (
73        <div className="pt-6 md:pt-10 lg:pt-12">
74            <div className="relative mx-auto flex items-center justify-center lg:max-w-5xl">
75                <Carousel
76                    opts={{ loop: true, direction }}
77                    plugins={[AutoScroll({ playOnInit: true })]}
78                    dir={direction}
79                    className='pointer-events-none select-none'
80                >
81                    <CarouselContent className="ml-0">
82                        {logos.map((logo) => (
83                            <CarouselItem
84                                key={logo.id}
85                                className="basis-1/3 pl-0 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
86                            >
87                                <div className="mx-10 flex shrink-0 items-center justify-center">
88                                    <img
89                                        src={logo.image}
90                                        alt={logo.alt}
91                                        className="h-8 w-auto"
92                                    />
93                                </div>
94                            </CarouselItem>
95                        ))}
96                    </CarouselContent>
97                </Carousel>
98                <div className="absolute inset-y-0 left-0 w-12 bg-gradient-to-r from-background to-transparent"></div>
99                <div className="absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-background to-transparent"></div>
100            </div>
101        </div>
102    )
103}