diff --git a/app/creator/(home)/page.tsx b/app/creator/(home)/page.tsx
index 2a183f6..e0856a0 100644
--- a/app/creator/(home)/page.tsx
+++ b/app/creator/(home)/page.tsx
@@ -1,7 +1,17 @@
-export default function CreatorPage() {
- return (
-
-
Creator
-
- )
-}
\ No newline at end of file
+import { Home_Banner } from "@/components/Home_Banner";
+import Recent_Creation from "@/components/Recent_Creation";
+
+
+const CreatorPage: React.FC = () => {
+ return (
+
+
+
+
+ );
+};
+
+
+
+
+export default CreatorPage;
diff --git a/app/creator/reader/page.tsx b/app/creator/reader/page.tsx
new file mode 100644
index 0000000..7aa332f
--- /dev/null
+++ b/app/creator/reader/page.tsx
@@ -0,0 +1,232 @@
+"use client"
+
+import { ArrowLeft2, Setting2 } from 'iconsax-react';
+import Image from 'next/image';
+import React, { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+import HoverCards from '@/components/cards/HoverCards';
+import { Button } from '@/components/ui/button';
+
+
+interface Page {
+ id: number;
+ content: React.ReactNode;
+ videoSrc: string;
+}
+
+export default function Reader() {
+ const [currentPageIndex, setCurrentPageIndex] = useState(0);
+ const [transitioning, setTransitioning] = useState(false);
+ const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
+
+ // Add wheel event handler
+ const handleWheel = (event: WheelEvent) => {
+ if (transitioning) return;
+
+ // Scroll down
+ if (event.deltaY > 0) {
+ handleNextPage();
+ }
+ // Scroll up
+ else if (event.deltaY < 0) {
+ handlePreviousPage();
+ }
+ };
+
+ // Add previous page handler
+ const handlePreviousPage = () => {
+ if (transitioning) return;
+
+ setTransitioning(true);
+
+ if (currentPageIndex > 0) {
+ setCurrentPageIndex(prev => prev - 1);
+ } else {
+ setCurrentPageIndex(pages.length - 1);
+ }
+
+ setTimeout(() => {
+ setTransitioning(false);
+ }, 1000);
+ };
+
+ // Add useEffect for wheel event listener
+ useEffect(() => {
+ window.addEventListener('wheel', handleWheel);
+ return () => {
+ window.removeEventListener('wheel', handleWheel);
+ };
+ }, [currentPageIndex, transitioning]); // Add dependencies
+
+ // Content structured to match your design
+ const pages: Page[] = [
+ {
+ id: 1,
+ videoSrc: "/videos/background1.mp4",
+ content: (
+ <>
+ BRUTAL
+
+
Through the rain, flickering neon lights spell out of and illuminate an entrance to nightclub.
+
A stunning light show cascades across a dance floor crowded by partiers and adorned by dozens of video monitors.
+
WADE HARPER, an anxious businessman dressed in a black suit, follows two burly bouncers up a flight of stairs toward the at the back of the warehouse.
+
BRUTAL
+
+
"Wade Harper! What is up, old friend! It's been too long, man!" exclaims HANDSOME TWIN #1.
+
HANDSOME TWIN #2, more anxious and pushy, quickly interjects, "So do you have it for us?"
+
Wade reaches into his breast pocket.
+
"Yes, I do."
+
Wade considers the in his hand and fiddles with the device. The twins smile widely with delight.
+
BRUTAL
+
+
Man, yes! Didn't I tell you not to question this man! I knew he was going to come through for us!" Handsome Twin #1 gloats.
+
Handsome Twin #2 sighs in satisfaction. " " he says, his tense demeanor turning to relief.
+
Wade hands the device to Handsome Twin #2.
+
"You will find all of the credentials you need on the drive. The shipment will arrive at the tomorrow night," Wade explains.
+
+ {/* NavBar */}
+
+ {/* Logo */}
+
+
+
+
+ {/* Brutal Logo - Center */}
+
+
+
+
+ {/* Settings */}
+
+
+
+ {/* Video Sections */}
+
+ {pages.map((page, index) => (
+
+ {/* Background Video */}
+
+
+ {/* Dark Overlay */}
+
+
+ {/* Content */}
+
+
+ ))}
+
+
+ {/* Navigation Button - Down Arrow */}
+
+