Merge version_2 into main #2
123
src/app/about/page.tsx
Normal file
123
src/app/about/page.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Xusinov Mominjon"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="About Me"
|
||||
description="Learn more about my journey, experience, and passion for creating exceptional digital experiences."
|
||||
buttons={[
|
||||
{ text: "Download Resume", href: "/resume" },
|
||||
{ text: "View Portfolio", href: "/portfolio" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/overhead-view-four-yellow-cardboard-papers_23-2147878397.jpg"
|
||||
imageAlt="about me hero background professional design"
|
||||
frameStyle="card"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="My Story"
|
||||
description={[
|
||||
"I am a passionate digital designer with over 8 years of experience crafting exceptional digital experiences. My journey started with a love for visual design and has evolved into a comprehensive expertise in UI/UX, branding, and web design.", "My approach centers on understanding client needs deeply and translating them into elegant, functional solutions. I believe great design is not just about aesthetics—it's about creating meaningful connections between people and products.", "When I'm not designing, I'm exploring new design trends, contributing to the design community, and continuously pushing the boundaries of what's possible in digital design. I'm committed to lifelong learning and staying at the forefront of design innovation."
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Get in Touch", href: "/contact" }
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Let's Connect"
|
||||
title="Ready to Work Together?"
|
||||
description="I'd love to hear about your project and discuss how I can help bring your vision to life. Reach out anytime!"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg"
|
||||
imageAlt="contact form background professional design"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Send Message"
|
||||
termsText="I'll get back to you within 48 hours. Your information is safe with me."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Xusinov Mominjon"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Resume", href: "/resume" },
|
||||
{ label: "Portfolio", href: "/portfolio" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "UI/UX Design", href: "/services" },
|
||||
{ label: "Web Design", href: "/services" },
|
||||
{ label: "Branding", href: "/services" },
|
||||
{ label: "Design Systems", href: "/services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Dribbble", href: "https://dribbble.com" },
|
||||
{ label: "Email", href: "mailto:contact@example.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Xusinov Mominjon. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
122
src/app/contact/page.tsx
Normal file
122
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Xusinov Mominjon"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="Get in Touch"
|
||||
description="Have a project in mind or want to discuss collaboration opportunities? I'd love to hear from you."
|
||||
buttons={[
|
||||
{ text: "Send Message", href: "#contact-form" },
|
||||
{ text: "View Portfolio", href: "/portfolio" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/overhead-view-four-yellow-cardboard-papers_23-2147878397.jpg"
|
||||
imageAlt="contact page hero background professional design"
|
||||
frameStyle="card"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<TextSplitAbout
|
||||
title="How to Reach Me"
|
||||
description={[
|
||||
"I'm always happy to discuss new projects, creative ideas, or potential collaborations. Feel free to reach out through any of the channels below or fill out the form to send me a direct message.", "Whether you need UI/UX design, branding, web design, or design consulting, I'm here to help bring your vision to life. Let's create something amazing together!"
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "/portfolio" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactSplit
|
||||
tag="Send a Message"
|
||||
title="Let's Create Something Amazing Together"
|
||||
description="Fill out the form below and I'll get back to you within 48 hours to discuss your project or answer any questions you may have."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg"
|
||||
imageAlt="contact us form background professional design"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Send Message"
|
||||
termsText="I'll get back to you within 48 hours. Your information is safe and secure with me."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Xusinov Mominjon"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Resume", href: "/resume" },
|
||||
{ label: "Portfolio", href: "/portfolio" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "UI/UX Design", href: "/services" },
|
||||
{ label: "Web Design", href: "/services" },
|
||||
{ label: "Branding", href: "/services" },
|
||||
{ label: "Design Systems", href: "/services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Dribbble", href: "https://dribbble.com" },
|
||||
{ label: "Email", href: "mailto:contact@example.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Xusinov Mominjon. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -14,16 +14,16 @@ import { Palette, Globe, Sparkles, Zap, Smartphone, Grid } from 'lucide-react';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
sizing="mediumLarge"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
@@ -101,6 +101,7 @@ export default function LandingPage() {
|
||||
description="A comprehensive overview of my technical and creative capabilities."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "UI/UX Design", description: "Creating intuitive interfaces and seamless user experiences through research-driven design.", buttonIcon: Palette
|
||||
@@ -130,6 +131,7 @@ export default function LandingPage() {
|
||||
description="What clients say about working with me and the results we've achieved together."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Transformed Our Digital Presence", quote: "Xusinov completely transformed our digital presence. The design work was not only visually stunning but also strategically sound. Our conversion rates increased by 40% after the redesign.", name: "Sarah Johnson", role: "CEO of TechVenture", imageSrc: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", imageAlt: "professional headshot portrait business person"
|
||||
|
||||
162
src/app/portfolio/page.tsx
Normal file
162
src/app/portfolio/page.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
|
||||
export default function PortfolioPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Xusinov Mominjon"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="My Portfolio"
|
||||
description="Explore my selection of featured projects and case studies that showcase my design expertise."
|
||||
buttons={[
|
||||
{ text: "View All Projects", href: "#projects" },
|
||||
{ text: "Get in Touch", href: "/contact" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/overhead-view-four-yellow-cardboard-papers_23-2147878397.jpg"
|
||||
imageAlt="portfolio page hero background professional design"
|
||||
frameStyle="card"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardFour
|
||||
title="Featured Projects"
|
||||
description="A carefully curated selection of my best work across various design disciplines and industries."
|
||||
tag="Portfolio Highlights"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "E-Commerce Platform Redesign", price: "Completed 2024", variant: "UI/UX Design • E-Commerce", imageSrc: "http://img.b2bpic.net/free-psd/minimal-magazine-cover-landing-page-template_23-2149660314.jpg", imageAlt: "web design project showcase creative mockup"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Brand Identity System", price: "Completed 2023", variant: "Branding • Visual Identity", imageSrc: "http://img.b2bpic.net/free-psd/presentation-slides-landing-page-template_23-2149983821.jpg", imageAlt: "branding design project portfolio showcase"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Mobile App Interface Design", price: "Completed 2024", variant: "Mobile Design • UI/UX", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings_176420-16812.jpg", imageAlt: "digital design portfolio project example"
|
||||
},
|
||||
{
|
||||
id: "4", name: "SaaS Dashboard Redesign", price: "Completed 2023", variant: "Dashboard Design • UX", imageSrc: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", imageAlt: "saas dashboard design project example"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Corporate Website Design", price: "Completed 2024", variant: "Web Design • Branding", imageSrc: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg", imageAlt: "corporate website design portfolio"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Marketing Campaign Design", price: "Completed 2023", variant: "Graphics • Marketing", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-successful-businesswoman-suit-cross-arms-chest-smile-look-confident-stan_1258-118782.jpg", imageAlt: "marketing campaign design project"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Client Testimonials"
|
||||
description="What clients say about their experience working with me."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Transformed Our Digital Presence", quote: "Xusinov completely transformed our digital presence. The design work was not only visually stunning but also strategically sound. Our conversion rates increased by 40% after the redesign.", name: "Sarah Johnson", role: "CEO of TechVenture", imageSrc: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", imageAlt: "professional headshot portrait business person"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Professional Excellence", quote: "Working with Xusinov was a pleasure. They understood our brand vision perfectly and delivered beyond expectations. The attention to detail and creative solutions were exceptional.", name: "Michael Chen", role: "Marketing Director at InnovateLab", imageSrc: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg", imageAlt: "professional headshot portrait business person"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Creative Problem Solver", quote: "What impressed me most was Xusinov's ability to solve complex design problems with elegant solutions. They were responsive, collaborative, and delivered on time.", name: "Emma Rodriguez", role: "Founder at DesignStudio Co", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-successful-businesswoman-suit-cross-arms-chest-smile-look-confident-stan_1258-118782.jpg", imageAlt: "professional headshot portrait business person"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Start Your Project"
|
||||
title="Ready to Work on Your Next Project?"
|
||||
description="Let's collaborate and bring your vision to life. Get in touch to discuss your project needs."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg"
|
||||
imageAlt="contact form background professional design"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Send Message"
|
||||
termsText="I'll get back to you within 48 hours. Your information is safe with me."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Xusinov Mominjon"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Resume", href: "/resume" },
|
||||
{ label: "Portfolio", href: "/portfolio" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "UI/UX Design", href: "/services" },
|
||||
{ label: "Web Design", href: "/services" },
|
||||
{ label: "Branding", href: "/services" },
|
||||
{ label: "Design Systems", href: "/services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Dribbble", href: "https://dribbble.com" },
|
||||
{ label: "Email", href: "mailto:contact@example.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Xusinov Mominjon. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
167
src/app/resume/page.tsx
Normal file
167
src/app/resume/page.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Briefcase, Award, Users, Code } from 'lucide-react';
|
||||
|
||||
export default function ResumePage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Xusinov Mominjon"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="My Resume"
|
||||
description="Professional experience, education, and skills that define my career as a designer."
|
||||
buttons={[
|
||||
{ text: "Download PDF", href: "#" },
|
||||
{ text: "View Portfolio", href: "/portfolio" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/overhead-view-four-yellow-cardboard-papers_23-2147878397.jpg"
|
||||
imageAlt="resume page hero background professional design"
|
||||
frameStyle="card"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<MetricCardTen
|
||||
title="Professional Experience"
|
||||
description="My journey through diverse roles and impactful projects."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "Senior Product Designer", subtitle: "2023 - Present · TechVenture Inc", category: "Design Leadership", value: "Leading Design Team", buttons: [
|
||||
{ text: "Learn More", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2", title: "UI/UX Designer", subtitle: "2021 - 2023 · InnovateLab", category: "Product Design", value: "15+ Projects", buttons: [
|
||||
{ text: "Learn More", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "3", title: "Brand Designer", subtitle: "2019 - 2021 · Creative Studio Co", category: "Branding", value: "50+ Brands", buttons: [
|
||||
{ text: "Learn More", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "4", title: "Junior Designer", subtitle: "2018 - 2019 · Design Beginnings", category: "Entry Level", value: "Foundation", buttons: [
|
||||
{ text: "Learn More", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="education" data-section="education">
|
||||
<FeatureCardTwentySix
|
||||
title="Education & Certifications"
|
||||
description="Continuous learning and professional development."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Bachelor of Arts in Design", description: "University of Creative Arts - Graduated 2018. Focused on digital design, visual communication, and user experience principles.", buttonIcon: Award
|
||||
},
|
||||
{
|
||||
title: "UX Design Certification", description: "Google UX Design Professional Certificate - Completed 2020. Comprehensive training in user research, wireframing, and prototyping.", buttonIcon: Code
|
||||
},
|
||||
{
|
||||
title: "Advanced Figma Masterclass", description: "Interaction Design Foundation - Completed 2021. Expert-level design systems and advanced prototyping techniques.", buttonIcon: Briefcase
|
||||
},
|
||||
{
|
||||
title: "Design Leadership Workshop", description: "Industry Leaders Conference - Completed 2023. Leading design teams, strategic thinking, and business acumen.", buttonIcon: Users
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Get in Touch"
|
||||
title="Let's Discuss Your Project"
|
||||
description="Interested in working together? I'm always open to discussing new projects and opportunities."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg"
|
||||
imageAlt="contact form background professional design"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Send Message"
|
||||
termsText="I'll get back to you within 48 hours. Your information is safe with me."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Xusinov Mominjon"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Resume", href: "/resume" },
|
||||
{ label: "Portfolio", href: "/portfolio" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "UI/UX Design", href: "/services" },
|
||||
{ label: "Web Design", href: "/services" },
|
||||
{ label: "Branding", href: "/services" },
|
||||
{ label: "Design Systems", href: "/services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Dribbble", href: "https://dribbble.com" },
|
||||
{ label: "Email", href: "mailto:contact@example.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Xusinov Mominjon. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
176
src/app/services/page.tsx
Normal file
176
src/app/services/page.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Palette, Globe, Sparkles, Zap, Smartphone, Grid } from 'lucide-react';
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Xusinov Mominjon"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="My Services"
|
||||
description="Comprehensive design services tailored to elevate your brand and create meaningful digital experiences."
|
||||
buttons={[
|
||||
{ text: "View Services", href: "#services" },
|
||||
{ text: "Get a Quote", href: "/contact" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/overhead-view-four-yellow-cardboard-papers_23-2147878397.jpg"
|
||||
imageAlt="services page hero background professional design"
|
||||
frameStyle="card"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
title="Core Services & Expertise"
|
||||
description="I offer a comprehensive range of design services to meet all your digital needs."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "UI/UX Design", description: "Creating intuitive interfaces and seamless user experiences through research-driven design. I focus on user needs and create designs that convert.", buttonIcon: Palette
|
||||
},
|
||||
{
|
||||
title: "Web Design", description: "Building responsive, modern websites that engage users and drive conversions. From landing pages to full-featured web applications.", buttonIcon: Globe
|
||||
},
|
||||
{
|
||||
title: "Branding", description: "Developing cohesive visual identities that communicate brand values effectively. Logo design, brand guidelines, and complete brand systems.", buttonIcon: Sparkles
|
||||
},
|
||||
{
|
||||
title: "Figma & Design Tools", description: "Expert proficiency in industry-leading design software and prototyping tools. I create efficient workflows using Figma, Adobe suite, and more.", buttonIcon: Zap
|
||||
},
|
||||
{
|
||||
title: "Responsive Design", description: "Ensuring pixel-perfect experiences across all devices and screen sizes. Mobile-first approach with desktop enhancement.", buttonIcon: Smartphone
|
||||
},
|
||||
{
|
||||
title: "Design Systems", description: "Creating scalable design systems that maintain consistency and efficiency. Component libraries and design documentation.", buttonIcon: Grid
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Service Packages"
|
||||
description="Choose the perfect package for your project needs. All packages include consultation and unlimited revisions."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Popular", price: "$2,500", subtitle: "Perfect for small projects", buttons: [
|
||||
{ text: "Get Started", href: "/contact" }
|
||||
],
|
||||
features: [
|
||||
"Initial consultation", "3-5 design concepts", "Unlimited revisions", "Source files included", "1-week delivery"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Most Popular", price: "$5,000", subtitle: "Ideal for growing businesses", buttons: [
|
||||
{ text: "Get Started", href: "/contact" }
|
||||
],
|
||||
features: [
|
||||
"Deep discovery workshop", "10-15 design concepts", "Unlimited revisions", "Prototype included", "Complete brand guidelines", "2-week delivery"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Premium", price: "$10,000", subtitle: "Comprehensive design solutions", buttons: [
|
||||
{ text: "Get Started", href: "/contact" }
|
||||
],
|
||||
features: [
|
||||
"Extended discovery phase", "20+ design concepts", "Unlimited revisions", "Interactive prototype", "Complete design system", "Ongoing support (30 days)", "3-week delivery"
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Ready to Get Started?"
|
||||
title="Let's Bring Your Vision to Life"
|
||||
description="Contact me today to discuss your project requirements and find the perfect solution for your design needs."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg"
|
||||
imageAlt="contact form background professional design"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Send Message"
|
||||
termsText="I'll get back to you within 48 hours to discuss your project. Your information is secure."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Xusinov Mominjon"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Resume", href: "/resume" },
|
||||
{ label: "Portfolio", href: "/portfolio" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "UI/UX Design", href: "/services" },
|
||||
{ label: "Web Design", href: "/services" },
|
||||
{ label: "Branding", href: "/services" },
|
||||
{ label: "Design Systems", href: "/services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Dribbble", href: "https://dribbble.com" },
|
||||
{ label: "Email", href: "mailto:contact@example.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Xusinov Mominjon. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f7f6f7;
|
||||
--card: #ffffff;
|
||||
--foreground: #25190c;
|
||||
--primary-cta: #ff6207;
|
||||
--background: #fbfaff;
|
||||
--card: #f7f5ff;
|
||||
--foreground: #0f0022;
|
||||
--primary-cta: #8b5cf6;
|
||||
--primary-cta-text: #f7f6f7;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #25190c;
|
||||
--accent: #ffce93;
|
||||
--background-accent: #e8cfa8;
|
||||
--accent: #d8cef5;
|
||||
--background-accent: #c4a8f9;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user