From 1edc8132baeea4bd0c8020b38fb9a52467d3be73 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 08:29:35 +0000
Subject: [PATCH] Add src/app/portfolio/[projectId]/page.tsx

---
 src/app/portfolio/[projectId]/page.tsx | 245 +++++++++++++++++++++++++
 1 file changed, 245 insertions(+)
 create mode 100644 src/app/portfolio/[projectId]/page.tsx

diff --git a/src/app/portfolio/[projectId]/page.tsx b/src/app/portfolio/[projectId]/page.tsx
new file mode 100644
index 0000000..8ef0fe9
--- /dev/null
+++ b/src/app/portfolio/[projectId]/page.tsx
@@ -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>
+  );
+}