bender/7535110a-b7d4-41f6-82d5-cccd151dccae
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add src/app/portfolio/[projectId]/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-09 08:28:00 +00:00
parent c24bf28d9b
commit d2bda4e745
1 changed files with 245 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/app/portfolio/[projectId]/page.tsx Normal file
View File

@@ -0,0 +1,245 @@
"use client";
import { useParams } from "next/navigation";
import Link from "next/link";
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";
// Mock project data - replace with actual data fetching
const projects: Record<string, any> = {
"1": {
id: "1", title: "Digital Brand Identity System", subtitle: "Complete visual identity redesign for tech startup", category: "Brand Strategy", year: "2024", 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.", fullDescription: [
"This comprehensive brand identity project involved creating a complete visual system for an emerging tech startup. The project scope included logo design, color palette development, typography system, brand guidelines, and a full suite of digital assets.", "Through extensive stakeholder interviews and market research, we developed a brand strategy that positioned the company as an innovative leader in their space. The visual identity reflects the company's core values of innovation, reliability, and forward-thinking approach.", "The resulting brand system has been implemented across all digital touchpoints, including website, marketing materials, product interfaces, and company communications. The new brand identity has contributed to a 40% increase in brand recognition within the first six months of launch."],
tags: ["Branding", "Identity", "Design System"],
challenge:
"The startup needed to establish a strong visual identity that would differentiate them in a crowded market while conveying trust and innovation to enterprise clients.", solution:
"We created a modern, versatile brand system with a distinctive visual language that works across all applications, from digital interfaces to printed materials.", result: "40% increase in brand recognition, improved market positioning, and a comprehensive design system for future growth.", images: [
"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/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png"],
},
"2": {
id: "2", title: "E-commerce Platform Redesign", subtitle: "User-centered redesign of enterprise e-commerce platform", category: "UX Design", year: "2024", 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.", fullDescription: [
"This e-commerce redesign project focused on improving user experience and increasing conversion rates for a large-scale enterprise platform. Through extensive user research and analytics review, we identified key friction points in the customer journey.", "We implemented a mobile-first design approach, streamlined the checkout process, and created an intuitive navigation system that reduced friction at every step. Accessibility was a key consideration, with WCAG 2.1 AA compliance implemented throughout.", "The redesigned platform resulted in a 35% increase in conversion rates, 40% reduction in cart abandonment, and improved customer satisfaction scores. The platform now serves over 100,000 monthly active users with a seamless shopping experience."],
tags: ["UX Design", "E-commerce", "Accessibility"],
challenge:
"The existing platform suffered from high cart abandonment rates and poor mobile experience, resulting in significant revenue loss.", solution:
"We conducted comprehensive user research, optimized the checkout flow, and implemented a mobile-first responsive design with improved accessibility.", result: "35% increase in conversion rate, 40% reduction in cart abandonment, improved WCAG accessibility compliance.", images: [
"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"],
},
"3": {
id: "3", title: "SaaS Product Interface Design", subtitle: "Designed intuitive interface for data analytics SaaS platform", category: "Product Design", year: "2024", 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%.", fullDescription: [
"This SaaS design project involved creating a comprehensive product interface for a data analytics platform serving enterprise clients. The challenge was to make complex data visualization and analysis tools accessible to non-technical users.", "We developed an extensive design system with over 15 component variations, created interactive prototypes for validation, and implemented a guided onboarding experience that reduced the learning curve significantly.", "The result was a 50% reduction in support tickets, improved user engagement, and increased adoption rates among new customers. The design system has also streamlined development processes, reducing design-to-development time by 35%."],
tags: ["SaaS", "Product Design", "UI Design"],
challenge:
"Making complex data analytics tools intuitive for both technical and non-technical users while maintaining powerful functionality.", solution:
"Created a comprehensive design system with clear information architecture, progressive disclosure patterns, and comprehensive onboarding.", result: "50% reduction in support tickets, 35% improvement in design-to-development time, increased user adoption.", images: [
"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/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png"],
},
};
export default function ProjectDetailPage() {
const params = useParams();
const projectId = params.projectId as string;
const project = projects[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">
<div id="nav" data-section="nav">
<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>
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<h1 className="text-2xl font-bold mb-4">Project not found</h1>
<Link href="/" className="text-blue-500 hover:underline">
Back to portfolio
</Link>
</div>
</div>
</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 id="nav" data-section="nav">
<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>
{/* Back Button */}
<div className="pt-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
<Link
href="/"
className="inline-flex items-center gap-2 text-sm font-medium hover:opacity-70 transition-opacity mb-12"
>
<ArrowLeft size={16} />
Back to Portfolio
</Link>
</div>
{/* Main Content */}
<div className="flex-1 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
{/* Hero Section */}
<div className="mb-16">
<div className="mb-8">
<p className="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wide">
{project.category}
</p>
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 leading-tight">
{project.title}
</h1>
<p className="text-lg sm:text-xl text-gray-600 max-w-3xl">
{project.subtitle}
</p>
</div>
{/* Tags */}
<div className="flex flex-wrap gap-2 mb-12">
{project.tags.map((tag: string) => (
<span
key={tag}
className="px-3 py-1 bg-gray-200 text-gray-800 text-xs font-medium rounded-full"
>
{tag}
</span>
))}
</div>
{/* Hero Image */}
{project.images[0] && (
<div className="w-full rounded-lg overflow-hidden mb-12 aspect-video">
<img
src={project.images[0]}
alt={project.title}
className="w-full h-full object-cover"
/>
</div>
)}
</div>
{/* Project Details Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16 py-12 border-t border-gray-200">
<div>
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
Challenge
</h3>
<p className="text-gray-800">{project.challenge}</p>
</div>
<div>
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
Solution
</h3>
<p className="text-gray-800">{project.solution}</p>
</div>
<div>
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
Result
</h3>
<p className="text-gray-800">{project.result}</p>
</div>
</div>
{/* Full Description */}
<div className="prose prose-lg max-w-none mb-16">
<h2 className="text-3xl font-bold mb-8">Project Overview</h2>
<div className="space-y-6">
{project.fullDescription.map((paragraph: string, idx: number) => (
<p key={idx} className="text-gray-700 leading-relaxed">
{paragraph}
</p>
))}
</div>
</div>
{/* Additional Images */}
{project.images.length > 1 && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
{project.images.slice(1).map((image: string, idx: number) => (
<div key={idx} className="rounded-lg overflow-hidden aspect-square">
<img
src={image}
alt={`${project.title} - ${idx + 2}`}
className="w-full h-full object-cover"
/>
</div>
))}
</div>
)}
{/* CTA Section */}
<div className="py-12 mb-16 border-t border-gray-200 text-center">
<h3 className="text-2xl font-bold mb-4">Interested in working together?</h3>
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
Let's discuss your next project and how we can create exceptional digital experiences.
</p>
<Link
href="/#contact"
className="inline-block px-8 py-3 bg-black text-white font-medium rounded-lg hover:opacity-80 transition-opacity"
>
Start a Project
</Link>
</div>
</div>
{/* Footer */}
<div id="footer" data-section="footer" className="mt-auto">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</div>
</ThemeProvider>
);
}