From 055d8feb7dc5a7af00514aa0519590de83c22e68 Mon Sep 17 00:00:00 2001 From: bender Date: Mon, 9 Mar 2026 08:28:00 +0000 Subject: [PATCH] Update src/app/projects/[id]/page.tsx --- src/app/projects/[id]/page.tsx | 198 ++++++++++++++++++++++++--------- 1 file changed, 145 insertions(+), 53 deletions(-) diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx index 8498603..38c18f5 100644 --- a/src/app/projects/[id]/page.tsx +++ b/src/app/projects/[id]/page.tsx @@ -2,88 +2,180 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; -import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel'; -import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour'; -import ContactCenter from '@/components/sections/contact/ContactCenter'; -import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; +import HeroBillboard from "@/components/sections/hero/HeroBillboard"; +import TextSplitAbout from "@/components/sections/about/TextSplitAbout"; +import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour"; +import ContactCenter from "@/components/sections/contact/ContactCenter"; +import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal"; +import { useParams } from "next/navigation"; + +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: [ + { + 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"}, + ], + }, + "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: [ + { + 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"}, + ], + }, + "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: [ + { + 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"}, + ], + }, +}; export default function ProjectDetail() { - const navItems = [ - { name: "Home", id: "/" }, - { name: "Projects", id: "/projects" }, - { name: "About", id: "about" }, - { name: "Contact", id: "contact" }, - ]; + const params = useParams(); + const id = params.id as string; + const project = projectsData[id]; + + if (!project) { + return ( + + +
+

Project not found

+
+ + ); + } return (
-
-
- + +
+ +
+ ({ + id: `result-${index}`, + 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"}))} + animationType="slide-up" + textboxLayout="default" + useInvertedBackground={false} />