241 lines
12 KiB
TypeScript
241 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Award, Briefcase, Building2, CheckCircle, Code, Heart, Layers, Mail, MessageCircle, Palette, RefreshCw, Rocket, Sparkles, Target, TrendingUp, Trophy, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="noise"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Alex Chen"
|
|
navItems={[
|
|
{ name: "Work", id: "featured-work" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Process", id: "process" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Let's Collaborate", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="ALEX CHEN"
|
|
description="Creative professional with proven results. Let's collaborate to bring your vision to life."
|
|
buttons={[
|
|
{ text: "View My Work", href: "featured-work" },
|
|
{ text: "Get in Touch", href: "contact" }
|
|
]}
|
|
slides={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/from-plant-near-stationery-technologies_23-2147768928.jpg?_wi=1", imageAlt: "Minimalist portfolio hero workspace" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/man-with-clipboard-near-female-colleagues_23-2147808086.jpg?_wi=1", imageAlt: "Creative studio environment" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/charming-lady-black-dress-takes-selfie-office_197531-18150.jpg", imageAlt: "Professional workspace setting" }
|
|
]}
|
|
autoplayDelay={4000}
|
|
showDimOverlay={true}
|
|
ariaLabel="Creative professional portfolio hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Me"
|
|
tagIcon={Sparkles}
|
|
title="I combine strategic thinking with creative execution to deliver impactful digital solutions that drive measurable results for ambitious brands."
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Download Resume", href: "#" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-work" data-section="featured-work">
|
|
<ProductCardThree
|
|
title="Featured Projects"
|
|
description="Selected work showcasing design, strategy, and execution across web, branding, and mobile platforms."
|
|
tag="Portfolio"
|
|
tagIcon={Award}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{ id: "1", name: "SaaS Platform Redesign", price: "Web Design", imageSrc: "http://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148360325.jpg?_wi=1", imageAlt: "Modern SaaS platform interface redesign", initialQuantity: 1 },
|
|
{ id: "2", name: "Brand Identity System", price: "Branding", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-brutalism-template_23-2149734049.jpg?_wi=1", imageAlt: "Comprehensive brand identity and guidelines", initialQuantity: 1 },
|
|
{ id: "3", name: "Mobile App Experience", price: "Mobile Design", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-coworking-template_23-2150318719.jpg", imageAlt: "Intuitive mobile application interface", initialQuantity: 1 }
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureCardTen
|
|
tag="My Process"
|
|
tagIcon={Zap}
|
|
title="Strategic Approach to Every Project"
|
|
description="I follow a proven methodology that combines research, creativity, and technical expertise to deliver solutions that exceed expectations."
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "1", title: "Discovery & Strategy", description: "Deep dive into your goals, audience, and competitive landscape to inform our creative direction and ensure alignment with business objectives.", media: { imageSrc: "http://img.b2bpic.net/free-photo/from-plant-near-stationery-technologies_23-2147768928.jpg?_wi=2", imageAlt: "Discovery and strategy phase" },
|
|
items: [
|
|
{ icon: Target, text: "Goal Definition" },
|
|
{ icon: Users, text: "Audience Research" },
|
|
{ icon: TrendingUp, text: "Market Analysis" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "2", title: "Design & Iteration", description: "Create compelling visual solutions and prototypes, incorporating feedback through multiple iterations to refine and perfect the design.", media: { imageSrc: "http://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148360325.jpg?_wi=2", imageAlt: "Design and iteration phase" },
|
|
items: [
|
|
{ icon: Palette, text: "Visual Design" },
|
|
{ icon: Layers, text: "Prototyping" },
|
|
{ icon: RefreshCw, text: "User Testing" }
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "3", title: "Development & Launch", description: "Transform designs into fully functional digital solutions with rigorous quality assurance and seamless deployment for maximum impact.", media: { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-brutalism-template_23-2149734049.jpg?_wi=2", imageAlt: "Development and launch phase" },
|
|
items: [
|
|
{ icon: Code, text: "Implementation" },
|
|
{ icon: CheckCircle, text: "Quality Assurance" },
|
|
{ icon: Rocket, text: "Deployment" }
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="achievements" data-section="achievements">
|
|
<MetricCardOne
|
|
title="Impact by the Numbers"
|
|
description="Results-driven approach delivering measurable success for every client partnership."
|
|
tag="Achievement"
|
|
tagIcon={Trophy}
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "1", value: "50", title: "Projects Completed", description: "Successfully delivered across web, mobile, and branding disciplines", icon: Briefcase },
|
|
{ id: "2", value: "95", title: "Client Satisfaction", description: "Percentage of clients who would recommend our services", icon: Heart },
|
|
{ id: "3", value: "8", title: "Years Experience", description: "Building digital solutions and driving creative excellence", icon: Award }
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="What Clients Say"
|
|
description="Trusted by forward-thinking brands and entrepreneurs who value creativity, strategy, and results."
|
|
tag="Testimonials"
|
|
tagIcon={MessageCircle}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah Mitchell", role: "CEO", company: "TechVenture Inc", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-work-portrait_23-2149304144.jpg", imageAlt: "Sarah Mitchell CEO" },
|
|
{ id: "2", name: "James Rodriguez", role: "Founder", company: "Creative Studios", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", imageAlt: "James Rodriguez Founder" },
|
|
{ id: "3", name: "Emma Thompson", role: "Marketing Director", company: "Growth Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280724.jpg", imageAlt: "Emma Thompson Marketing Director" },
|
|
{ id: "4", name: "Michael Chen", role: "Product Manager", company: "Innovate Labs", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "Michael Chen Product Manager" }
|
|
]}
|
|
kpiItems={[
|
|
{ value: "180+", label: "Projects Delivered" },
|
|
{ value: "98%", label: "Client Retention" },
|
|
{ value: "45+", label: "Brands Transformed" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted By Industry Leaders"
|
|
description="Partnered with innovative companies across diverse industries."
|
|
tag="Clients"
|
|
tagIcon={Building2}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={["TechCorp", "Design Studio", "StartupXYZ", "FinanceHub", "EcommerceCo", "WellnessApp", "EduPlatform"]}
|
|
speed={35}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Let's Connect"
|
|
tagIcon={Mail}
|
|
title="Ready to collaborate?"
|
|
description="Whether you have a project in mind or just want to chat about the latest design trends, I'd love to hear from you. Let's create something amazing together."
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-with-clipboard-near-female-colleagues_23-2147808086.jpg?_wi=2"
|
|
imageAlt="Professional workspace for collaboration"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Subscribe"
|
|
termsText="I respect your privacy. Unsubscribe anytime."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Alex Chen"
|
|
copyrightText="© 2025 Alex Chen. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{ label: "Work", href: "#featured-work" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Process", href: "#process" }
|
|
]
|
|
},
|
|
{
|
|
title: "Social", items: [
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|