Merge version_2 into main #1
403
src/app/page.tsx
403
src/app/page.tsx
@@ -3,16 +3,16 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Award, Calendar, Code2, Star, Users } from "lucide-react";
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Award, Calendar, Code2, Star, Users, Brain, Target, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,388 +30,129 @@ export default function LandingPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "#work",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Expertise", id: "#features" },
|
||||
{ name: "Work", id: "#work" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
brandName="Creative Professional"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Crafting Digital Experiences"
|
||||
description="Showcasing expertise through thoughtful design and engineering."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-perforated-fabric_23-2149894457.jpg",
|
||||
imageAlt: "modern abstract background gradient",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/steel-blue-abstract-background-wallpaper-image_53876-104016.jpg",
|
||||
imageAlt: "geometric shape design",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/earth-tone-textured-background-brown-abstract-art_53876-126567.jpg",
|
||||
imageAlt: "elegant minimal background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-paint-stained-white-foam-backdrop_23-2148078880.jpg",
|
||||
imageAlt: "clean creative abstract",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-vases-with-different-shapes_23-2149681142.jpg",
|
||||
imageAlt: "soft gradient background light",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
<HeroBillboardDashboard
|
||||
title="Design & Engineering"
|
||||
description="Helping brands build digital products that perform."
|
||||
dashboard={{
|
||||
title: "Project Tracker", stats: [
|
||||
{ title: "Active", values: [10, 5, 2], description: "Ongoing projects" },
|
||||
{ title: "Speed", values: [85, 90, 88], description: "Performance metric" },
|
||||
{ title: "Growth", values: [120, 150, 135], description: "Yearly progress" },
|
||||
],
|
||||
logoIcon: Brain,
|
||||
sidebarItems: [{ icon: Zap, active: true }, { icon: Target }],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/designer-desk-office-creative-working-space_23-2148281358.jpg"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "About ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
|
||||
alt: "professional man portrait studio",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Me",
|
||||
},
|
||||
<TextSplitAbout
|
||||
title="About Me"
|
||||
description={[
|
||||
"I am a creative professional focused on building meaningful user experiences.", "With years of experience, I bridge the gap between business strategy and high-fidelity design."
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
<FeatureHoverPattern
|
||||
title="My Expertise"
|
||||
description="Leveraging technical skills to drive creative solutions."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Design",
|
||||
description: "User-centered interface design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ideas-windows-bulb-question-mark-speech-bubble-sign_53876-120475.jpg",
|
||||
imageAlt: "abstract design icon",
|
||||
},
|
||||
{
|
||||
title: "Engineering",
|
||||
description: "Robust and scalable code.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/binary-code-background_1048-6190.jpg",
|
||||
imageAlt: "software code abstract",
|
||||
},
|
||||
{
|
||||
title: "Strategy",
|
||||
description: "Data-driven business decisions.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/universal-business-icons-collectio_1390-50.jpg",
|
||||
imageAlt: "business growth icon",
|
||||
},
|
||||
{
|
||||
title: "Product",
|
||||
description: "Bridging business and user needs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/creative-ideas-identity-product-develop-design_53876-167129.jpg",
|
||||
imageAlt: "Creative Ideas Identity Product Develop Design",
|
||||
},
|
||||
{
|
||||
title: "Marketing",
|
||||
description: "Amplifying brand presence.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/20-business-startup-outline-icon-presentation_1142-22224.jpg",
|
||||
imageAlt: "20 Business Startup Outline icon for presentation",
|
||||
},
|
||||
{ icon: Brain, title: "Design Strategy", description: "Crafting intuitive journeys." },
|
||||
{ icon: Zap, title: "Web Development", description: "Building robust front-ends." },
|
||||
{ icon: Target, title: "Product Management", description: "Leading successful releases." }
|
||||
]}
|
||||
title="Areas of Expertise"
|
||||
description="Skills and tools that drive impact."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
<MetricCardEleven
|
||||
title="Key Milestones"
|
||||
description="Data-driven results for every project."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10+",
|
||||
title: "Projects",
|
||||
description: "Completed successfully",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5+",
|
||||
title: "Clients",
|
||||
description: "Across multiple industries",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
description: "Delivering high value",
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "3",
|
||||
title: "Years",
|
||||
description: "Industry experience",
|
||||
icon: Calendar,
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
value: "15+",
|
||||
title: "Features",
|
||||
description: "Implemented & shipped",
|
||||
icon: Code2,
|
||||
},
|
||||
{ id: "1", value: "50+", title: "Projects", description: "Successfully shipped", imageSrc: "http://img.b2bpic.net/free-photo/successful-business-team-working-office_23-2148421867.jpg" },
|
||||
{ id: "2", value: "15+", title: "Clients", description: "Industry partners", imageSrc: "http://img.b2bpic.net/free-photo/top-view-business-people-meeting_23-2148483756.jpg" }
|
||||
]}
|
||||
title="Professional Milestones"
|
||||
description="Measured results through dedication."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
<TestimonialCardTwo
|
||||
title="Feedback"
|
||||
description="What partners say."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice Smith",
|
||||
role: "PM",
|
||||
company: "Tech Corp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-seaside_23-2149412668.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Bob Jones",
|
||||
role: "Founder",
|
||||
company: "StartUp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-elegant-bearded-male-wearing-classic-waistcoat-slim-bow-tie_613910-1520.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Charlie Day",
|
||||
role: "Eng",
|
||||
company: "SoftCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-nature_23-2148523898.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Dana White",
|
||||
role: "CEO",
|
||||
company: "Innovate",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-business-female_23-2148411859.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Evan Wright",
|
||||
role: "CTO",
|
||||
company: "Devs",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-6565.jpg",
|
||||
},
|
||||
{ id: "1", name: "Alex R.", role: "Founder", testimonial: "Fantastic work on our recent launch.", icon: Star },
|
||||
{ id: "2", name: "Sam L.", role: "Product Lead", testimonial: "Professional and highly efficient.", icon: Star }
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "50+",
|
||||
label: "Collaborations",
|
||||
},
|
||||
{
|
||||
value: "99%",
|
||||
label: "Success Rate",
|
||||
},
|
||||
{
|
||||
value: "15",
|
||||
label: "Awards",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Peers"
|
||||
description="Genuine feedback from collaborators."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardTwo
|
||||
<ProductCardThree
|
||||
title="Recent Work"
|
||||
description="A curated selection of my projects."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Brand",
|
||||
name: "Web App",
|
||||
price: "$0",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-hands-holding-electronic-devices-set_107791-15405.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Brand",
|
||||
name: "Mobile",
|
||||
price: "$0",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-child-hands-holding-phone-with-dads-incoming-call-display_169016-43119.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Brand",
|
||||
name: "Design",
|
||||
price: "$0",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/geometric-landing-page-design-template_23-2149069287.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Brand",
|
||||
name: "Logo",
|
||||
price: "$0",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345460.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Brand",
|
||||
name: "Branding",
|
||||
price: "$0",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-30729.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "Brand",
|
||||
name: "Print",
|
||||
price: "$0",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/modern-business-flyer-template_23-2147894430.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Dash UI", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/dashboard-ui-mockup_23-2149544865.jpg" },
|
||||
{ id: "p2", name: "Web App", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/web-app-concept_23-2149544865.jpg" },
|
||||
{ id: "p3", name: "Identity", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/branding-identity-mockup_23-2149544865.jpg" }
|
||||
]}
|
||||
title="Selected Projects"
|
||||
description="A collection of recent works."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Location?",
|
||||
content: "Remote primarily.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Availability?",
|
||||
content: "Open for new projects.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Consulting?",
|
||||
content: "Yes, always.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Process?",
|
||||
content: "Collaborative and iterative.",
|
||||
},
|
||||
{
|
||||
id: "f5",
|
||||
title: "Timeline?",
|
||||
content: "Project dependent, usually 4-8 weeks.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-bookshelf-water-dispenser-business-office-empty-desk-with-decorations-watercooler-startup-space-shelves-with-minimal-decor-decorative-plants-refreshment_482257-27791.jpg"
|
||||
title="Frequently Asked"
|
||||
description="Common inquiries."
|
||||
<FaqBase
|
||||
title="Inquiries"
|
||||
description="Answers to common questions."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
faqs={[
|
||||
{ id: "q1", title: "Available?", content: "Yes, I am currently accepting new projects." },
|
||||
{ id: "q2", title: "Remote?", content: "Available for global remote work." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact"
|
||||
title="Let's Collaborate"
|
||||
description="Reach out for inquiries."
|
||||
title="Contact Me"
|
||||
description="Let's talk about your vision."
|
||||
tag="Collaboration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-textured-background_23-2149544865.jpg"
|
||||
logoText="Portfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Work",
|
||||
href: "#work",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Links", items: [{ label: "Home", href: "#" }, { label: "About", href: "#about" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 Portfolio."
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user