Add src/app/movie/[id]/page.tsx
This commit is contained in:
218
src/app/movie/[id]/page.tsx
Normal file
218
src/app/movie/[id]/page.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Sparkles, Play, Star } from 'lucide-react';
|
||||
|
||||
interface MovieDetailProps {
|
||||
params: {
|
||||
id: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function MovieDetailPage({ params }: MovieDetailProps) {
|
||||
// Mock movie data - in a real app, this would come from an API
|
||||
const movie = {
|
||||
id: params.id,
|
||||
title: "The Midnight Phantom", poster: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/movie-cover-poster-for-thriller-film-wit-1773296469771-f4246bdd.png", rating: 5,
|
||||
reviewCount: "2.5M", genre: "Thriller", director: "Christopher Nolan", description: "A thrilling mystery unfolds as a detective investigates a series of supernatural occurrences in a moonlit city. With stunning cinematography and mind-bending plot twists, this film will keep you on the edge of your seat until the very last frame.", cast: [
|
||||
{ id: "1", name: "Leonardo DiCaprio", role: "Lead Role", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/portrait-photo-of-a-satisfied-user-enjoy-1773296469712-88954449.png" },
|
||||
{ id: "2", name: "Emma Stone", role: "Supporting Role", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/welcoming-professional-portrait-of-a-con-1773296470246-3476db0d.png" },
|
||||
{ id: "3", name: "Tom Hardy", role: "Antagonist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/professional-headshot-of-satisfied-strea-1773296469147-15a5bce5.png" },
|
||||
{ id: "4", name: "Saoirse Ronan", role: "Supporting Role", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/engaging-professional-portrait-of-happy--1773296469063-a4fb9206.png" },
|
||||
{ id: "5", name: "Mark Ruffalo", role: "Supporting Role", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/professional-portrait-for-customer-testi-1773296469525-32033b29.png" },
|
||||
{ id: "6", name: "Timothée Chalamet", role: "Mysterious Character", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/professional-portrait-of-a-happy-streami-1773296469542-6f84fd6a.png" }
|
||||
],
|
||||
userReviews: [
|
||||
{
|
||||
id: "1", name: "James Chen", handle: "@jamesfilm", testimonial: "Absolutely phenomenal! One of the best thrillers I've seen in years. The cinematography is breathtaking!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/professional-portrait-of-a-happy-streami-1773296469542-6f84fd6a.png"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Rachel Williams", handle: "@rachelwatches", testimonial: "An absolute masterpiece. The plot twists had me completely shocked. Highly recommend!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/welcoming-professional-portrait-of-a-con-1773296470246-3476db0d.png"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Michael Torres", handle: "@michaelmovies", testimonial: "Stunning visuals combined with an intricate plot. This is cinema at its finest.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/professional-headshot-of-satisfied-strea-1773296469147-15a5bce5.png"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Sophie Martin", handle: "@sophiecinema", testimonial: "A thought-provoking thriller that keeps you guessing until the end. Perfect!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/engaging-professional-portrait-of-happy--1773296469063-a4fb9206.png"
|
||||
},
|
||||
{
|
||||
id: "5", name: "David Kim", handle: "@davidflix", testimonial: "One of those rare films that stays with you long after it ends. Brilliant storytelling!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/professional-portrait-for-customer-testi-1773296469525-32033b29.png"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Alice Johnson", handle: "@alicereviews", testimonial: "Exceptional performances from the entire cast. This deserves all the accolades!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/portrait-photo-of-a-satisfied-user-enjoy-1773296469712-88954449.png"
|
||||
}
|
||||
],
|
||||
similarMovies: [
|
||||
{
|
||||
id: "1", brand: "CinemaFlow", name: "Crimson Horizon", price: "Stream Now", rating: 5,
|
||||
reviewCount: "1.8M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/movie-poster-for-adventure-film-with-dyn-1773296470265-3fcf3dca.png?_wi=1", imageAlt: "Crimson Horizon"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "CinemaFlow", name: "Shadows of Tomorrow", price: "Stream Now", rating: 5,
|
||||
reviewCount: "1.4M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/movie-poster-for-horror-film-with-dark-o-1773296470517-4a437840.png?_wi=1", imageAlt: "Shadows of Tomorrow"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "CinemaFlow", name: "The Last Echo", price: "Stream Now", rating: 5,
|
||||
reviewCount: "2.7M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/award-winning-movie-poster-with-sophisti-1773296468875-acd67598.png", imageAlt: "The Last Echo"
|
||||
},
|
||||
{
|
||||
id: "4", brand: "CinemaFlow", name: "Digital Pulse", price: "Stream Now", rating: 5,
|
||||
reviewCount: "3.2M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/popular-streaming-movie-poster-with-mode-1773296469731-aada3dd2.png", imageAlt: "Digital Pulse"
|
||||
},
|
||||
{
|
||||
id: "5", brand: "CinemaFlow", name: "Nova Rising", price: "Stream Now", rating: 5,
|
||||
reviewCount: "2.9M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/blockbuster-movie-poster-with-high-impac-1773296470191-ed07f0e0.png", imageAlt: "Nova Rising"
|
||||
},
|
||||
{
|
||||
id: "6", brand: "CinemaFlow", name: "Infinite Paths", price: "Stream Now", rating: 5,
|
||||
reviewCount: "2.4M", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Api8Eq5FlSZ0Yx3pymHlMVvJV5/movie-poster-for-latest-release-with-con-1773296469326-313f5c19.png", imageAlt: "Infinite Paths"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="CinemaFlow"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Movies", id: "/" },
|
||||
{ name: "Trending", id: "/" },
|
||||
{ name: "Genres", id: "/" },
|
||||
{ name: "Browse", id: "/" }
|
||||
]}
|
||||
button={{ text: "Start Watching", href: "/" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="poster" data-section="poster">
|
||||
<MediaAbout
|
||||
tag="Movie Details"
|
||||
title={movie.title}
|
||||
description={movie.description}
|
||||
subdescription={`Director: ${movie.director} | Genre: ${movie.genre} | Rating: ${movie.rating}⭐ (${movie.reviewCount} reviews)`}
|
||||
icon={Sparkles}
|
||||
imageSrc={movie.poster}
|
||||
imageAlt={`${movie.title} poster`}
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Play Now", href: "https://example.com/play" },
|
||||
{ text: "Add to Watchlist", href: "https://example.com/watchlist" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cast" data-section="cast">
|
||||
<ProductCardTwo
|
||||
title="Cast"
|
||||
description="Meet the talented actors bringing this story to life"
|
||||
tag="Starring"
|
||||
products={movie.cast.map((actor) => ({
|
||||
id: actor.id,
|
||||
brand: "Actor", name: actor.name,
|
||||
price: actor.role,
|
||||
rating: 5,
|
||||
reviewCount: "", imageSrc: actor.imageSrc,
|
||||
imageAlt: actor.name
|
||||
}))}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardThirteen
|
||||
title="Audience Reviews"
|
||||
description="What viewers are saying about this amazing film"
|
||||
tag="User Ratings"
|
||||
testimonials={movie.userReviews}
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="similar" data-section="similar">
|
||||
<ProductCardTwo
|
||||
title="Similar Movies"
|
||||
description="You might also enjoy watching these recommendations"
|
||||
tag="Recommended"
|
||||
products={movie.similarMovies}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="CinemaFlow"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Movies", href: "/" },
|
||||
{ label: "Trending", href: "/" },
|
||||
{ label: "Genres", href: "/" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Support", href: "https://support.example.com" },
|
||||
{ label: "Blog", href: "https://blog.example.com" },
|
||||
{ label: "Contact", href: "https://contact.example.com" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Report Issue", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "YouTube", href: "https://youtube.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user