200 lines
12 KiB
TypeScript
200 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
import { Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLarge"
|
|
background="noise"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Portfolio"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Work", id: "projects" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "Get in Touch", href: "contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Design that speaks for itself"
|
|
description="Clean portfolio showcasing your discipline. Explore my work and get in touch."
|
|
tag="Creative Portfolio"
|
|
background={{ variant: "plain" }}
|
|
imageSrc="http://img.b2bpic.net/free-psd/flat-design-interior-design-template_23-2150382361.jpg"
|
|
imageAlt="Portfolio showcase"
|
|
buttons={[{ text: "View My Work", href: "projects" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About"
|
|
title="I create elegant digital experiences that prioritize clarity, functionality, and aesthetic excellence. Every project is crafted with meticulous attention to detail."
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Download Resume", href: "#" },
|
|
{ text: "Get in Touch", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardOne
|
|
title="Featured Projects"
|
|
description="A selection of recent work demonstrating design thinking and execution across multiple disciplines"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Digital Experience Platform", price: "2024", imageSrc: "http://img.b2bpic.net/free-vector/gradient-colored-ui-kit-collection_23-2149195613.jpg", imageAlt: "Digital Experience Platform"
|
|
},
|
|
{
|
|
id: "2", name: "Mobile App Redesign", price: "2023", imageSrc: "http://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-floating-concrete-background_23-2150808028.jpg", imageAlt: "Mobile App Redesign"
|
|
},
|
|
{
|
|
id: "3", name: "Brand Identity System", price: "2023", imageSrc: "http://img.b2bpic.net/free-photo/european-woman-dress-classic-hat-works-home-kitchen_343596-2535.jpg", imageAlt: "Brand Identity System"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Impact & Experience"
|
|
description="Years of dedicated work across diverse projects and disciplines"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50+", title: "Projects Completed", items: ["Digital products", "Brand identities", "Web experiences"],
|
|
},
|
|
{
|
|
id: "2", value: "100%", title: "Client Satisfaction", items: ["Repeat clients", "Referral-based", "Long-term partnerships"],
|
|
},
|
|
{
|
|
id: "3", value: "8+", title: "Years Experience", items: ["Design leadership", "Full product lifecycle", "Team mentorship"],
|
|
},
|
|
{
|
|
id: "4", value: "15+", title: "Industries Served", items: ["Tech startups", "Enterprises", "Creative agencies"],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Clients Say"
|
|
description="Feedback from collaborators and partners"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen, CEO of TechFlow", date: "Date: 15 November 2024", title: "Transformed our entire product vision", quote: "Working with this designer elevated our product from good to exceptional. The attention to detail and strategic thinking throughout the entire process was remarkable.", tag: "Product Design", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-business-leader-looking-through-window_1262-5623.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-leader-looking-through-window_1262-5623.jpg?_wi=1", imageAlt: "Project collaboration"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Rodriguez, Founder of Creative Studios", date: "Date: 8 October 2024", title: "A true design partner", quote: "Beyond execution, this designer brought strategic insights that improved our entire brand ecosystem. A rare combination of artistic talent and business acumen.", tag: "Branding", avatarSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg?_wi=1", imageAlt: "Brand work showcase"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Williams, VP Product at InnovateLab", date: "Date: 22 September 2024", title: "Exceptional collaboration", quote: "The design process was transparent, collaborative, and results-driven. Our users responded immediately to the improved experience.", tag: "UX/UI", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-profile-shot-handsome-bearded-man-looking-left-smiling-standing-against-white-backgro_1258-113911.jpg", imageSrc: "http://img.b2bpic.net/free-photo/closeup-profile-shot-handsome-bearded-man-looking-left-smiling-standing-against-white-backgro_1258-113911.jpg", imageAlt: "Interface design work"
|
|
},
|
|
{
|
|
id: "4", name: "David Park, Chief Creative Officer", date: "Date: 5 August 2024", title: "Consistently delivers excellence", quote: "Over three years of collaboration, every project has exceeded expectations. This designer understands that great design solves real problems.", tag: "Strategy & Design", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Strategic project"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Martinez, Director of Design", date: "Date: 19 July 2024", title: "Elevates entire teams", quote: "Not only did they deliver exceptional work, but also elevated the design thinking across our entire organization through mentorship and collaboration.", tag: "Design Leadership", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-business-leader-looking-through-window_1262-5623.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-leader-looking-through-window_1262-5623.jpg?_wi=2", imageAlt: "Team collaboration"
|
|
},
|
|
{
|
|
id: "6", name: "James Wilson, Startup Founder", date: "Date: 2 June 2024", title: "Game-changing partnership", quote: "From concept to launch, this designer brought clarity and confidence to our vision. The result speaks for itself in our user metrics.", tag: "Product", avatarSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg?_wi=2", imageAlt: "Startup product"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Ready to collaborate?"
|
|
ctaDescription="Let's discuss your project and explore how I can contribute to your vision."
|
|
ctaButton={{ text: "Start a Conversation", href: "#" }}
|
|
ctaIcon={Mail}
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What's your typical project timeline?", content: "Most projects range from 6-12 weeks depending on scope and complexity. I prioritize quality over speed, ensuring each phase receives proper attention."
|
|
},
|
|
{
|
|
id: "2", title: "Do you work with startups and established companies?", content: "Yes, I work across the spectrum. Whether you're a early-stage startup or established enterprise, I bring the same dedication to strategic thinking and execution."
|
|
},
|
|
{
|
|
id: "3", title: "What's included in your design process?", content: "Strategy, research, multiple iterations, stakeholder feedback sessions, and post-launch support. I believe in collaborative partnership throughout the entire journey."
|
|
},
|
|
{
|
|
id: "4", title: "How do you approach ongoing projects?", content: "I offer retainer-based arrangements for clients who prefer long-term partnership, ensuring continuity and deeper understanding of your evolving needs."
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Home", href: "#" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Work", href: "#projects" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Dribbble", href: "https://dribbble.com" },
|
|
{ label: "Email", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2025 Portfolio. All rights reserved."
|
|
bottomRightText="Designed & built with intention"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|