Merge version_2 into main #1
310
src/app/page.tsx
310
src/app/page.tsx
@@ -2,17 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Award, CheckCircle, Star } from "lucide-react";
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { CheckCircle } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,330 +32,106 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="PORTFOLIO"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Crafting Digital Experiences"
|
||||
description="I build minimalist, high-performance web applications with a focus on clean design and seamless interactions."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075991.jpg",
|
||||
imageAlt: "Minimal Abstract",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/leaf-shaped-dark-plate-with-eggs-dark-plate_23-2148340402.jpg",
|
||||
imageAlt: "Dark Studio",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/natural-abstract-shadow-details_23-2149210755.jpg",
|
||||
imageAlt: "Architectural Light",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-wall-paint-textured-background_53876-133019.jpg",
|
||||
imageAlt: "Black wall paint textured background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-watercolor-background_53876-101915.jpg",
|
||||
imageAlt: "Black watercolor background",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075991.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[{ type: "text", content: "The Numbers Behind My Work" }]}
|
||||
useInvertedBackground={false}
|
||||
title="The Numbers Behind My Work"
|
||||
metrics={[
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Projects Completed",
|
||||
value: "50+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Years Experience",
|
||||
value: "5",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Happy Clients",
|
||||
value: "30+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardSixteen
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Legacy codebase maintenance",
|
||||
"Slow page load times",
|
||||
"Monolithic architectures",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Modern React/Next.js stack",
|
||||
"Optimized performance patterns",
|
||||
"Component-driven design",
|
||||
],
|
||||
}}
|
||||
features={[
|
||||
{ title: "Performance", description: "Optimized web stack", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk" },
|
||||
{ title: "Design", description: "Clean component-driven UI", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk" }
|
||||
]}
|
||||
title="Technical Expertise"
|
||||
description="Balancing complex architecture with intuitive user experiences."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardThree
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "SaaS Platform",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-geometric-pattern-mobile-design-template_23-2149980070.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Brand Identity",
|
||||
price: "Case Study",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Mobile App",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-looking-smartphone-with-smart-home-lights-app-sitting-kitchen-house-with-automation-lighting-system-turning-bulbs-with-voice-command_482257-2256.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "E-Commerce",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-comfortable-workplace-home-there-are-computer-laptop-table_613910-13270.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Web Tool",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-dark-night-desktop_169016-53733.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Landing Page",
|
||||
price: "Case Study",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320710.jpg",
|
||||
},
|
||||
]}
|
||||
title="Selected Work"
|
||||
description="A collection of digital projects and design case studies."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Exceptional attention to detail and design execution."
|
||||
rating={5}
|
||||
author="Alice Chen"
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice Chen",
|
||||
handle: "@alice",
|
||||
testimonial: "Exceptional attention to detail and design execution.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-58756.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Bob Smith",
|
||||
handle: "@bob",
|
||||
testimonial: "Delivered high-quality results ahead of schedule.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Clara Wu",
|
||||
handle: "@clara",
|
||||
testimonial: "Innovative solutions to complex UI challenges.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Zuo",
|
||||
handle: "@david",
|
||||
testimonial: "A master of modern web frameworks.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-posing-with-flowers_52683-87229.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Eve Li",
|
||||
handle: "@eve",
|
||||
testimonial: "Transformed our digital presence completely.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021789.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="Collaborative success stories and professional feedback."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardThree
|
||||
<BlogCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Design Insights"
|
||||
description="Thoughts on web development, design systems, and tech."
|
||||
blogs={[
|
||||
{
|
||||
id: "b1",
|
||||
category: "Design",
|
||||
title: "Minimalism in Web Design",
|
||||
excerpt: "Why less is often more in modern interfaces.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-display-mockup-white-background_9975-134379.jpg",
|
||||
authorName: "Author",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-19887.jpg",
|
||||
date: "Oct 12",
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
category: "Tech",
|
||||
title: "Next.js Best Practices",
|
||||
excerpt: "Streamlining your development workflow.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glasses-near-laptop-reflect-light-from-screen-dark-copy-space_169016-14893.jpg",
|
||||
authorName: "Author",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/bearded-man-red-tie-shirt-wearing-glasses-looking-camera-smiling-presenting-copy-space-with-arm-his-handstanding-orange-background_141793-110723.jpg",
|
||||
date: "Oct 15",
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
category: "Dev",
|
||||
title: "CSS Performance",
|
||||
excerpt: "Optimizing visual rendering in browsers.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-keys-drawing-arrangement_23-2149386326.jpg",
|
||||
authorName: "Author",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-business-woman_158595-4746.jpg",
|
||||
date: "Oct 20",
|
||||
},
|
||||
]}
|
||||
description="Thoughts on web development and design systems."
|
||||
blogs={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
<FaqBase
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do you handle projects?",
|
||||
content: "I follow an iterative design and development process.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Are you taking new clients?",
|
||||
content: "I am currently accepting select new projects.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Where are you based?",
|
||||
content: "I operate remotely globally.",
|
||||
},
|
||||
]}
|
||||
faqs={[{ id: "1", title: "How do you handle projects?", content: "Iterative design and development." }]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about working with me."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
<ContactSplit
|
||||
title="Get In Touch"
|
||||
description="Interested in working together? Let's discuss your next project."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/working-desk-businessman_23-2147833279.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
<FooterLogoReveal
|
||||
logoText="PORTFOLIO"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Portfolio. All rights reserved."
|
||||
leftLink={{ text: "Home", href: "#hero" }}
|
||||
rightLink={{ text: "Projects", href: "#projects" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user