From 954a7e26e791bc4a201b2beeb46bf11825ca90ef Mon Sep 17 00:00:00 2001 From: bender Date: Mon, 9 Mar 2026 08:32:21 +0000 Subject: [PATCH] Add src/app/project/[id]/page.tsx --- src/app/project/[id]/page.tsx | 200 ++++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 src/app/project/[id]/page.tsx diff --git a/src/app/project/[id]/page.tsx b/src/app/project/[id]/page.tsx new file mode 100644 index 0000000..9324cb0 --- /dev/null +++ b/src/app/project/[id]/page.tsx @@ -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 = { + "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 ( + +
+

Project not found

+ +
+ + ); + } + + return ( + +
+ {/* Navigation */} +
+ +
+ + {/* Main Content */} +
+ {/* Back Button */} + + + {/* Hero Section */} +
+
+ + {project.category} + +

{project.title}

+

{project.description}

+
+ {project.tags.map((tag: string) => ( + + {tag} + + ))} +
+
+ + {/* Project Image */} +
+ {project.imageAlt} +
+
+ + {/* Project Details */} +
+ {/* Challenge */} +
+

Challenge

+

{project.challenge}

+
+ + {/* Solution */} +
+

Solution

+

{project.solution}

+
+
+ + {/* Full Description */} +
+

Project Overview

+

{project.fullDescription}

+
+ + {/* Results */} +
+

Results

+
    + {project.results.map((result: string, index: number) => ( +
  • +
    +
    + ✓ +
    +
    + {result} +
    • + ))} +
+
+
+ + {/* CTA Section */} +
+
+

Interested in working together?

+

+ Let's discuss your project vision and how I can help bring your ideas to life. +

+ +
+
+ + {/* Footer */} +
+ +
+
+ + ); +}