2026-03-09 08:32:26 +00:00
4 changed files with 327 additions and 73 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,17 +1,19 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { ServiceWrapper } from "@/providers/themeProvider/ServiceWrapper";
+import { Tag } from "@/components/tag/Tag";

 const geist = Geist({
  variable: "--font-geist-sans",  subsets: ["latin"],
 });

-const geistMono = Geist_Mono({
+const geist_mono = Geist_Mono({
  variable: "--font-geist-mono",  subsets: ["latin"],
 });

 export const metadata: Metadata = {
-  title: "Portfolio",  description: "Innovative design solutions"};
+  title: "Portfolio | Creative Design & UX Expertise",  description: "Explore innovative design solutions and digital experiences crafted with strategic thinking and creative excellence."};

 export default function RootLayout({
  children,
@@ -20,12 +22,15 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en" suppressHydrationWarning>
-      <body className={`${geist.variable} ${geistMono.variable}`}>
-        {children}
+      <body className={`${geist.variable} ${geist_mono.variable}`}>
+        <ServiceWrapper>
+          <Tag />
+          {children}
+        </ServiceWrapper>
        <script
-          src="https://cdn.jsdelivr.net/gh/lenis/lenis@latest/bundled/lenis.js"
          async
-        />
+          src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js"
+        ></script>
      
        <script
          dangerouslySetInnerHTML={{
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { useRouter } from "next/navigation";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
@@ -10,6 +11,12 @@ import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";

 export default function LandingPage() {
+  const router = useRouter();
+
+  const handleProjectClick = (projectId: string) => {
+    router.push(`/project/${projectId}`);
+  };
+
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
@@ -72,13 +79,16 @@ export default function LandingPage() {
          features={[
            {
              id: "1",              title: "Digital Brand Identity System",              author: "Brand Strategy",              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.",              tags: ["Branding", "Identity", "Design System"],
-              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 project showcase"},
+              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 project showcase",              onFeatureClick: () => handleProjectClick("1"),
+            },
            {
              id: "2",              title: "E-commerce Platform Redesign",              author: "UX Design",              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.",              tags: ["UX Design", "E-commerce", "Accessibility"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",              imageAlt: "E-commerce platform design"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",              imageAlt: "E-commerce platform design",              onFeatureClick: () => handleProjectClick("2"),
+            },
            {
              id: "3",              title: "SaaS Product Interface Design",              author: "Product Design",              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%.",              tags: ["SaaS", "Product Design", "UI Design"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",              imageAlt: "SaaS product interface design"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",              imageAlt: "SaaS product interface design",              onFeatureClick: () => handleProjectClick("3"),
+            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
--- a/src/app/project/[id]/page.tsx
+++ b/src/app/project/[id]/page.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+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";
+
+const projectData: Record<string, any> = {
+  "1": {
+    title: "Digital Brand Identity System",    category: "Brand Strategy",    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.",    tags: ["Branding", "Identity", "Design System"],
+    fullDescription:
+      "This comprehensive brand identity project transformed a tech startup's visual presence. We developed a complete visual language that aligned with their innovative mission while maintaining professional credibility. The project included logo design, color palette development, typography system, brand guidelines, and a complete digital asset library. The new identity increased brand recognition by 40% within the first six months.",    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 project showcase",    challenge:
+      "The startup needed a distinct visual identity that could compete in a crowded tech market while conveying trust and innovation.",    solution:
+      "We created a modern, scalable brand system that balanced cutting-edge design with timeless principles, ensuring consistency across all touchpoints.",    results: ["40% increase in brand recognition", "Unified visual language", "Comprehensive style guide", "Digital asset library"],
+  },
+  "2": {
+    title: "E-commerce Platform Redesign",    category: "UX Design",    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.",    tags: ["UX Design", "E-commerce", "Accessibility"],
+    fullDescription:
+      "This e-commerce platform redesign focused on improving user experience across all devices. Through extensive user research and testing, we identified pain points in the shopping journey and implemented solutions that significantly improved conversion rates. The redesign emphasized accessibility, mobile-first design, and simplified navigation.",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",    imageAlt: "E-commerce platform design",    challenge:
+      "The platform had a high cart abandonment rate and users complained about complex navigation and confusing checkout process.",    solution:
+      "We streamlined the user journey, implemented progressive disclosure, and optimized the checkout flow to reduce friction and improve conversion.",    results: ["35% improvement in conversion rate", "50% reduction in cart abandonment", "WCAG 2.1 AA compliance", "Mobile conversion rate increased by 45%"],
+  },
+  "3": {
+    title: "SaaS Product Interface Design",    category: "Product Design",    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%.",    tags: ["SaaS", "Product Design", "UI Design"],
+    fullDescription:
+      "For this data analytics SaaS platform, we designed an intuitive interface that made complex data visualization accessible to non-technical users. The project included creating an extensive design system with reusable components, improving the onboarding experience, and implementing best practices for data presentation.",    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",    imageAlt: "SaaS product interface design",    challenge:
+      "Users struggled with the complexity of data analytics tools and required extensive training. Support tickets were overwhelming.",    solution:
+      "We redesigned the interface with a focus on progressive disclosure, clear data visualization, and comprehensive onboarding that guided users through key features.",    results: ["50% reduction in support tickets", "Design system with 15+ components", "Improved user onboarding time by 60%", "User satisfaction score increased from 6.2 to 8.7 out of 10"],
+  },
+};
+
+export default function ProjectDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const projectId = params.id as string;
+  const project = projectData[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 items-center justify-center">
+          <h1 className="text-3xl font-bold mb-4">Project not found</h1>
+          <button
+            onClick={() => router.push("/#work")}
+            className="flex items-center gap-2 text-blue-500 hover:text-blue-600"
+          >
+            <ArrowLeft size={20} />
+            Back to Work
+          </button>
+        </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 className="sticky top-0 z-50">
+          <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>
+
+        {/* Main Content */}
+        <main className="flex-1 w-full max-w-6xl mx-auto px-4 py-16 md:py-24">
+          {/* Back Button */}
+          <button
+            onClick={() => router.push("/#work")}
+            className="flex items-center gap-2 text-foreground hover:text-primary-cta mb-8 transition-colors"
+          >
+            <ArrowLeft size={20} />
+            <span>Back to Work</span>
+          </button>
+
+          {/* Hero Section */}
+          <div className="mb-12 md:mb-16">
+            <div className="mb-6">
+              <span className="inline-block px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4">
+                {project.category}
+              </span>
+              <h1 className="text-4xl md:text-5xl font-bold mb-4">{project.title}</h1>
+              <p className="text-lg text-foreground/70 mb-6">{project.description}</p>
+              <div className="flex flex-wrap gap-2">
+                {project.tags.map((tag: string) => (
+                  <span key={tag} className="px-3 py-1 rounded-full bg-card border border-foreground/10 text-sm">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* Project Image */}
+            <div className="rounded-lg overflow-hidden bg-card aspect-video">
+              <img
+                src={project.imageSrc}
+                alt={project.imageAlt}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+
+          {/* Project Details */}
+          <div className="grid md:grid-cols-2 gap-12 mb-16">
+            {/* Challenge */}
+            <div>
+              <h2 className="text-2xl font-bold mb-4">Challenge</h2>
+              <p className="text-foreground/70 leading-relaxed">{project.challenge}</p>
+            </div>
+
+            {/* Solution */}
+            <div>
+              <h2 className="text-2xl font-bold mb-4">Solution</h2>
+              <p className="text-foreground/70 leading-relaxed">{project.solution}</p>
+            </div>
+          </div>
+
+          {/* Full Description */}
+          <div className="mb-16 p-8 rounded-lg bg-card border border-foreground/10">
+            <h2 className="text-2xl font-bold mb-4">Project Overview</h2>
+            <p className="text-foreground/70 leading-relaxed">{project.fullDescription}</p>
+          </div>
+
+          {/* Results */}
+          <div>
+            <h2 className="text-2xl font-bold mb-6">Results</h2>
+            <ul className="grid md:grid-cols-2 gap-4">
+              {project.results.map((result: string, index: number) => (
+                <li key={index} className="flex items-start gap-3 p-4 rounded-lg bg-card border border-foreground/10">
+                  <div className="flex-shrink-0 mt-1">
+                    <div className="flex items-center justify-center h-6 w-6 rounded-full bg-accent text-background">
+                      <span className="text-sm font-bold">✓</span>
+                    </div>
+                  </div>
+                  <span className="text-foreground/70">{result}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </main>
+
+        {/* CTA Section */}
+        <section className="w-full py-16 md:py-24 border-t border-foreground/10">
+          <div className="max-w-6xl mx-auto px-4 text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">Interested in working together?</h2>
+            <p className="text-lg text-foreground/70 mb-8 max-w-2xl mx-auto">
+              Let's discuss your project vision and how I can help bring your ideas to life.
+            </p>
+            <button
+              onClick={() => router.push("/#contact")}
+              className="inline-block px-8 py-3 rounded-lg bg-primary-cta text-background font-medium hover:bg-primary-cta/90 transition-colors"
+            >
+              Start a Project
+            </button>
+          </div>
+        </section>
+
+        {/* Footer */}
+        <div className="border-t border-foreground/10">
+          <FooterLogoReveal
+            logoText="Portfolio"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
--- 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<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"