Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animated logo carousel #4459

Merged
merged 13 commits into from
Apr 12, 2023
Prev Previous commit
Next Next commit
reorganize logic and images
yathomasi committed Apr 9, 2023
commit 580e4d038c6ebe35672b405b9fa99c735b7a739e
276 changes: 115 additions & 161 deletions src/components/Home/LogosSlider/CompanyLogos.tsx
Original file line number Diff line number Diff line change
@@ -1,173 +1,127 @@
import React from 'react'
import { StaticImage } from 'gatsby-plugin-image'
import cn from 'classnames'

const logoClass =
'flex items-center mr-10 md:mr-16 opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out'
const logoImageClass = 'grayscale hover:grayscale-0'
'flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out'
const logoImageClass = 'h-20 grayscale hover:grayscale-0'
const logoImageClassInverted = `${logoImageClass} invert`

const sm = 80
const md = 150
const lg = 200
const xl = 300
const sm = 'w-16'
const md = 'w-24'
const lg = 'w-32'
const xl = 'w-40'
const xxl = 'w-48'

const logos = [
{
name: 'Aicon',
alt: 'Aicon logo',
src: 'logos/aicon.svg',
className: cn(logoClass, sm),
imageClassName: cn(logoImageClass, 'h-16')
},
{
name: 'Billie',
alt: 'Billie logo',
src: 'logos/billie.svg',
className: cn(logoClass, sm),
imageClassName: cn(logoImageClass, 'h-16')
},
{
name: 'Cyclica',
alt: 'Cyclica logo',
src: 'logos/cyclica.png',
className: cn(logoClass, lg)
},
{
name: 'Degould',
alt: 'Degould logo',
src: 'logos/degould.png',
className: cn(logoClass, md),
imageClassName: logoImageClassInverted
},
{
name: 'Huggingface',
alt: 'Huggingface logo',
src: 'logos/huggingface.svg',
className: cn(logoClass, xxl)
},
{
name: 'Inlab Digital',
alt: 'Inlab Digital logo',
src: 'logos/inlab-digital.svg',
className: cn(logoClass, lg)
},
{
name: 'UBS',
alt: 'UBS logo',
src: 'logos/ubs.png',
className: cn(logoClass, xl),
imageClassName: logoImageClassInverted
},
{
name: 'Mantis',
alt: 'Mantis logo',
src: 'logos/mantis.svg',
className: cn(logoClass, lg)
},
{
name: 'Papercup',
alt: 'Papercup logo',
src: 'logos/papercup.png',
className: cn(logoClass, xl)
},
{
name: 'Pieces',
alt: 'Pieces logo',
src: 'logos/pieces.png',
className: cn(logoClass, md),
imageClassName: logoImageClassInverted
},
{
name: 'Plasmasolve',
alt: 'Plasmasolve logo',
src: 'logos/plasmasolve.png',
className: cn(logoClass, lg),
imageClassName: logoImageClassInverted
},
{
name: 'Sicara',
alt: 'Sicara logo',
src: 'logos/sicara.png',
className: cn(logoClass, sm)
},
{
name: 'UKHO',
alt: 'UKHO logo',
src: 'logos/ukho.png',
className: cn(logoClass, lg),
imageClassName: logoImageClassInverted
},
{
name: 'XP Inc',
alt: 'XP Inc logo',
src: 'logos/xp-inc-new.webp',
className: cn(logoClass, md)
}
]

