bender/bad7ea4f-e7ea-42bc-aaa1-77c7feeeaa56
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-03 12:28:23 +00:00
parent af0ebfeac7
commit 05966ac14d
1 changed files with 158 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/app/page.tsx
View File

@@ -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 (
<ThemeProvider
defaultButtonVariant="directional-hover"
@@ -58,6 +165,57 @@ export default function LandingPage() {
/>
</div>
<div id="channel-logos" data-section="channel-logos" className="w-full py-20">
<div className="px-6 md:px-12">
<h2 className="text-3xl font-bold mb-8 text-center">Available on Your Favorite Channels</h2>
<Slider {...channelLogosSettings}>
{channelLogos.map((channel) => (
<div key={channel.id} className="px-3">
<div className="bg-card rounded-lg p-4 flex items-center justify-center h-24">
<img src={channel.imageSrc} alt={channel.name} className="max-h-16 max-w-full" />
</div>
</div>
))}
</Slider>
</div>
</div>
<div id="movies" data-section="movies" className="w-full py-20">
<div className="px-6 md:px-12">
<h2 className="text-3xl font-bold mb-8 text-center">Featured Movies</h2>
<Slider {...moviesSettings}>
{movies.map((movie) => (
<div key={movie.id} className="px-3">
<div className="bg-card rounded-lg overflow-hidden">
<img src={movie.imageSrc} alt={movie.title} className="w-full h-64 object-cover" />
<div className="p-4">
<p className="text-center font-semibold">{movie.title}</p>
</div>
</div>
</div>
))}
</Slider>
</div>
</div>
<div id="series" data-section="series" className="w-full py-20">
<div className="px-6 md:px-12">
<h2 className="text-3xl font-bold mb-8 text-center">Popular Series</h2>
<Slider {...seriesSettings}>
{series.map((show) => (
<div key={show.id} className="px-3">
<div className="bg-card rounded-lg overflow-hidden">
<img src={show.imageSrc} alt={show.title} className="w-full h-64 object-cover" />
<div className="p-4">
<p className="text-center font-semibold">{show.title}</p>
</div>
</div>
</div>
))}
</Slider>
</div>
</div>
<div id="features" data-section="features" className="w-full py-20">
<FeatureCardTwentyThree
features={[