bender/c1597aba-76d1-45a7-9655-756d1d62e824
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-10 09:07:29 +00:00
parent 984e60130f
commit 6dbea35ef2
1 changed files with 57 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/app/page.tsx
View File

@@ -29,25 +29,15 @@ export default function LandingPage() {
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
name: "Home", id: "/"},
{
name: "About Me",
id: "/about",
},
name: "About Me", id: "/about"},
{
name: "Projects",
id: "/projects",
},
name: "Projects", id: "/projects"},
{
name: "Blog",
id: "/blog",
},
name: "Blog", id: "/blog"},
{
name: "Contact Us",
id: "/contact",
},
name: "Contact Us", id: "/contact"},
]}
brandName="My Portfolio"
bottomLeftText="Motion Design Portfolio"
@@ -61,73 +51,39 @@ export default function LandingPage() {
description="Bringing ideas to life with seamless motion and captivating UI design."
testimonials={[
{
name: "Sarah Chen",
handle: "@TechInnovate",
testimonial: "Their motion design transformed our app, making it truly intuitive and delightful for users. Exceeded all expectations!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-black-t-shirt-happy-excited-showing-thumbs-up-standing-green-wall_141793-81905.jpg",
},
name: "Sarah Chen", handle: "@TechInnovate", testimonial: "Their motion design transformed our app, making it truly intuitive and delightful for users. Exceeded all expectations!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-black-t-shirt-happy-excited-showing-thumbs-up-standing-green-wall_141793-81905.jpg"},
{
name: "David Lee",
handle: "@CreativeStudio",
testimonial: "An incredible talent! The animations brought a new level of sophistication to our brand identity project. Highly recommend.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
},
name: "David Lee", handle: "@CreativeStudio", testimonial: "An incredible talent! The animations brought a new level of sophistication to our brand identity project. Highly recommend.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg"},
{
name: "Emily White",
handle: "@GrowthMarketer",
testimonial: "The UI animations significantly boosted user engagement and conversions on our platform. A true expert in the field.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/photographer-fixing-overexposed-pictures-desktop-computer_482257-104114.jpg",
},
name: "Emily White", handle: "@GrowthMarketer", testimonial: "The UI animations significantly boosted user engagement and conversions on our platform. A true expert in the field.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/photographer-fixing-overexposed-pictures-desktop-computer_482257-104114.jpg"},
{
name: "Michael Brown",
handle: "@ProductLaunch",
testimonial: "Responsive, creative, and a pleasure to work with. Our product launch video's motion graphics were outstanding.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/glad-hipster-guy-wears-glasses-has-gentle-smile-face-reads-good-news-newspaper-spare-time-waits-order-cafeteria-fond-press-handsome-man-interested-fresh-events-country_273609-29256.jpg",
},
name: "Michael Brown", handle: "@ProductLaunch", testimonial: "Responsive, creative, and a pleasure to work with. Our product launch video's motion graphics were outstanding.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/glad-hipster-guy-wears-glasses-has-gentle-smile-face-reads-good-news-newspaper-spare-time-waits-order-cafeteria-fond-press-handsome-man-interested-fresh-events-country_273609-29256.jpg"},
{
name: "Jessica Green",
handle: "@DesignForward",
testimonial: "Consistently delivers top-tier motion design that aligns perfectly with our vision. A valuable partner for any project.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-business-people-have-talk-coffee-break-office_93675-133587.jpg",
},
name: "Jessica Green", handle: "@DesignForward", testimonial: "Consistently delivers top-tier motion design that aligns perfectly with our vision. A valuable partner for any project.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-business-people-have-talk-coffee-break-office_93675-133587.jpg"},
{
name: "Daniel Kim",
handle: "@StartupSpark",
testimonial: "From concept to execution, the animation work was flawless, creating a truly memorable user journey for our MVP.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-glasses-freelancer-sitting-cafe-with-laptop-drinking-coffee-pointing-fingers_1258-314116.jpg",
},
name: "Daniel Kim", handle: "@StartupSpark", testimonial: "From concept to execution, the animation work was flawless, creating a truly memorable user journey for our MVP.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-glasses-freelancer-sitting-cafe-with-laptop-drinking-coffee-pointing-fingers_1258-314116.jpg"},
]}
tagAnimation="slide-up"
buttonAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
alt: "Client 1",
},
src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg", alt: "Client 1"},
{
src: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg",
alt: "Client 2",
},
src: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg", alt: "Client 2"},
{
src: "http://img.b2bpic.net/free-photo/user-profile-front-side-with-white-background_187299-40009.jpg",
alt: "Client 3",
},
src: "http://img.b2bpic.net/free-photo/user-profile-front-side-with-white-background_187299-40009.jpg", alt: "Client 3"},
{
src: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-633413.jpg",
alt: "Client 4",
},
src: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-633413.jpg", alt: "Client 4"},
{
src: "http://img.b2bpic.net/free-photo/elegant-young-businesswoman-posing_329181-11490.jpg",
alt: "Client 5",
},
src: "http://img.b2bpic.net/free-photo/elegant-young-businesswoman-posing_329181-11490.jpg", alt: "Client 5"},
]}
imageSrc="http://img.b2bpic.net/free-photo/colorful-bubbles-cyan-background_23-2148205192.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/colorful-bubbles-cyan-background_23-2148205192.jpg"
imageAlt="Abstract UI motion design background"
/>
</div>
@@ -139,20 +95,11 @@ export default function LandingPage() {
description="I specialize in creating fluid animations and responsive user interfaces that elevate the digital experience."
accordionItems={[
{
id: "f1",
title: "Advanced UI/UX Animation",
content: "Crafting pixel-perfect animations that guide users and enhance usability across all devices.",
},
id: "f1", title: "Advanced UI/UX Animation", content: "Crafting pixel-perfect animations that guide users and enhance usability across all devices."},
{
id: "f2",
title: "Responsive Cross-Platform UI",
content: "Designing and implementing adaptive interfaces that look and perform beautifully on any screen size or operating system.",
},
id: "f2", title: "Responsive Cross-Platform UI", content: "Designing and implementing adaptive interfaces that look and perform beautifully on any screen size or operating system."},
{
id: "f3",
title: "Brand-Centric Visual Storytelling",
content: "Transforming brand narratives into compelling visual journeys through dynamic motion graphics and interactive elements.",
},
id: "f3", title: "Brand-Centric Visual Storytelling", content: "Transforming brand narratives into compelling visual journeys through dynamic motion graphics and interactive elements."},
]}
imageSrc="http://img.b2bpic.net/free-photo/light-leak-overlay-effect-with-blur-blue-light-leak-noisy-retro-film_474888-8016.jpg"
imageAlt="Motion graphic UI animation showcase"
@@ -166,14 +113,7 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"Tech Solutions Inc.",
"Creative Minds Studio",
"Digital Growth Agency",
"Innovate Ventures",
"Pixel Perfect Corp.",
"Global Design Hub",
"FutureTech Partners",
]}
"Tech Solutions Inc.", "Creative Minds Studio", "Digital Growth Agency", "Innovate Ventures", "Pixel Perfect Corp.", "Global Design Hub", "FutureTech Partners"]}
title="Trusted by Leading Brands"
description="Collaborating with innovative companies to bring their digital visions to life through exceptional motion and UI design."
speed={60}
@@ -187,59 +127,28 @@ export default function LandingPage() {
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Alex Johnson",
role: "CEO",
company: "InnovateX",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-caucasian-woman-showing-thumbs-up-approval-smiling-pleased-like-praise-s_1258-146590.jpg",
},
id: "t1", name: "Alex Johnson", role: "CEO", company: "InnovateX", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-caucasian-woman-showing-thumbs-up-approval-smiling-pleased-like-praise-s_1258-146590.jpg"},
{
id: "t2",
name: "Maria Rodriguez",
role: "Head of Product",
company: "Dynamic Apps",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3571.jpg",
},
id: "t2", name: "Maria Rodriguez", role: "Head of Product", company: "Dynamic Apps", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3571.jpg"},
{
id: "t3",
name: "Ben Carter",
role: "Marketing Director",
company: "VisualBrand",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/focused-videographer-producer-working-movie-production-editing-film-design_482257-19397.jpg",
},
id: "t3", name: "Ben Carter", role: "Marketing Director", company: "VisualBrand", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/focused-videographer-producer-working-movie-production-editing-film-design_482257-19397.jpg"},
{
id: "t4",
name: "Sophia Lee",
role: "Lead UX Designer",
company: "UserFlow Studio",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149346504.jpg",
},
id: "t4", name: "Sophia Lee", role: "Lead UX Designer", company: "UserFlow Studio", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149346504.jpg"},
{
id: "t5",
name: "Omar Hassan",
role: "CTO",
company: "Quantum Solutions",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/interracial-group-young-hipsters-using-modern-gadgets-coffee-shop-business-friendship-startup-teamwork-coworking-process-concept_273609-648.jpg",
},
id: "t5", name: "Omar Hassan", role: "CTO", company: "Quantum Solutions", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/interracial-group-young-hipsters-using-modern-gadgets-coffee-shop-business-friendship-startup-teamwork-coworking-process-concept_273609-648.jpg"},
]}
kpiItems={[
{
value: "99%",
label: "Client Satisfaction",
},
value: "99%", label: "Client Satisfaction"},
{
value: "500+",
label: "Projects Delivered",
},
value: "500+", label: "Projects Delivered"},
{
value: "10+",
label: "Years Experience",
},
value: "10+", label: "Years Experience"},
]}
title="Hear From My Valued Clients"
description="Discover how my motion and UI design expertise has helped businesses achieve their creative and strategic goals."
@@ -256,46 +165,22 @@ export default function LandingPage() {
showStepNumbers={true}
features={[
{
title: "Discovery & Ideation",
description: "Understanding project goals, target audience, and core message to brainstorm visual concepts.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/manager-watches-tablet-with-greenscreen_482257-76577.jpg",
imageAlt: "Manager watches tablet",
},
title: "Discovery & Ideation", description: "Understanding project goals, target audience, and core message to brainstorm visual concepts.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/manager-watches-tablet-with-greenscreen_482257-76577.jpg", imageAlt: "Manager watches tablet"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/corporate-business-line-graph-report_53876-120736.jpg",
imageAlt: "Corporate business line graph report",
},
imageSrc: "http://img.b2bpic.net/free-photo/colorful-bubbles-cyan-background_23-2148205192.jpg?_wi=2",
imageAlt: "Manager watches tablet with greenscreen",
imageSrc: "http://img.b2bpic.net/free-photo/corporate-business-line-graph-report_53876-120736.jpg", imageAlt: "Corporate business line graph report"}
},
{
title: "Design & Prototyping",
description: "Translating ideas into wireframes, storyboards, and interactive prototypes for feedback.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/sales-graph-tablet-screen_1262-3819.jpg",
imageAlt: "Sales graph on tablet screen",
},
title: "Design & Prototyping", description: "Translating ideas into wireframes, storyboards, and interactive prototypes for feedback.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/sales-graph-tablet-screen_1262-3819.jpg", imageAlt: "Sales graph on tablet screen"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/financial-broker-analyzing-stock-trade-market-computer-using-exchange-hedge-fund-statistics-create-investment-profit-entrepreneur-working-with-forex-real-time-sales-trend-handheld-shot_482257-40951.jpg",
imageAlt: "Financial broker analyzing stock",
},
imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
imageAlt: "Manager watches tablet with greenscreen",
imageSrc: "http://img.b2bpic.net/free-photo/financial-broker-analyzing-stock-trade-market-computer-using-exchange-hedge-fund-statistics-create-investment-profit-entrepreneur-working-with-forex-real-time-sales-trend-handheld-shot_482257-40951.jpg", imageAlt: "Financial broker analyzing stock"}
},
{
title: "Animation & Refinement",
description: "Bringing designs to life with fluid motion, paying attention to timing, easing, and visual hierarchy.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-14784.jpg",
imageAlt: "Businesswoman using tablet",
},
title: "Animation & Refinement", description: "Bringing designs to life with fluid motion, paying attention to timing, easing, and visual hierarchy.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-14784.jpg", imageAlt: "Businesswoman using tablet"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/illustrator-tools-arrangement_23-2150268023.jpg",
imageAlt: "Illustrator tools arrangement",
},
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg",
imageAlt: "Manager watches tablet with greenscreen",
imageSrc: "http://img.b2bpic.net/free-photo/illustrator-tools-arrangement_23-2150268023.jpg", imageAlt: "Illustrator tools arrangement"}
},
]}
/>
@@ -306,37 +191,23 @@ export default function LandingPage() {
logoText="My Portfolio"
columns={[
{
title: "Explore",
items: [
title: "Explore", items: [
{
label: "About Me",
href: "/about",
},
label: "About Me", href: "/about"},
{
label: "Projects",
href: "/projects",
},
label: "Projects", href: "/projects"},
{
label: "Blog",
href: "/blog",
},
label: "Blog", href: "/blog"},
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{
label: "Contact Us",
href: "/contact",
},
label: "Contact Us", href: "/contact"},
{
label: "LinkedIn",
href: "#",
},
label: "LinkedIn", href: "#"},
{
label: "Dribbble",
href: "#",
},
label: "Dribbble", href: "#"},
],
},
]}