diff --git a/src/app/page.tsx b/src/app/page.tsx index cae9e5f..673c5d0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,8 +10,115 @@ import FaqBase from '@/components/sections/faq/FaqBase'; import FooterMedia from '@/components/sections/footer/FooterMedia'; import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'; import { Crown, Globe, Play, Sparkles, TrendingUp, Users } from 'lucide-react'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; +import React, { useState } from 'react'; +import Slider from 'react-slick'; export default function LandingPage() { + const [channelLogosIndex, setChannelLogosIndex] = useState(0); + const [moviesIndex, setMoviesIndex] = useState(0); + const [seriesIndex, setSeriesIndex] = useState(0); + + const channelLogos = [ + { id: '1', name: 'Netflix', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/netflix-logo-1772540341145.png' }, + { id: '2', name: 'Disney+', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/disney-logo-1772540341145.png' }, + { id: '3', name: 'HBO Max', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/hbo-logo-1772540341145.png' }, + { id: '4', name: 'Prime Video', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/prime-logo-1772540341145.png' }, + { id: '5', name: 'Hulu', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/hulu-logo-1772540341145.png' } + ]; + + const movies = [ + { id: '1', title: 'Action Blockbuster', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/action-movie-1772540341145.png' }, + { id: '2', title: 'Drama Masterpiece', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/drama-movie-1772540341145.png' }, + { id: '3', title: 'Comedy Gold', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/comedy-movie-1772540341145.png' }, + { id: '4', title: 'Sci-Fi Adventure', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/scifi-movie-1772540341145.png' }, + { id: '5', title: 'Thriller', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/thriller-movie-1772540341145.png' } + ]; + + const series = [ + { id: '1', title: 'Epic Drama Series', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/drama-series-1772540341145.png' }, + { id: '2', title: 'Fantasy Adventure', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/fantasy-series-1772540341145.png' }, + { id: '3', title: 'Mystery Thriller', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/mystery-series-1772540341145.png' }, + { id: '4', title: 'Comedy Show', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/comedy-series-1772540341145.png' }, + { id: '5', title: 'Action Series', imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR0SASjGyc31c8JKNEwzF2PHGy/action-series-1772540341145.png' } + ]; + + const channelLogosSettings = { + dots: false, + infinite: true, + speed: 500, + slidesToShow: 5, + slidesToScroll: 1, + autoplay: false, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + slidesToScroll: 1 + } + }, + { + breakpoint: 640, + settings: { + slidesToShow: 2, + slidesToScroll: 1 + } + } + ] + }; + + const moviesSettings = { + dots: false, + infinite: true, + speed: 500, + slidesToShow: 4, + slidesToScroll: 1, + autoplay: false, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + slidesToScroll: 1 + } + }, + { + breakpoint: 640, + settings: { + slidesToShow: 2, + slidesToScroll: 1 + } + } + ] + }; + + const seriesSettings = { + dots: false, + infinite: true, + speed: 500, + slidesToShow: 4, + slidesToScroll: 1, + autoplay: false, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + slidesToScroll: 1 + } + }, + { + breakpoint: 640, + settings: { + slidesToShow: 2, + slidesToScroll: 1 + } + } + ] + }; + return ( +
+
+

Available on Your Favorite Channels

+ + {channelLogos.map((channel) => ( +
+
+ {channel.name} +
+
+ ))} +
+
+
+ +
+
+

Featured Movies

+ + {movies.map((movie) => ( +
+
+ {movie.title} +
+

{movie.title}

+
+
+
+ ))} +
+
+
+ +
+
+

Popular Series

+ + {series.map((show) => ( +
+
+ {show.title} +
+

{show.title}

+
+
+
+ ))} +
+
+
+