Merge version_1 into main #2
335
src/app/page.tsx
335
src/app/page.tsx
@@ -32,39 +32,23 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About Me",
|
||||
id: "about",
|
||||
},
|
||||
name: "About Me", 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"},
|
||||
]}
|
||||
brandName="ZAKI BENHACENE"
|
||||
button={{
|
||||
text: "Get In Touch",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Get In Touch", href: "#contact"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
@@ -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() {
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-animated-grid",
|
||||
}}
|
||||
variant: "rotated-rays-animated-grid"}}
|
||||
text="Ready to bring your ideas to life with high-impact motion graphics? Let's connect and create something extraordinary."
|
||||
buttons={[
|
||||
{
|
||||
text: "Email Me",
|
||||
href: "mailto:zaki.benhacene@example.com",
|
||||
},
|
||||
text: "Email Me", href: "mailto:zaki.benhacene@example.com"},
|
||||
{
|
||||
text: "Follow on Instagram",
|
||||
href: "https://www.instagram.com/zaki_benhacene_css",
|
||||
},
|
||||
text: "Follow on Instagram", href: "https://www.instagram.com/zaki_benhacene_css"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -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: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user