diff --git a/src/components/home/InActionSection.tsx b/src/components/home/InActionSection.tsx new file mode 100644 index 00000000..5c79ac85 --- /dev/null +++ b/src/components/home/InActionSection.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { Navigation } from 'swiper'; +import { Swiper, SwiperSlide } from 'swiper/react'; + +import HomeImageUrl from '../../../static/images/screenshots/home/10.8-home.png'; +import LibraryImageUrl from '../../../static/images/screenshots/home/10.8-library.png'; +import DetailsImageUrl from '../../../static/images/screenshots/home/10.8-details.png'; +import PlaybackImageUrl from '../../../static/images/screenshots/home/10.8-playback.png'; + +import 'swiper/css'; +import 'swiper/css/navigation'; +import landingSectionStyles from './LandingSection.module.css'; +import clsx from 'clsx'; + +const screenshots = [ + { + title: 'Home Screen', + url: HomeImageUrl, + alt: 'Jellyfin Home Screen' + }, + { + title: 'Movie Library Screen', + url: LibraryImageUrl, + alt: 'Jellyfin Movie Library Screen' + }, + { + title: 'Movie Details Screen', + url: DetailsImageUrl, + alt: 'Jellyfin Movie Details Screen' + }, + { + title: 'Video Playback Screen', + url: PlaybackImageUrl, + alt: 'Jellyfin Video Playback Screen' + } +]; + +export default function InActionSection() { + return ( + + + + + See Jellyfin in Action + + + + + + {screenshots.map(({ title, url, alt }) => ( + + + + {title} + + + ))} + + + + + + + Try the Demo + + + + + + ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index dde6316c..aad546a3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -8,6 +8,7 @@ import BuiltByVolunteers from '../components/home/BuiltByVolunteers'; import ClientSection from '../components/home/ClientSection'; import CallToAction from '../components/home/CallToAction'; import Hero from '../components/common/Hero'; +import InActionSection from '../components/home/InActionSection'; export default function Home() { return ( @@ -32,6 +33,7 @@ export default function Home() { + diff --git a/static/images/screenshots/home/10.8-details.png b/static/images/screenshots/home/10.8-details.png new file mode 100644 index 00000000..caa35c65 Binary files /dev/null and b/static/images/screenshots/home/10.8-details.png differ diff --git a/static/images/screenshots/home/10.8-home.png b/static/images/screenshots/home/10.8-home.png new file mode 100644 index 00000000..a7186dd0 Binary files /dev/null and b/static/images/screenshots/home/10.8-home.png differ diff --git a/static/images/screenshots/home/10.8-library.png b/static/images/screenshots/home/10.8-library.png new file mode 100644 index 00000000..f9229f99 Binary files /dev/null and b/static/images/screenshots/home/10.8-library.png differ diff --git a/static/images/screenshots/home/10.8-playback.png b/static/images/screenshots/home/10.8-playback.png new file mode 100644 index 00000000..3eb1eb71 Binary files /dev/null and b/static/images/screenshots/home/10.8-playback.png differ