const CompanyLogos = () => {
return (
<>
<div className={logoClass}>
<StaticImage
src="./logos/aicon.svg"
alt="Aicon logo"
width={sm}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClass}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/billie.svg"
alt="Billie logo"
width={sm}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClass}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/cyclica.png"
alt="Cyclica logo"
width={md}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClass}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/degould.png"
alt="Degould logo"
width={md}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClassInverted}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/huggingface.svg"
alt="Huggingface logo"
width={xl}
layout="fixed"
loading="eager"
objectFit="contain"
className={logoImageClass}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/inlab-digital.svg"
alt="Inlab Digital logo"
width={md}
layout="fixed"
loading="eager"
objectFit="contain"
className={logoImageClass}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/mantis.svg"
alt="Mantis logo"
width={lg}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClass}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/papercup.png"
alt="Papercup logo"
width={lg}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClass}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/pieces.png"
alt="Pieces logo"
width={md}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClassInverted}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/plasmasolve.png"
alt="Plasmasolve logo"
width={md}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClassInverted}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/sicara.png"
alt="Sicara logo"
width={sm}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClass}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/ubs.png"
alt="UBS logo"
width={md}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClassInverted}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/ukho.png"
alt="UKHO logo"
width={md}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClassInverted}
/>
</div>
<div className={logoClass}>
<StaticImage
src="./logos/xp-inc-new.webp"
alt="XP Inc logo"
width={lg}
loading="eager"
layout="fixed"
objectFit="contain"
className={logoImageClass}
/>
</div>
{logos.map((logo, index) => (
<div key={index} className={logo.className}>
<img
src={logo.src}
alt={logo.alt}
width={200}
height={35}
loading="eager"
className={logo.imageClassName ?? logoImageClass}
style={{ color: 'transparent', objectFit: 'contain' }}
/>
</div>
))}
</>
)
}
20 changes: 7 additions & 13 deletions src/components/Home/LogosSlider/index.tsx
Original file line number Diff line number Diff line change
@@ -7,29 +7,23 @@ import CompanyLogos from './CompanyLogos'
const CompanySlider = () => {
return (
<div className="mt-10">
<div className="mb-5">
<div className="mb-2">
<h2 className={cn('text-2xl font-medium text-center', styles.title)}>
Empowering from startups to Fortune 500 Companies: Our Open Source
Tools at Work
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggest this:

Empowering thousands of users and customers from startups to fortune 500 companies

notes:

  • avoiding open source mention - some use FOSS, some paid, and future rebranding might make this more misleading, so keeping it general
  • sentence case (not title case)
  • don't think we need ":" here (also avoided ",") - will look cleaner imo

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@omesser

avoiding open source mention - some use FOSS, some paid, and future rebranding might make this more misleading, so keeping it general

Just for context: We have on purpose made the dvc.org website about open source (see hero).
All of these logos will not be able to be used for Studio. They can only be used for DVC website (or eventual page in rebranding) except for the ones that came from the Iterative site. So the open-source part is not an issue here.

That being said, I like your edit. Because open-source is mentioned in the hero, this simplifies the idea into one thought: EMPOWER, and lets people reflect on logos. I like it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have on purpose made the dvc.org website about open source (see hero).

Yep, that makes total sense @jendefig - makes sense IMO to refer here to both users and customers, in the page-context of open source like you mentioned!

</h2>
</div>
<div
className={cn(
'max-w-[100vw] w-full grid place-items-center overflow-hidden relative',
'mb-2 w-full grid place-items-center overflow-hidden relative',
styles.fade
)}
>
<div className="w-full animate-slide-fast md:animate-slide flex justify-center">
<div className="inline-flex justify-between">
<div className="inline-flex justify-between mt-1">
<CompanyLogos />
</div>
</div>
<div className="w-full inline-flex justify-between">
<div className="inline-flex justify-between mt-1">
<CompanyLogos />
</div>
</div>
<div className="flex justify-between gap-8 animate-slide">
<CompanyLogos />
<CompanyLogos />
<CompanyLogos />
<CompanyLogos />
</div>
</div>
</div>
16 changes: 12 additions & 4 deletions src/components/Home/LogosSlider/styles.module.css
Original file line number Diff line number Diff line change
@@ -12,9 +12,13 @@
top: 0;
right: 0;
z-index: 1;
width: 90px;
width: 50px;
height: 100%;
background: linear-gradient(to left, white, transparent);
background: linear-gradient(to left, var(--color-light-blue), transparent);

@media screen(sm) {
width: 100px;
}
}

&::after {
@@ -23,8 +27,12 @@
top: 0;
left: 0;
z-index: 1;
width: 90px;
width: 50px;
height: 100%;
background: linear-gradient(to right, white, transparent);
background: linear-gradient(to right, var(--color-light-blue), transparent);

@media screen(sm) {
width: 100px;
}
}
}