From 730f3a398a9e923b5ba3eae31b2a5cb63189afcf Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 11 Jun 2026 21:24:15 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 254 +++++++++--------------------------------------
 1 file changed, 45 insertions(+), 209 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f4bc0e2..40f7e5a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -32,33 +32,19 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
-          id: "#home",
-        },
+          name: "Home",          id: "#home"},
         {
-          name: "About",
-          id: "#about",
-        },
+          name: "About",          id: "#about"},
         {
-          name: "Services",
-          id: "#services",
-        },
+          name: "Services",          id: "#services"},
         {
-          name: "Portfolio",
-          id: "#portfolio",
-        },
+          name: "Portfolio",          id: "#portfolio"},
         {
-          name: "Skills",
-          id: "#skills",
-        },
+          name: "Skills",          id: "#skills"},
         {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
+          name: "Testimonials",          id: "#testimonials"},
         {
-          name: "Contact",
-          id: "#contact",
-        },
+          name: "Contact",          id: "#contact"},
       ]}
       logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3F0NXQsundk14oKqk4A0uLHrzcH/uploaded-1781212890510-500hz0wl.png"
       logoAlt="Zaki Benhacene Logo"
@@ -71,53 +57,30 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroBillboardRotatedCarousel
       background={{
-        variant: "animated-grid",
-      }}
+        variant: "animated-grid"}}
       title="ZAKI BENHACENE"
       description="Motion Designer & Visual Storyteller. Turning ideas into immersive experiences."
       tag="PREMIUM PORTFOLIO"
       tagIcon={Sparkles}
       buttons={[
         {
-          text: "View Portfolio",
-          href: "#portfolio",
-        },
+          text: "View Portfolio",          href: "#portfolio"},
         {
-          text: "Contact Me",
-          href: "#contact",
-        },
+          text: "Contact Me",          href: "#contact"},
       ]}
       carouselItems={[
         {
-          id: "carousel-item-1",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3F0NXQsundk14oKqk4A0uLHrzcH/uploaded-1781212890510-500hz0wl.png",
-          imageAlt: "Zaki Benhacene Logo and Avatar",
-        },
+          id: "carousel-item-1",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3F0NXQsundk14oKqk4A0uLHrzcH/uploaded-1781212890510-500hz0wl.png",          imageAlt: "Zaki Benhacene Logo and Avatar"},
         {
-          id: "carousel-item-2",
-          imageSrc: "http://img.b2bpic.net/free-photo/violet-camera-dust-spots-abstract_23-2148241253.jpg",
-          imageAlt: "Animated background particles",
-        },
+          id: "carousel-item-2",          imageSrc: "http://img.b2bpic.net/free-photo/violet-camera-dust-spots-abstract_23-2148241253.jpg",          imageAlt: "Animated background particles"},
         {
-          id: "carousel-item-3",
-          imageSrc: "http://img.b2bpic.net/free-photo/biohazard-sign-ai-generated_268835-18690.jpg?_wi=1",
-          imageAlt: "Zaki Benhacene Logo and Avatar",
-        },
+          id: "carousel-item-3",          imageSrc: "http://img.b2bpic.net/free-photo/biohazard-sign-ai-generated_268835-18690.jpg",          imageAlt: "Zaki Benhacene Logo and Avatar"},
         {
-          id: "carousel-item-4",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-cyber-particles_1048-12380.jpg",
-          imageAlt: "Animated background particles",
-        },
+          id: "carousel-item-4",          imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-cyber-particles_1048-12380.jpg",          imageAlt: "Animated background particles"},
         {
-          id: "carousel-item-5",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627846.jpg?_wi=1",
-          imageAlt: "Zaki Benhacene Logo and Avatar",
-        },
+          id: "carousel-item-5",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627846.jpg",          imageAlt: "Zaki Benhacene Logo and Avatar"},
         {
-          id: "carousel-item-6",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212569.jpg",
-          imageAlt: "Animated background particles",
-        },
+          id: "carousel-item-6",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212569.jpg",          imageAlt: "Animated background particles"},
       ]}
       autoPlay={true}
       autoPlayInterval={4000}
