Update src/app/page.tsx

Merge version_21 into main

src/app/page.tsx

@@ -219,7 +219,7 @@ export default function LandingPage() {
                             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: "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."
@@ -234,7 +234,7 @@ export default function LandingPage() {
                             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 Sales of their products All done by our dedicated team."
                         },
                     ]}
                     faqsAnimation="slide-up"
@@ -257,7 +257,7 @@ export default function LandingPage() {
 
             <div id="footer" data-section="footer">
                 <FooterLogoEmphasis
-                    logoText="billiclipd"
+                    logoText=""
                     columns={[
                         {
                             items: [

src/app/work/page.tsx

@@ -2,45 +2,49 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import { useEffect, useRef, useState } from "react";
-import { Play } from "lucide-react";
+import { useEffect, useRef } from "react";
 
 interface Clip {
   id: string;
   src: string;
-  type: "video" | "image";
   title: string;
+  link: 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: "1",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773165537767-sb172m93.png",    title: "Viral Clip 1",    link: "https://www.tiktok.com/@brandonclipd/video/7593877522681564446"
+  },
   {
-    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: "2",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773165537769-ji09ma2s.png",    title: "Viral Clip 2",    link: "https://drive.google.com/file/d/1TFDj__ZvlvGQah-3T6YRsw6wwCGrR2YW/view?usp=drivesdk"
+  },
   {
-    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: "3",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773165537769-p7aqg1q7.png",    title: "Viral Clip 3",    link: "https://drive.google.com/file/d/1QbP28qpbNlyWE-kJcLQXlZ70ai5ccjuw/view?usp=drivesdk"
+  },
   {
-    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: "4",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773165537769-ecm4mns3.png",    title: "Viral Clip 4",    link: "https://www.tiktok.com/@brandonclipd/video/7594523303847415070"
+  },
   {
-    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"},
+    id: "5",    src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1773164050845-j8dxb4nc.png",    title: "Viral Clip 5",    link: "https://drive.google.com/file/d/1Pt43OPdW-tMbRB_3DLumnhedP87cDZzo/view?usp=share_link"
+  }
 ];
 
 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 scrollSpeed = 2;
     const containerWidth = scrollContainer.scrollWidth;
     const viewportWidth = scrollContainer.clientWidth;
 
     const scroll = () => {
       scrollPosition += scrollSpeed;
-      if (scrollPosition >= containerWidth - viewportWidth) {
+      // Loop back to start for infinite scroll
+      if (scrollPosition >= containerWidth / 2) {
         scrollPosition = 0;
       }
       scrollContainer.scrollLeft = scrollPosition;
@@ -50,8 +54,8 @@ export default function WorkPage() {
     return () => clearInterval(interval);
   }, []);
 
-  const handleClipClick = (clipId: string) => {
-    setPlayingId(playingId === clipId ? null : clipId);
+  const handleClipClick = (link: string) => {
+    window.open(link, "_blank");
   };
 
   return (
@@ -75,10 +79,11 @@ export default function WorkPage() {
             { name: "About", id: "about" },
             { name: "My Work", id: "/work" },
             { name: "Process", id: "process" },
-            { name: "Contact", id: "contact" },
+            { 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>
 
@@ -93,73 +98,68 @@ export default function WorkPage() {
             </p>
           </div>
 
-          {/* Horizontal Scrolling Container */}
+          {/* Horizontal Infinite 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)"}}
+              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" }}
+              className="flex gap-6 p-6 overflow-x-scroll"
+              style={{
+                scrollBehavior: "smooth",                scrollbarWidth: "none",                msOverflowStyle: "none"
+              }}
             >
-              {/* Duplicate clips to create infinite loop effect */}
+              {/* Duplicate clips for 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"
+                  className="flex-shrink-0 relative group cursor-pointer transition-all duration-300 hover:scale-110 hover:shadow-2xl"
                   style={{
-                    width: "240px",                    aspectRatio: "9/16"}}
-                  onClick={() => handleClipClick(clip.id)}
+                    width: "280px",                    aspectRatio: "9/16"
+                  }}
+                  onClick={() => handleClipClick(clip.link)}
+                  role="link"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleClipClick(clip.link);
+                    }
+                  }}
                 >
-                  {/* Clip Container */}
+                  {/* Clip Card Container */}
                   <div
-                    className="w-full h-full rounded-xl overflow-hidden shadow-lg"
+                    className="w-full h-full rounded-xl overflow-hidden shadow-lg transition-all duration-300"
                     style={{
-                      background: "var(--card)",                      border: "2px solid rgba(var(--primary-cta), 0.2)"}}
+                      background: "var(--card)",                      border: "2px solid rgba(var(--primary-cta), 0.2)",                      boxShadow: "0 10px 30px rgba(0, 0, 0, 0.1)"
+                    }}
                   >
-                    {/* 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
-                      />
-                    )}
+                    {/* Image */}
+                    <img
+                      src={clip.src}
+                      alt={clip.title}
+                      className="w-full h-full object-cover"
+                      loading="lazy"
+                    />
 
-                    {/* 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>
-                      )}
+                    {/* Hover Overlay */}
+                    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-end p-4">
+                      <div
+                        className="px-4 py-2 rounded-full text-sm font-semibold text-white transition-all duration-300 transform translate-y-8 group-hover:translate-y-0"
+                        style={{
+                          background: "var(--primary-cta)",                          backdropFilter: "blur(10px)"
+                        }}
+                      >
+                        View
+                      </div>
                     </div>
                   </div>
 
                   {/* Title */}
-                  <div className="mt-2">
+                  <div className="mt-3">
                     <p className="text-sm font-medium text-foreground truncate">
                       {clip.title}
                     </p>
@@ -169,14 +169,14 @@ export default function WorkPage() {
             </div>
           </div>
 
-          {/* Info text */}
+          {/* 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
+              👆 Continuous scroll • Click any card to view
             </p>
           </div>
         </div>
       </main>
     </ThemeProvider>
   );
-}
+}