src/app/admin/layout.tsx

@@ -0,0 +1,11 @@
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-background">
+      {children}
+    </div>
+  );
+}

src/app/admin/page.tsx

@@ -0,0 +1,242 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { BarChart3, Users, Settings, LogOut, Menu, X } from "lucide-react";
+import { useState } from "react";
+
+export default function AdminDashboard() {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  const adminNavItems = [
+    { name: "Dashboard", id: "dashboard" },
+    { name: "Users", id: "users" },
+    { name: "Analytics", id: "analytics" },
+    { name: "Settings", id: "settings" }
+  ];
+
+  const dashboardCards = [
+    {
+      title: "Total Users",      value: "1,234",      icon: Users,
+      change: "+12% from last month"
+    },
+    {
+      title: "Active Sessions",      value: "567",      icon: BarChart3,
+      change: "+5% from last week"
+    },
+    {
+      title: "System Health",      value: "99.8%",      icon: Settings,
+      change: "All systems operational"
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div className="flex h-screen bg-background">
+        {/* Sidebar */}
+        <aside
+          className={`${
+            sidebarOpen ? "w-64" : "w-20"
+          } bg-card border-r border-foreground/10 transition-all duration-300 flex flex-col`}
+        >
+          <div className="p-6 border-b border-foreground/10 flex items-center justify-between">
+            {sidebarOpen && (
+              <h1 className="text-xl font-bold text-foreground">Admin</h1>
+            )}
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="p-2 hover:bg-background rounded-lg transition-colors"
+              aria-label="Toggle sidebar"
+            >
+              {sidebarOpen ? (
+                <X size={20} className="text-foreground" />
+              ) : (
+                <Menu size={20} className="text-foreground" />
+              )}
+            </button>
+          </div>
+
+          <nav className="flex-1 p-4 space-y-2">
+            {adminNavItems.map((item) => (
+              <a
+                key={item.id}
+                href={`#${item.id}`}
+                className="flex items-center space-x-3 px-4 py-3 rounded-lg text-foreground hover:bg-background transition-colors"
+              >
+                <div className="w-5 h-5 bg-primary-cta rounded" />
+                {sidebarOpen && <span className="text-sm font-medium">{item.name}</span>}
+              </a>
+            ))}
+          </nav>
+
+          <div className="p-4 border-t border-foreground/10">
+            <button className="flex items-center space-x-3 px-4 py-3 w-full rounded-lg text-foreground hover:bg-background transition-colors">
+              <LogOut size={20} />
+              {sidebarOpen && <span className="text-sm font-medium">Logout</span>}
+            </button>
+          </div>
+        </aside>
+
+        {/* Main Content */}
+        <main className="flex-1 overflow-auto">
+          {/* Top Navigation */}
+          <div id="nav" data-section="nav" className="border-b border-foreground/10">
+            <NavbarStyleCentered
+              navItems={[
+                { name: "Dashboard", id: "dashboard" },
+                { name: "Analytics", id: "analytics" },
+                { name: "Settings", id: "settings" }
+              ]}
+              button={{
+                text: "Help",                href: "#"
+              }}
+              brandName="ChatFlow Admin"
+            />
+          </div>
+
+          {/* Dashboard Content */}
+          <div className="p-8">
+            <div id="dashboard" data-section="dashboard" className="mb-12">
+              <h1 className="text-4xl font-bold text-foreground mb-2">Dashboard</h1>
+              <p className="text-foreground/60 mb-8">Welcome back. Here's what's happening with your platform today.</p>
+
+              {/* Metrics Cards */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                {dashboardCards.map((card, index) => {
+                  const IconComponent = card.icon;
+                  return (
+                    <div
+                      key={index}
+                      className="bg-card border border-foreground/10 rounded-lg p-6 hover:border-primary-cta/50 transition-all duration-300"
+                    >
+                      <div className="flex items-start justify-between mb-4">
+                        <h3 className="text-sm font-medium text-foreground/60">{card.title}</h3>
+                        <div className="p-2 bg-primary-cta/10 rounded-lg">
+                          <IconComponent size={20} className="text-primary-cta" />
+                        </div>
+                      </div>
+                      <div className="mb-4">
+                        <p className="text-3xl font-bold text-foreground">{card.value}</p>
+                      </div>
+                      <p className="text-xs text-foreground/50">{card.change}</p>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Recent Activity */}
+              <div className="bg-card border border-foreground/10 rounded-lg p-6">
+                <h2 className="text-xl font-bold text-foreground mb-6">Recent Activity</h2>
+                <div className="space-y-4">
+                  {[
+                    { action: "New user registration", time: "2 minutes ago", user: "John Doe" },
+                    { action: "System update completed", time: "1 hour ago", user: "System" },
+                    { action: "Security scan finished", time: "3 hours ago", user: "System" },
+                    { action: "Database backup completed", time: "6 hours ago", user: "System" }
+                  ].map((item, index) => (
+                    <div key={index} className="flex items-center justify-between py-3 border-b border-foreground/5 last:border-b-0">
+                      <div>
+                        <p className="text-sm font-medium text-foreground">{item.action}</p>
+                        <p className="text-xs text-foreground/50">{item.user}</p>
+                      </div>
+                      <p className="text-xs text-foreground/50">{item.time}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Users Section */}
+            <div id="users" data-section="users" className="mb-12">
+              <h2 className="text-2xl font-bold text-foreground mb-6">User Management</h2>
+              <div className="bg-card border border-foreground/10 rounded-lg p-6">
+                <div className="space-y-4">
+                  {[
+                    { name: "Sarah Chen", email: "sarah@example.com", status: "Active", joined: "Jan 15, 2025" },
+                    { name: "Michael Rodriguez", email: "michael@example.com", status: "Active", joined: "Jan 10, 2025" },
+                    { name: "Emily Thompson", email: "emily@example.com", status: "Inactive", joined: "Jan 5, 2025" }
+                  ].map((user, index) => (
+                    <div key={index} className="flex items-center justify-between py-4 border-b border-foreground/5 last:border-b-0">
+                      <div>
+                        <p className="font-medium text-foreground">{user.name}</p>
+                        <p className="text-sm text-foreground/60">{user.email}</p>
+                      </div>
+                      <div className="flex items-center space-x-4">
+                        <span className={`text-xs px-3 py-1 rounded-full ${
+                          user.status === "Active" 
+                            ? "bg-primary-cta/20 text-primary-cta" 
+                            : "bg-foreground/10 text-foreground/60"
+                        }`}>
+                          {user.status}
+                        </span>
+                        <p className="text-sm text-foreground/50">{user.joined}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Analytics Section */}
+            <div id="analytics" data-section="analytics" className="mb-12">
+              <h2 className="text-2xl font-bold text-foreground mb-6">Analytics</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="bg-card border border-foreground/10 rounded-lg p-6">
+                  <h3 className="font-bold text-foreground mb-4">Traffic Overview</h3>
+                  <div className="h-40 bg-background rounded flex items-center justify-center">
+                    <p className="text-foreground/50">Chart placeholder</p>
+                  </div>
+                </div>
+                <div className="bg-card border border-foreground/10 rounded-lg p-6">
+                  <h3 className="font-bold text-foreground mb-4">User Growth</h3>
+                  <div className="h-40 bg-background rounded flex items-center justify-center">
+                    <p className="text-foreground/50">Chart placeholder</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Settings Section */}
+            <div id="settings" data-section="settings" className="mb-12">
+              <h2 className="text-2xl font-bold text-foreground mb-6">Settings</h2>
+              <div className="bg-card border border-foreground/10 rounded-lg p-6 space-y-6">
+                <div className="flex items-center justify-between py-4 border-b border-foreground/5">
+                  <div>
+                    <p className="font-medium text-foreground">Email Notifications</p>
+                    <p className="text-sm text-foreground/60">Receive email alerts for important events</p>
+                  </div>
+                  <button className="w-12 h-7 bg-primary-cta rounded-full transition-all" />
+                </div>
+                <div className="flex items-center justify-between py-4 border-b border-foreground/5">
+                  <div>
+                    <p className="font-medium text-foreground">Two-Factor Authentication</p>
+                    <p className="text-sm text-foreground/60">Enhance your account security</p>
+                  </div>
+                  <button className="w-12 h-7 bg-foreground/20 rounded-full transition-all" />
+                </div>
+                <div className="flex items-center justify-between py-4">
+                  <div>
+                    <p className="font-medium text-foreground">System Maintenance Mode</p>
+                    <p className="text-sm text-foreground/60">Enable maintenance mode for updates</p>
+                  </div>
+                  <button className="w-12 h-7 bg-foreground/20 rounded-full transition-all" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/movie/[id]/page.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Star, Play } from "lucide-react";
+import { useParams } from "next/navigation";
+
+export default function MovieDetailPage() {
+  const params = useParams();
+  const movieId = params.id;
+
+  // Mock movie data - replace with actual API call
+  const movieData = {
+    title: "The Future of Cinema",    year: 2024,
+    rating: 8.5,
+    reviews: "12.4k",    director: "Christopher Nolan",    genre: ["Sci-Fi", "Drama", "Thriller"],
+    duration: "2h 48m",    description: "A groundbreaking journey through time and space that challenges everything we know about reality.",    fullDescription: "Experience an epic narrative that weaves together cutting-edge cinematography, compelling storytelling, and world-class performances. This film takes audiences on an unforgettable journey that explores the boundaries of human consciousness and the nature of existence itself.",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/a-modern-ai-chat-interface-displaying-a--1773145035611-b574a458.png",    backdropSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/abstract-representation-of-advanced-ai-t-1773145035775-dff8a547.jpg"
+  };
+
+  const relatedMovies = [
+    {
+      id: "1",      name: "Inception",      brand: "Warner Bros",      price: "Watch Now",      rating: 8.8,
+      reviewCount: "2.5M",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/a-visualized-conversation-flow-diagram-s-1773145033569-9f26c46e.png",      imageAlt: "Inception"
+    },
+    {
+      id: "2",      name: "Interstellar",      brand: "Paramount",      price: "Watch Now",      rating: 8.7,
+      reviewCount: "1.8M",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/visual-representation-of-dual-ai-model-i-1773145036227-42d93435.jpg",      imageAlt: "Interstellar"
+    },
+    {
+      id: "3",      name: "The Prestige",      brand: "Touchstone",      price: "Watch Now",      rating: 8.5,
+      reviewCount: "1.2M",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/professional-headshot-portrait-of-a-youn-1773145036767-975d2a64.png",      imageAlt: "The Prestige"
+    },
+    {
+      id: "4",      name: "Tenet",      brand: "Warner Bros",      price: "Watch Now",      rating: 7.4,
+      reviewCount: "890k",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/professional-headshot-portrait-of-a-lati-1773145035870-0f83135b.jpg",      imageAlt: "Tenet"
+    }
+  ];
+
+  const cast = [
+    {
+      id: "1",      name: "Leonardo DiCaprio",      handle: "@leonardodicaprio",      testimonial: "A career-defining role that pushes the boundaries of what cinema can achieve.",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/professional-headshot-portrait-of-a-cauc-1773145035617-72e2f37a.png",      imageAlt: "Leonardo DiCaprio"
+    },
+    {
+      id: "2",      name: "Emma Watson",      handle: "@emmawatson",      testimonial: "Working with such a visionary director was an absolute privilege and learning experience.",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/professional-headshot-portrait-of-an-asi-1773145036519-609eefd8.png",      imageAlt: "Emma Watson"
+    },
+    {
+      id: "3",      name: "Tom Hardy",      handle: "@tomhardy",      testimonial: "An unforgettable cinematic experience. The production quality is unmatched.",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/professional-headshot-portrait-of-a-cauc-1773145035826-68dd0c32.jpg",      imageAlt: "Tom Hardy"
+    },
+    {
+      id: "4",      name: "Anne Hathaway",      handle: "@annehathaway",      testimonial: "This film will resonate with audiences for generations to come.",      rating: 5,
+      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/professional-headshot-portrait-of-a-dive-1773145033449-492fe20e.jpg",      imageAlt: "Anne Hathaway"
+    }
+  ];
+
+  const faqs = [
+    {
+      id: "1",      title: "Where can I watch this movie?",      content: "The movie is available on major streaming platforms including Netflix, Amazon Prime Video, and theatrical releases worldwide. Check your local listings for availability."
+    },
+    {
+      id: "2",      title: "Who directed this film?",      content: "The film was directed by Christopher Nolan, known for his innovative storytelling and groundbreaking cinematography. This is one of his most ambitious projects to date."
+    },
+    {
+      id: "3",      title: "What is the runtime?",      content: "The film has a runtime of 2 hours and 48 minutes. We recommend arriving early at the theatre to fully immerse yourself in this epic experience."
+    },
+    {
+      id: "4",      title: "Is there a sequel planned?",      content: "The director has hinted at a potential follow-up project. Stay tuned to official channels for announcements regarding the future of this franchise."
+    },
+    {
+      id: "5",      title: "What is the age rating?",      content: "The film is rated PG-13, with intense sequences and some language. Parents are encouraged to review content advisories before bringing younger viewers."
+    },
+    {
+      id: "6",      title: "When will it be available on home video?",      content: "Home video releases typically follow theatrical releases by 3-4 months. Pre-orders should be available through major retailers."
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Cast", id: "cast" },
+            { name: "Related", id: "related" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Watch Now",            href: "#"
+          }}
+          brandName="MovieHub"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroCarouselLogo
+          logoText={movieData.title}
+          description={movieData.fullDescription}
+          buttons={[
+            { text: "Watch Now", href: "#" },
+            { text: "Add to Watchlist", href: "#" }
+          ]}
+          slides={[
+            {
+              imageSrc: movieData.backdropSrc,
+              imageAlt: movieData.title
+            },
+            {
+              imageSrc: movieData.imageSrc,
+              imageAlt: `${movieData.title} Poster`
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/a-visualized-conversation-flow-diagram-s-1773145033569-9f26c46e.png",              imageAlt: "Scene from movie"
+            }
+          ]}
+          autoplayDelay={5000}
+          showDimOverlay={true}
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardTwentyOne
+          tag="Movie Details"
+          tagIcon={Star}
+          title="Critical Reception & Information"
+          description={`Rated ${movieData.rating}/10 from ${movieData.reviews} reviews. Directed by ${movieData.director}. Runtime: ${movieData.duration}.`}
+          imageSrc={movieData.imageSrc}
+          imageAlt={`${movieData.title} Poster`}
+          mediaAnimation="slide-up"
+          accordionItems={[
+            {
+              id: "1",              title: "Plot Summary",              content: movieData.fullDescription
+            },
+            {
+              id: "2",              title: "Genre & Classification",              content: `This film falls into the ${movieData.genre.join(", ")} genres. It is classified as a ${movieData.year} production with mature themes and stunning visual effects."`
+            },
+            {
+              id: "3",              title: "Awards & Recognition",              content: "This film has received critical acclaim and multiple award nominations across major film festivals and industry awards shows worldwide."
+            },
+            {
+              id: "4",              title: "Technical Excellence",              content: "Shot with cutting-edge cinematography techniques and state-of-the-art sound design. Available in IMAX, 4K, and premium audio formats for the ultimate viewing experience."
+            }
+          ]}
+          useInvertedBackground={false}
+          mediaPosition="left"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <InlineImageSplitTextAbout
+          heading={[
+            { type: "text", content: "Why Watch" },
+            {
+              type: "image",              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/a-minimalist-elegant-ai-icon-or-brain-sy-1773145034150-58a503e5.png",              alt: "Film Icon"
+            },
+            { type: "text", content: "This Masterpiece" }
+          ]}
+          buttons={[
+            { text: "Watch Trailer", href: "#" },
+            { text: "Get Tickets", href: "#" }
+          ]}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="cast" data-section="cast">
+        <TestimonialCardThirteen
+          testimonials={cast}
+          showRating={true}
+          title="Outstanding Cast & Crew"
+          description="Featuring award-winning actors and a visionary director who bring this epic tale to life with remarkable performances."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="related" data-section="related">
+        <FeatureCardTwentyOne
+          tag="Similar Films"
+          tagIcon={Play}
+          title="Related Movies You Might Enjoy"
+          description="Discover other critically acclaimed films with similar themes, directors, and storytelling excellence."
+          accordionItems={[
+            {
+              id: "1",              title: "Thematic Connection",              content: "Like this film, other recommendations explore deep philosophical questions and push the boundaries of conventional narrative storytelling."
+            },
+            {
+              id: "2",              title: "Director's Style",              content: "If you love this director's work, you'll appreciate their consistent focus on innovative cinematography and complex character development across their filmography."
+            },
+            {
+              id: "3",              title: "Audience Reviews",              content: "Viewers who rated this film 5 stars also enjoyed similar productions that blend high-concept science fiction with intimate human drama."
+            },
+            {
+              id: "4",              title: "Viewing Order",              content: "We recommend watching related films in chronological order of release or by theme to fully appreciate the evolution of modern cinema."
+            }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/visual-representation-of-dual-ai-model-i-1773145036227-42d93435.jpg"
+          imageAlt="Related Films"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+          mediaPosition="right"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqSplitMedia
+          title="Frequently Asked Questions"
+          description="Everything you need to know about this film, viewing options, and related information."
+          tag="Help"
+          faqs={faqs}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/helpful-friendly-illustration-of-custome-1773145036728-02996006.png"
+          imageAlt="FAQ Support"
+          mediaAnimation="slide-up"
+          mediaPosition="left"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          faqsAnimation="slide-up"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Ready to experience this cinematic masterpiece? Purchase tickets now and secure your spot for an unforgettable journey through time, space, and human consciousness."
+          animationType="background-highlight"
+          buttons={[
+            { text: "Get Tickets Now", href: "#" },
+            { text: "Stream Online", href: "#" }
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/abstract-technological-background-showin-1773145036054-b61a1b91.jpg"
+          imageAlt="Cinema Background"
+          logoText="MovieHub"
+          copyrightText="© 2025 MovieHub. All rights reserved."
+          columns={[
+            {
+              title: "Explore",              items: [
+                { label: "Featured Films", href: "#" },
+                { label: "Top Rated", href: "#" },
+                { label: "New Releases", href: "#" },
+                { label: "Coming Soon", href: "#" }
+              ]
+            },
+            {
+              title: "About",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Compliance", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/movies/page.tsx

@@ -0,0 +1,223 @@
+"use client"
+
+import { useState, useMemo } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { Search, Filter } from "lucide-react";
+
+interface Movie {
+  id: string;
+  title: string;
+  category: string;
+  rating: number;
+  reviewCount: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+}
+
+const MOVIE_DATA: Movie[] = [
+  {
+    id: "1",    title: "Stellar Odyssey",    category: "Sci-Fi",    rating: 5,
+    reviewCount: "12.3k",    price: "$12.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/a-modern-ai-chat-interface-displaying-a--1773145035611-b574a458.png",    imageAlt: "Stellar Odyssey"
+  },
+  {
+    id: "2",    title: "Midnight Mystery",    category: "Thriller",    rating: 4,
+    reviewCount: "8.9k",    price: "$9.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/a-visualized-conversation-flow-diagram-s-1773145033569-9f26c46e.png",    imageAlt: "Midnight Mystery"
+  },
+  {
+    id: "3",    title: "Heart of Dreams",    category: "Drama",    rating: 5,
+    reviewCount: "15.2k",    price: "$10.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/abstract-representation-of-advanced-ai-t-1773145035775-dff8a547.jpg",    imageAlt: "Heart of Dreams"
+  },
+  {
+    id: "4",    title: "Laugh Track",    category: "Comedy",    rating: 4,
+    reviewCount: "5.6k",    price: "$7.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/visual-representation-of-dual-ai-model-i-1773145036227-42d93435.jpg",    imageAlt: "Laugh Track"
+  },
+  {
+    id: "5",    title: "Dragon's Quest",    category: "Adventure",    rating: 5,
+    reviewCount: "18.7k",    price: "$14.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/helpful-friendly-illustration-of-custome-1773145036728-02996006.png",    imageAlt: "Dragon's Quest"
+  },
+  {
+    id: "6",    title: "Silent Echo",    category: "Horror",    rating: 4,
+    reviewCount: "7.2k",    price: "$11.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/abstract-technological-background-showin-1773145036054-b61a1b91.jpg",    imageAlt: "Silent Echo"
+  },
+  {
+    id: "7",    title: "Love in Paris",    category: "Romance",    rating: 5,
+    reviewCount: "11.3k",    price: "$9.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/a-modern-ai-chat-interface-displaying-a--1773145035611-b574a458.png",    imageAlt: "Love in Paris"
+  },
+  {
+    id: "8",    title: "Action Heroes",    category: "Action",    rating: 4,
+    reviewCount: "9.8k",    price: "$13.99",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkkE8nQSqdqLWod7difrhAMYD2/a-visualized-conversation-flow-diagram-s-1773145033569-9f26c46e.png",    imageAlt: "Action Heroes"
+  }
+];
+
+const CATEGORIES = ["All", "Sci-Fi", "Thriller", "Drama", "Comedy", "Adventure", "Horror", "Romance", "Action"];
+
+export default function MoviesPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("All");
+
+  const filteredMovies = useMemo(() => {
+    return MOVIE_DATA.filter(movie => {
+      const matchesSearch = movie.title.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory = selectedCategory === "All" || movie.category === selectedCategory;
+      return matchesSearch && matchesCategory;
+    });
+  }, [searchQuery, selectedCategory]);
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Movies", id: "/movies" },
+            { name: "Features", id: "features" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Explore",            href: "#"
+          }}
+          brandName="MovieHub"
+        />
+      </div>
+
+      <div className="min-h-screen bg-background py-20 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-4xl sm:text-5xl font-bold mb-4">Browse Movies</h1>
+            <p className="text-lg text-foreground/75">Discover and filter through our extensive collection of movies</p>
+          </div>
+
+          {/* Search and Filter Section */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+            {/* Search Bar */}
+            <div className="md:col-span-2 relative">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-foreground/50 w-5 h-5" />
+              <input
+                type="text"
+                placeholder="Search movies..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-12 pr-4 py-3 rounded-lg border border-foreground/20 bg-card text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all"
+              />
+            </div>
+
+            {/* Filter Button */}
+            <div className="flex items-center gap-2 text-sm text-foreground/75">
+              <Filter className="w-4 h-4" />
+              <span>Filters Active</span>
+            </div>
+          </div>
+
+          {/* Category Filter */}
+          <div className="mb-8 flex flex-wrap gap-2">
+            {CATEGORIES.map((category) => (
+              <button
+                key={category}
+                onClick={() => setSelectedCategory(category)}
+                className={`px-4 py-2 rounded-full transition-all text-sm font-medium ${
+                  selectedCategory === category
+                    ? "bg-primary-cta text-background"
+                    : "bg-card border border-foreground/20 text-foreground hover:border-primary-cta"
+                }`}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+
+          {/* Movie Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {filteredMovies.length > 0 ? (
+              filteredMovies.map((movie) => (
+                <div
+                  key={movie.id}
+                  className="group rounded-lg overflow-hidden bg-card border border-foreground/10 hover:border-primary-cta transition-all hover:shadow-lg hover:shadow-primary-cta/10"
+                >
+                  {/* Image */}
+                  <div className="relative w-full aspect-video overflow-hidden bg-foreground/5">
+                    <img
+                      src={movie.imageSrc}
+                      alt={movie.imageAlt || movie.title}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    />
+                    {/* Category Badge */}
+                    <div className="absolute top-3 right-3 bg-primary-cta/90 text-background px-3 py-1 rounded-full text-xs font-semibold">
+                      {movie.category}
+                    </div>
+                  </div>
+
+                  {/* Content */}
+                  <div className="p-4">
+                    <h3 className="font-bold text-lg mb-2 text-foreground line-clamp-2 group-hover:text-primary-cta transition-colors">
+                      {movie.title}
+                    </h3>
+
+                    {/* Rating */}
+                    <div className="flex items-center gap-1 mb-3">
+                      <div className="flex">
+                        {[...Array(5)].map((_, i) => (
+                          <span
+                            key={i}
+                            className={`text-lg ${
+                              i < movie.rating ? "text-yellow-400" : "text-foreground/20"
+                            }`}
+                          >
+                            ★
+                          </span>
+                        ))}
+                      </div>
+                      <span className="text-xs text-foreground/60 ml-1">({movie.reviewCount})</span>
+                    </div>
+
+                    {/* Price */}
+                    <div className="flex items-center justify-between pt-3 border-t border-foreground/10">
+                      <span className="font-bold text-xl text-primary-cta">{movie.price}</span>
+                      <button className="px-3 py-1 bg-secondary-cta text-foreground rounded hover:bg-secondary-cta/90 transition-all text-sm font-medium">
+                        Watch
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="col-span-full text-center py-12">
+                <p className="text-lg text-foreground/60">No movies found matching your criteria.</p>
+                <button
+                  onClick={() => {
+                    setSearchQuery("");
+                    setSelectedCategory("All");
+                  }}
+                  className="mt-4 px-6 py-2 bg-primary-cta text-background rounded-lg hover:bg-primary-cta/90 transition-all"
+                >
+                  Reset Filters
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Results Count */}
+          {filteredMovies.length > 0 && (
+            <div className="mt-8 text-center text-foreground/60 text-sm">
+              Showing {filteredMovies.length} of {MOVIE_DATA.length} movies
+            </div>
+          )}
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -236,4 +236,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}