Merge version_2 into main #6
102
src/app/page.tsx
102
src/app/page.tsx
@@ -10,9 +10,6 @@ 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 dynamic from 'next/dynamic';
|
||||
|
||||
const Slider = dynamic(() => import('react-slick'), { ssr: false });
|
||||
|
||||
export default function LandingPage() {
|
||||
const channelLogos = [
|
||||
@@ -39,81 +36,6 @@ export default function LandingPage() {
|
||||
{ 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"
|
||||
@@ -163,25 +85,25 @@ export default function LandingPage() {
|
||||
<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 as any)}>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
{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">
|
||||
<div key={channel.id} className="flex items-center justify-center">
|
||||
<div className="bg-card rounded-lg p-4 flex items-center justify-center h-24 w-full">
|
||||
<img src={channel.imageSrc} alt={channel.name} className="max-h-16 max-w-full" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
</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 as any)}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{movies.map((movie) => (
|
||||
<div key={movie.id} className="px-3">
|
||||
<div className="bg-card rounded-lg overflow-hidden">
|
||||
<div key={movie.id} className="flex">
|
||||
<div className="bg-card rounded-lg overflow-hidden w-full">
|
||||
<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>
|
||||
@@ -189,17 +111,17 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
</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 as any)}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{series.map((show) => (
|
||||
<div key={show.id} className="px-3">
|
||||
<div className="bg-card rounded-lg overflow-hidden">
|
||||
<div key={show.id} className="flex">
|
||||
<div className="bg-card rounded-lg overflow-hidden w-full">
|
||||
<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>
|
||||
@@ -207,7 +129,7 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user