192 lines
12 KiB
TypeScript
192 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Zap } from 'lucide-react';
|
|
|
|
export default function Portfolio() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="plain"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleMinimal
|
|
brandName="Portfolio"
|
|
button={{
|
|
text: "Get in touch", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Transform Your Vision Into Reality"
|
|
description="I create stunning digital experiences that turn visitors into loyal clients. Let's build something extraordinary together."
|
|
tag="Portfolio 2024"
|
|
buttons={[
|
|
{
|
|
text: "View My Work", href: "featured-work"
|
|
},
|
|
{
|
|
text: "Let's Talk", href: "contact"
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
|
|
imageAlt="portfolio creative workspace design professional"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
title="I design thoughtful, high-converting digital experiences that help businesses thrive in the modern web."
|
|
useInvertedBackground="invertDefault"
|
|
buttons={[
|
|
{
|
|
text: "Learn My Process", href: "process"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureProcessSteps
|
|
title="How I Work With Clients"
|
|
description="My proven process ensures that every project exceeds expectations, from initial discovery through successful launch and ongoing optimization."
|
|
tag="Process"
|
|
tagIcon={Zap}
|
|
steps={[
|
|
{
|
|
number: "01", title: "Discovery & Strategy", tag: "Week 1", description: "Deep dive into your brand, goals, and audience. I analyze your competition and craft a strategic roadmap for success."
|
|
},
|
|
{
|
|
number: "02", title: "Design & Development", tag: "Weeks 2-4", description: "Beautiful mockups and interactive prototypes bring your vision to life. I code clean, performant solutions tailored to your needs."
|
|
},
|
|
{
|
|
number: "03", title: "Launch & Support", tag: "Ongoing", description: "Your project goes live with comprehensive testing and optimization. I provide ongoing support to ensure continued success."
|
|
}
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-work" data-section="featured-work">
|
|
<ProductCardThree
|
|
title="Featured Projects"
|
|
description="A selection of recent work showcasing design excellence and measurable results for clients across industries."
|
|
products={[
|
|
{
|
|
id: "1", name: "SaaS Platform Redesign", price: "View Case", imageSrc: "https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg", imageAlt: "SaaS platform redesign project"
|
|
},
|
|
{
|
|
id: "2", name: "E-Commerce Brand Identity", price: "View Case", imageSrc: "https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164830.jpg", imageAlt: "E-commerce brand identity project"
|
|
},
|
|
{
|
|
id: "3", name: "Digital Marketing Campaign", price: "View Case", imageSrc: "https://img.b2bpic.net/free-photo/closeup-computer-desktop-workspace_53876-30381.jpg", imageAlt: "Digital marketing campaign project"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Results & Impact"
|
|
description="Proven track record of delivering exceptional results for clients worldwide."
|
|
metrics={[
|
|
{
|
|
id: "1", value: "150+", title: "Projects Completed", items: [
|
|
"Across 20+ industries", "Global client base", "99% satisfaction rate"
|
|
]
|
|
},
|
|
{
|
|
id: "2", value: "8+", title: "Years of Experience", items: [
|
|
"Design & development", "Brand strategy", "Digital transformation"
|
|
]
|
|
},
|
|
{
|
|
id: "3", value: "300%", title: "Average ROI Increase", items: [
|
|
"For client projects", "Conversion optimization", "Performance improvements"
|
|
]
|
|
},
|
|
{
|
|
id: "4", value: "5★", title: "Client Rating", items: [
|
|
"Consistently positive", "Long-term partnerships", "Trusted advisor status"
|
|
]
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Clients Say"
|
|
description="Real feedback from real clients who've transformed their business with my work."
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen, CEO of TechVenture", date: "Date: 15 November 2024", title: "Exceptional design and execution", quote: "Working with this designer transformed our entire digital presence. The attention to detail and strategic thinking resulted in a 250% increase in leads within the first quarter.", tag: "Tech Startup", avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Rodriguez, Director at BrandCorp", date: "Date: 08 November 2024", title: "A true creative partner", quote: "Beyond just delivering a beautiful website, they understood our business goals and created a solution that exceeded all expectations. Highly recommend for any serious brand.", tag: "Enterprise", avatarSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", avatarAlt: "Michael Rodriguez"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Watson, Founder of DesignStudio", date: "Date: 02 November 2024", title: "Incredible partner for growth", quote: "They took our vision and made it better than we imagined. The redesign not only looks stunning but performs exceptionally well. Our conversion rate doubled.", tag: "Design Agency", avatarSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", avatarAlt: "Emily Watson"
|
|
},
|
|
{
|
|
id: "4", name: "James Liu, VP Product at InnovateLabs", date: "Date: 25 October 2024", title: "Strategic thinking + execution", quote: "This designer brought strategic thinking to every decision. The result was a cohesive brand experience that resonated with our target audience and drove measurable business results.", tag: "Product Company", avatarSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", avatarAlt: "James Liu"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Anderson, Marketing Director at GrowthCo", date: "Date: 18 October 2024", title: "Professional and results-driven", quote: "Professional, communicative, and results-driven. They delivered our project on time and within budget while maintaining excellent quality throughout the entire process.", tag: "B2B SaaS", avatarSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", avatarAlt: "Lisa Anderson"
|
|
},
|
|
{
|
|
id: "6", name: "David Park, CEO of StartupXYZ", date: "Date: 10 October 2024", title: "Worth every investment", quote: "The investment in quality design paid off immediately. Our website now converts at industry-leading rates, and customer feedback has been overwhelmingly positive.", tag: "E-Commerce", avatarSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", avatarAlt: "David Park"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
title="Ready to Transform Your Digital Presence?"
|
|
description="Let's discuss your project and how I can help you achieve your business goals. I'd love to hear about your vision and create something amazing together."
|
|
useInvertedBackground="noInvert"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Send Message"
|
|
termsText="I respect your privacy. Your information will be handled securely and confidentially."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Portfolio"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |