From aaf0434362be5e10cde6c3af421bc5cfe8d4f8bf Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 12:16:44 +0000
Subject: [PATCH 1/2] Update src/app/page.tsx

---
 src/app/page.tsx | 71 ++++++++++++++++++++++++------------------------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c6a6c0d..ce105d9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -43,11 +43,12 @@ export default function LandingPage() {
                     navItems={[
                         { name: "Case Studies", id: "case-studies" },
                         { name: "About", id: "about" },
+                        { name: "My Work", id: "work" },
                         { name: "Process", id: "process" },
                         { name: "Contact", id: "contact" },
                     ]}
                     button={{
-                        text: "Book A Call",            href: "https://calendly.com/ibbiyousuf420/30min"
+                        text: "Book A Call",                        href: "https://calendly.com/ibbiyousuf420/30min"
                     }}
                 />
             </div>
@@ -62,29 +63,29 @@ export default function LandingPage() {
                     background={{ variant: "glowing-orb" }}
                     leftCarouselItems={[
                         {
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg?_wi=1",              imageAlt: "TikTok viral clip example"
+                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg?_wi=1",                            imageAlt: "TikTok viral clip example"
                         },
                         {
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg?_wi=1",              imageAlt: "Professional editing dashboard"
+                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg?_wi=1",                            imageAlt: "Professional editing dashboard"
                         },
                         {
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg?_wi=1",              imageAlt: "Instagram Reels clip"
+                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg?_wi=1",                            imageAlt: "Instagram Reels clip"
                         },
                     ]}
                     rightCarouselItems={[
                         {
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg?_wi=1",              imageAlt: "YouTube Shorts content"
+                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg?_wi=1",                            imageAlt: "YouTube Shorts content"
                         },
                         {
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg?_wi=2",              imageAlt: "Trending clips montage"
+                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg?_wi=2",                            imageAlt: "Trending clips montage"
                         },
                         {
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg?_wi=2",              imageAlt: "Editing interface"
+                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg?_wi=2",                            imageAlt: "Editing interface"
                         },
                     ]}
                     carouselPosition="right"
                     buttons={[
-                        { text: "See My Work", href: "#case-studies" },
+                        { text: "See My Work", href: "/work" },
                         { text: "Book A Call", href: "https://calendly.com/ibbiyousuf420/30min" },
                     ]}
                     buttonAnimation="slide-up"
@@ -101,7 +102,7 @@ export default function LandingPage() {
                     textboxLayout="default"
                     useInvertedBackground={false}
                     names={[
-                        "Brandon Clark 600K Followers",            "Sexyishaan 60K Followers",            "Ericcouu 300K Followers",            "Brandon Clark 600K Followers",            "Sexyishaan 60K Followers",            "Ericcouu 300K Followers",            "Brandon Clark 600K Followers",            "Sexyishaan 60K Followers"
+                        "Brandon Clark 600K Followers",                        "Sexyishaan 60K Followers",                        "Ericcouu 300K Followers",                        "Brandon Clark 600K Followers",                        "Sexyishaan 60K Followers",                        "Ericcouu 300K Followers",                        "Brandon Clark 600K Followers",                        "Sexyishaan 60K Followers"
                     ]}
                     speed={40}
                     showCard={true}
@@ -120,15 +121,15 @@ export default function LandingPage() {
                     features={[
                         {
                             id: 1,
-                            title: "Step #1",              description: "Book an Intro Call. We start with a quick intro call to understand your goals, target audience, and creative direction. From there, my team builds a custom private clipping project designed to maximize reach and engagement — whether you're a brand, artist, creator, or product.",              buttons: [{ text: "Start Your Project", href: "https://calendly.com/ibbiyousuf420/30min" }],
+                            title: "Step #1",                            description: "Book an Intro Call. We start with a quick intro call to understand your goals, target audience, and creative direction. From there, my team builds a custom private clipping project designed to maximize reach and engagement — whether you're a brand, artist, creator, or product.",                            buttons: [{ text: "Start Your Project", href: "https://calendly.com/ibbiyousuf420/30min" }],
                         },
                         {
                             id: 2,
-                            title: "Our Team Starts Posting",              description: "Once we align on strategy, personalized content gets distributed across TikTok, Instagram Reels, YouTube Shorts, and more—simultaneously—with my proven optimization techniques. Direct team management ensures every clip reflects your brand's vision."
+                            title: "Our Team Starts Posting",                            description: "Once we align on strategy, personalized content gets distributed across TikTok, Instagram Reels, YouTube Shorts, and more—simultaneously—with my proven optimization techniques. Direct team management ensures every clip reflects your brand's vision."
                         },
                         {
                             id: 3,
-                            title: "Track Real-Time Results",              description: "Watch your clips climb trending charts in real-time. Full transparency with detailed analytics showing views, engagement, growth metrics, and ROI. Optimize on the fly based on what's working with direct collaboration and personalized guidance."
+                            title: "Track Real-Time Results",                            description: "Watch your clips climb trending charts in real-time. Full transparency with detailed analytics showing views, engagement, growth metrics, and ROI. Optimize on the fly based on what's working with direct collaboration and personalized guidance."
                         },
                     ]}
                 />
@@ -145,16 +146,16 @@ export default function LandingPage() {
                     useInvertedBackground={false}
                     metrics={[
                         {
-                            id: "1",              value: "10M ",              title: "Views Generated",              description: "Average Views per private project",              icon: Eye,
+                            id: "1",                            value: "10M ",                            title: "Views Generated",                            description: "Average Views per private project",                            icon: Eye,
                         },
                         {
-                            id: "2",              value: "1000 ",              title: "Expert Team",              description: "Dedicated clipping specialists for your projects",              icon: Users,
+                            id: "2",                            value: "1000 ",                            title: "Expert Team",                            description: "Dedicated clipping specialists for your projects",                            icon: Users,
                         },
                         {
-                            id: "3",              value: "💯 ",              title: "Organic Growth",              description: "Zero ad spend required—pure algorithmic reach",              icon: TrendingUp,
+                            id: "3",                            value: "💯 ",                            title: "Organic Growth",                            description: "Zero ad spend required—pure algorithmic reach",                            icon: TrendingUp,
                         },
                         {
-                            id: "4",              value: "3-5x",              title: "Avg ROI",              description: "Return on investment vs traditional marketing",              icon: Award,
+                            id: "4",                            value: "3-5x",                            title: "Avg ROI",                            description: "Return on investment vs traditional marketing",                            icon: Award,
                         },
                     ]}
                     gridVariant="uniform-all-items-equal"
@@ -172,16 +173,16 @@ export default function LandingPage() {
                     useInvertedBackground={false}
                     products={[
                         {
-                            id: "bbno",              name: "Ericcouu - Influencer",              price: "",              variant: "Viral Growth",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg",              imageAlt: "Ericcouu success story"
+                            id: "bbno",                            name: "Ericcouu - Influencer",                            price: "",                            variant: "Viral Growth",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg",                            imageAlt: "Ericcouu success story"
                         },
                         {
-                            id: "dhar-mann",              name: "Brandon Clark - Gym Coach",              price: "",              variant: "Followers | Trending Content",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg",              imageAlt: "Brandon Clark success story"
+                            id: "dhar-mann",                            name: "Brandon Clark - Gym Coach",                            price: "",                            variant: "Followers | Trending Content",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg",                            imageAlt: "Brandon Clark success story"
                         },
                         {
-                            id: "paul-american",              name: "PB Investing - Trader",              price: "",              variant: "Followers | Trading Content",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg?_wi=2",              imageAlt: "PB Investing success story"
+                            id: "paul-american",                            name: "PB Investing - Trader",                            price: "",                            variant: "Followers | Trading Content",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg?_wi=2",                            imageAlt: "PB Investing success story"
                         },
                         {
-                            id: "tate-mccrae",              name: "Sexyishaan - Influencer",              price: "",              variant: "Entertainment",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg",              imageAlt: "Sexyishaan success story"
+                            id: "tate-mccrae",                            name: "Sexyishaan - Influencer",                            price: "",                            variant: "Entertainment",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg",                            imageAlt: "Sexyishaan success story"
                         },
                     ]}
                     gridVariant="uniform-all-items-equal"
@@ -193,7 +194,7 @@ export default function LandingPage() {
                 <TextSplitAbout
                     title="Why you need Clipping"
                     description={[
-                        "I started private clipping work because I saw creators and brands struggling to repurpose their best content. They were sitting on goldmines—podcasts, streams, videos—but lacked the time, skills, or network to turn them into viral clips.",            "Now, with a dedicated team of expert clippers and a proven personalized methodology, I've helped launch private projects that generated over 10 Million views. No agencies. No gatekeeping. Just direct collaboration and results.",            "Every client I work with gets direct access to a team obsessed with viral growth, algorithmic optimization, and transparent metrics. Your success is my success, and my team is committed to your project's unique vision."
+                        "I started private clipping work because I saw creators and brands struggling to repurpose their best content. They were sitting on goldmines—podcasts, streams, videos—but lacked the time, skills, or network to turn them into viral clips.",                        "Now, with a dedicated team of expert clippers and a proven personalized methodology, I've helped launch private projects that generated over 10 Million views. No agencies. No gatekeeping. Just direct collaboration and results.",                        "Every client I work with gets direct access to a team obsessed with viral growth, algorithmic optimization, and transparent metrics. Your success is my success, and my team is committed to your project's unique vision."
                     ]}
                     useInvertedBackground={false}
                     showBorder={false}
@@ -212,28 +213,28 @@ export default function LandingPage() {
                     useInvertedBackground={false}
                     faqs={[
                         {
-                            id: "1",              title: "Whats Clipping ?",              content: "Clipping is the process of turning long-form content such as podcasts, livestreams, and YouTube videos into short, high-impact clips designed for platforms like TikTok, Instagram Reels, and YouTube Shorts.Through private clipping collaboration, you work directly with my dedicated team to identify the most engaging moments from your content. We then transform those moments into high-retention short-form videos with optimized hooks, captions, and formatting designed to perform well in social media algorithms. "
+                            id: "1",                            title: "Whats Clipping ?",                            content: "Clipping is the process of turning long-form content such as podcasts, livestreams, and YouTube videos into short, high-impact clips designed for platforms like TikTok, Instagram Reels, and YouTube Shorts.Through private clipping collaboration, you work directly with my dedicated team to identify the most engaging moments from your content. We then transform those moments into high-retention short-form videos with optimized hooks, captions, and formatting designed to perform well in social media algorithms. "
                         },
                         {
-                            id: "2",              title: "How does the process work?",              content: "Step 1: Book an intro call where we discuss your goals, content strategy, and vision. Step 2: Your content gets assigned to our dedicated team who create and optimize clips for each platform while maintaining direct communication with you. Step 3: Clips launch simultaneously across social platforms and we track real-time performance together with detailed analytics and regular updates."
+                            id: "2",                            title: "How does the process work?",                            content: "Step 1: Book an intro call where we discuss your goals, content strategy, and vision. Step 2: Your content gets assigned to our dedicated team who create and optimize clips for each platform while maintaining direct communication with you. Step 3: Clips launch simultaneously across social platforms and we track real-time performance together with detailed analytics and regular updates."
                         },
                         {
-                            id: "3",              title: "How quickly can I Start?",              content: "Most private clipping projects launch within 2-5 business days after the initial strategy call. Your content goes through our personalized optimization process, and begins gaining traction immediately. Real-time results start appearing within hours, with our team providing direct updates on performance."
+                            id: "3",                            title: "How quickly can I Start?",                            content: "Most private clipping projects launch within 2-5 business days after the initial strategy call. Your content goes through our personalized optimization process, and begins gaining traction immediately. Real-time results start appearing within hours, with our team providing direct updates on performance."
                         },
                         {
-                            id: "4",              title: "What types of creators and businesses do you work with?",              content: "I work with podcasters, streamers,  influencers, TV shows, brands, product launches, apps, startups, and content entrepreneurs seeking personalized team management. Essentially, if you have longform or short-form content and want to maximize viral reach through direct collaboration with expert clippers, we're a fit."
+                            id: "4",                            title: "What types of creators and businesses do you work with?",                            content: "I work with podcasters, streamers,  influencers, TV shows, brands, product launches, apps, startups, and content entrepreneurs seeking personalized team management. Essentially, if you have longform or short-form content and want to maximize viral reach through direct collaboration with expert clippers, we're a fit."
                         },
                         {
-                            id: "5",              title: "Is there a cost to start? What's the pricing model?",              content: "Pricing varies based on your project scope, content volume, and dedicated team support level. I offer custom packages tailored to your specific goals and vision. Contact me for a consultation and I'll provide transparent pricing with no hidden fees."
+                            id: "5",                            title: "Is there a cost to start? What's the pricing model?",                            content: "Pricing varies based on your project scope, content volume, and dedicated team support level. I offer custom packages tailored to your specific goals and vision. Contact me for a consultation and I'll provide transparent pricing with no hidden fees."
                         },
                         {
-                            id: "6",              title: "How is this different from hiring a video editor?",              content: "I'm not just editing videos—I'm providing personalized team management and optimization for viral growth across platforms. My private clipping collaboration includes audience research, platform algorithms, trend analysis, optimal timing, direct communication with your dedicated team, and distribution through my network. It's a complete organic growth system with direct collaboration, not just editing."
+                            id: "6",                            title: "How is this different from hiring a video editor?",                            content: "I'm not just editing videos—I'm providing personalized team management and optimization for viral growth across platforms. My private clipping collaboration includes audience research, platform algorithms, trend analysis, optimal timing, direct communication with your dedicated team, and distribution through my network. It's a complete organic growth system with direct collaboration, not just editing."
                         },
                         {
-                            id: "7",              title: "Do I retain ownership of my clips?",              content: "100%. You retain full ownership of all clips created through our private collaboration. My team handles creation, optimization, and distribution, but the content is yours. We simply amplify it through our network to drive maximum views and engagement."
+                            id: "7",                            title: "Do I retain ownership of my clips?",                            content: "100%. You retain full ownership of all clips created through our private collaboration. My team handles creation, optimization, and distribution, but the content is yours. We simply amplify it through our network to drive maximum views and engagement."
                         },
                         {
-                            id: "8",              title: "What kind of results should I expect?",              content: "Results vary based on content quality, audience size, and platform fit. My private collaboration clients typically see 3-5x ROI within the first month. Many experience viral clips (100K-500K+ views), new followers, lead generation, and increased business opportunities from the exposure managed by our dedicated team."
+                            id: "8",                            title: "What kind of results should I expect?",                            content: "Results vary based on content quality, audience size, and platform fit. My private collaboration clients typically see 3-5x ROI within the first month. Many experience viral clips (100K-500K+ views), new followers, lead generation, and increased business opportunities from the exposure managed by our dedicated team."
                         },
                     ]}
                     faqsAnimation="slide-up"
@@ -262,20 +263,20 @@ export default function LandingPage() {
                             items: [
                                 { label: "Home", href: "/" },
                                 { label: "Case Studies", href: "#case-studies" },
+                                { label: "My Work", href: "/work" },
+                            ],
+                        },
+                        {
+                            items: [
                                 { label: "Process", href: "#process" },
-                            ],
-                        },
-                        {
-                            items: [
                                 { label: "About", href: "#about" },
-                                { label: "FAQ", href: "#faq" },
                             ],
                         },
                         {
                             items: [
+                                { label: "FAQ", href: "#faq" },
                                 { label: "Contact", href: "#contact" },
                                 { label: "Book A Call", href: "https://calendly.com/ibbiyousuf420/30min" },
-                                { label: "Privacy Policy", href: "#" },
                             ],
                         },
                     ]}
-- 
2.49.1


From f29702ca3ddfb2dfab6a14a355217b60a8df18d0 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 12:16:44 +0000
Subject: [PATCH 2/2] Add src/app/work/page.tsx

---
 src/app/work/page.tsx | 182 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 src/app/work/page.tsx

diff --git a/src/app/work/page.tsx b/src/app/work/page.tsx
new file mode 100644
index 0000000..8758d02
--- /dev/null
+++ b/src/app/work/page.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import { useEffect, useRef, useState } from "react";
+import { Play } from "lucide-react";
+
+interface Clip {
+  id: string;
+  src: string;
+  type: "video" | "image";
+  title: string;
+}
+
+const clips: Clip[] = [
+  {
+    id: "1",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg",    type: "image",    title: "Viral Clip 1"},
+  {
+    id: "2",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg",    type: "image",    title: "Viral Clip 2"},
+  {
+    id: "3",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg",    type: "image",    title: "Viral Clip 3"},
+  {
+    id: "4",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg",    type: "image",    title: "Viral Clip 4"},
+  {
+    id: "5",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg",    type: "image",    title: "Viral Clip 5"},
+];
+
+export default function WorkPage() {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [playingId, setPlayingId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
+    let scrollPosition = 0;
+    const scrollSpeed = 1;
+    const containerWidth = scrollContainer.scrollWidth;
+    const viewportWidth = scrollContainer.clientWidth;
+
+    const scroll = () => {
+      scrollPosition += scrollSpeed;
+      if (scrollPosition >= containerWidth - viewportWidth) {
+        scrollPosition = 0;
+      }
+      scrollContainer.scrollLeft = scrollPosition;
+    };
+
+    const interval = setInterval(scroll, 30);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleClipClick = (clipId: string) => {
+    setPlayingId(playingId === clipId ? null : clipId);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="mediumSizeLargeTitles"
+      background="noise"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="billiscales"
+          navItems={[
+            { name: "Case Studies", id: "case-studies" },
+            { name: "About", id: "about" },
+            { name: "My Work", id: "/work" },
+            { name: "Process", id: "process" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{
+            text: "Book A Call",            href: "https://calendly.com/ibbiyousuf420/30min"}}
+        />
+      </div>
+
+      <main className="w-full min-h-screen bg-gradient-to-b from-background to-card pt-32 pb-20">
+        <div className="w-full px-4 md:px-8 mb-16">
+          <div className="text-center mb-12">
+            <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-4">
+              My Work
+            </h1>
+            <p className="text-lg md:text-xl text-foreground/70 max-w-2xl mx-auto">
+              Scroll through my latest viral clips and shortform content
+            </p>
+          </div>
+
+          {/* Horizontal Scrolling Container */}
+          <div
+            className="w-full overflow-hidden rounded-2xl"
+            style={{
+              background: "linear-gradient(135deg, rgba(var(--primary-cta), 0.05), rgba(var(--accent), 0.05))",              border: "1px solid rgba(var(--foreground), 0.1)"}}
+          >
+            <div
+              ref={scrollContainerRef}
+              className="flex gap-4 p-6 overflow-x-scroll scroll-smooth no-scrollbar"
+              style={{ scrollBehavior: "smooth", scrollbarWidth: "none" }}
+            >
+              {/* Duplicate clips to create infinite loop effect */}
+              {[...clips, ...clips].map((clip, index) => (
+                <div
+                  key={`${clip.id}-${index}`}
+                  className="flex-shrink-0 relative group cursor-pointer transition-transform duration-300 hover:scale-105"
+                  style={{
+                    width: "240px",                    aspectRatio: "9/16"}}
+                  onClick={() => handleClipClick(clip.id)}
+                >
+                  {/* Clip Container */}
+                  <div
+                    className="w-full h-full rounded-xl overflow-hidden shadow-lg"
+                    style={{
+                      background: "var(--card)",                      border: "2px solid rgba(var(--primary-cta), 0.2)"}}
+                  >
+                    {/* Image/Video */}
+                    {clip.type === "image" ? (
+                      <img
+                        src={clip.src}
+                        alt={clip.title}
+                        className="w-full h-full object-cover"
+                        loading="lazy"
+                      />
+                    ) : (
+                      <video
+                        src={clip.src}
+                        className="w-full h-full object-cover"
+                        autoPlay={playingId === clip.id}
+                        controls={playingId === clip.id}
+                        muted
+                      />
+                    )}
+
+                    {/* Overlay */}
+                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors duration-300 flex items-center justify-center">
+                      {playingId !== clip.id && (
+                        <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                          <div
+                            className="flex items-center justify-center w-16 h-16 rounded-full transition-all duration-300"
+                            style={{
+                              background: "var(--primary-cta)",                              backdropFilter: "blur(10px)"}}
+                          >
+                            <Play
+                              size={28}
+                              className="text-white fill-white"
+                              style={{
+                                filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3))"}}
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Title */}
+                  <div className="mt-2">
+                    <p className="text-sm font-medium text-foreground truncate">
+                      {clip.title}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Info text */}
+          <div className="text-center mt-8 text-foreground/60">
+            <p className="text-sm md:text-base">
+              👆 Scroll horizontally • Click any clip to play
+            </p>
+          </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}
-- 
2.49.1