Update src/app/projects/[id]/page.tsx
This commit is contained in:
@@ -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<string, any> = {
|
||||
"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"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Portfolio"
|
||||
navItems={[
|
||||
{ name: "Work", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Services", id: "/" },
|
||||
{ name: "Contact", id: "/" },
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/"}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<h1>Project not found</h1>
|
||||
<div className="min-h-screen flex flex-col items-center justify-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Project Not Found</h1>
|
||||
<a href="/" className="text-primary-cta underline">
|
||||
Return to Portfolio
|
||||
</a>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
@@ -104,10 +108,10 @@ export default function ProjectDetail() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Portfolio"
|
||||
navItems={[
|
||||
{ name: "Back to Work", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Services", id: "/" },
|
||||
{ name: "Contact", id: "/" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/"}}
|
||||
@@ -115,13 +119,15 @@ export default function ProjectDetail() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
<HeroBillboardCarousel
|
||||
title={project.title}
|
||||
description={project.subtitle}
|
||||
tag={project.category}
|
||||
tag="Case Study"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc={project.heroImage}
|
||||
imageAlt={project.heroAlt}
|
||||
mediaItems={project.heroImages.map((src: string) => ({
|
||||
imageSrc: src,
|
||||
imageAlt: project.title,
|
||||
}))}
|
||||
buttons={[
|
||||
{ text: "Back to Portfolio", href: "/" },
|
||||
{ text: "Start a Project", href: "/" },
|
||||
@@ -129,29 +135,62 @@ export default function ProjectDetail() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="overview" data-section="overview">
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Project Overview"
|
||||
description={[
|
||||
project.overview,
|
||||
`Challenge: ${project.challenge}`,
|
||||
`Solution: ${project.solution}`,
|
||||
`Results: ${project.results.join(", ")}`,
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Back to Portfolio", href: "/" },
|
||||
{ text: "Next Project", href: "/" },
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="results" data-section="results">
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFour
|
||||
title="Key Results"
|
||||
description="Measurable outcomes and impact"
|
||||
tag="Achievements"
|
||||
description="Measurable impact achieved through this project"
|
||||
tag="Outcomes"
|
||||
features={project.results.map((result: string, index: number) => ({
|
||||
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}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle={`${project.testimonial.name}, ${project.testimonial.role}`}
|
||||
cardTag="Client Feedback"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: project.testimonial.name,
|
||||
imageSrc: project.testimonial.image,
|
||||
imageAlt: project.testimonial.name,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Related Projects"
|
||||
description="Explore other successful case studies"
|
||||
tag="More Work"
|
||||
features={project.relatedProjects}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -161,8 +200,8 @@ export default function ProjectDetail() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Let's Talk"
|
||||
title="Ready to Start Your Project?"
|
||||
description="Get in touch to discuss your design needs and how we can collaborate to create exceptional digital experiences."
|
||||
title="Ready for Your Next Project?"
|
||||
description="Get in touch to discuss your design needs, project vision, and how we can collaborate to create exceptional digital experiences."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email address"
|
||||
|
||||
Reference in New Issue
Block a user