Merge version_1 into main #1
195
src/app/page.tsx
195
src/app/page.tsx
@@ -30,26 +30,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "#work",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Work", id: "#work" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Youssef Motion"
|
||||
/>
|
||||
@@ -58,41 +43,20 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Motion That Moves Your Brand Forward"
|
||||
description="Video editing and motion design that transforms ideas into compelling visual stories. Watch Youssef's work speak for itself."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Portfolio",
|
||||
href: "#work",
|
||||
},
|
||||
text: "Explore Portfolio", href: "#work"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/computer-home-office-showing-program-converting-text-prompts-into-photos_482257-125010.jpg",
|
||||
imageAlt: "Modern video editing interface dark",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-art-made-from-3d-geometric-shapes_23-2150829317.jpg",
|
||||
imageAlt: "Abstract 3d geometric motion graphics",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-freelancer-calling-financial-expert-home-discuss-about-funds_482257-126245.jpg",
|
||||
imageAlt: "Video editor workspace dark mode",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happiness-delightful-smile-positivity-graphic-word_53876-21340.jpg",
|
||||
imageAlt: "Particle animation background dark",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-16075.jpg",
|
||||
imageAlt: "Filmmaking motion design abstract",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/whimsical-wild-animal-illustration_23-2151885399.jpg",
|
||||
imageAlt: "Cinematic title animation neon",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/computer-home-office-showing-program-converting-text-prompts-into-photos_482257-125010.jpg", imageAlt: "Modern video editing interface dark" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-art-made-from-3d-geometric-shapes_23-2150829317.jpg", imageAlt: "Abstract 3d geometric motion graphics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/male-freelancer-calling-financial-expert-home-discuss-about-funds_482257-126245.jpg", imageAlt: "Video editor workspace dark mode" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/happiness-delightful-smile-positivity-graphic-word_53876-21340.jpg", imageAlt: "Particle animation background dark" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-16075.jpg", imageAlt: "Filmmaking motion design abstract" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/whimsical-wild-animal-illustration_23-2151885399.jpg", imageAlt: "Cinematic title animation neon" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -118,48 +82,12 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Futuristic Brand Identity",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bright-neon-colors-illuminated-arrow_23-2151204956.jpg",
|
||||
imageAlt: "Futuristic brand identity design",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Commercial Ad Campaign",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/artisan-workshop_53876-30429.jpg",
|
||||
imageAlt: "Commercial video production case study",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Corporate Animation Sequence",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-people-walking-office_23-2147626575.jpg",
|
||||
imageAlt: "Corporate animation motion graphics",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Social Media Motion Kit",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hipster-young-illustrator-artist-black-simple-tshirt-creates-authentic-unique-hand-lettering-drawing-his-bright-industrial-studio_346278-350.jpg",
|
||||
imageAlt: "Social media motion graphics showcase",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Cinematic Title Sequence",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cinema-concept-with-reel_23-2147989007.jpg",
|
||||
imageAlt: "Cinematic trailer motion sequence",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Brand Identity Motion",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-teen-skateboard_23-2149446856.jpg",
|
||||
imageAlt: "Minimalist brand identity animation",
|
||||
},
|
||||
{ id: "1", name: "Futuristic Brand Identity", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/bright-neon-colors-illuminated-arrow_23-2151204956.jpg", imageAlt: "Futuristic brand identity design" },
|
||||
{ id: "2", name: "Commercial Ad Campaign", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/artisan-workshop_53876-30429.jpg", imageAlt: "Commercial video production case study" },
|
||||
{ id: "3", name: "Corporate Animation Sequence", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/business-people-walking-office_23-2147626575.jpg", imageAlt: "Corporate animation motion graphics" },
|
||||
{ id: "4", name: "Social Media Motion Kit", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/hipster-young-illustrator-artist-black-simple-tshirt-creates-authentic-unique-hand-lettering-drawing-his-bright-industrial-studio_346278-350.jpg", imageAlt: "Social media motion graphics showcase" },
|
||||
{ id: "5", name: "Cinematic Title Sequence", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/cinema-concept-with-reel_23-2147989007.jpg", imageAlt: "Cinematic trailer motion sequence" },
|
||||
{ id: "6", name: "Brand Identity Motion", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-teen-skateboard_23-2149446856.jpg", imageAlt: "Minimalist brand identity animation" },
|
||||
]}
|
||||
title="Selected Projects"
|
||||
description="A curated collection of my most impactful motion designs and video editing work."
|
||||
@@ -173,27 +101,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
title: "Projects Completed",
|
||||
description: "Across diverse global industries",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "2M+",
|
||||
title: "Views Generated",
|
||||
description: "For client social media campaigns",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "50+",
|
||||
title: "Happy Clients",
|
||||
description: "Long-term partnerships and collaborations",
|
||||
icon: Smile,
|
||||
},
|
||||
{ id: "m1", value: "150+", title: "Projects Completed", description: "Across diverse global industries", icon: Zap },
|
||||
{ id: "m2", value: "2M+", title: "Views Generated", description: "For client social media campaigns", icon: TrendingUp },
|
||||
{ id: "m3", value: "50+", title: "Happy Clients", description: "Long-term partnerships and collaborations", icon: Smile },
|
||||
]}
|
||||
title="Impact by Numbers"
|
||||
description="Data-driven results for every frame I craft."
|
||||
@@ -202,50 +112,16 @@ export default function LandingPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Creative Director",
|
||||
company: "Studio X",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-readheah-bearded-man-white-tshirt-with-headphones_171337-7843.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Chen",
|
||||
role: "Marketing Manager",
|
||||
company: "Growth Hub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-smiling-looking-camera-successful-confident-grey-haired-manager-sitting-office-room-workplace-business-management-concept_74855-7343.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Founder",
|
||||
company: "NextGen Tech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-home_23-2150062545.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Mark Johnson",
|
||||
role: "Brand Lead",
|
||||
company: "Vivid Ads",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-lovely-woman-with-long-light-brown-hair-big-blue-eyes-smiles-outdoors_291650-335.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica Lee",
|
||||
role: "Content Director",
|
||||
company: "Media Peak",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-hipster-male-blue-fleece-shirt-jeans-holds-smartphone-while-sitting-wooden-stool-studio-with-loft-interior_613910-18985.jpg",
|
||||
},
|
||||
{ id: "1", name: "Sarah Miller", role: "Creative Director", company: "Studio X", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-readheah-bearded-man-white-tshirt-with-headphones_171337-7843.jpg" },
|
||||
{ id: "2", name: "David Chen", role: "Marketing Manager", company: "Growth Hub", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-smiling-looking-camera-successful-confident-grey-haired-manager-sitting-office-room-workplace-business-management-concept_74855-7343.jpg" },
|
||||
{ id: "3", name: "Elena Rodriguez", role: "Founder", company: "NextGen Tech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-home_23-2150062545.jpg" },
|
||||
{ id: "4", name: "Mark Johnson", role: "Brand Lead", company: "Vivid Ads", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-lovely-woman-with-long-light-brown-hair-big-blue-eyes-smiles-outdoors_291650-335.jpg" },
|
||||
{ id: "5", name: "Jessica Lee", role: "Content Director", company: "Media Peak", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-hipster-male-blue-fleece-shirt-jeans-holds-smartphone-while-sitting-wooden-stool-studio-with-loft-interior_613910-18985.jpg" },
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What my partners say about my work."
|
||||
@@ -256,14 +132,11 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
text="Ready to bring your vision to life? Let's discuss your next project."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "mailto:hello@youssef-motion.com",
|
||||
},
|
||||
text: "Contact Me", href: "mailto:hello@youssef-motion.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -272,13 +145,9 @@ export default function LandingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="Youssef Motion"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "© 2024 Youssef. All rights reserved.",
|
||||
href: "#",
|
||||
}}
|
||||
text: "© 2024 Youssef. All rights reserved.", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user