Update src/app/page.tsx
This commit is contained in:
138
src/app/page.tsx
138
src/app/page.tsx
@@ -2,17 +2,31 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import { Award, Briefcase, CheckCircle, Code, Lightbulb, Mail, MessageSquare, Palette, Sparkles, Target, TrendingUp, User, Zap } from 'lucide-react';
|
||||
import { Award, Briefcase, Code, Lightbulb, Mail, MessageSquare, Palette, Sparkles, Target, TrendingUp, User, Zap, ArrowRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [selectedProject, setSelectedProject] = useState<string | null>(null);
|
||||
|
||||
const projects = [
|
||||
{
|
||||
id: "project-1", title: "E-Commerce Platform", category: "Web Design", year: "2024", description: "A modern e-commerce solution featuring intuitive product browsing, secure checkout, and comprehensive analytics dashboard.", imageSrc: "http://img.b2bpic.net/free-vector/goals-habits-tracking-app_23-2148676622.jpg", imageAlt: "web design project showcase"
|
||||
},
|
||||
{
|
||||
id: "project-2", title: "Corporate Identity", category: "Branding", year: "2024", description: "Complete brand strategy and visual identity including logo design, color palette, typography guidelines, and brand applications.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-with-color-palettes_23-2149337223.jpg", imageAlt: "branding design project"
|
||||
},
|
||||
{
|
||||
id: "project-3", title: "Mobile Application", category: "App Design", year: "2023", description: "User-centric mobile app design with seamless navigation, voice integration features, and accessibility-first approach.", imageSrc: "http://img.b2bpic.net/free-vector/voice-translator-app-concept_23-2148623184.jpg", imageAlt: "mobile app design showcase"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -42,9 +56,9 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
<HeroBillboard
|
||||
title="Crafting Digital Experiences"
|
||||
description="Creative portfolio showcasing design, development, and strategic solutions. Let's bring your vision to life."
|
||||
description="Welcome to my creative portfolio. I specialize in design, development, and strategic solutions. With years of experience working with startups and established brands, I transform ideas into impactful digital products. My online store features curated resources and design assets for creative professionals."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Welcome"
|
||||
tagIcon={Sparkles}
|
||||
@@ -54,11 +68,8 @@ export default function LandingPage() {
|
||||
{ text: "Let's Talk", href: "#contact" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-psd/new-feminity-fashion-landing-page-template_23-2149004074.jpg", imageAlt: "professional portfolio website hero" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-separate-workspace-with-two-laptops-stationeries_23-2147924196.jpg", imageAlt: "clean workspace desktop" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/glasses-magazine_1162-102.jpg", imageAlt: "designer portfolio showcase" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-psd/new-feminity-fashion-landing-page-template_23-2149004074.jpg"
|
||||
imageAlt="professional portfolio website hero"
|
||||
mediaAnimation="slide-up"
|
||||
ariaLabel="Hero section with portfolio introduction"
|
||||
/>
|
||||
@@ -76,36 +87,68 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="featured-work" data-section="featured-work">
|
||||
<ProductCardTwo
|
||||
title="Featured Projects"
|
||||
description="A selection of recent work demonstrating design excellence and technical expertise."
|
||||
tag="Portfolio"
|
||||
tagIcon={Briefcase}
|
||||
tagAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="blur-reveal"
|
||||
products={[
|
||||
{
|
||||
id: "project-1", brand: "Web Design", name: "E-Commerce Platform", price: "2024", rating: 5,
|
||||
reviewCount: "Client Project", imageSrc: "http://img.b2bpic.net/free-vector/goals-habits-tracking-app_23-2148676622.jpg", imageAlt: "web design project showcase"
|
||||
},
|
||||
{
|
||||
id: "project-2", brand: "Branding", name: "Corporate Identity", price: "2024", rating: 5,
|
||||
reviewCount: "Brand Strategy", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-with-color-palettes_23-2149337223.jpg", imageAlt: "branding design project"
|
||||
},
|
||||
{
|
||||
id: "project-3", brand: "App Design", name: "Mobile Application", price: "2023", rating: 5,
|
||||
reviewCount: "UI/UX Design", imageSrc: "http://img.b2bpic.net/free-vector/voice-translator-app-concept_23-2148623184.jpg", imageAlt: "mobile app design showcase"
|
||||
}
|
||||
]}
|
||||
ariaLabel="Featured projects section"
|
||||
/>
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{projects.map((project, index) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className="relative group cursor-pointer"
|
||||
onClick={() => setSelectedProject(project.id)}
|
||||
>
|
||||
<div className="relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src={project.imageSrc}
|
||||
alt={project.imageAlt}
|
||||
className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||
<ArrowRight className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-sm font-medium text-accent">{project.category}</p>
|
||||
<h3 className="text-lg font-semibold mt-2">{project.title}</h3>
|
||||
<p className="text-sm text-foreground/70 mt-1">{project.year}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{selectedProject && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50" onClick={() => setSelectedProject(null)}>
|
||||
<div className="bg-card rounded-lg max-w-2xl w-full max-h-[80vh] overflow-auto p-8" onClick={(e) => e.stopPropagation()}>
|
||||
{projects.find(p => p.id === selectedProject) && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-2">
|
||||
{projects.find(p => p.id === selectedProject)?.title}
|
||||
</h2>
|
||||
<p className="text-sm font-medium text-accent mb-4">
|
||||
{projects.find(p => p.id === selectedProject)?.category} • {projects.find(p => p.id === selectedProject)?.year}
|
||||
</p>
|
||||
<img
|
||||
src={projects.find(p => p.id === selectedProject)?.imageSrc}
|
||||
alt={projects.find(p => p.id === selectedProject)?.imageAlt}
|
||||
className="w-full h-80 object-cover rounded-lg mb-6"
|
||||
/>
|
||||
<p className="text-foreground/80 leading-relaxed">
|
||||
{projects.find(p => p.id === selectedProject)?.description}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setSelectedProject(null)}
|
||||
className="mt-6 px-6 py-2 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureBento
|
||||
<FeatureCardSeven
|
||||
title="Skills & Expertise"
|
||||
description="A comprehensive toolkit for delivering exceptional digital solutions."
|
||||
tag="Capabilities"
|
||||
@@ -116,25 +159,30 @@ export default function LandingPage() {
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
title: "User Experience Design", description: "Intuitive interfaces crafted with user research and best practices.", bentoComponent: "reveal-icon", icon: Palette
|
||||
id: 1,
|
||||
title: "User Experience Design", description: "Intuitive interfaces crafted with user research and best practices.", imageSrc: "http://img.b2bpic.net/free-vector/creative-team_23-2148176435.jpg", imageAlt: "UX design illustration"
|
||||
},
|
||||
{
|
||||
title: "Frontend Development", description: "Modern web technologies bringing designs to life efficiently.", bentoComponent: "reveal-icon", icon: Code
|
||||
id: 2,
|
||||
title: "Frontend Development", description: "Modern web technologies bringing designs to life efficiently.", imageSrc: "http://img.b2bpic.net/free-vector/web-development_23-2147153286.jpg", imageAlt: "Frontend development illustration"
|
||||
},
|
||||
{
|
||||
title: "Brand Strategy", description: "Strategic branding that resonates with your target audience.", bentoComponent: "reveal-icon", icon: Target
|
||||
id: 3,
|
||||
title: "Brand Strategy", description: "Strategic branding that resonates with your target audience.", imageSrc: "http://img.b2bpic.net/free-vector/branding-strategy_23-2148173502.jpg", imageAlt: "Brand strategy illustration"
|
||||
},
|
||||
{
|
||||
title: "Digital Marketing", description: "Data-driven campaigns maximizing reach and engagement.", bentoComponent: "reveal-icon", icon: TrendingUp
|
||||
id: 4,
|
||||
title: "Digital Marketing", description: "Data-driven campaigns maximizing reach and engagement.", imageSrc: "http://img.b2bpic.net/free-vector/digital-marketing_23-2148146555.jpg", imageAlt: "Digital marketing illustration"
|
||||
},
|
||||
{
|
||||
title: "Project Management", description: "Organized workflows ensuring timely and quality delivery.", bentoComponent: "reveal-icon", icon: CheckCircle
|
||||
id: 5,
|
||||
title: "Project Management", description: "Organized workflows ensuring timely and quality delivery.", imageSrc: "http://img.b2bpic.net/free-vector/project-management_23-2148223852.jpg", imageAlt: "Project management illustration"
|
||||
},
|
||||
{
|
||||
title: "Creative Direction", description: "Visionary guidance bringing innovative ideas to execution.", bentoComponent: "reveal-icon", icon: Lightbulb
|
||||
id: 6,
|
||||
title: "Creative Direction", description: "Visionary guidance bringing innovative ideas to execution.", imageSrc: "http://img.b2bpic.net/free-vector/creative-direction_23-2148122896.jpg", imageAlt: "Creative direction illustration"
|
||||
}
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Skills and expertise section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user