diff --git a/src/app/page.tsx b/src/app/page.tsx
index 86c4e3b..ec48c86 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -32,39 +32,23 @@ export default function LandingPage() {
@@ -76,40 +60,26 @@ export default function LandingPage() {
tag="Elevating Brands Through Motion"
buttons={[
{
- text: "View Portfolio",
- href: "#portfolio",
- },
+ text: "View Portfolio", href: "#portfolio"},
{
- text: "Contact Me",
- href: "#contact",
- },
+ text: "Contact Me", href: "#contact"},
]}
- imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3F2D1DLgkvWmtbWuRZDEwxKECts/uploaded-1781264309948-krvag3hc.png?_wi=1"
+ imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3F2D1DLgkvWmtbWuRZDEwxKECts/uploaded-1781264309948-krvag3hc.png"
imageAlt="Zaki Benhacene professional avatar silhouette"
showDimOverlay={true}
showBlur={true}
textPosition="bottom"
avatars={[
{
- src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3F2D1DLgkvWmtbWuRZDEwxKECts/uploaded-1781264309948-krvag3hc.png",
- alt: "Zaki Benhacene avatar",
- },
+ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3F2D1DLgkvWmtbWuRZDEwxKECts/uploaded-1781264309948-krvag3hc.png", alt: "Zaki Benhacene avatar"},
{
- src: "http://img.b2bpic.net/free-photo/man-blurred-curtain-front-view_23-2148331837.jpg",
- alt: "Professional business executive avatar, modern, slightly cyberpunk style",
- },
+ src: "http://img.b2bpic.net/free-photo/man-blurred-curtain-front-view_23-2148331837.jpg", alt: "Professional business executive avatar, modern, slightly cyberpunk style"},
{
- src: "http://img.b2bpic.net/free-photo/girl-portrait-with-stylish-blue-hair-pretty-face-expression_158595-4341.jpg",
- alt: "Creative director avatar, artistic, slightly cyberpunk style",
- },
+ src: "http://img.b2bpic.net/free-photo/girl-portrait-with-stylish-blue-hair-pretty-face-expression_158595-4341.jpg", alt: "Creative director avatar, artistic, slightly cyberpunk style"},
{
- src: "http://img.b2bpic.net/free-photo/front-view-old-man-indoors_23-2151038764.jpg",
- alt: "Marketing manager avatar, dynamic, slightly cyberpunk style",
- },
+ src: "http://img.b2bpic.net/free-photo/front-view-old-man-indoors_23-2151038764.jpg", alt: "Marketing manager avatar, dynamic, slightly cyberpunk style"},
{
- src: "http://img.b2bpic.net/free-photo/woman-wearing-smart-glasses-futuristic-technology-digital-remix_53876-104248.jpg",
- alt: "Startup founder avatar, ambitious, slightly cyberpunk style",
- },
+ src: "http://img.b2bpic.net/free-photo/woman-wearing-smart-glasses-futuristic-technology-digital-remix_53876-104248.jpg", alt: "Startup founder avatar, ambitious, slightly cyberpunk style"},
]}
avatarText="Trusted by visionary brands"
/>
@@ -123,7 +93,7 @@ export default function LandingPage() {
description="I'm Zaki Benhacene, a passionate Motion Designer dedicated to crafting compelling visual narratives. My expertise lies in transforming static concepts into dynamic experiences that captivate audiences."
subdescription="Specializing in Kinetic Typography, UI Animation, Brand Visuals, and engaging Social Media Content, I combine creativity with technical prowess to deliver high-impact motion graphics that speak volumes about your brand."
icon={Sparkles}
- imageSrc="http://img.b2bpic.net/free-photo/smiling-media-star-doing-technology-review-wireless-portable-speaker_482257-116468.jpg?_wi=1"
+ imageSrc="http://img.b2bpic.net/free-photo/smiling-media-star-doing-technology-review-wireless-portable-speaker_482257-116468.jpg"
imageAlt="Motion graphics designer working on a glowing screen with cyberpunk aesthetics"
mediaAnimation="slide-up"
/>
@@ -136,90 +106,50 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
- title: "Motion Graphics",
- description: "Dynamic visual storytelling through animation, bringing your concepts to life with fluid movement and impactful effects.",
- icon: Video,
+ title: "Motion Graphics", description: "Dynamic visual storytelling through animation, bringing your concepts to life with fluid movement and impactful effects.", icon: Video,
mediaItems: [
{
- imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212565.jpg",
- imageAlt: "Abstract motion graphics background with flowing neon lines",
- },
+ imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212565.jpg", imageAlt: "Abstract motion graphics background with flowing neon lines"},
{
- imageSrc: "http://img.b2bpic.net/free-photo/cool-futuristic-background-with-golden-flashing-lights_181624-10519.jpg",
- imageAlt: "Dynamic animation of particles and light streams",
- },
- ],
- imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3F2D1DLgkvWmtbWuRZDEwxKECts/uploaded-1781264309948-krvag3hc.png?_wi=2",
- imageAlt: "Abstract motion graphics background with flowing neon lines",
+ imageSrc: "http://img.b2bpic.net/free-photo/cool-futuristic-background-with-golden-flashing-lights_181624-10519.jpg", imageAlt: "Dynamic animation of particles and light streams"},
+ ]
},
{
- title: "Kinetic Typography",
- description: "Animating text to create engaging and expressive messages, enhancing readability and visual appeal for your content.",
- icon: Type,
+ title: "Kinetic Typography", description: "Animating text to create engaging and expressive messages, enhancing readability and visual appeal for your content.", icon: Type,
mediaItems: [
{
- imageSrc: "http://img.b2bpic.net/free-photo/bright-light-painting-background_23-2149679107.jpg",
- imageAlt: "Kinetic typography example with glitch effects",
- },
+ imageSrc: "http://img.b2bpic.net/free-photo/bright-light-painting-background_23-2149679107.jpg", imageAlt: "Kinetic typography example with glitch effects"},
{
- imageSrc: "http://img.b2bpic.net/free-photo/model-shooting-with-projector-side-view_23-2149424967.jpg",
- imageAlt: "Close-up of animated text with electric violet glow",
- },
- ],
- imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301549.jpg",
- imageAlt: "Abstract motion graphics background with flowing neon lines",
+ imageSrc: "http://img.b2bpic.net/free-photo/model-shooting-with-projector-side-view_23-2149424967.jpg", imageAlt: "Close-up of animated text with electric violet glow"},
+ ]
},
{
- title: "Video Editing",
- description: "Crafting polished video content, from raw footage to final output, with professional cuts, transitions, and color grading.",
- icon: Film,
+ title: "Video Editing", description: "Crafting polished video content, from raw footage to final output, with professional cuts, transitions, and color grading.", icon: Film,
mediaItems: [
{
- imageSrc: "http://img.b2bpic.net/free-photo/videographer-work-media-agency-office-ready-start-color-correcting_482257-121786.jpg",
- imageAlt: "Video editing timeline interface with cinematic cuts",
- },
+ imageSrc: "http://img.b2bpic.net/free-photo/videographer-work-media-agency-office-ready-start-color-correcting_482257-121786.jpg", imageAlt: "Video editing timeline interface with cinematic cuts"},
{
- imageSrc: "http://img.b2bpic.net/free-photo/photography-negative-background_23-2148133197.jpg",
- imageAlt: "Dynamic montage of film clips with seamless transitions",
- },
- ],
- imageSrc: "http://img.b2bpic.net/free-photo/smiling-media-star-doing-technology-review-wireless-portable-speaker_482257-116468.jpg?_wi=2",
- imageAlt: "Abstract motion graphics background with flowing neon lines",
+ imageSrc: "http://img.b2bpic.net/free-photo/photography-negative-background_23-2148133197.jpg", imageAlt: "Dynamic montage of film clips with seamless transitions"},
+ ]
},
{
- title: "Social Media Ads",
- description: "Designing eye-catching animated advertisements optimized for various social platforms to boost engagement and conversions.",
- icon: Bell,
+ title: "Social Media Ads", description: "Designing eye-catching animated advertisements optimized for various social platforms to boost engagement and conversions.", icon: Bell,
mediaItems: [
{
- imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349304.jpg",
- imageAlt: "Social media ad design with animated graphic",
- },
+ imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349304.jpg", imageAlt: "Social media ad design with animated graphic"},
{
- imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489794.jpg",
- imageAlt: "Short engaging animation for an Instagram story",
- },
- ],
- imageSrc: "http://img.b2bpic.net/free-vector/legend-editable-text-effect-editable-prime-hero-text-style_314614-5825.jpg?_wi=1",
- imageAlt: "Abstract motion graphics background with flowing neon lines",
+ imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489794.jpg", imageAlt: "Short engaging animation for an Instagram story"},
+ ]
},
{
- title: "UI Animations",
- description: "Creating intuitive and delightful user interface animations that improve user experience and bring your digital products to life.",
- icon: Layers,
+ title: "UI Animations", description: "Creating intuitive and delightful user interface animations that improve user experience and bring your digital products to life.", icon: Layers,
mediaItems: [
{
- imageSrc: "http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-8589.jpg",
- imageAlt: "UI animation example with glassmorphism",
- },
+ imageSrc: "http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-8589.jpg", imageAlt: "UI animation example with glassmorphism"},
{
- imageSrc: "asset://service-item-5-media-2",
- imageAlt: "Interactive UI elements showcasing micro-interactions",
- },
- ],
- imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=he6aiy&_wi=1",
- imageAlt: "Abstract motion graphics background with flowing neon lines",
- },
+ imageSrc: "http://img.b2bpic.net/free-photo/dark-background-with-purple-blue-light-leaks_474888-8051.jpg", imageAlt: "Interactive UI elements showcasing micro-interactions"},
+ ]
+ }
]}
title="Services I Offer"
description="Delivering bespoke motion design solutions that elevate your brand's presence and engage your target audience with unforgettable visuals."
@@ -235,65 +165,23 @@ export default function LandingPage() {
useInvertedBackground={true}
products={[
{
- id: "p1",
- brand: "Kinetic Typography",
- name: "Urban Flow",
- price: "View Project",
- rating: 5,
- reviewCount: "Dynamic Text Animation",
- imageSrc: "http://img.b2bpic.net/free-vector/legend-editable-text-effect-editable-prime-hero-text-style_314614-5825.jpg?_wi=2",
- imageAlt: "Kinetic Typography project thumbnail",
- },
+ id: "p1", brand: "Kinetic Typography", name: "Urban Flow", price: "View Project", rating: 5,
+ reviewCount: "Dynamic Text Animation", imageSrc: "http://img.b2bpic.net/free-vector/legend-editable-text-effect-editable-prime-hero-text-style_314614-5825.jpg", imageAlt: "Kinetic Typography project thumbnail"},
{
- id: "p2",
- brand: "UI Animation",
- name: "Quantum Interface",
- price: "View Project",
- rating: 5,
- reviewCount: "Sleek UX Transitions",
- imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=he6aiy&_wi=2",
- imageAlt: "UI Animation project thumbnail",
- },
+ id: "p2", brand: "UI Animation", name: "Quantum Interface", price: "View Project", rating: 5,
+ reviewCount: "Sleek UX Transitions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=he6aiy", imageAlt: "UI Animation project thumbnail"},
{
- id: "p3",
- brand: "Brand Visuals",
- name: "Aether Branding",
- price: "View Project",
- rating: 5,
- reviewCount: "Futuristic Logo Reveal",
- imageSrc: "http://img.b2bpic.net/free-photo/man-developing-photos-high-angle_23-2149893795.jpg",
- imageAlt: "Brand Visuals project thumbnail",
- },
+ id: "p3", brand: "Brand Visuals", name: "Aether Branding", price: "View Project", rating: 5,
+ reviewCount: "Futuristic Logo Reveal", imageSrc: "http://img.b2bpic.net/free-photo/man-developing-photos-high-angle_23-2149893795.jpg", imageAlt: "Brand Visuals project thumbnail"},
{
- id: "p4",
- brand: "Social Media",
- name: "Pulse Ads",
- price: "View Project",
- rating: 5,
- reviewCount: "Engaging Animated Ads",
- imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-bitcoin-illustration_23-2151611160.jpg",
- imageAlt: "Social Media Ads project thumbnail",
- },
+ id: "p4", brand: "Social Media", name: "Pulse Ads", price: "View Project", rating: 5,
+ reviewCount: "Engaging Animated Ads", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-bitcoin-illustration_23-2151611160.jpg", imageAlt: "Social Media Ads project thumbnail"},
{
- id: "p5",
- brand: "Video Editing",
- name: "Cinematic Cuts",
- price: "View Project",
- rating: 5,
- reviewCount: "Dynamic Editing Reel",
- imageSrc: "http://img.b2bpic.net/free-photo/abstract-optical-laser-wallpaper_23-2149116245.jpg",
- imageAlt: "Video Editing project thumbnail",
- },
+ id: "p5", brand: "Video Editing", name: "Cinematic Cuts", price: "View Project", rating: 5,
+ reviewCount: "Dynamic Editing Reel", imageSrc: "http://img.b2bpic.net/free-photo/abstract-optical-laser-wallpaper_23-2149116245.jpg", imageAlt: "Video Editing project thumbnail"},
{
- id: "p6",
- brand: "Experimental",
- name: "Nebula Flow",
- price: "View Project",
- rating: 5,
- reviewCount: "Abstract Motion Art",
- imageSrc: "http://img.b2bpic.net/free-photo/foam-red-pigment-water_23-2147798280.jpg",
- imageAlt: "Experimental Motion project thumbnail",
- },
+ id: "p6", brand: "Experimental", name: "Nebula Flow", price: "View Project", rating: 5,
+ reviewCount: "Abstract Motion Art", imageSrc: "http://img.b2bpic.net/free-photo/foam-red-pigment-water_23-2147798280.jpg", imageAlt: "Experimental Motion project thumbnail"},
]}
title="Portfolio Showcase"
description="Explore a curated collection of my motion design projects, demonstrating a range of styles from high-energy kinetic typography to sleek UI animations. Each project tells a unique visual story."
@@ -309,39 +197,19 @@ export default function LandingPage() {
useInvertedBackground={false}
metrics={[
{
- id: "s1",
- value: "Expert",
- title: "Adobe After Effects",
- description: "Mastery in motion graphics, visual effects, and animation.",
- icon: Layers,
+ id: "s1", value: "Expert", title: "Adobe After Effects", description: "Mastery in motion graphics, visual effects, and animation.", icon: Layers,
},
{
- id: "s2",
- value: "Advanced",
- title: "Adobe Premiere Pro",
- description: "Skilled in professional video editing, color grading, and audio sync.",
- icon: Film,
+ id: "s2", value: "Advanced", title: "Adobe Premiere Pro", description: "Skilled in professional video editing, color grading, and audio sync.", icon: Film,
},
{
- id: "s3",
- value: "Proficient",
- title: "Adobe Photoshop",
- description: "Strong capabilities in image manipulation, compositing, and graphic design.",
- icon: Palette,
+ id: "s3", value: "Proficient", title: "Adobe Photoshop", description: "Strong capabilities in image manipulation, compositing, and graphic design.", icon: Palette,
},
{
- id: "s4",
- value: "Capable",
- title: "Adobe Illustrator",
- description: "Adept in vector graphics, logo design, and illustration for animation assets.",
- icon: Edit,
+ id: "s4", value: "Capable", title: "Adobe Illustrator", description: "Adept in vector graphics, logo design, and illustration for animation assets.", icon: Edit,
},
{
- id: "s5",
- value: "Versatile",
- title: "Figma",
- description: "Experienced in UI/UX prototyping, interaction design, and collaborative workflows.",
- icon: Feather,
+ id: "s5", value: "Versatile", title: "Figma", description: "Experienced in UI/UX prototyping, interaction design, and collaborative workflows.", icon: Feather,
},
]}
title="Skills & Software"
@@ -357,47 +225,17 @@ export default function LandingPage() {
useInvertedBackground={true}
testimonials={[
{
- id: "t1",
- name: "Sarah Johnson",
- handle: "@sarahj.design",
- testimonial: "Zaki's work transformed our brand's social media presence. The kinetic typography was beyond impressive and truly made our content stand out. A true motion design visionary!",
- imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-futuristic-portrait_23-2151178951.jpg",
- },
+ id: "t1", name: "Sarah Johnson", handle: "@sarahj.design", testimonial: "Zaki's work transformed our brand's social media presence. The kinetic typography was beyond impressive and truly made our content stand out. A true motion design visionary!", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-futuristic-portrait_23-2151178951.jpg"},
{
- id: "t2",
- name: "Michael Chen",
- handle: "@m_chen_films",
- testimonial: "Working with Zaki on our latest video project was a breeze. His UI animations were seamless, adding a layer of polish we didn't think was possible. Highly recommend his expertise!",
- imageSrc: "http://img.b2bpic.net/free-photo/neon-portrait-man-wearing-glasses_158595-7929.jpg",
- },
+ id: "t2", name: "Michael Chen", handle: "@m_chen_films", testimonial: "Working with Zaki on our latest video project was a breeze. His UI animations were seamless, adding a layer of polish we didn't think was possible. Highly recommend his expertise!", imageSrc: "http://img.b2bpic.net/free-photo/neon-portrait-man-wearing-glasses_158595-7929.jpg"},
{
- id: "t3",
- name: "Emily Rodriguez",
- handle: "@emily.marketing",
- testimonial: "The motion graphics Zaki created for our campaign were a game-changer. His ability to tell a story through animation is exceptional, captivating our audience from the first second.",
- imageSrc: "http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038217.jpg",
- },
+ id: "t3", name: "Emily Rodriguez", handle: "@emily.marketing", testimonial: "The motion graphics Zaki created for our campaign were a game-changer. His ability to tell a story through animation is exceptional, captivating our audience from the first second.", imageSrc: "http://img.b2bpic.net/free-photo/door-leading-magical-world_23-2151038217.jpg"},
{
- id: "t4",
- name: "David Kim",
- handle: "@davek.tech",
- testimonial: "Zaki’s attention to detail in our app's UI animations was incredible. He brought a level of sophistication and fluidity that enhanced the entire user experience. Fantastic work!",
- imageSrc: "http://img.b2bpic.net/free-photo/blue-blurred-shapes-background_1017-3749.jpg",
- },
+ id: "t4", name: "David Kim", handle: "@davek.tech", testimonial: "Zaki’s attention to detail in our app's UI animations was incredible. He brought a level of sophistication and fluidity that enhanced the entire user experience. Fantastic work!", imageSrc: "http://img.b2bpic.net/free-photo/blue-blurred-shapes-background_1017-3749.jpg"},
{
- id: "t5",
- name: "Jessica Lee",
- handle: "@jessica.brands",
- testimonial: "From concept to final delivery, Zaki demonstrated unparalleled skill in brand visuals. The animated logo he designed perfectly encapsulated our vision, radiating professionalism and innovation.",
- imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
- },
+ id: "t5", name: "Jessica Lee", handle: "@jessica.brands", testimonial: "From concept to final delivery, Zaki demonstrated unparalleled skill in brand visuals. The animated logo he designed perfectly encapsulated our vision, radiating professionalism and innovation.", imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg"},
{
- id: "t6",
- name: "Omar Hassan",
- handle: "@hassan_dev",
- testimonial: "The video editing work for our explainer video was flawless. Zaki took our raw footage and turned it into a dynamic, engaging piece that exceeded all expectations. Truly gifted!",
- imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5104.jpg",
- },
+ id: "t6", name: "Omar Hassan", handle: "@hassan_dev", testimonial: "The video editing work for our explainer video was flawless. Zaki took our raw footage and turned it into a dynamic, engaging piece that exceeded all expectations. Truly gifted!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5104.jpg"},
]}
title="Client Testimonials"
description="Hear from satisfied clients about their experience working with me and the impact of my motion design on their projects."
@@ -409,18 +247,13 @@ export default function LandingPage() {
@@ -433,53 +266,33 @@ export default function LandingPage() {
{
items: [
{
- label: "Home",
- href: "#hero",
- },
+ label: "Home", href: "#hero"},
{
- label: "About Me",
- href: "#about",
- },
+ label: "About Me", href: "#about"},
{
- label: "Services",
- href: "#services",
- },
+ label: "Services", href: "#services"},
{
- label: "Portfolio",
- href: "#portfolio",
- },
+ label: "Portfolio", href: "#portfolio"},
],
},
{
items: [
{
- label: "Skills",
- href: "#skills",
- },
+ label: "Skills", href: "#skills"},
{
- label: "Testimonials",
- href: "#testimonials",
- },
+ label: "Testimonials", href: "#testimonials"},
{
- label: "Contact",
- href: "#contact",
- },
+ label: "Contact", href: "#contact"},
],
},
{
items: [
{
- label: "Instagram",
- href: "https://www.instagram.com/zaki_benhacene_css",
- },
+ label: "Instagram", href: "https://www.instagram.com/zaki_benhacene_css"},
{
- label: "Email",
- href: "mailto:zaki.benhacene@example.com",
- },
+ label: "Email", href: "mailto:zaki.benhacene@example.com"},
{
- label: "LinkedIn",
- href: "#",
- },
+ label: "LinkedIn", href: "#"},
],
},
]}