@@ -132,7 +95,7 @@ export default function LandingPage() {
       description="I'm Zaki Benhacene, a Motion Designer and Visual Storyteller dedicated to transforming concepts into dynamic, engaging visual experiences. My passion lies in pushing creative boundaries to deliver impactful brand narratives."
       subdescription="Specializing in Kinetic Typography, intuitive UI Animation, compelling Brand Visuals, and engaging Social Media Content, I bring a unique blend of artistry and technical precision to every project."
       icon={Sparkles}
-      imageSrc="http://img.b2bpic.net/free-photo/biohazard-sign-ai-generated_268835-18690.jpg?_wi=2"
+      imageSrc="http://img.b2bpic.net/free-photo/biohazard-sign-ai-generated_268835-18690.jpg"
       imageAlt="Abstract motion graphics composition"
       mediaAnimation="slide-up"
     />
@@ -146,41 +109,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Motion Graphics",
-          description: "Dynamic visual content to tell your story, engage audiences, and elevate your brand.",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627846.jpg?_wi=2",
-          imageAlt: "Abstract motion graphics",
-        },
+          title: "Motion Graphics",          description: "Dynamic visual content to tell your story, engage audiences, and elevate your brand.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627846.jpg",          imageAlt: "Abstract motion graphics"},
         {
-          title: "Kinetic Typography",
-          description: "Bringing text to life with expressive animation to convey messages with impact and style.",
-          imageSrc: "http://img.b2bpic.net/free-photo/creative-3d-render-design-web-banner-marketing-material-business-presentation-online-advertising_460848-7134.jpg",
-          imageAlt: "Kinetic typography animation",
-        },
+          title: "Kinetic Typography",          description: "Bringing text to life with expressive animation to convey messages with impact and style.",          imageSrc: "http://img.b2bpic.net/free-photo/creative-3d-render-design-web-banner-marketing-material-business-presentation-online-advertising_460848-7134.jpg",          imageAlt: "Kinetic typography animation"},
         {
-          title: "Video Editing",
-          description: "Seamlessly blending footage, effects, and sound to create polished, captivating videos.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-sunglasses-standing-near-source-light_250224-293.jpg",
-          imageAlt: "Video editing interface",
-        },
+          title: "Video Editing",          description: "Seamlessly blending footage, effects, and sound to create polished, captivating videos.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-sunglasses-standing-near-source-light_250224-293.jpg",          imageAlt: "Video editing interface"},
         {
-          title: "Social Media Ads",
-          description: "Designing engaging, scroll-stopping animations optimized for maximum reach and conversion on social platforms.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-person-holding-camera-device-world-photography-day_23-2151609269.jpg",
-          imageAlt: "Social media ad creative",
-        },
+          title: "Social Media Ads",          description: "Designing engaging, scroll-stopping animations optimized for maximum reach and conversion on social platforms.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-person-holding-camera-device-world-photography-day_23-2151609269.jpg",          imageAlt: "Social media ad creative"},
         {
-          title: "UI Animations",
-          description: "Crafting intuitive and delightful user interface animations that enhance user experience and interaction.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-holographic-layering_23-2150491099.jpg",
-          imageAlt: "UI animations",
-        },
+          title: "UI Animations",          description: "Crafting intuitive and delightful user interface animations that enhance user experience and interaction.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-holographic-layering_23-2150491099.jpg",          imageAlt: "UI animations"},
         {
-          title: "Brand Visuals",
-          description: "Developing cohesive and memorable brand motion identities that resonate with your target audience.",
-          imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103146.jpg",
-          imageAlt: "Abstract brand visuals",
-        },
+          title: "Brand Visuals",          description: "Developing cohesive and memorable brand motion identities that resonate with your target audience.",          imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103146.jpg",          imageAlt: "Abstract brand visuals"},
       ]}
       title="My Expertise"
       description="Delivering cutting-edge visual solutions across various creative domains."
