Merge version_2 into main #2
159
src/app/page.tsx
159
src/app/page.tsx
@@ -31,21 +31,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Chowai Staifi"
|
||||
/>
|
||||
@@ -54,15 +46,12 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Welcome to my portfolio"
|
||||
description="Hi, I'm Chowai Staifi. I help brands and businesses build impactful digital experiences."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#services",
|
||||
},
|
||||
text: "View Projects", href: "#services"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg?_wi=1"
|
||||
imageAlt="professional headshot photography neutral"
|
||||
@@ -76,13 +65,9 @@ export default function LandingPage() {
|
||||
description="Passionate about creating elegant, functional, and user-centered designs. I combine aesthetics with technical precision to deliver results."
|
||||
metrics={[
|
||||
{
|
||||
value: "100+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
value: "100+", title: "Projects Completed"},
|
||||
{
|
||||
value: "5+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
value: "5+", title: "Years Experience"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-old-fashioned-library-filled-with-vintage-decorations-wooden-desks_482257-120070.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
@@ -98,35 +83,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Brand Design",
|
||||
tags: [
|
||||
"Strategy",
|
||||
"Visuals",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-pretty-gilr-with-freckles-blonde-loose-hair-looking-camera-with-joyful-happy-facial-expression-attractive-young-woman-natural-beauty-posing-isolated-blank-copy-space-studio-wall_343059-4198.jpg",
|
||||
imageAlt: "Stylish pretty gilr with freckles and blonde loose hair looking at camera with joyful happy facial expression. Attractive young woman of natural beauty posing isolated at blank copy space studio wall",
|
||||
},
|
||||
id: "f1", title: "Brand Design", tags: [
|
||||
"Strategy", "Visuals"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-pretty-gilr-with-freckles-blonde-loose-hair-looking-camera-with-joyful-happy-facial-expression-attractive-young-woman-natural-beauty-posing-isolated-blank-copy-space-studio-wall_343059-4198.jpg", imageAlt: "Stylish pretty gilr with freckles and blonde loose hair looking at camera with joyful happy facial expression. Attractive young woman of natural beauty posing isolated at blank copy space studio wall"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Web Development",
|
||||
tags: [
|
||||
"React",
|
||||
"Next.js",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg?_wi=2",
|
||||
imageAlt: "Stylish pretty gilr with freckles and blonde loose hair looking at camera with joyful happy facial expression. Attractive young woman of natural beauty posing isolated at blank copy space studio wall",
|
||||
},
|
||||
id: "f2", title: "Web Development", tags: [
|
||||
"React", "Next.js"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg?_wi=2", imageAlt: "Stylish pretty gilr with freckles and blonde loose hair looking at camera with joyful happy facial expression. Attractive young woman of natural beauty posing isolated at blank copy space studio wall"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "UI/UX Design",
|
||||
tags: [
|
||||
"Research",
|
||||
"Prototyping",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-old-fashioned-library-filled-with-vintage-decorations-wooden-desks_482257-120070.jpg?_wi=2",
|
||||
imageAlt: "Stylish pretty gilr with freckles and blonde loose hair looking at camera with joyful happy facial expression. Attractive young woman of natural beauty posing isolated at blank copy space studio wall",
|
||||
},
|
||||
id: "f3", title: "UI/UX Design", tags: [
|
||||
"Research", "Prototyping"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-old-fashioned-library-filled-with-vintage-decorations-wooden-desks_482257-120070.jpg?_wi=2", imageAlt: "Stylish pretty gilr with freckles and blonde loose hair looking at camera with joyful happy facial expression. Attractive young woman of natural beauty posing isolated at blank copy space studio wall"},
|
||||
]}
|
||||
title="My Expertise"
|
||||
description="From concept to delivery, I provide comprehensive design and development services."
|
||||
@@ -140,40 +107,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Founder",
|
||||
testimonial: "Exceptional work, delivered on time and exceeded expectations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-something-laughing-out-pointing-with-index-finger-something-someone-standing-brown-background_141793-133931.jpg",
|
||||
},
|
||||
id: "1", name: "Sarah J.", role: "Founder", testimonial: "Exceptional work, delivered on time and exceeded expectations.", imageSrc: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-something-laughing-out-pointing-with-index-finger-something-someone-standing-brown-background_141793-133931.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael C.",
|
||||
role: "Manager",
|
||||
testimonial: "Highly professional and extremely talented designer.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-man-elegant-suit-glasses-correct-his-jacket-while-standing-against-skyscraper-background_613910-4110.jpg",
|
||||
},
|
||||
id: "2", name: "Michael C.", role: "Manager", testimonial: "Highly professional and extremely talented designer.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-man-elegant-suit-glasses-correct-his-jacket-while-standing-against-skyscraper-background_613910-4110.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
role: "CEO",
|
||||
testimonial: "A true partner in our digital growth strategy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-charming-african-guy-smiling-boyfriend-waiting-date-head-hunter-dream-standing-white-wall_176420-12540.jpg",
|
||||
},
|
||||
id: "3", name: "Emily R.", role: "CEO", testimonial: "A true partner in our digital growth strategy.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-charming-african-guy-smiling-boyfriend-waiting-date-head-hunter-dream-standing-white-wall_176420-12540.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
role: "Product Lead",
|
||||
testimonial: "Attention to detail is unmatched. Great experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",
|
||||
},
|
||||
id: "4", name: "David K.", role: "Product Lead", testimonial: "Attention to detail is unmatched. Great experience.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lisa M.",
|
||||
role: "Designer",
|
||||
testimonial: "Innovative solutions that set us apart from competitors.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-guy-wears-trendy-wristwatch-posing-with-smile-near-beige-wall-outdoor-portrait-black-man-good-mood-standing-with-arms-crossed_197531-21794.jpg",
|
||||
},
|
||||
id: "5", name: "Lisa M.", role: "Designer", testimonial: "Innovative solutions that set us apart from competitors.", imageSrc: "http://img.b2bpic.net/free-photo/african-guy-wears-trendy-wristwatch-posing-with-smile-near-beige-wall-outdoor-portrait-black-man-good-mood-standing-with-arms-crossed_197531-21794.jpg"},
|
||||
]}
|
||||
title="What They Say"
|
||||
description="Building lasting relationships with clients through trust and quality work."
|
||||
@@ -187,20 +129,11 @@ export default function LandingPage() {
|
||||
tag="Milestones"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "50+",
|
||||
description: "Happy Clients",
|
||||
},
|
||||
id: "m1", value: "50+", description: "Happy Clients"},
|
||||
{
|
||||
id: "m2",
|
||||
value: "120+",
|
||||
description: "Successful Launches",
|
||||
},
|
||||
id: "m2", value: "120+", description: "Successful Launches"},
|
||||
{
|
||||
id: "m3",
|
||||
value: "15k+",
|
||||
description: "Coffee Cups",
|
||||
},
|
||||
id: "m3", value: "15k+", description: "Coffee Cups"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -211,20 +144,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How do you work?",
|
||||
content: "I follow a collaborative and iterative design process.",
|
||||
},
|
||||
id: "q1", title: "How do you work?", content: "I follow a collaborative and iterative design process."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Timeline expectation?",
|
||||
content: "Depending on project complexity, timelines vary.",
|
||||
},
|
||||
id: "q2", title: "Timeline expectation?", content: "Depending on project complexity, timelines vary."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Ongoing support?",
|
||||
content: "Yes, I offer maintenance packages for all projects.",
|
||||
},
|
||||
id: "q3", title: "Ongoing support?", content: "Yes, I offer maintenance packages for all projects."},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Here's what you need to know about working with me."
|
||||
@@ -239,16 +163,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Let's Connect"
|
||||
title="Ready to get started?"
|
||||
description="I'm always open to discussing new projects and opportunities. Reach out!"
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "mailto:hello@example.com",
|
||||
},
|
||||
text: "Contact Me", href: "mailto:hello@example.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -258,25 +179,17 @@ export default function LandingPage() {
|
||||
logoText="Chowai Staifi"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "#services"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -285,4 +198,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user