Update src/app/layout.tsx

Merge version_3 into main

src/app/page.tsx

@@ -10,6 +10,10 @@ import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 
 export default function LandingPage() {
+  const handleProjectClick = (projectId: string) => {
+    window.location.href = `/project/${projectId}`;
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -33,7 +37,8 @@ export default function LandingPage() {
             { name: "Contact", id: "contact" },
           ]}
           button={{
-            text: "Get in Touch",            href: "contact"}}
+            text: "Get in Touch",            href: "contact"
+          }}
         />
       </div>
 
@@ -45,17 +50,23 @@ export default function LandingPage() {
           background={{ variant: "sparkles-gradient" }}
           mediaItems={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png",              imageAlt: "Portfolio showcase project one"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png",              imageAlt: "Portfolio showcase project one"
+            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png",              imageAlt: "Portfolio showcase project two"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png",              imageAlt: "Portfolio showcase project two"
+            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png",              imageAlt: "Portfolio showcase project three"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png",              imageAlt: "Portfolio showcase project three"
+            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png",              imageAlt: "Portfolio showcase project four"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png",              imageAlt: "Portfolio showcase project four"
+            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png",              imageAlt: "Portfolio showcase project five"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png",              imageAlt: "Portfolio showcase project five"
+            },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png",              imageAlt: "Portfolio showcase project six"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png",              imageAlt: "Portfolio showcase project six"
+            },
           ]}
           buttons={[
             { text: "View Work", href: "work" },
@@ -72,13 +83,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"
@@ -90,7 +104,8 @@ export default function LandingPage() {
         <TextSplitAbout
           title="About My Practice"
           description={[
-            "With over a decade of experience in digital design, I specialize in creating meaningful visual experiences that solve real problems. My approach combines strategic thinking with meticulous attention to detail.",            "I believe great design goes beyond aesthetics—it should drive business results while delighting users. Every project is an opportunity to push creative boundaries and establish new standards in digital craftsmanship.",            "I collaborate closely with clients and teams to understand vision, challenge assumptions, and deliver work that exceeds expectations. Let's create something extraordinary together."]}
+            "With over a decade of experience in digital design, I specialize in creating meaningful visual experiences that solve real problems. My approach combines strategic thinking with meticulous attention to detail.",            "I believe great design goes beyond aesthetics—it should drive business results while delighting users. Every project is an opportunity to push creative boundaries and establish new standards in digital craftsmanship.",            "I collaborate closely with clients and teams to understand vision, challenge assumptions, and deliver work that exceeds expectations. Let's create something extraordinary together."
+          ]}
           buttons={[
             { text: "Download Resume", href: "#" },
             { text: "Connect", href: "contact" },
@@ -130,17 +145,23 @@ export default function LandingPage() {
           useInvertedBackground={false}
           testimonials={[
             {
-              id: "1",              name: "Sarah Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png",              imageAlt: "Sarah Chen"},
+              id: "1",              name: "Sarah Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png",              imageAlt: "Sarah Chen"
+            },
             {
-              id: "2",              name: "Marcus Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png",              imageAlt: "Marcus Johnson"},
+              id: "2",              name: "Marcus Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png",              imageAlt: "Marcus Johnson"
+            },
             {
-              id: "3",              name: "Elena Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png",              imageAlt: "Elena Rodriguez"},
+              id: "3",              name: "Elena Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png",              imageAlt: "Elena Rodriguez"
+            },
             {
-              id: "4",              name: "James Williams",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043066896-7b04d7eb.png",              imageAlt: "James Williams"},
+              id: "4",              name: "James Williams",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043066896-7b04d7eb.png",              imageAlt: "James Williams"
+            },
             {
-              id: "5",              name: "Sophie Laurent",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-busine-1773043067827-a52a508e.png",              imageAlt: "Sophie Laurent"},
+              id: "5",              name: "Sophie Laurent",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-busine-1773043067827-a52a508e.png",              imageAlt: "Sophie Laurent"
+            },
             {
-              id: "6",              name: "David Kumar",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043067750-9681fff7.png",              imageAlt: "David Kumar"},
+              id: "6",              name: "David Kumar",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043067750-9681fff7.png",              imageAlt: "David Kumar"
+            },
           ]}
         />
       </div>

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

@@ -0,0 +1,112 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { useParams } from "next/navigation";
+
+const projectsData: Record<string, any> = {
+  "1": {
+    title: "Digital Brand Identity System",    heroTitle: "Digital Brand Identity System",    heroDescription: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library.",    heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png",    aboutTitle: "Project Overview",    aboutDescription: [
+      "This comprehensive brand identity project involved conducting extensive market research and competitive analysis to position the tech startup effectively in their market.",      "We developed a complete visual identity system including logo design, color palette, typography standards, and a comprehensive brand guidelines document spanning over 50 pages.",      "The result was a cohesive and scalable brand system that increased brand recognition by 40% within six months of implementation."],
+  },
+  "2": {
+    title: "E-commerce Platform Redesign",    heroTitle: "E-commerce Platform Redesign",    heroDescription: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow.",    heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",    aboutTitle: "Project Overview",    aboutDescription: [
+      "This e-commerce redesign project focused on improving user experience through data-driven insights and user testing methodologies.",      "We streamlined the navigation structure, optimized the checkout flow to reduce cart abandonment, and implemented accessibility standards to serve a broader audience.",      "The redesigned platform resulted in a 35% improvement in conversion rate and significantly reduced support tickets through improved usability."],
+  },
+  "3": {
+    title: "SaaS Product Interface Design",    heroTitle: "SaaS Product Interface Design",    heroDescription: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations.",    heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",    aboutTitle: "Project Overview",    aboutDescription: [
+      "This SaaS product design engagement involved creating a comprehensive design system for a data analytics platform serving enterprise clients.",      "We conducted extensive user research with data analysts and business intelligence professionals to understand workflow patterns and pain points.",      "The final design system includes 15+ core components, detailed interaction patterns, and comprehensive documentation for developer handoff."],
+  },
+};
+
+export default function ProjectDetailPage() {
+  const params = useParams();
+  const projectId = params.id as string;
+  const project = projectsData[projectId] || projectsData["1"];
+
+  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: "/" },
+            { name: "About", id: "/" },
+            { name: "Services", id: "/" },
+            { name: "Contact", id: "/" },
+          ]}
+          button={{
+            text: "Get in Touch",            href: "/"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardCarousel
+          title={project.heroTitle}
+          description={project.heroDescription}
+          tag="Project"
+          background={{ variant: "sparkles-gradient" }}
+          mediaItems={[
+            {
+              imageSrc: project.heroImage,
+              imageAlt: project.title,
+            },
+          ]}
+          buttons={[
+            { text: "Back to Portfolio", href: "/" },
+            { text: "Start a Project", href: "/" },
+          ]}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title={project.aboutTitle}
+          description={project.aboutDescription}
+          buttons={[
+            { text: "View Other Projects", href: "/" },
+            { text: "Connect", href: "/" },
+          ]}
+          showBorder={true}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Let's Talk"
+          title="Ready to Start 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>
+  );
+}

src/app/projects/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+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 ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import Link from "next/link";
+
+export default function ProjectsPage() {
+  const projects = [
+    {
+      id: "digital-brand-identity",      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"},
+    {
+      id: "ecommerce-platform-redesign",      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"},
+    {
+      id: "saas-product-interface",      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"},
+  ];
+
+  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: "#contact"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardCarousel
+          title="All Projects"
+          description="A comprehensive collection of design projects showcasing expertise across branding, UX design, and product strategy. Each project demonstrates creative excellence and strategic problem-solving."
+          tag="Portfolio"
+          background={{ variant: "sparkles-gradient" }}
+          mediaItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png",              imageAlt: "Portfolio showcase"},
+          ]}
+          buttons={[
+            { text: "Back Home", href: "/" },
+            { text: "Start Your Project", href: "#contact" },
+          ]}
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <FeatureCardTwentyFour
+          title="Featured Projects"
+          description="Detailed case studies showcasing design process, outcomes, and business impact"
+          tag="Case Studies"
+          features={projects}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Let's Collaborate"
+          title="Ready to Start 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>
+  );
+}