@@ -190,70 +129,29 @@ export default function LandingPage() {
 
   <div id="portfolio" data-section="portfolio">
       <ProductCardTwo
+      animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       products={[
         {
-          id: "project-1",
-          brand: "Kinetic Arts",
-          name: "Dynamic Text Explainer",
-          price: "Video Preview",
-          rating: 5,
-          reviewCount: "20 reviews",
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-hologram_23-2151917451.jpg",
-          imageAlt: "Kinetic Typography Project Thumbnail",
-        },
+          id: "project-1",          brand: "Kinetic Arts",          name: "Dynamic Text Explainer",          price: "Video Preview",          rating: 5,
+          reviewCount: "20 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-hologram_23-2151917451.jpg",          imageAlt: "Kinetic Typography Project Thumbnail"},
         {
-          id: "project-2",
-          brand: "Fusion UI",
-          name: "Interactive App Animation",
-          price: "Video Preview",
-          rating: 5,
-          reviewCount: "15 reviews",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-touching-smart-technology-holographic-interface_53876-98409.jpg",
-          imageAlt: "UI Animation Project Thumbnail",
-        },
+          id: "project-2",          brand: "Fusion UI",          name: "Interactive App Animation",          price: "Video Preview",          rating: 5,
+          reviewCount: "15 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/woman-touching-smart-technology-holographic-interface_53876-98409.jpg",          imageAlt: "UI Animation Project Thumbnail"},
         {
-          id: "project-3",
-          brand: "Brand Pulse",
-          name: "Corporate Identity Reveal",
-          price: "Video Preview",
-          rating: 5,
-          reviewCount: "25 reviews",
-          imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-108162.jpg",
-          imageAlt: "Brand Visual Identity Project Thumbnail",
-        },
+          id: "project-3",          brand: "Brand Pulse",          name: "Corporate Identity Reveal",          price: "Video Preview",          rating: 5,
+          reviewCount: "25 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-108162.jpg",          imageAlt: "Brand Visual Identity Project Thumbnail"},
         {
-          id: "project-4",
-          brand: "Social Flow",
-          name: "Engaging Social Ad Campaign",
-          price: "Video Preview",
-          rating: 5,
-          reviewCount: "18 reviews",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-doing-creative-journaling_23-2150561840.jpg",
-          imageAlt: "Social Media Content Project Thumbnail",
-        },
+          id: "project-4",          brand: "Social Flow",          name: "Engaging Social Ad Campaign",          price: "Video Preview",          rating: 5,
+          reviewCount: "18 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-doing-creative-journaling_23-2150561840.jpg",          imageAlt: "Social Media Content Project Thumbnail"},
         {
-          id: "project-5",
-          brand: "Abstract Motion",
-          name: "Experimental Visuals Showcase",
-          price: "Video Preview",
-          rating: 5,
-          reviewCount: "12 reviews",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-particle-design_1048-13007.jpg",
-          imageAlt: "Experimental Motion Design Project Thumbnail",
-        },
+          id: "project-5",          brand: "Abstract Motion",          name: "Experimental Visuals Showcase",          price: "Video Preview",          rating: 5,
+          reviewCount: "12 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-particle-design_1048-13007.jpg",          imageAlt: "Experimental Motion Design Project Thumbnail"},
         {
-          id: "project-6",
-          brand: "Product Render",
-          name: "Sleek 3D Product Animation",
-          price: "Video Preview",
-          rating: 5,
-          reviewCount: "22 reviews",
-          imageSrc: "http://img.b2bpic.net/free-photo/ferromagnetic-liquid-metal-with-copy-space-pink-background_23-2148253525.jpg",
-          imageAlt: "3D Motion Graphics Project Thumbnail",
-        },
+          id: "project-6",          brand: "Product Render",          name: "Sleek 3D Product Animation",          price: "Video Preview",          rating: 5,
+          reviewCount: "22 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/ferromagnetic-liquid-metal-with-copy-space-pink-background_23-2148253525.jpg",          imageAlt: "3D Motion Graphics Project Thumbnail"},
       ]}
       title="My Portfolio"
       description="Explore a selection of my latest motion design projects, from kinetic typography to UI animations and brand visuals."
@@ -266,14 +164,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Adobe After Effects",
-        "Adobe Premiere Pro",
-        "Adobe Photoshop",
-        "Adobe Illustrator",
-        "Figma",
-        "Cinema 4D",
-        "Blender",
-      ]}
+        "Adobe After Effects",        "Adobe Premiere Pro",        "Adobe Photoshop",        "Adobe Illustrator",        "Figma",        "Cinema 4D",        "Blender"]}
       title="My Toolkit"
       description="Proficient in industry-standard software and creative tools to bring your visions to life."
       tag="SKILLS & SOFTWARE"
