From 12d76cdee5ea1cc2fa99b713dee8727348e911ed Mon Sep 17 00:00:00 2001 From: bender Date: Mon, 9 Mar 2026 08:32:21 +0000 Subject: [PATCH] Update src/app/projects/[id]/page.tsx --- src/app/projects/[id]/page.tsx | 167 ++++++++++++++++++++------------- 1 file changed, 103 insertions(+), 64 deletions(-) diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx index 38c18f5..a1e4b89 100644 --- a/src/app/projects/[id]/page.tsx +++ b/src/app/projects/[id]/page.tsx @@ -1,57 +1,71 @@ "use client"; +import { useParams } from "next/navigation"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; -import HeroBillboard from "@/components/sections/hero/HeroBillboard"; -import TextSplitAbout from "@/components/sections/about/TextSplitAbout"; +import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel"; import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour"; +import TextSplitAbout from "@/components/sections/about/TextSplitAbout"; +import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve"; import ContactCenter from "@/components/sections/contact/ContactCenter"; import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal"; -import { useParams } from "next/navigation"; +// Mock project data structure const projectsData: Record = { "1": { - title: "Digital Brand Identity System", subtitle: "Complete visual identity redesign for tech startup", category: "Brand Strategy", heroImage: - "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", heroAlt: "Brand identity project showcase", overview: - "This comprehensive brand identity project transformed a tech startup's visual presence. We developed a cohesive brand system that aligned their values with market positioning.", challenge: - "The startup needed a distinctive visual identity that could scale across digital and physical touchpoints while maintaining brand consistency.", solution: - "We created a comprehensive brand guidelines document, typography system, color palette, and digital asset library. The new identity increased brand recognition by 40% within six months.", results: [ - "40% increase in brand recognition", "Comprehensive brand guidelines", "150+ digital and physical assets", "Scalable design system"], - images: [ + id: "1", title: "Digital Brand Identity System", subtitle: "Complete visual identity redesign for tech startup", 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.", heroImages: [ + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png"], + challenge: "The client needed a fresh brand identity to reflect their innovative approach to technology solutions. Their existing branding felt dated and didn't resonate with their target market of tech-savvy startups.", solution: "I conducted extensive market research and competitor analysis to identify market gaps. Working closely with the client, I developed a comprehensive brand strategy that included logo design, color palette, typography system, and brand guidelines. The new identity was modern, scalable, and distinctly positioned in the market.", results: [ + "40% increase in brand recognition", "Enhanced market positioning", "Improved customer engagement", "Scalable design system for future growth"], + testimonial: { + name: "Sarah Chen", role: "CEO", quote: "The new brand identity transformed how customers perceive our company. Within months, we saw significant improvement in lead generation and customer retention.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png"}, + relatedProjects: [ { - src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", alt: "Brand identity system overview"}, + id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform", tags: ["UX Design", "E-commerce"], + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce redesign"}, + { + id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics platform", tags: ["SaaS", "Product Design"], + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS design"}, ], }, "2": { - title: "E-commerce Platform Redesign", subtitle: "User-centered redesign of enterprise e-commerce platform", category: "UX Design", heroImage: - "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", heroAlt: "E-commerce platform design", overview: - "This e-commerce redesign focused on improving user experience and conversion rates through streamlined navigation and optimized checkout flow.", challenge: - "The existing platform had high cart abandonment rates and complex navigation that confused users during the purchase process.", solution: - "We implemented a mobile-first approach, created accessible design patterns, and simplified the checkout process. The new design achieved a 35% improvement in conversion rates.", results: [ - "35% increase in conversion rates", "50% reduction in cart abandonment", "WCAG 2.1 AA accessibility compliance", "Mobile-first responsive design"], - images: [ + id: "2", title: "E-commerce Platform Redesign", subtitle: "User-centered redesign of enterprise e-commerce platform", 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.", heroImages: [ + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png"], + challenge: "The existing e-commerce platform had a complex checkout flow resulting in a 60% cart abandonment rate. The interface was cluttered, and mobile users faced significant usability issues.", solution: "I conducted user research and usability testing to identify pain points. The redesign focused on streamlining the checkout process, implementing clear call-to-action buttons, and ensuring mobile-first responsiveness. I also implemented accessibility features following WCAG guidelines.", results: [ + "35% increase in conversion rate", "60% reduction in cart abandonment", "40% increase in mobile transactions", "Enhanced accessibility compliance"], + testimonial: { + name: "Marcus Johnson", role: "Product Director", quote: "The redesigned platform has been instrumental in our growth. The improved user experience directly translated to increased sales and customer satisfaction.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png"}, + relatedProjects: [ { - src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", alt: "E-commerce platform interface"}, + id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup", tags: ["Branding", "Identity"], + 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"}, + { + id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics platform", tags: ["SaaS", "Product Design"], + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS design"}, ], }, "3": { - title: "SaaS Product Interface Design", subtitle: "Intuitive interface for data analytics SaaS platform", category: "Product Design", heroImage: - "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", heroAlt: "SaaS product interface design", overview: - "We designed an intuitive interface for a data analytics platform, creating interactive prototypes and a comprehensive design system for consistency.", challenge: - "The platform needed to present complex data in an accessible way while maintaining an intuitive user experience for both novice and advanced users.", solution: - "We created a hierarchical information architecture, developed 15+ reusable components, and built an enhanced onboarding experience that reduced support tickets by 50%.", results: [ - "50% reduction in support tickets", "15+ component variations", "Interactive prototype suite", "Comprehensive design system"], - images: [ + id: "3", title: "SaaS Product Interface Design", subtitle: "Intuitive interface design for data analytics platform", 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%.", heroImages: [ + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png"], + challenge: "Users found the data analytics platform overwhelming due to complex interfaces and poor information hierarchy. The steep learning curve resulted in high support costs and low user adoption rates.", solution: "I created a comprehensive design system with reusable components and clear information architecture. The new interface simplified complex data visualization, implemented progressive disclosure, and included an interactive onboarding flow to guide users through key features.", results: [ + "50% reduction in support tickets", "75% faster user onboarding", "Improved user satisfaction scores", "Scalable design system for product growth"], + testimonial: { + name: "Elena Rodriguez", role: "Head of Product", quote: "The new design has revolutionized how our users interact with our platform. The reduction in support tickets alone has freed up resources for innovation.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png"}, + relatedProjects: [ { - src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", alt: "SaaS platform dashboard"}, + id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup", tags: ["Branding", "Identity"], + 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"}, + { + id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform", tags: ["UX Design", "E-commerce"], + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce redesign"}, ], }, }; -export default function ProjectDetail() { +export default function ProjectDetailPage() { const params = useParams(); - const id = params.id as string; - const project = projectsData[id]; + const projectId = params.id as string; + const project = projectsData[projectId]; if (!project) { return ( @@ -67,21 +81,11 @@ export default function ProjectDetail() { secondaryButtonStyle="solid" headingFontWeight="normal" > - -
-

Project not found

+
+

Project Not Found

+ + Return to Portfolio +
); @@ -104,10 +108,10 @@ export default function ProjectDetail() {
- ({ + imageSrc: src, + imageAlt: project.title, + }))} buttons={[ { text: "Back to Portfolio", href: "/" }, { text: "Start a Project", href: "/" }, @@ -129,29 +135,62 @@ export default function ProjectDetail() { />
-
+
-
+
({ - id: `result-${index}`, + id: String(index + 1), title: result, - author: "Impact", description: "Delivered value", tags: ["Success"], - 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: "Result"}))} + author: "Achievement", description: `Successfully delivered this key result through strategic design and implementation.", tags: ["Success", "Impact"], + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png", imageAlt: result, + }))} + animationType="slide-up" + textboxLayout="default" + useInvertedBackground={false} + /> +
+ +
+ +
+ +
+