bender/5fd7ab97-5bda-4dd5-b82b-7c28a299442d
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #3

Merged
bender merged 7 commits from version_2 into main 2026-04-18 11:34:01 +00:00
Conversation 0 Commits 7 Files Changed 7 +340 -77
7 changed files with 340 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/account/page.tsx Normal file
View File

@@ -0,0 +1,30 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function AccountPage() {
const navLinks = [
{ name: "Home", id: "/" },
{ name: "Browse", id: "/browse" },
{ name: "Watch", id: "/watch" },
{ name: "Account", id: "/account" },
{ name: "Sign In", id: "/sign-in" }
];
return (
<ThemeProvider>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay navItems={navLinks} brandName="Netflix" />
</div>
<main className="min-h-screen pt-24 px-8">
<h1>Your Account</h1>
</main>
<FooterLogoEmphasis columns={[]} logoText="Netflix" />
</ReactLenis>
</ThemeProvider>
);
}

71
src/app/browse/page.tsx Normal file
View File

@@ -0,0 +1,71 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import Input from '@/components/form/Input';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
const ALL_MOVIES = [
{ id: "1", name: "Stranger Things", price: "Action", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-leisure-recreation-activity-icon_53876-21313.jpg" },
{ id: "2", name: "The Witcher", price: "Fantasy", imageSrc: "http://img.b2bpic.net/free-photo/hipster-vintage-vector-graphic-concept_53876-13842.jpg" },
{ id: "3", name: "Squid Game", price: "Drama", imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098546.jpg" },
{ id: "4", name: "Bridgerton", price: "Drama", imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-system-passenger-information-display-screen_23-2148954785.jpg" },
{ id: "5", name: "Dark", price: "Sci-Fi", imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377352.jpg" },
{ id: "6", name: "Black Mirror", price: "Sci-Fi", imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377328.jpg" }
];
export default function BrowsePage() {
const [search, setSearch] = useState("");
const [genre, setGenre] = useState("All");
const filtered = ALL_MOVIES.filter(m =>
(genre === "All" || m.price === genre) &&
(m.name.toLowerCase().includes(search.toLowerCase()))
);
return (
<ThemeProvider>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Browse", id: "/browse" },
{ name: "FAQ", id: "/faq" }
]}
brandName="Netflix"
/>
<div className="pt-32 pb-16 px-8 container mx-auto">
<div className="flex gap-4 mb-8">
<Input value={search} onChange={setSearch} placeholder="Search titles..." />
<select className="bg-card border rounded p-2" value={genre} onChange={(e) => setGenre(e.target.value)}>
{["All", "Action", "Fantasy", "Drama", "Sci-Fi"].map(g => <option key={g} value={g}>{g}</option>)}
</select>
</div>
<ProductCardOne
products={filtered}
animationType="slide-up"
gridVariant="four-items-2x2-equal-grid"
title="Catalog"
description="Explore our library of amazing content."
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<FooterLogoEmphasis
columns={[
{ items: [{ label: "FAQ", href: "#" }, { label: "Help Center", href: "#" }] },
{ items: [{ label: "Account", href: "#" }, { label: "Media Center", href: "#" }] },
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
]}
logoText="Netflix"
/>
</ReactLenis>
</ThemeProvider>
);
}

94
src/app/page.tsx
View File

@@ -17,16 +17,16 @@ import { Download } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="bold"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="glass-elevated"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
@@ -34,8 +34,8 @@ export default function LandingPage() {
navItems={[
{ name: "Home", id: "hero" },
{ name: "Shows", id: "features" },
{ name: "Plans", id: "pricing" },
{ name: "FAQ", id: "faq" }
{ name: "FAQ", id: "faq" },
{ name: "Sign Up", id: "signup" }
]}
brandName="Netflix"
/>
@@ -47,21 +47,10 @@ export default function LandingPage() {
description="Watch anywhere. Cancel anytime."
testimonials={[
{ name: "John Doe", handle: "@johndoe", testimonial: "The best streaming experience I've ever had.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/focused-concentrated-woman-eating-popcorn-watching-interesting-movie-tv-female-home-alone_482257-2725.jpg" },
{ name: "Jane Smith", handle: "@janesmith", testimonial: "Incredible selection and quality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-couple-watching-horror-movie-while-sitting-couch-home_58466-15995.jpg" },
{ name: "Bob Johnson", handle: "@bobjohnson", testimonial: "I love the new UI update!", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/amused-man-lounged-couch-laughing-funny-comedy-movie-while-eating-popcorn_482257-124273.jpg" },
{ name: "Alice Brown", handle: "@aliceb", testimonial: "So many classics available in one place.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/person-playing-virtual-video-games-holding-joystick_482257-31417.jpg" },
{ name: "Charlie Davis", handle: "@charlied", testimonial: "Seamless streaming and great audio.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/amused-man-lounged-couch-laughing-funny-comedy-movie-while-eating-popcorn_482257-126424.jpg" }
{ name: "Jane Smith", handle: "@janesmith", testimonial: "Incredible selection and quality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-couple-watching-horror-movie-while-sitting-couch-home_58466-15995.jpg" }
]}
buttons={[{ text: "Get Started", href: "#pricing" }]}
buttons={[{ text: "Get Started", href: "/signup" }]}
imageSrc="http://img.b2bpic.net/free-photo/luxury-movie-theater-with-modern-design-lighting-generated-by-ai_188544-33089.jpg"
showBlur={true}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/laughing-couple-having-movie-night_23-2147718327.jpg", alt: "Laughing couple having a movie night" },
{ src: "http://img.b2bpic.net/free-photo/exhausted-man-sleeping-couch-after-working-laptop-watching-tv_482257-126351.jpg", alt: "Exhausted man sleeping on couch after working on laptop and watching TV" },
{ src: "http://img.b2bpic.net/free-photo/scared-kids-watching-horror-movie_23-2147768040.jpg", alt: "Scared kids watching horror movie" },
{ src: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500609.jpg", alt: "Dark vip cinema studio still life" },
{ src: "http://img.b2bpic.net/free-photo/portrait-man-with-beard-holding-popcorn-bowl_482257-21499.jpg", alt: "Portrait of man with beard holding popcorn bowl" }
]}
/>
</div>
@@ -92,62 +81,13 @@ export default function LandingPage() {
{ id: "1", name: "Stranger Things", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-leisure-recreation-activity-icon_53876-21313.jpg" },
{ id: "2", name: "The Witcher", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/hipster-vintage-vector-graphic-concept_53876-13842.jpg" },
{ id: "3", name: "Squid Game", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098546.jpg" },
{ id: "4", name: "Bridgerton", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-system-passenger-information-display-screen_23-2148954785.jpg" },
{ id: "5", name: "Dark", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377352.jpg" },
{ id: "6", name: "Black Mirror", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377328.jpg" }
{ id: "4", name: "Bridgerton", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-system-passenger-information-display-screen_23-2148954785.jpg" }
]}
title="Trending Now"
description="See what everyone is watching."
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Our Story"
description="We are revolutionizing how the world consumes entertainment."
bulletPoints={[
{ title: "Global reach", description: "Streaming to over 190 countries." },
{ title: "Original content", description: "Award winning films and series." },
{ title: "User-first design", description: "Seamless interface across devices." }
]}
imageSrc="http://img.b2bpic.net/free-photo/filmmaker-refining-movie-footage_482257-121322.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="metric" data-section="metric">
<MetricCardFourteen
useInvertedBackground={true}
title="Our Global Impact"
tag="Milestones"
metrics={[
{ id: "m1", value: "260M+", description: "Paid subscribers" },
{ id: "m2", value: "190+", description: "Countries covered" },
{ id: "m3", value: "1000+", description: "Original titles" }
]}
metricsAnimation="slide-up"
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
description="What our subscribers think."
testimonials={[
{ id: "t1", name: "Alice", handle: "@alice", testimonial: "Netflix is great!", imageSrc: "http://img.b2bpic.net/free-photo/sports-fan-watching-football-competition-live-tv-reacting-anger_482257-92429.jpg" },
{ id: "t2", name: "Bob", handle: "@bob", testimonial: "Amazing content variety.", imageSrc: "http://img.b2bpic.net/free-photo/man-turning-tv-using-remote-control-eating-popcorn_482257-120863.jpg" },
{ id: "t3", name: "Charlie", handle: "@charlie", testimonial: "Super reliable streaming.", imageSrc: "http://img.b2bpic.net/free-photo/scared-woman-cinema_23-2147988949.jpg" },
{ id: "t4", name: "David", handle: "@david", testimonial: "The recommendation engine is perfect.", imageSrc: "http://img.b2bpic.net/free-photo/man-couch-having-movie-night_23-2147718305.jpg" },
{ id: "t5", name: "Eve", handle: "@eve", testimonial: "I love the original series.", imageSrc: "http://img.b2bpic.net/free-photo/person-arriving-apartment-sitting-down-couch-enjoy-movies_482257-126486.jpg" }
]}
title="What People Say"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={true}
@@ -168,14 +108,14 @@ export default function LandingPage() {
tag="Join Now"
title="Ready to watch?"
description="Enter your email to create or restart your membership."
buttons={[{ text: "Get Started", href: "#" }]}
buttons={[{ text: "Get Started", href: "/signup" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "FAQ", href: "#" }, { label: "Help Center", href: "#" }] },
{ items: [{ label: "FAQ", href: "/faq" }, { label: "Help Center", href: "/faq" }] },
{ items: [{ label: "Account", href: "#" }, { label: "Media Center", href: "#" }] },
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
]}
@@ -185,4 +125,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}

63
src/app/profile/page.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import LegalSection from '@/components/legal/LegalSection';
export default function ProfilePage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Shows", id: "/#features" },
{ name: "Profile", id: "/profile" },
{ name: "FAQ", id: "/#faq" }
]}
brandName="Netflix"
/>
</div>
<main className="pt-32 pb-20 min-h-screen">
<LegalSection
layout="page"
title="Account & Profile"
subtitle="Manage your viewing preferences and settings."
sections={[
{ heading: "User Settings", content: { type: "list", items: ["Change password", "Update payment method", "Manage devices", "Language settings"] } },
{ heading: "Watchlist", content: { type: "paragraph", text: "Keep track of the movies and shows you're planning to watch next." } },
{ heading: "Viewing History", content: { type: "paragraph", text: "View all the content you've watched recently." } },
{ heading: "Account Management", content: { type: "list", items: ["Cancel membership", "Close account", "Export data"] } }
]}
/>
</main>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "FAQ", href: "/#faq" }, { label: "Help Center", href: "#" }] },
{ items: [{ label: "Account", href: "/profile" }, { label: "Media Center", href: "#" }] },
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
]}
logoText="Netflix"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

30
src/app/sign-in/page.tsx Normal file
View File

@@ -0,0 +1,30 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function SignInPage() {
const navLinks = [
{ name: "Home", id: "/" },
{ name: "Browse", id: "/browse" },
{ name: "Watch", id: "/watch" },
{ name: "Account", id: "/account" },
{ name: "Sign In", id: "/sign-in" }
];
return (
<ThemeProvider>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay navItems={navLinks} brandName="Netflix" />
</div>
<main className="min-h-screen pt-24 px-8">
<h1>Sign In</h1>
</main>
<FooterLogoEmphasis columns={[]} logoText="Netflix" />
</ReactLenis>
</ThemeProvider>
);
}

42
src/app/signup/page.tsx Normal file
View File

@@ -0,0 +1,42 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import ReactLenis from "lenis/react";
export default function SignUpPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="glass-elevated"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
navItems={[{ name: "Home", id: "/" }, { name: "Sign Up", id: "signup" }]}
brandName="Netflix"
/>
<div className="pt-32 pb-20">
<ContactSplitForm
title="Create your account"
description="Start your free trial today and stream unlimited movies."
inputs={[
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "password", type: "password", placeholder: "Password", required: true }
]}
useInvertedBackground={false}
buttonText="Sign Up"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

87
src/app/watch/page.tsx Normal file
View File

@@ -0,0 +1,87 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Play, ListVideo, ThumbsUp } from "lucide-react";
export default function WatchPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Shows", id: "/features" },
{ name: "Plans", id: "/pricing" },
{ name: "FAQ", id: "/faq" },
{ name: "Watch", id: "/watch" }
]}
brandName="Netflix"
/>
<main className="pt-24 pb-12 px-6 min-h-screen flex flex-col gap-12">
<section className="aspect-video bg-black rounded-xl overflow-hidden relative shadow-2xl">
<div className="absolute inset-0 flex items-center justify-center">
<button className="bg-white/20 hover:bg-white/30 backdrop-blur-md p-6 rounded-full transition-all">
<Play className="w-12 h-12 text-white" fill="white" />
</button>
</div>
</section>
<div className="grid md:grid-cols-3 gap-8">
<div className="md:col-span-2 space-y-6">
<h1 className="text-4xl font-bold">Stranger Things: Season 4, Episode 1</h1>
<p className="text-gray-400">A gripping sci-fi thriller about a small town where mysterious disappearances lead to a government conspiracy.</p>
<div className="flex gap-4">
<button className="flex items-center gap-2 bg-white text-black px-6 py-3 rounded-full font-semibold">
<ThumbsUp className="w-5 h-5" /> Like
</button>
</div>
</div>
<div className="bg-gray-900/50 p-6 rounded-xl border border-gray-800">
<h3 className="text-xl font-bold mb-4 flex items-center gap-2"><ListVideo /> Episodes</h3>
<div className="space-y-4">
{[1, 2, 3, 4, 5].map((ep) => (
<div key={ep} className="p-3 bg-white/5 rounded-lg hover:bg-white/10 cursor-pointer">
Episode {ep}: The Upside Down
</div>
))}
</div>
</div>
</div>
<section>
<h2 className="text-2xl font-bold mb-6">Recommendations</h2>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="aspect-[2/3] bg-gray-800 rounded-lg animate-pulse"></div>
))}
</div>
</section>
</main>
<FooterLogoEmphasis
columns={[
{ items: [{ label: "FAQ", href: "#" }, { label: "Help Center", href: "#" }] },
{ items: [{ label: "Account", href: "#" }, { label: "Media Center", href: "#" }] },
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
]}
logoText="Netflix"
/>
</ReactLenis>
</ThemeProvider>
);
}