221 lines
12 KiB
TypeScript
221 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Lightbulb, Users, Palette, Sparkles, Mail } from "lucide-react";
|
|
|
|
export default function PortfolioPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="inset-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Portfolio"
|
|
navItems={[
|
|
{ name: "Work", id: "gallery" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="PORTFOLIO"
|
|
description="Award-winning designer crafting digital experiences that inspire and engage"
|
|
buttons={[
|
|
{ text: "View Work", href: "gallery" },
|
|
{ text: "Get in Touch", href: "contact" }
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg"
|
|
imageAlt="Creative workspace and design portfolio"
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardFour
|
|
title="Featured Projects"
|
|
description="A selection of recent work showcasing design excellence and creative problem-solving"
|
|
tag="Portfolio Highlights"
|
|
products={[
|
|
{
|
|
id: "1", name: "E-Commerce Platform Redesign", price: "2024", variant: "Web Design · UX/UI", imageSrc: "https://img.b2bpic.net/free-vector/flat-design-brutalism-template_52683-97146.jpg", imageAlt: "E-commerce website design"
|
|
},
|
|
{
|
|
id: "2", name: "Brand Identity & Guidelines", price: "2024", variant: "Branding · Design System", imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492826.jpg", imageAlt: "Brand identity project"
|
|
},
|
|
{
|
|
id: "3", name: "Mobile App Design Suite", price: "2023", variant: "Mobile Design · Prototyping", imageSrc: "https://img.b2bpic.net/free-vector/making-new-memories-travel-mobile-app_23-2148497898.jpg", imageAlt: "Mobile application design"
|
|
},
|
|
{
|
|
id: "4", name: "SaaS Dashboard Interface", price: "2023", variant: "Interface Design · Analytics", imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492831.jpg", imageAlt: "SaaS dashboard design"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<FeatureCardTwentyFive
|
|
title="About My Practice"
|
|
description="Passionate about creating meaningful digital experiences through thoughtful design and strategic thinking"
|
|
features={[
|
|
{
|
|
title: "Strategic Design Thinking", description: "Every project starts with understanding user needs, business goals, and market opportunities to create solutions that truly resonate.", icon: Lightbulb,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/group-business-executives-interacting-with-each-other_1170-760.jpg", imageAlt: "Design strategy workshop"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/empty-meeting-office-space-enterprise-used-workers-attend-conferences_482257-115920.jpg", imageAlt: "Creative process collaboration"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "User-Centered Approach", description: "Research, testing, and iteration inform every design decision, ensuring interfaces that are both beautiful and highly functional.", icon: Users,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/empty-meeting-office-space-enterprise-used-workers-attend-conferences_482257-115920.jpg", imageAlt: "User research and testing"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/group-business-executives-interacting-with-each-other_1170-760.jpg", imageAlt: "Design collaboration team"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-work" data-section="featured-work">
|
|
<FeatureCardTwentyFive
|
|
title="Core Expertise"
|
|
description="Specializing in comprehensive digital design solutions that drive business growth and user satisfaction"
|
|
features={[
|
|
{
|
|
title: "UI/UX Design", description: "Creating intuitive interfaces and seamless user experiences across web and mobile platforms with accessibility at the forefront.", icon: Palette,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-vector/flat-design-brutalism-template_52683-97146.jpg", imageAlt: "UI design showcase"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-vector/making-new-memories-travel-mobile-app_23-2148497898.jpg", imageAlt: "User experience design"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Brand Development", description: "Crafting distinct visual identities and comprehensive brand systems that communicate values and build meaningful connections.", icon: Sparkles,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492826.jpg", imageAlt: "Brand identity design"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-vector/travel-landing-page-template-with-photo_23-2148492831.jpg", imageAlt: "Brand system guidelines"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Client Feedback"
|
|
description="What clients say about working together and the impact of design on their businesses"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alexandra Chen", role: "CEO, TechVenture", testimonial: "The design work transformed our platform completely. Users immediately noticed the improved experience, and our conversion rate increased by 40% within the first month.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Alexandra Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Richardson", role: "Marketing Director, Creative Co", testimonial: "Beyond just beautiful design, the strategic thinking behind every decision made a real difference. Our brand now stands out meaningfully in a crowded market.", 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", imageAlt: "Michael Richardson"
|
|
},
|
|
{
|
|
id: "3", name: "Sofia Morales", role: "Founder, StartupHub", testimonial: "Working with this designer was a game-changer. They understood our vision and brought it to life in ways we hadn't even imagined. Highly recommend.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", imageAlt: "Sofia Morales"
|
|
},
|
|
{
|
|
id: "4", name: "James Park", role: "Product Manager, Digital Ventures", testimonial: "Professional, detail-oriented, and genuinely collaborative. The mobile app design exceeded all expectations and our users absolutely love it.", imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", imageAlt: "James Park"
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Impact by Numbers"
|
|
description="Measurable results from design-driven solutions across diverse projects and industries"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50+", description: "Projects Completed"
|
|
},
|
|
{
|
|
id: "2", value: "8 Years", description: "Industry Experience"
|
|
},
|
|
{
|
|
id: "3", value: "95%", description: "Client Satisfaction"
|
|
},
|
|
{
|
|
id: "4", value: "3.2x", description: "Average ROI Increase"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Let's Collaborate"
|
|
tagIcon={Mail}
|
|
title="Ready to Start Your Next Project?"
|
|
description="I'd love to hear about your ideas and discuss how thoughtful design can drive meaningful results for your business."
|
|
buttons={[
|
|
{ text: "Send Message", href: "mailto:contact@portfolio.com" },
|
|
{ text: "Schedule Call", href: "https://calendly.com" }
|
|
]}
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="PORTFOLIO"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |