bender/e7485e22-b831-4372-b2d9-1500e3696df5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-06-11 21:24:21 +00:00
Conversation 0 Commits 1 Files Changed 1 +45 -209
1 changed files with 45 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/app/page.tsx
View File

@@ -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>