Add src/app/project/[id]/page.tsx
This commit is contained in:
200
src/app/project/[id]/page.tsx
Normal file
200
src/app/project/[id]/page.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
"use client";
|
||||
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
|
||||
const projectData: Record<string, any> = {
|
||||
"1": {
|
||||
title: "Digital Brand Identity System", category: "Brand Strategy", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", tags: ["Branding", "Identity", "Design System"],
|
||||
fullDescription:
|
||||
"This comprehensive brand identity project transformed a tech startup's visual presence. We developed a complete visual language that aligned with their innovative mission while maintaining professional credibility. The project included logo design, color palette development, typography system, brand guidelines, and a complete digital asset library. The new identity increased brand recognition by 40% within the first six months.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase", challenge:
|
||||
"The startup needed a distinct visual identity that could compete in a crowded tech market while conveying trust and innovation.", solution:
|
||||
"We created a modern, scalable brand system that balanced cutting-edge design with timeless principles, ensuring consistency across all touchpoints.", results: ["40% increase in brand recognition", "Unified visual language", "Comprehensive style guide", "Digital asset library"],
|
||||
},
|
||||
"2": {
|
||||
title: "E-commerce Platform Redesign", category: "UX Design", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", tags: ["UX Design", "E-commerce", "Accessibility"],
|
||||
fullDescription:
|
||||
"This e-commerce platform redesign focused on improving user experience across all devices. Through extensive user research and testing, we identified pain points in the shopping journey and implemented solutions that significantly improved conversion rates. The redesign emphasized accessibility, mobile-first design, and simplified navigation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design", challenge:
|
||||
"The platform had a high cart abandonment rate and users complained about complex navigation and confusing checkout process.", solution:
|
||||
"We streamlined the user journey, implemented progressive disclosure, and optimized the checkout flow to reduce friction and improve conversion.", results: ["35% improvement in conversion rate", "50% reduction in cart abandonment", "WCAG 2.1 AA compliance", "Mobile conversion rate increased by 45%"],
|
||||
},
|
||||
"3": {
|
||||
title: "SaaS Product Interface Design", category: "Product Design", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", tags: ["SaaS", "Product Design", "UI Design"],
|
||||
fullDescription:
|
||||
"For this data analytics SaaS platform, we designed an intuitive interface that made complex data visualization accessible to non-technical users. The project included creating an extensive design system with reusable components, improving the onboarding experience, and implementing best practices for data presentation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design", challenge:
|
||||
"Users struggled with the complexity of data analytics tools and required extensive training. Support tickets were overwhelming.", solution:
|
||||
"We redesigned the interface with a focus on progressive disclosure, clear data visualization, and comprehensive onboarding that guided users through key features.", results: ["50% reduction in support tickets", "Design system with 15+ components", "Improved user onboarding time by 60%", "User satisfaction score increased from 6.2 to 8.7 out of 10"],
|
||||
},
|
||||
};
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const projectId = params.id as string;
|
||||
const project = projectData[projectId];
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div className="min-h-screen flex flex-col items-center justify-center">
|
||||
<h1 className="text-3xl font-bold mb-4">Project not found</h1>
|
||||
<button
|
||||
onClick={() => router.push("/#work")}
|
||||
className="flex items-center gap-2 text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
Back to Work
|
||||
</button>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Navigation */}
|
||||
<div className="sticky top-0 z-50">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Portfolio"
|
||||
navItems={[
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 w-full max-w-6xl mx-auto px-4 py-16 md:py-24">
|
||||
{/* Back Button */}
|
||||
<button
|
||||
onClick={() => router.push("/#work")}
|
||||
className="flex items-center gap-2 text-foreground hover:text-primary-cta mb-8 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span>Back to Work</span>
|
||||
</button>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="mb-12 md:mb-16">
|
||||
<div className="mb-6">
|
||||
<span className="inline-block px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4">
|
||||
{project.category}
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">{project.title}</h1>
|
||||
<p className="text-lg text-foreground/70 mb-6">{project.description}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((tag: string) => (
|
||||
<span key={tag} className="px-3 py-1 rounded-full bg-card border border-foreground/10 text-sm">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Image */}
|
||||
<div className="rounded-lg overflow-hidden bg-card aspect-video">
|
||||
<img
|
||||
src={project.imageSrc}
|
||||
alt={project.imageAlt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Details */}
|
||||
<div className="grid md:grid-cols-2 gap-12 mb-16">
|
||||
{/* Challenge */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Challenge</h2>
|
||||
<p className="text-foreground/70 leading-relaxed">{project.challenge}</p>
|
||||
</div>
|
||||
|
||||
{/* Solution */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-4">Solution</h2>
|
||||
<p className="text-foreground/70 leading-relaxed">{project.solution}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Description */}
|
||||
<div className="mb-16 p-8 rounded-lg bg-card border border-foreground/10">
|
||||
<h2 className="text-2xl font-bold mb-4">Project Overview</h2>
|
||||
<p className="text-foreground/70 leading-relaxed">{project.fullDescription}</p>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-6">Results</h2>
|
||||
<ul className="grid md:grid-cols-2 gap-4">
|
||||
{project.results.map((result: string, index: number) => (
|
||||
<li key={index} className="flex items-start gap-3 p-4 rounded-lg bg-card border border-foreground/10">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="flex items-center justify-center h-6 w-6 rounded-full bg-accent text-background">
|
||||
<span className="text-sm font-bold">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-foreground/70">{result}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="w-full py-16 md:py-24 border-t border-foreground/10">
|
||||
<div className="max-w-6xl mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Interested in working together?</h2>
|
||||
<p className="text-lg text-foreground/70 mb-8 max-w-2xl mx-auto">
|
||||
Let's discuss your project vision and how I can help bring your ideas to life.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => router.push("/#contact")}
|
||||
className="inline-block px-8 py-3 rounded-lg bg-primary-cta text-background font-medium hover:bg-primary-cta/90 transition-colors"
|
||||
>
|
||||
Start a Project
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-foreground/10">
|
||||
<FooterLogoReveal
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user