Merge version_1 into main #2
414
src/app/page.tsx
414
src/app/page.tsx
@@ -19,304 +19,144 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Experience",
|
||||
id: "experience",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Experience", id: "experience" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Crafting Digital Experiences"
|
||||
description="I'm a creative professional dedicated to building modern, minimalist digital solutions that solve real-world problems."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Work",
|
||||
href: "#projects",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-hotel-hall_1203-959.jpg?_wi=1"
|
||||
imageAlt="minimalist professional portrait"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "plain" }}
|
||||
title="Crafting Digital Experiences"
|
||||
description="I'm a creative professional dedicated to building modern, minimalist digital solutions that solve real-world problems."
|
||||
buttons={[{ text: "View Work", href: "#projects" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-hotel-hall_1203-959.jpg"
|
||||
imageAlt="minimalist professional portrait"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Me"
|
||||
description="With over 5 years of experience in digital product design and development, I help brands achieve their potential through clean, intuitive interfaces."
|
||||
metrics={[
|
||||
{
|
||||
value: "5+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "50+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
imageAlt="modern home office workspace"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Me"
|
||||
description="With over 5 years of experience in digital product design and development, I help brands achieve their potential through clean, intuitive interfaces."
|
||||
metrics={[
|
||||
{ value: "5+", title: "Years Experience" },
|
||||
{ value: "50+", title: "Projects Completed" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
imageAlt="modern home office workspace"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
label: "2022-Present",
|
||||
title: "Senior Design Lead",
|
||||
items: [
|
||||
"Leading design team",
|
||||
"Improving UI guidelines",
|
||||
"Client strategy",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "2020-2022",
|
||||
title: "Product Designer",
|
||||
items: [
|
||||
"Web platform redesign",
|
||||
"Mobile app prototype",
|
||||
"User research",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
label: "2018-2020",
|
||||
title: "Frontend Developer",
|
||||
items: [
|
||||
"Component library build",
|
||||
"Performance optimization",
|
||||
"System maintenance",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Professional Experience"
|
||||
description="Building sustainable value through strategic design and development."
|
||||
/>
|
||||
</div>
|
||||
<div id="experience" data-section="experience">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "1", label: "2022-Present", title: "Senior Design Lead", items: ["Leading design team", "Improving UI guidelines", "Client strategy"] },
|
||||
{ id: "2", label: "2020-2022", title: "Product Designer", items: ["Web platform redesign", "Mobile app prototype", "User research"] },
|
||||
{ id: "3", label: "2018-2020", title: "Frontend Developer", items: ["Component library build", "Performance optimization", "System maintenance"] },
|
||||
]}
|
||||
title="Professional Experience"
|
||||
description="Building sustainable value through strategic design and development."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "99%",
|
||||
title: "Satisfaction Rate",
|
||||
items: [
|
||||
"Focus on user needs",
|
||||
"High quality output",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "100%",
|
||||
title: "Project Delivery",
|
||||
items: [
|
||||
"Timely completion",
|
||||
"Process efficiency",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "24/7",
|
||||
title: "Support Availability",
|
||||
items: [
|
||||
"Always responsive",
|
||||
"Continuous collaboration",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Expertise"
|
||||
description="A diverse skill set aimed at creating impactful user experiences."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", value: "99%", title: "Satisfaction Rate", items: ["Focus on user needs", "High quality output"] },
|
||||
{ id: "2", value: "100%", title: "Project Delivery", items: ["Timely completion", "Process efficiency"] },
|
||||
{ id: "3", value: "24/7", title: "Support Availability", items: ["Always responsive", "Continuous collaboration"] },
|
||||
]}
|
||||
title="Expertise"
|
||||
description="A diverse skill set aimed at creating impactful user experiences."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
title: "Strategy",
|
||||
period: "Fixed",
|
||||
price: "$1k",
|
||||
features: [
|
||||
"UX Audits",
|
||||
"User Personas",
|
||||
"Market Research",
|
||||
],
|
||||
button: {
|
||||
text: "Contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphics-composition_23-2148991204.jpg",
|
||||
imageAlt: "digital strategy icons",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Design",
|
||||
period: "Fixed",
|
||||
price: "$2k",
|
||||
features: [
|
||||
"Wireframing",
|
||||
"High-Fi Design",
|
||||
"Prototyping",
|
||||
],
|
||||
button: {
|
||||
text: "Contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-hotel-hall_1203-959.jpg?_wi=2",
|
||||
imageAlt: "digital strategy icons",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
title: "Development",
|
||||
period: "Fixed",
|
||||
price: "$3k",
|
||||
features: [
|
||||
"Frontend Code",
|
||||
"Performance",
|
||||
"CMS Setup",
|
||||
],
|
||||
button: {
|
||||
text: "Contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg?_wi=2",
|
||||
imageAlt: "digital strategy icons",
|
||||
},
|
||||
]}
|
||||
title="Core Services"
|
||||
description="How I can help you succeed."
|
||||
/>
|
||||
</div>
|
||||
<div id="skills" data-section="skills">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "p1", title: "Strategy", period: "Fixed", price: "$1k", features: ["UX Audits", "User Personas", "Market Research"], button: { text: "Contact" }, imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphics-composition_23-2148991204.jpg" },
|
||||
{ id: "p2", title: "Design", period: "Fixed", price: "$2k", features: ["Wireframing", "High-Fi Design", "Prototyping"], button: { text: "Contact" }, imageSrc: "http://img.b2bpic.net/free-photo/blurred-hotel-hall_1203-959.jpg" },
|
||||
{ id: "p3", title: "Development", period: "Fixed", price: "$3k", features: ["Frontend Code", "Performance", "CMS Setup"], button: { text: "Contact" }, imageSrc: "http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg" },
|
||||
]}
|
||||
title="Core Services"
|
||||
description="How I can help you succeed."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "pj1",
|
||||
name: "Finance App",
|
||||
price: "UX UI",
|
||||
variant: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345397.jpg",
|
||||
},
|
||||
{
|
||||
id: "pj2",
|
||||
name: "Health Dashboard",
|
||||
price: "Development",
|
||||
variant: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg",
|
||||
},
|
||||
{
|
||||
id: "pj3",
|
||||
name: "Travel Platform",
|
||||
price: "UX Design",
|
||||
variant: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-working-together-animation-studio_23-2149208004.jpg",
|
||||
},
|
||||
{
|
||||
id: "pj4",
|
||||
name: "Real Estate Tool",
|
||||
price: "Frontend",
|
||||
variant: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-it-workers-using-green-screen-computer_482257-123979.jpg",
|
||||
},
|
||||
{
|
||||
id: "pj5",
|
||||
name: "E-learning Portal",
|
||||
price: "Branding",
|
||||
variant: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/snapshot-devices-notepad-glasses-apples-background-white-table_197531-25734.jpg",
|
||||
},
|
||||
{
|
||||
id: "pj6",
|
||||
name: "Social Connect",
|
||||
price: "Research",
|
||||
variant: "Case Study",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d2yrru",
|
||||
},
|
||||
]}
|
||||
title="Recent Projects"
|
||||
description="A selection of my best work."
|
||||
/>
|
||||
</div>
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "pj1", name: "Finance App", price: "UX UI", variant: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345397.jpg" },
|
||||
{ id: "pj2", name: "Health Dashboard", price: "Development", variant: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg" },
|
||||
{ id: "pj3", name: "Travel Platform", price: "UX Design", variant: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/people-working-together-animation-studio_23-2149208004.jpg" },
|
||||
{ id: "pj4", name: "Real Estate Tool", price: "Frontend", variant: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/team-it-workers-using-green-screen-computer_482257-123979.jpg" },
|
||||
{ id: "pj5", name: "E-learning Portal", price: "Branding", variant: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/snapshot-devices-notepad-glasses-apples-background-white-table_197531-25734.jpg" },
|
||||
{ id: "pj6", name: "Social Connect", price: "Research", variant: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d2yrru" },
|
||||
]}
|
||||
title="Recent Projects"
|
||||
description="A selection of my best work."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Google",
|
||||
"Microsoft",
|
||||
"Amazon",
|
||||
"Apple",
|
||||
"Meta",
|
||||
"Adobe",
|
||||
"Netflix",
|
||||
]}
|
||||
title="Trusted By Industry Leaders"
|
||||
description="Partnerships built on quality and consistent results."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["Google", "Microsoft", "Amazon", "Apple", "Meta", "Adobe", "Netflix"]}
|
||||
title="Trusted By Industry Leaders"
|
||||
description="Partnerships built on quality and consistent results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Let's Talk"
|
||||
title="Get in touch"
|
||||
description="Interested in working together or just want to chat? Send me a message."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Talk"
|
||||
title="Get in touch"
|
||||
description="Interested in working together or just want to chat? Send me a message."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Portfolio"
|
||||
copyrightText="© 2025 All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Portfolio"
|
||||
copyrightText="© 2025 All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user