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) => ( +
+ {`${app.name} +
+ ))} +
+
+
+ ); +} 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 +