diff --git a/src/pages/home/_components/FeaturedAppsCarousel.module.scss b/src/pages/home/_components/FeaturedAppsCarousel.module.scss
new file mode 100644
index 00000000..4edac87d
--- /dev/null
+++ b/src/pages/home/_components/FeaturedAppsCarousel.module.scss
@@ -0,0 +1,82 @@
+h2 {
+ font-size: 2.5em;
+ font-weight: 900;
+}
+
+.carouselContainer {
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ padding: 2rem 0;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ width: 5%;
+ height: 100%;
+ z-index: 1;
+ }
+
+ &::before {
+ left: 0;
+ background: linear-gradient(to right, #fff 0%, transparent 100%);
+
+ [data-theme='dark'] & {
+ background: linear-gradient(
+ to right,
+ var(--ifm-background-color) 0%,
+ transparent 100%
+ );
+ }
+ }
+
+ &::after {
+ right: 0;
+ background: linear-gradient(to left, #fff 0%, transparent 100%);
+
+ [data-theme='dark'] & {
+ background: linear-gradient(
+ to left,
+ var(--ifm-background-color) 0%,
+ transparent 100%
+ );
+ }
+ }
+}
+
+.carouselTrack {
+ display: flex;
+ animation: scroll 30s linear infinite;
+
+ &:hover {
+ animation-play-state: paused;
+ }
+}
+
+.customerLogo {
+ flex-shrink: 0;
+ padding: 0 2rem;
+
+ img {
+ height: 2.5rem;
+ width: auto;
+ opacity: 0.7;
+ transition: opacity 0.3s ease;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+}
+
+@keyframes scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ // Move the track left by 50% since we duplicated the items
+ transform: translateX(-50%);
+ }
+}
diff --git a/src/pages/home/_components/FeaturedAppsCarousel.tsx b/src/pages/home/_components/FeaturedAppsCarousel.tsx
new file mode 100644
index 00000000..f4b0a655
--- /dev/null
+++ b/src/pages/home/_components/FeaturedAppsCarousel.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './FeaturedAppsCarousel.module.scss';
+import { useColorMode } from '@docusaurus/theme-common';
+import type { FeaturedApp } from '../featured-apps';
+
+interface FeaturedAppsCarouselProps {
+ list: FeaturedApp[];
+}
+
+export default function FeaturedAppsCarousel({
+ list,
+}: FeaturedAppsCarouselProps) {
+ const { colorMode } = useColorMode();
+ const isDarkTheme = colorMode === 'dark';
+
+ return (
+
+
+
Trusted by best-in-class apps
+
+ {
+ 'Popular consumer and rock-solid enterprise apps use Electron to power their desktop experiences.'
+ }
+
+
+
+
+ {/* Render list twice to create seamless loop */}
+ {[...list, ...list].map((app, index) => (
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/pages/home/_index.tsx b/src/pages/home/_index.tsx
index 4be7ab1a..92ab2107 100644
--- a/src/pages/home/_index.tsx
+++ b/src/pages/home/_index.tsx
@@ -15,6 +15,9 @@ import InstallSteps from './_components/InstallSteps';
import Feature from './_components/Feature';
import TechnologiesGrid from './_components/TechnologiesGrid';
import CodeWindow from './_components/CodeWindow';
+import FeaturedAppsCarousel from './_components/FeaturedAppsCarousel';
+
+import { FEATURED_APPS, FEATURED_LOGOS } from './featured-apps';
export default function Home() {
const { siteConfig } = useDocusaurusContext();
@@ -69,6 +72,7 @@ export default function Home() {
+
Desktop development made easy
@@ -343,122 +347,7 @@ export default function Home() {
Thousands of organizations spanning all industries use Electron to
build cross-platform software.
-
+
diff --git a/src/pages/home/featured-apps.ts b/src/pages/home/featured-apps.ts
new file mode 100644
index 00000000..593752d4
--- /dev/null
+++ b/src/pages/home/featured-apps.ts
@@ -0,0 +1,156 @@
+export interface FeaturedApp {
+ name: string;
+ image: string;
+ href: string;
+ isMonochrome?: boolean;
+}
+
+// Electron apps with "logo power"
+export const FEATURED_LOGOS: FeaturedApp[] = [
+ {
+ name: '1Password',
+ image: '/assets/app-logos/1password.svg',
+ href: 'https://1password.com/',
+ },
+ {
+ name: 'OpenAI ChatGPT',
+ image: '/assets/app-logos/openai.svg',
+ href: 'https://openai.com/',
+ },
+ {
+ name: 'Slack',
+ image: '/assets/app-logos/slack.svg',
+ href: 'https://slack.com/',
+ },
+ {
+ name: 'Anthropic Claude',
+ image: '/assets/app-logos/claude.svg',
+ href: 'https://claude.ai/',
+ },
+ {
+ name: 'Visual Studio Code',
+ image: '/assets/app-logos/vscode.svg',
+ href: 'https://code.visualstudio.com/',
+ },
+ {
+ name: 'Figma',
+ image: '/assets/app-logos/figma.svg',
+ href: 'https://figma.com/',
+ },
+];
+
+// Apps we _also_ love with less prominence
+export const FEATURED_APPS: FeaturedApp[] = [
+ {
+ name: '1Password',
+ image: '/assets/apps/1password.svg',
+ href: 'https://1password.com/',
+ },
+ {
+ name: 'Discord',
+ image: '/assets/apps/discord.svg',
+ href: 'https://discord.com/',
+ },
+ {
+ name: 'Dropbox',
+ image: '/assets/apps/dropbox.svg',
+ href: 'https://dropbox.com/',
+ },
+ {
+ name: 'Figma',
+ image: '/assets/apps/figma.svg',
+ href: 'https://figma.com/',
+ },
+ {
+ name: 'Loom',
+ image: '/assets/apps/loom.svg',
+ href: 'https://www.loom.com/',
+ },
+ {
+ name: 'Signal',
+ image: '/assets/apps/signal.svg',
+ href: 'https://signal.org/en/',
+ },
+ {
+ name: 'Skype',
+ image: '/assets/apps/skype.svg',
+ href: 'https://skype.com/',
+ },
+ {
+ name: 'Slack',
+ image: '/assets/apps/slack.svg',
+ href: 'https://slack.com/',
+ },
+ {
+ name: 'Notion',
+ image: '/assets/apps/notion.svg',
+ href: 'https://www.notion.so/',
+ },
+ {
+ name: 'VS Code',
+ image: '/assets/apps/vscode.svg',
+ href: 'https://code.visualstudio.com/',
+ },
+ {
+ name: 'Microsoft Teams',
+ image: '/assets/apps/teams.svg',
+ href: 'https://microsoft.com/en-ca/microsoft-teams/group-chat-software/',
+ },
+ {
+ name: 'Asana',
+ image: '/assets/apps/asana.svg',
+ href: 'https://asana.com/',
+ },
+ {
+ name: 'GitHub Desktop',
+ image: '/assets/apps/github-desktop.svg',
+ href: 'https://desktop.github.com/',
+ },
+ {
+ name: 'itch',
+ image: '/assets/apps/itchio.svg',
+ href: 'https://itch.io/app',
+ },
+ {
+ name: 'MongoDB Compass',
+ image: '/assets/apps/mongodb.svg',
+ href: 'https://www.mongodb.com/products/compass',
+ },
+ {
+ name: 'Obsidian',
+ image: '/assets/apps/obsidian.svg',
+ href: 'https://obsidian.md/',
+ },
+ {
+ name: 'Polypane',
+ image: '/assets/apps/polypane.svg',
+ href: 'https://polypane.app/',
+ },
+ {
+ name: 'Postman',
+ image: '/assets/apps/postman.svg',
+ href: 'https://postman.com/',
+ },
+ {
+ name: 'Splice',
+ image: '/assets/apps/splice.svg',
+ isMonochrome: true,
+ href: 'https://splice.com/',
+ },
+ {
+ name: 'Tidal',
+ image: '/assets/apps/tidal.svg',
+ href: 'https://tidal.com',
+ isMonochrome: true,
+ },
+ {
+ name: 'Trello',
+ image: '/assets/apps/trello.svg',
+ href: 'https://trello.com/',
+ },
+ {
+ name: 'Twitch',
+ image: '/assets/apps/twitch.svg',
+ href: 'https://www.twitch.tv/',
+ },
+];
diff --git a/static/assets/app-logos/1password.svg b/static/assets/app-logos/1password.svg
new file mode 100644
index 00000000..b80a3ccd
--- /dev/null
+++ b/static/assets/app-logos/1password.svg
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/assets/app-logos/claude.svg b/static/assets/app-logos/claude.svg
new file mode 100644
index 00000000..833410bc
--- /dev/null
+++ b/static/assets/app-logos/claude.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/assets/app-logos/figma.svg b/static/assets/app-logos/figma.svg
new file mode 100644
index 00000000..ab54544e
--- /dev/null
+++ b/static/assets/app-logos/figma.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/assets/app-logos/notion.svg b/static/assets/app-logos/notion.svg
new file mode 100644
index 00000000..3994de17
--- /dev/null
+++ b/static/assets/app-logos/notion.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/assets/app-logos/openai.svg b/static/assets/app-logos/openai.svg
new file mode 100644
index 00000000..859d7af3
--- /dev/null
+++ b/static/assets/app-logos/openai.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/assets/app-logos/slack.svg b/static/assets/app-logos/slack.svg
new file mode 100644
index 00000000..cadd78d1
--- /dev/null
+++ b/static/assets/app-logos/slack.svg
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/assets/app-logos/vscode.svg b/static/assets/app-logos/vscode.svg
new file mode 100644
index 00000000..0e0b9175
--- /dev/null
+++ b/static/assets/app-logos/vscode.svg
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Visual Studio Code
+