bender/2339da0d-490a-4f54-a009-83fa83aaada3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #1

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

289
src/app/page.tsx
View File

@@ -32,33 +32,19 @@ export default function LandingPage() {
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "#hero",
},
name: "Home", id: "#hero"},
{
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: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "Testimonials",
id: "#testimonials",
},
name: "Testimonials", id: "#testimonials"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
brandName="ZAKI BENHACENE"
/>
@@ -67,70 +53,42 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "sparkles-gradient",
}}
variant: "sparkles-gradient"}}
title="ZAKI BENHACENE"
description="Motion Designer & Content Creator"
buttons={[
{
text: "View Portfolio",
href: "#portfolio",
},
text: "View Portfolio", href: "#portfolio"},
{
text: "Contact Me",
href: "#contact",
},
text: "Contact Me", href: "#contact"},
]}
imageSrc="http://img.b2bpic.net/free-photo/abstract-light-painting-dark_52683-92735.jpg"
imageAlt="Large glowing 3D letter Z logo"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/hands-holding-letter-z_53876-63670.jpg",
alt: "Hands holding the letter Z",
},
src: "http://img.b2bpic.net/free-photo/hands-holding-letter-z_53876-63670.jpg", alt: "Hands holding the letter Z"},
{
src: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204936.jpg",
alt: "Arrow with bright neon colors",
},
src: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204936.jpg", alt: "Arrow with bright neon colors"},
{
src: "http://img.b2bpic.net/free-photo/view-city-night-with-neon-lights_23-2150840805.jpg",
alt: "View of city at night with neon lights",
},
src: "http://img.b2bpic.net/free-photo/view-city-night-with-neon-lights_23-2150840805.jpg", alt: "View of city at night with neon lights"},
{
src: "http://img.b2bpic.net/free-photo/hand-holding-letter-z_53876-63827.jpg",
alt: "Hand holding the letter Z",
},
src: "http://img.b2bpic.net/free-photo/hand-holding-letter-z_53876-63827.jpg", alt: "Hand holding the letter Z"},
{
src: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212565.jpg",
alt: "Close up on beautiful optical fiber details",
},
src: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212565.jpg", alt: "Close up on beautiful optical fiber details"},
]}
avatarText="Trusted by 500+ clients worldwide"
marqueeItems={[
{
type: "image",
src: "http://img.b2bpic.net/free-photo/close-up-flamingo-neon-sign-bedroom_23-2149355060.jpg",
alt: "Close up on flamingo neon sign in bedroom",
},
type: "image", src: "http://img.b2bpic.net/free-photo/close-up-flamingo-neon-sign-bedroom_23-2149355060.jpg", alt: "Close up on flamingo neon sign in bedroom"},
{
type: "text",
text: "Motion Graphics",
},
type: "text", text: "Motion Graphics"},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-100232.jpg",
alt: "Liquid marbling paint texture background Fluid painting abstract texture Intensive color mix wallpaper",
},
type: "image", src: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-100232.jpg", alt: "Liquid marbling paint texture background Fluid painting abstract texture Intensive color mix wallpaper"},
{
type: "text",
text: "Video Editing",
},
type: "text", text: "Video Editing"},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212560.jpg",
alt: "Close up on beautiful optical fiber details",
},
type: "image", src: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212560.jpg", alt: "Close up on beautiful optical fiber details"},
]}
marqueeSpeed={40}
showMarqueeCard={true}
@@ -145,29 +103,13 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
title: "Motion Design",
description: "Dynamic animations, engaging visual effects, and captivating intros/outros to bring your content to life.",
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-100251.jpg",
imageAlt: "Abstract motion design graphics with purple glow",
},
title: "Motion Design", description: "Dynamic animations, engaging visual effects, and captivating intros/outros to bring your content to life.", imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-100251.jpg", imageAlt: "Abstract motion design graphics with purple glow"},
{
title: "Video Editing",
description: "Professional video post-production, color grading, sound design, and storytelling for compelling narratives.",
imageSrc: "http://img.b2bpic.net/free-photo/bigfoot-represented-neon-glow_23-2151322944.jpg",
imageAlt: "Futuristic video editing interface",
},
title: "Video Editing", description: "Professional video post-production, color grading, sound design, and storytelling for compelling narratives.", imageSrc: "http://img.b2bpic.net/free-photo/bigfoot-represented-neon-glow_23-2151322944.jpg", imageAlt: "Futuristic video editing interface"},
{
title: "Social Media Content",
description: "Eye-catching short-form videos, animated graphics, and trend-driven content optimized for all platforms.",
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg",
imageAlt: "Holographic social media icons",
},
title: "Social Media Content", description: "Eye-catching short-form videos, animated graphics, and trend-driven content optimized for all platforms.", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg", imageAlt: "Holographic social media icons"},
{
title: "Branding Design",
description: "Crafting unique visual identities, logo animations, and brand guidelines that resonate with your audience.",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-background_23-2148132329.jpg",
imageAlt: "Sleek glowing logo for branding",
},
title: "Branding Design", description: "Crafting unique visual identities, logo animations, and brand guidelines that resonate with your audience.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-background_23-2148132329.jpg", imageAlt: "Sleek glowing logo for branding"},
]}
title="My Services"
description="Offering a diverse range of creative services to elevate your brand and vision in the digital space."
@@ -182,65 +124,23 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "1",
brand: "Motion Graphics",
name: "Cybernetic Flow",
price: "View Project",
rating: 5,
reviewCount: "25",
imageSrc: "http://img.b2bpic.net/free-photo/metallic-holographic-background_23-2148862181.jpg",
imageAlt: "Abstract motion graphics with neon purple lights",
},
id: "1", brand: "Motion Graphics", name: "Cybernetic Flow", price: "View Project", rating: 5,
reviewCount: "25", imageSrc: "http://img.b2bpic.net/free-photo/metallic-holographic-background_23-2148862181.jpg", imageAlt: "Abstract motion graphics with neon purple lights"},
{
id: "2",
brand: "Video Editing",
name: "Neo-City Echoes",
price: "View Project",
rating: 5,
reviewCount: "18",
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-chocolate-factory_23-2151451177.jpg",
imageAlt: "Cyberpunk city cinematic still with neon light",
},
id: "2", brand: "Video Editing", name: "Neo-City Echoes", price: "View Project", rating: 5,
reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-chocolate-factory_23-2151451177.jpg", imageAlt: "Cyberpunk city cinematic still with neon light"},
{
id: "3",
brand: "3D Animation",
name: "Digital Synapse",
price: "View Project",
rating: 5,
reviewCount: "32",
imageSrc: "http://img.b2bpic.net/free-photo/blue-beams-with-warm-edge-glow-neon-depth_169016-71500.jpg",
imageAlt: "3D rendering of glowing circuits and data streams",
},
id: "3", brand: "3D Animation", name: "Digital Synapse", price: "View Project", rating: 5,
reviewCount: "32", imageSrc: "http://img.b2bpic.net/free-photo/blue-beams-with-warm-edge-glow-neon-depth_169016-71500.jpg", imageAlt: "3D rendering of glowing circuits and data streams"},
{
id: "4",
brand: "UI/UX Motion",
name: "Holographic Interface",
price: "View Project",
rating: 5,
reviewCount: "12",
imageSrc: "http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170165.jpg",
imageAlt: "Sci-fi UI element pulsating with neon purple",
},
id: "4", brand: "UI/UX Motion", name: "Holographic Interface", price: "View Project", rating: 5,
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170165.jpg", imageAlt: "Sci-fi UI element pulsating with neon purple"},
{
id: "5",
brand: "Product Visualizer",
name: "Quantum Device Reveal",
price: "View Project",
rating: 5,
reviewCount: "29",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-stack-blue-conserves_23-2148785249.jpg",
imageAlt: "Sleek product animation still of a futuristic gadget",
},
id: "5", brand: "Product Visualizer", name: "Quantum Device Reveal", price: "View Project", rating: 5,
reviewCount: "29", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-stack-blue-conserves_23-2148785249.jpg", imageAlt: "Sleek product animation still of a futuristic gadget"},
{
id: "6",
brand: "Abstract VFX",
name: "Void Resonance",
price: "View Project",
rating: 5,
reviewCount: "15",
imageSrc: "http://img.b2bpic.net/free-photo/nail-polish-texture_23-2148111082.jpg",
imageAlt: "Abstract, fluid simulation with neon purple and blue liquid",
},
id: "6", brand: "Abstract VFX", name: "Void Resonance", price: "View Project", rating: 5,
reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/nail-polish-texture_23-2148111082.jpg", imageAlt: "Abstract, fluid simulation with neon purple and blue liquid"},
]}
title="My Portfolio"
description="A curated collection of my motion design and content creation projects, showcasing a blend of creativity and technical expertise."
@@ -255,35 +155,15 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
title: "Adobe After Effects",
description: "Advanced motion graphics, visual effects, and compositing.",
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-text-plain-background_23-2148285131.jpg",
imageAlt: "Adobe After Effects icon",
},
title: "Adobe After Effects", description: "Advanced motion graphics, visual effects, and compositing.", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-text-plain-background_23-2148285131.jpg", imageAlt: "Adobe After Effects icon"},
{
title: "Adobe Photoshop",
description: "Image manipulation, digital painting, and graphic design.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-fluorescent-make-up_23-2148410092.jpg",
imageAlt: "Adobe Photoshop icon",
},
title: "Adobe Photoshop", description: "Image manipulation, digital painting, and graphic design.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-fluorescent-make-up_23-2148410092.jpg", imageAlt: "Adobe Photoshop icon"},
{
title: "Adobe Illustrator",
description: "Vector graphics, logo design, and scalable artwork.",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062924.jpg",
imageAlt: "Adobe Illustrator icon",
},
title: "Adobe Illustrator", description: "Vector graphics, logo design, and scalable artwork.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062924.jpg", imageAlt: "Adobe Illustrator icon"},
{
title: "Adobe Premiere Pro",
description: "Professional video editing, color grading, and audio mixing.",
imageSrc: "http://img.b2bpic.net/free-photo/streaky-light-patterns-black-surface-backdrop_23-2148055568.jpg",
imageAlt: "Adobe Premiere Pro icon",
},
title: "Adobe Premiere Pro", description: "Professional video editing, color grading, and audio mixing.", imageSrc: "http://img.b2bpic.net/free-photo/streaky-light-patterns-black-surface-backdrop_23-2148055568.jpg", imageAlt: "Adobe Premiere Pro icon"},
{
title: "CapCut",
description: "Mobile-first video editing, trendy effects, and social media optimization.",
imageSrc: "http://img.b2bpic.net/free-photo/remote-employee-talking-videoconference-call-with-supervisor-showing-graphs_482257-118519.jpg",
imageAlt: "CapCut icon",
},
title: "CapCut", description: "Mobile-first video editing, trendy effects, and social media optimization.", imageSrc: "http://img.b2bpic.net/free-photo/remote-employee-talking-videoconference-call-with-supervisor-showing-graphs_482257-118519.jpg", imageAlt: "CapCut icon"},
]}
title="My Toolkit"
description="Proficient in industry-standard software to deliver cutting-edge motion design and content creation."
@@ -294,7 +174,7 @@ export default function LandingPage() {
<TextAbout
useInvertedBackground={false}
title="About Zaki Benhacene"
description="Zaki Benhacene is a passionate Motion Designer and Content Creator with a unique vision for the future of digital media. Specializing in cyberpunk and futuristic aesthetics, Zaki combines technical prowess with artistic flair to produce visually stunning and engaging experiences. With a keen eye for detail and a commitment to innovation, Zaki transforms ideas into captivating motion graphics, compelling videos, and impactful social media content that stands out in a crowded digital landscape. From dynamic brand animations to immersive visual narratives, Zaki is dedicated to pushing creative boundaries and delivering premium results for every project."
/>
</div>
@@ -302,55 +182,20 @@ export default function LandingPage() {
<TestimonialCardSix
textboxLayout="default"
useInvertedBackground={false}
animationType="scale-rotate"
testimonials={[
{
id: "1",
name: "Aisha Rahman",
handle: "@TechVisionCEO",
testimonial: "Zaki's motion graphics brought our product launch to life! The cyberpunk aesthetic was exactly what we needed to capture attention.",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-walking-around-city-streets-admiring-urban-skyscrapers-streetlights-stylish-entrepreneur-promenade-young-classy-adult-strolling-near-town-center-handheld-shot_482257-74399.jpg",
imageAlt: "Aisha Rahman, TechVision CEO",
},
id: "1", name: "Aisha Rahman", handle: "@TechVisionCEO", testimonial: "Zaki's motion graphics brought our product launch to life! The cyberpunk aesthetic was exactly what we needed to capture attention.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-walking-around-city-streets-admiring-urban-skyscrapers-streetlights-stylish-entrepreneur-promenade-young-classy-adult-strolling-near-town-center-handheld-shot_482257-74399.jpg", imageAlt: "Aisha Rahman, TechVision CEO"},
{
id: "2",
name: "Marcus Thorne",
handle: "@InnovateMktg",
testimonial: "The video editing for our campaign was flawless. Zaki has an incredible eye for detail and delivered beyond expectations.",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-symbol-graphic-using-telephone_1134-1415.jpg",
imageAlt: "Marcus Thorne, Innovate Marketing Director",
},
id: "2", name: "Marcus Thorne", handle: "@InnovateMktg", testimonial: "The video editing for our campaign was flawless. Zaki has an incredible eye for detail and delivered beyond expectations.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-symbol-graphic-using-telephone_1134-1415.jpg", imageAlt: "Marcus Thorne, Innovate Marketing Director"},
{
id: "3",
name: "Lena Petrova",
handle: "@FutureForward",
testimonial: "Our social media engagement skyrocketed after Zaki created our new animated content. Truly visionary work!",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5105.jpg",
imageAlt: "Lena Petrova, FutureForward Founder",
},
id: "3", name: "Lena Petrova", handle: "@FutureForward", testimonial: "Our social media engagement skyrocketed after Zaki created our new animated content. Truly visionary work!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5105.jpg", imageAlt: "Lena Petrova, FutureForward Founder"},
{
id: "4",
name: "Javier Gomez",
handle: "@CreativeHub",
testimonial: "Zaki transformed our brand identity with stunning motion logos. The professional touch is evident in every detail.",
imageSrc: "http://img.b2bpic.net/free-photo/watercolor-hand-drawn-paint-stains-texture_1409-2633.jpg",
imageAlt: "Javier Gomez, CreativeHub Owner",
},
id: "4", name: "Javier Gomez", handle: "@CreativeHub", testimonial: "Zaki transformed our brand identity with stunning motion logos. The professional touch is evident in every detail.", imageSrc: "http://img.b2bpic.net/free-photo/watercolor-hand-drawn-paint-stains-texture_1409-2633.jpg", imageAlt: "Javier Gomez, CreativeHub Owner"},
{
id: "5",
name: "Sophia Chang",
handle: "@DigitalPulse",
testimonial: "Working with Zaki was an absolute pleasure. Their futuristic style and smooth animations are unmatched!",
imageSrc: "http://img.b2bpic.net/free-photo/man-analyzing-stock-market-charts-financial-data-electronic-board_169016-14895.jpg",
imageAlt: "Sophia Chang, DigitalPulse Social Media Manager",
},
id: "5", name: "Sophia Chang", handle: "@DigitalPulse", testimonial: "Working with Zaki was an absolute pleasure. Their futuristic style and smooth animations are unmatched!", imageSrc: "http://img.b2bpic.net/free-photo/man-analyzing-stock-market-charts-financial-data-electronic-board_169016-14895.jpg", imageAlt: "Sophia Chang, DigitalPulse Social Media Manager"},
{
id: "6",
name: "Ethan White",
handle: "@BrandArchitect",
testimonial: "The attention to detail and creative execution on our project was exceptional. Zaki is a true talent.",
imageSrc: "http://img.b2bpic.net/free-photo/holographic-purple-water-ripple-background-copy-space_53876-129681.jpg",
imageAlt: "Ethan White, Brand Architect Strategist",
},
id: "6", name: "Ethan White", handle: "@BrandArchitect", testimonial: "The attention to detail and creative execution on our project was exceptional. Zaki is a true talent.", imageSrc: "http://img.b2bpic.net/free-photo/holographic-purple-water-ripple-background-copy-space_53876-129681.jpg", imageAlt: "Ethan White, Brand Architect Strategist"},
]}
title="What Clients Say"
description="Hear from satisfied clients who have experienced the impact of my motion design and content creation."
@@ -362,14 +207,7 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechNova Corp.",
"Quantum Labs",
"Neon Dreams Studio",
"CyberCraft Media",
"Vortex Innovations",
"Aether Designs",
"Neuralink Dynamics",
]}
"TechNova Corp.", "Quantum Labs", "Neon Dreams Studio", "CyberCraft Media", "Vortex Innovations", "Aether Designs", "Neuralink Dynamics"]}
title="Trusted By"
description="Collaborating with leading brands and innovative startups."
/>
@@ -379,20 +217,15 @@ export default function LandingPage() {
<ContactCTA
useInvertedBackground={false}
background={{
variant: "glowing-orb",
}}
variant: "sparkles-gradient"}}
tag="Get in Touch"
title="Let's Create Something Amazing"
description="Ready to bring your vision to life? Contact me for collaborations, inquiries, or just to say hello!"
buttons={[
{
text: "Email Me",
href: "mailto:zaki@example.com",
},
text: "Email Me", href: "mailto:zaki@example.com"},
{
text: "WhatsApp",
href: "https://wa.me/1234567890",
},
text: "WhatsApp", href: "https://wa.me/1234567890"},
]}
/>
</div>
@@ -404,24 +237,16 @@ export default function LandingPage() {
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com/zakibenhacene",
ariaLabel: "Instagram",
},
href: "https://instagram.com/zakibenhacene", ariaLabel: "Instagram"},
{
icon: Film,
href: "https://tiktok.com/@zakibenhacene",
ariaLabel: "TikTok",
},
href: "https://tiktok.com/@zakibenhacene", ariaLabel: "TikTok"},
{
icon: Mail,
href: "mailto:zaki@example.com",
ariaLabel: "Email",
},
href: "mailto:zaki@example.com", ariaLabel: "Email"},
{
icon: Info,
href: "https://wa.me/1234567890",
ariaLabel: "WhatsApp",
},
href: "https://wa.me/1234567890", ariaLabel: "WhatsApp"},
]}
/>
</div>