Update src/app/layout.tsx

Merge version_2 into main

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"

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>
+  );
+}

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>
+  );
+}

src/app/projects/[id]/page.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useParams } from "next/navigation";
+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 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";
+
+// Mock project data structure
+const projectsData: Record<string, any> = {
+  "1": {
+    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: [
+      {
+        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": {
+    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: [
+      {
+        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": {
+    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: [
+      {
+        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 ProjectDetailPage() {
+  const params = useParams();
+  const projectId = params.id as string;
+  const project = projectsData[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-4xl font-bold mb-4">Project Not Found</h1>
+          <a href="/" className="text-primary-cta underline">
+            Return to Portfolio
+          </a>
+        </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 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: "/"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardCarousel
+          title={project.title}
+          description={project.subtitle}
+          tag="Case Study"
+          background={{ variant: "sparkles-gradient" }}
+          mediaItems={project.heroImages.map((src: string) => ({
+            imageSrc: src,
+            imageAlt: project.title,
+          }))}
+          buttons={[
+            { text: "Back to Portfolio", href: "/" },
+            { text: "Start a Project", href: "/" },
+          ]}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="Project Overview"
+          description={[
+            `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="services" data-section="services">
+        <FeatureCardTwentyFour
+          title="Key Results"
+          description="Measurable impact achieved through this project"
+          tag="Outcomes"
+          features={project.results.map((result: string, index: number) => ({
+            id: String(index + 1),
+            title: 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}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Let's Talk"
+          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"
+          buttonText="Send Message"
+          termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Portfolio"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}