diff --git a/app/creator/reader/page.tsx b/app/creator/reader/page.tsx
new file mode 100644
index 0000000..89cc3de
--- /dev/null
+++ b/app/creator/reader/page.tsx
@@ -0,0 +1,186 @@
+"use client"
+
+import { 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';
+
+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)[]>([]);
+
+ // 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 */}
+
+
+
+ Wodey
+
+
+
+ {/* Brutal Logo - Center */}
+
+
+
+
+ {/* Settings */}
+
+
+
+ {/* Video Sections */}
+
+ {pages.map((page, index) => (
+
+ {/* Background Video */}
+
+
+ {/* Dark Overlay */}
+
+
+ {/* Content */}
+
+
+ ))}
+
+
+ {/* Navigation Button - Down Arrow */}
+
+
-
+
+
+
+
+
+ View as Reader
+ Continue editing
+
+
+
+
+ {triggerText}
+
+
+
+
+
+
+
+
+
+
+ {description}
+
+
+
+
+ {linkText}
+
+
+
+