Skip to content

Commit e10f0dc

Browse files
felixriesebergfelixrieseberg
committed
Add a logo carousel
1 parent 00b73a7 commit e10f0dc

11 files changed

+411
-116
lines changed

‎src/pages/home/_components/FeaturedAppsCarousel.module.scss

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
h2 {
2+
font-size: 2.5em;
3+
font-weight: 900;
4+
}
5+
6+
.carouselContainer {
7+
width: 100%;
8+
overflow: hidden;
9+
position: relative;
10+
padding: 2rem 0;
11+
12+
&::before,
13+
&::after {
14+
content: '';
15+
position: absolute;
16+
top: 0;
17+
width: 5%;
18+
height: 100%;
19+
z-index: 1;
20+
}
21+
22+
&::before {
23+
left: 0;
24+
background: linear-gradient(to right, #fff 0%, transparent 100%);
25+
26+
[data-theme='dark'] & {
27+
background: linear-gradient(to right, var(--ifm-background-color) 0%, transparent 100%);
28+
}
29+
}
30+
31+
&::after {
32+
right: 0;
33+
background: linear-gradient(to left, #fff 0%, transparent 100%);
34+
35+
[data-theme='dark'] & {
36+
background: linear-gradient(to left, var(--ifm-background-color) 0%, transparent 100%);
37+
}
38+
}
39+
}
40+
41+
.carouselTrack {
42+
display: flex;
43+
animation: scroll 30s linear infinite;
44+
45+
&:hover {
46+
animation-play-state: paused;
47+
}
48+
}
49+
50+
.customerLogo {
51+
flex-shrink: 0;
52+
padding: 0 2rem;
53+
54+
img {
55+
height: 2.5rem;
56+
width: auto;
57+
opacity: 0.7;
58+
transition: opacity 0.3s ease;
59+
60+
&:hover {
61+
opacity: 1;
62+
}
63+
}
64+
}
65+
66+
@keyframes scroll {
67+
0% {
68+
transform: translateX(0);
69+
}
70+
100% {
71+
// Move the track left by 50% since we duplicated the items
72+
transform: translateX(-50%);
73+
}
74+
}

‎src/pages/home/_components/FeaturedAppsCarousel.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import styles from './FeaturedAppsCarousel.module.scss';
4+
import { useColorMode } from '@docusaurus/theme-common';
5+
import type { FeaturedApp } from '../featured-apps';
6+
7+
interface FeaturedAppsCarouselProps {
8+
list: FeaturedApp[];
9+
}
10+
11+
export default function FeaturedAppsCarousel({
12+
list,
13+
}: FeaturedAppsCarouselProps) {
14+
const { colorMode } = useColorMode();
15+
const isDarkTheme = colorMode === 'dark';
16+
17+
return (
18+
<div className={clsx(styles.section)}>
19+
<div style={{ textAlign: 'center', marginBottom: '6rem' }}>
20+
<h2>Trusted by best-in-class apps</h2>
21+
<p>
22+
{
23+
'Popular consumer and rock-solid enterprise apps use Electron to power their desktop experiences.'
24+
}
25+
</p>
26+
</div>
27+
<div className={styles.carouselContainer}>
28+
<div className={styles.carouselTrack}>
29+
{/* Render list twice to create seamless loop */}
30+
{[...list, ...list].map((app, index) => (
31+
<div key={`${app.name}-${index}`} className={styles.customerLogo}>
32+
<img
33+
src={app.image}
34+
alt={`${app.name} logo`}
35+
title={app.name}
36+
style={{
37+
height: '3rem',
38+
width: 'auto',
39+
objectFit: 'contain',
40+
filter: !app.isMonochrome
41+
? isDarkTheme
42+
? 'brightness(0) invert(1)'
43+
: 'brightness(0)'
44+
: undefined,
45+
}}
46+
/>
47+
</div>
48+
))}
49+
</div>
50+
</div>
51+
</div>
52+
);
53+
}

‎src/pages/home/_index.tsx

+5-116
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import InstallSteps from './_components/InstallSteps';
1515
import Feature from './_components/Feature';
1616
import TechnologiesGrid from './_components/TechnologiesGrid';
1717
import CodeWindow from './_components/CodeWindow';
18+
import FeaturedAppsCarousel from './_components/FeaturedAppsCarousel';
19+
20+
import { FEATURED_APPS, FEATURED_LOGOS } from './featured-apps';
1821

1922
export default function Home() {
2023
const { siteConfig } = useDocusaurusContext();
@@ -69,6 +72,7 @@ export default function Home() {
6972
</div>
7073
</div>
7174
</div>
75+
<FeaturedAppsCarousel list={FEATURED_LOGOS} />
7276
<div className={clsx(styles.section)}>
7377
<div style={{ textAlign: 'center', marginBottom: '6rem' }}>
7478
<h2>Desktop development made easy</h2>
@@ -343,122 +347,7 @@ export default function Home() {
343347
Thousands of organizations spanning all industries use Electron to
344348
build cross-platform software.
345349
</p>
346-
<AppsGrid
347-
list={[
348-
{
349-
name: '1Password',
350-
image: '/assets/apps/1password.svg',
351-
href: 'https://1password.com/',
352-
},
353-
{
354-
name: 'Asana',
355-
image: '/assets/apps/asana.svg',
356-
href: 'https://asana.com/',
357-
},
358-
{
359-
name: 'Discord',
360-
image: '/assets/apps/discord.svg',
361-
href: 'https://discord.com/',
362-
},
363-
{
364-
name: 'Dropbox',
365-
image: '/assets/apps/dropbox.svg',
366-
href: 'https://dropbox.com/',
367-
},
368-
{
369-
name: 'Figma',
370-
image: '/assets/apps/figma.svg',
371-
href: 'https://figma.com/',
372-
},
373-
{
374-
name: 'GitHub Desktop',
375-
image: '/assets/apps/github-desktop.svg',
376-
href: 'https://desktop.github.com/',
377-
},
378-
{
379-
name: 'itch',
380-
image: '/assets/apps/itchio.svg',
381-
href: 'https://itch.io/app',
382-
},
383-
{
384-
name: 'Loom',
385-
image: '/assets/apps/loom.svg',
386-
href: 'https://www.loom.com/',
387-
},
388-
{
389-
name: 'MongoDB Compass',
390-
image: '/assets/apps/mongodb.svg',
391-
href: 'https://www.mongodb.com/products/compass',
392-
},
393-
{
394-
name: 'Notion',
395-
image: '/assets/apps/notion.svg',
396-
href: 'https://www.notion.so/',
397-
},
398-
{
399-
name: 'Obsidian',
400-
image: '/assets/apps/obsidian.svg',
401-
href: 'https://obsidian.md/',
402-
},
403-
{
404-
name: 'Polypane',
405-
image: '/assets/apps/polypane.svg',
406-
href: 'https://polypane.app/',
407-
},
408-
{
409-
name: 'Postman',
410-
image: '/assets/apps/postman.svg',
411-
href: 'https://postman.com/',
412-
},
413-
{
414-
name: 'Signal',
415-
image: '/assets/apps/signal.svg',
416-
href: 'https://signal.org/en/',
417-
},
418-
{
419-
name: 'Skype',
420-
image: '/assets/apps/skype.svg',
421-
href: 'https://skype.com/',
422-
},
423-
{
424-
name: 'Slack',
425-
image: '/assets/apps/slack.svg',
426-
href: 'https://slack.com/',
427-
},
428-
{
429-
name: 'Splice',
430-
image: '/assets/apps/splice.svg',
431-
isMonochrome: true,
432-
href: 'https://splice.com/',
433-
},
434-
{
435-
name: 'Microsoft Teams',
436-
image: '/assets/apps/teams.svg',
437-
href: 'https://microsoft.com/en-ca/microsoft-teams/group-chat-software/',
438-
},
439-
{
440-
name: 'Tidal',
441-
image: '/assets/apps/tidal.svg',
442-
href: 'https://tidal.com',
443-
isMonochrome: true,
444-
},
445-
{
446-
name: 'Trello',
447-
image: '/assets/apps/trello.svg',
448-
href: 'https://trello.com/',
449-
},
450-
{
451-
name: 'Twitch',
452-
image: '/assets/apps/twitch.svg',
453-
href: 'https://www.twitch.tv/',
454-
},
455-
{
456-
name: 'VS Code',
457-
image: '/assets/apps/vscode.svg',
458-
href: 'https://code.visualstudio.com/',
459-
},
460-
]}
461-
/>
350+
<AppsGrid list={FEATURED_APPS} />
462351
</div>
463352
</div>
464353
</main>

0 commit comments

Comments
 (0)