Merge version_1 into main #2
426
src/app/page.tsx
426
src/app/page.tsx
@@ -26,331 +26,119 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Work", id: "portfolio" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Creative Designer & Strategist"
|
||||
description="Turning complex ideas into beautiful, intuitive digital experiences. Let's create something meaningful together."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg?_wi=1",
|
||||
imageAlt: "Designer workspace",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg?_wi=1",
|
||||
imageAlt: "Creative studio",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg?_wi=2",
|
||||
imageAlt: "Workspace detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg?_wi=2",
|
||||
imageAlt: "Studio atmosphere",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg?_wi=3",
|
||||
imageAlt: "Workspace minimal",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg?_wi=3",
|
||||
imageAlt: "Design setup",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg?_wi=4",
|
||||
imageAlt: "Design process",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg?_wi=4",
|
||||
imageAlt: "Conceptual work",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg?_wi=5",
|
||||
imageAlt: "Creative planning",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg?_wi=5",
|
||||
imageAlt: "Studio shot",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg?_wi=6",
|
||||
imageAlt: "Design vision",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg?_wi=6",
|
||||
imageAlt: "Final output",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blond-business-woman-holding-hand-pocket_23-2148095771.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-business-man-listening-music_23-2148763848.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-57.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman_23-2149050497.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345454.jpg",
|
||||
alt: "Partner 1",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/laptop-tablet-smartphone_1232-472.jpg",
|
||||
alt: "Partner 2",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/white-hoodie-mockup-front_1258-248336.jpg",
|
||||
alt: "Partner 3",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345454.jpg",
|
||||
alt: "Partner 4",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/laptop-tablet-smartphone_1232-472.jpg",
|
||||
alt: "Partner 5",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Creative Designer & Strategist"
|
||||
description="Turning complex ideas into beautiful, intuitive digital experiences. Let's create something meaningful together."
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg", imageAlt: "Designer workspace" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg", imageAlt: "Creative studio" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg", imageAlt: "Workspace detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg", imageAlt: "Studio atmosphere" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg", imageAlt: "Workspace minimal" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg", imageAlt: "Design setup" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg", imageAlt: "Design process" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg", imageAlt: "Conceptual work" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg", imageAlt: "Creative planning" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg", imageAlt: "Studio shot" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg", imageAlt: "Design vision" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-black-white-office-desk-with-stationery_9975-133066.jpg", imageAlt: "Final output" },
|
||||
]}
|
||||
buttons={[{ text: "View Work", href: "#portfolio" }]}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/blond-business-woman-holding-hand-pocket_23-2148095771.jpg", alt: "User 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-business-man-listening-music_23-2148763848.jpg", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-57.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman_23-2149050497.jpg", alt: "User 5" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="My Expertise"
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "Projects Completed",
|
||||
value: "50+",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Happy Clients",
|
||||
value: "30+",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
label: "Years Experience",
|
||||
value: "5",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="My Expertise"
|
||||
metrics={[
|
||||
{ icon: Award, label: "Projects Completed", value: "50+" },
|
||||
{ icon: Star, label: "Happy Clients", value: "30+" },
|
||||
{ icon: TrendingUp, label: "Years Experience", value: "5" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "EcoBrand Identity",
|
||||
price: "Branding",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345454.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "SaaS Platform UI",
|
||||
price: "UI/UX",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-tablet-smartphone_1232-472.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Minimalist Web Site",
|
||||
price: "Development",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-hoodie-mockup-front_1258-248336.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Creative Agency App",
|
||||
price: "App Design",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345454.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Lifestyle Brand Book",
|
||||
price: "Graphic Design",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-tablet-smartphone_1232-472.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Tech Startup Pitch",
|
||||
price: "Pitch Design",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-hoodie-mockup-front_1258-248336.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A curated collection of my most impactful work across branding, UI/UX, and web design."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "EcoBrand Identity", price: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345454.jpg" },
|
||||
{ id: "p2", name: "SaaS Platform UI", price: "UI/UX", imageSrc: "http://img.b2bpic.net/free-photo/laptop-tablet-smartphone_1232-472.jpg" },
|
||||
{ id: "p3", name: "Minimalist Web Site", price: "Development", imageSrc: "http://img.b2bpic.net/free-photo/white-hoodie-mockup-front_1258-248336.jpg" },
|
||||
{ id: "p4", name: "Creative Agency App", price: "App Design", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345454.jpg" },
|
||||
{ id: "p5", name: "Lifestyle Brand Book", price: "Graphic Design", imageSrc: "http://img.b2bpic.net/free-photo/laptop-tablet-smartphone_1232-472.jpg" },
|
||||
{ id: "p6", name: "Tech Startup Pitch", price: "Pitch Design", imageSrc: "http://img.b2bpic.net/free-photo/white-hoodie-mockup-front_1258-248336.jpg" },
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A curated collection of my most impactful work across branding, UI/UX, and web design."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice Johnson",
|
||||
handle: "@alice",
|
||||
testimonial: "Exceptional work, delivered on time.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Bob Smith",
|
||||
handle: "@bob",
|
||||
testimonial: "Transformed our digital presence.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-holding-hand-pocket_23-2148095771.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Charlie Davis",
|
||||
handle: "@charlie",
|
||||
testimonial: "Incredible eye for detail.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-man-listening-music_23-2148763848.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Diana Ross",
|
||||
handle: "@diana",
|
||||
testimonial: "Professional and very creative.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-57.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Edward Norton",
|
||||
handle: "@edward",
|
||||
testimonial: "Highly recommended design services.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman_23-2149050497.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Feedback"
|
||||
description="What partners and clients say about working together."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alice Johnson", handle: "@alice", testimonial: "Exceptional work, delivered on time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg" },
|
||||
{ id: "2", name: "Bob Smith", handle: "@bob", testimonial: "Transformed our digital presence.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-holding-hand-pocket_23-2148095771.jpg" },
|
||||
{ id: "3", name: "Charlie Davis", handle: "@charlie", testimonial: "Incredible eye for detail.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-man-listening-music_23-2148763848.jpg" },
|
||||
{ id: "4", name: "Diana Ross", handle: "@diana", testimonial: "Professional and very creative.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-57.jpg" },
|
||||
{ id: "5", name: "Edward Norton", handle: "@edward", testimonial: "Highly recommended design services.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman_23-2149050497.jpg" },
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Feedback"
|
||||
description="What partners and clients say about working together."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Ready to discuss your project? I'm available for freelance opportunities and collaborations."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "mailto:hello@example.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Ready to discuss your project? I'm available for freelance opportunities and collaborations."
|
||||
buttons={[{ text: "Contact Me", href: "mailto:hello@example.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Portfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Socials",
|
||||
items: [
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Dribbble",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Portfolio Design"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Portfolio"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Work", href: "#portfolio" }] },
|
||||
{ title: "Socials", items: [{ label: "LinkedIn", href: "#" }, { label: "Twitter", href: "#" }, { label: "Dribbble", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2024 Portfolio Design"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user