diff --git a/apps/web/public/screenshots/consent-model.png b/apps/web/public/screenshots/consent-model.png new file mode 100644 index 00000000..6c0ade76 Binary files /dev/null and b/apps/web/public/screenshots/consent-model.png differ diff --git a/apps/web/public/screenshots/cross-platform.png b/apps/web/public/screenshots/cross-platform.png new file mode 100644 index 00000000..16eee369 Binary files /dev/null and b/apps/web/public/screenshots/cross-platform.png differ diff --git a/apps/web/public/screenshots/dashboard.png b/apps/web/public/screenshots/dashboard.png new file mode 100644 index 00000000..94fb0e38 Binary files /dev/null and b/apps/web/public/screenshots/dashboard.png differ diff --git a/apps/web/public/screenshots/pwa-viewer.png b/apps/web/public/screenshots/pwa-viewer.png new file mode 100644 index 00000000..772edd19 Binary files /dev/null and b/apps/web/public/screenshots/pwa-viewer.png differ diff --git a/apps/web/public/screenshots/screen-recording.png b/apps/web/public/screenshots/screen-recording.png new file mode 100644 index 00000000..b81dbaa4 Binary files /dev/null and b/apps/web/public/screenshots/screen-recording.png differ diff --git a/apps/web/public/screenshots/screen-sharing.png b/apps/web/public/screenshots/screen-sharing.png new file mode 100644 index 00000000..17e30fc2 Binary files /dev/null and b/apps/web/public/screenshots/screen-sharing.png differ diff --git a/apps/web/src/app/features/page.tsx b/apps/web/src/app/features/page.tsx index 81d8321c..18bd7ae0 100644 --- a/apps/web/src/app/features/page.tsx +++ b/apps/web/src/app/features/page.tsx @@ -1,5 +1,7 @@ import type { Metadata } from 'next'; +import Image from 'next/image'; import Link from 'next/link'; +import type { LucideIcon } from 'lucide-react'; import { Monitor, MousePointer2, @@ -28,7 +30,22 @@ export const metadata: Metadata = { alternates: { canonical: 'https://pairux.com/features' }, }; -const mainFeatures = [ +/** + * A screenshot is only attached where the shipped product actually shows the + * feature. Remote control lives in the desktop app, so those entries keep the + * illustrated placeholder rather than borrowing an unrelated screen. + */ +interface Feature { + icon: LucideIcon; + title: string; + description: string; + details: string[]; + comingSoon?: boolean; + image?: string; + imageAlt?: string; +} + +const mainFeatures: Feature[] = [ { icon: Monitor, title: 'Real-time Screen Sharing', @@ -40,6 +57,9 @@ const mainFeatures = [ 'Adaptive bitrate for any connection', 'Cursor included in stream', ], + image: '/screenshots/screen-sharing.png', + imageAlt: + 'The PairUX host console during a session, showing the quality selector, join code, participant list and session info panel.', }, { icon: MousePointer2, @@ -76,6 +96,9 @@ const mainFeatures = [ 'Visual indicator when control is active', 'Can revoke control at any time', ], + image: '/screenshots/consent-model.png', + imageAlt: + 'The PairUX viewer console, where a guest must press Request Control before the host grants input.', }, { icon: Globe, @@ -88,6 +111,9 @@ const mainFeatures = [ 'Installable as PWA', 'Mobile-friendly for viewing', ], + image: '/screenshots/pwa-viewer.png', + imageAlt: + 'The PairUX join screen in a browser, showing the session code, live status and a Watch for free button that needs no account.', }, { icon: Cpu, @@ -100,6 +126,9 @@ const mainFeatures = [ 'Linux: APT, DNF, AUR', 'Direct download available', ], + image: '/screenshots/cross-platform.png', + imageAlt: + 'The PairUX download page listing one-line installers plus DMG, EXE, AppImage, DEB and RPM builds for macOS, Windows and Linux.', }, { icon: CircleDot, @@ -113,6 +142,9 @@ const mainFeatures = [ 'Pause/resume recording', ], comingSoon: true, + image: '/screenshots/screen-recording.png', + imageAlt: + 'PairUX recording settings, with default recording and capture quality presets and a system audio toggle.', }, { icon: MessageSquare, @@ -195,6 +227,18 @@ export default function FeaturesPage() { mind.
+ +