@@ -286,65 +177,15 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "1",
-          name: "Elara Vance",
-          date: "2023-11-15",
-          title: "Exceptional Motion Graphics!",
-          quote: "Zaki's work on our brand's intro animation was phenomenal. The cyberpunk style perfectly captured our vision, and the execution was flawless. Highly recommended!",
-          tag: "Brand Identity",
-          avatarSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419461.jpg",
-          avatarAlt: "Elara Vance avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-8626.jpg",
-          imageAlt: "Abstract neon light streaks",
-        },
+          id: "1",          name: "Elara Vance",          date: "2023-11-15",          title: "Exceptional Motion Graphics!",          quote: "Zaki's work on our brand's intro animation was phenomenal. The cyberpunk style perfectly captured our vision, and the execution was flawless. Highly recommended!",          tag: "Brand Identity",          avatarSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419461.jpg",          avatarAlt: "Elara Vance avatar",          imageSrc: "http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-8626.jpg",          imageAlt: "Abstract neon light streaks"},
         {
-          id: "2",
-          name: "Kaelen Rix",
-          date: "2024-01-22",
-          title: "UI Animations That Delight",
-          quote: "Our app's new UI animations are incredibly smooth and engaging, thanks to Zaki. The glassmorphism effects are a game-changer. Pure artistry!",
-          tag: "Product Design",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-person-with-funny-wig_23-2151247571.jpg",
-          avatarAlt: "Kaelen Rix avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-flowing-dots-digital-landscape-modern-connections_1048-10497.jpg",
-          imageAlt: "Digital grid patterns",
-        },
+          id: "2",          name: "Kaelen Rix",          date: "2024-01-22",          title: "UI Animations That Delight",          quote: "Our app's new UI animations are incredibly smooth and engaging, thanks to Zaki. The glassmorphism effects are a game-changer. Pure artistry!",          tag: "Product Design",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-person-with-funny-wig_23-2151247571.jpg",          avatarAlt: "Kaelen Rix avatar",          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-flowing-dots-digital-landscape-modern-connections_1048-10497.jpg",          imageAlt: "Digital grid patterns"},
         {
-          id: "3",
-          name: "Seraphina Lux",
-          date: "2023-09-01",
-          title: "Visual Storytelling Master",
-          quote: "Zaki truly brought our script to life with his kinetic typography. The project exceeded our expectations and captivated our audience from start to finish.",
-          tag: "Marketing Campaign",
-          avatarSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-glasses-is-posing-photographer-studio_613910-2638.jpg",
-          avatarAlt: "Seraphina Lux avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/photographic-pink-gradient-seamless-studio-backdrop-background_1258-101976.jpg",
-          imageAlt: "Abstract geometric shapes",
-        },
+          id: "3",          name: "Seraphina Lux",          date: "2023-09-01",          title: "Visual Storytelling Master",          quote: "Zaki truly brought our script to life with his kinetic typography. The project exceeded our expectations and captivated our audience from start to finish.",          tag: "Marketing Campaign",          avatarSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-glasses-is-posing-photographer-studio_613910-2638.jpg",          avatarAlt: "Seraphina Lux avatar",          imageSrc: "http://img.b2bpic.net/free-photo/photographic-pink-gradient-seamless-studio-backdrop-background_1258-101976.jpg",          imageAlt: "Abstract geometric shapes"},
         {
-          id: "4",
-          name: "Jax Orion",
-          date: "2024-03-10",
-          title: "Responsive and Creative",
-          quote: "Working with Zaki was a breeze. He's not only incredibly talented but also highly professional and responsive. The quality of his work speaks for itself.",
-          tag: "Social Media",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed-holding-white-headphone-around-his-neck_23-2148096439.jpg",
-          avatarAlt: "Jax Orion avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-chromatic-gradient_23-2151920579.jpg",
-          imageAlt: "Futuristic liquid metal texture",
-        },
+          id: "4",          name: "Jax Orion",          date: "2024-03-10",          title: "Responsive and Creative",          quote: "Working with Zaki was a breeze. He's not only incredibly talented but also highly professional and responsive. The quality of his work speaks for itself.",          tag: "Social Media",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed-holding-white-headphone-around-his-neck_23-2148096439.jpg",          avatarAlt: "Jax Orion avatar",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-chromatic-gradient_23-2151920579.jpg",          imageAlt: "Futuristic liquid metal texture"},
         {
-          id: "5",
-          name: "Lyra Spectra",
-          date: "2024-04-25",
-          title: "Beyond Expectations",
-          quote: "The cinematic quality of the motion graphics Zaki produced for our event was stunning. It added a layer of professionalism and excitement that truly made a difference.",
-          tag: "Event Promo",
-          avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-portrait-with-overexposed-moving-style_23-2149495267.jpg",
-          avatarAlt: "Lyra Spectra avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99284.jpg",
-          imageAlt: "Dark energy field",
-        },
+          id: "5",          name: "Lyra Spectra",          date: "2024-04-25",          title: "Beyond Expectations",          quote: "The cinematic quality of the motion graphics Zaki produced for our event was stunning. It added a layer of professionalism and excitement that truly made a difference.",          tag: "Event Promo",          avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-portrait-with-overexposed-moving-style_23-2149495267.jpg",          avatarAlt: "Lyra Spectra avatar",          imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99284.jpg",          imageAlt: "Dark energy field"},
       ]}
       title="What Clients Say"
       description="Hear from satisfied clients about the impact of my motion design work on their projects."
@@ -356,8 +197,7 @@ export default function LandingPage() {
       <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       tag="GET IN TOUCH"
       title="Let's Create Something Amazing."
       description="Ready to bring your ideas to life with stunning motion graphics? Fill out the form below or connect with me on social media."
@@ -380,14 +220,10 @@ export default function LandingPage() {
       socialLinks={[
         {
           icon: Instagram,
-          href: "https://instagram.com/zaki_benhacene_css",
-          ariaLabel: "Instagram",
-        },
+          href: "https://instagram.com/zaki_benhacene_css",          ariaLabel: "Instagram"},
         {
           icon: Mail,
-          href: "mailto:hello@zakiben.com",
-          ariaLabel: "Email",
-        },
+          href: "mailto:hello@zakiben.com",          ariaLabel: "Email"},
       ]}
     />
   </div>
-- 
2.49.1