diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 291afbb..f0d1b44 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,1421 +1,33 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Manrope } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
+const geist = Geist({
+  variable: "--font-geist-sans",  subsets: ["latin"],
 });
 
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const manrope = Manrope({
-  variable: "--font-manrope",  subsets: ["latin"],
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Portfolio — Creative Design Excellence",  description: "Innovative digital design solutions showcasing brand strategy, UX/UI design, and product design expertise. Explore featured projects and services.",  keywords: "portfolio, graphic design, UX design, brand identity, digital design, creative services",  openGraph: {
-    title: "Portfolio — Creative Design Excellence",    description: "Discover innovative design solutions and creative work. Brand strategy, UX/UI, and digital product design.",    siteName: "Portfolio",    type: "website",    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png",        alt: "Portfolio showcase"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Portfolio — Creative Design Excellence",    description: "Innovative digital design solutions and creative work",    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "Portfolio",  description: "Creative portfolio showcasing design excellence and strategic thinking"};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${manrope.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+      <body className={`${geist.variable} ${geistMono.variable}`}>
+        {children}
         <script
-          dangerouslySetInnerHTML={{
-            __html: `
-(function() {
-  if (window.self === window.top) return;
-
-  if (window.__webildEditorInitialized) return;
-  window.__webildEditorInitialized = true;
-
-  let isActive = false;
-  let hoveredElement = null;
-  let selectedElement = null;
-  let originalContent = null;
-  let isEditing = false;
-  let elementTypeLabel = null;
-  let hoverOverlay = null;
-  let scrollTimeout = null;
-  let isScrolling = false;
-
-  const invalidElements = ['html', 'body', 'script', 'style', 'meta', 'link', 'head', 'noscript', 'title'];
-  const hoverClass = 'webild-hover';
-  const selectedClass = 'webild-selected';
-
-  const style = document.createElement('style');
-  style.id = 'webild-inspector-styles';
-  style.textContent = '' +
-    '.webild-hover {' +
-    '  outline: 2px dashed #4d96ff80 !important;' +
-    '  border-radius: 0 !important;' +
-    '  outline-offset: 2px !important;' +
-    '  cursor: pointer !important;' +
-    '  transition: outline 0.15s ease !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '}' +
-    '.webild-selected {' +
-    '  outline: 2px solid #4d96ff !important;' +
-    '  outline-offset: 2px !important;' +
-    '  transition: outline 0.15s ease !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '  border-radius: 0 !important;' +
-    '}' +
-    '[contenteditable="true"].webild-selected {' +
-    '  outline: 2px solid #4d96ff !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '}' +
-    'img.webild-hover,' +
-    'img.webild-selected,' +
-    'video.webild-hover,' +
-    'video.webild-selected {' +
-    '  outline-offset: 2px !important;' +
-    '}' +
-    '.webild-element-type-label {' +
-    '  position: fixed !important;' +
-    '  z-index: 999999 !important;' +
-    '  background: #4d96ff !important;' +
-    '  color: white !important;' +
-    '  padding: 4px 8px !important;' +
-    '  font-size: 11px !important;' +
-    '  font-weight: 600 !important;' +
-    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
-    '  pointer-events: none !important;' +
-    '  white-space: nowrap !important;' +
-    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
-    '  letter-spacing: 0.3px !important;' +
-    '  border: 1px solid #4d96ff20 !important;' +
-    '}' +
-    '.webild-element-type-label.label-top {' +
-    '  border-radius: 6px 6px 0 0 !important;' +
-    '}' +
-    '.webild-element-type-label.label-bottom {' +
-    '  border-radius: 0 0 6px 6px !important;' +
-    '}' +
-    '.webild-hover-overlay {' +
-    '  position: fixed !important;' +
-    '  background-color: #4d96ff15 !important;' +
-    '  pointer-events: none !important;' +
-    '  z-index: 999998 !important;' +
-    '  transition: all 0.15s ease !important;' +
-    '}';
-  document.head.appendChild(style);
-  
-  const getUniqueSelector = (element, assignId = false) => {
-    if (element.dataset && element.dataset.webildSelector) {
-      return element.dataset.webildSelector;
-    }
-    
-    const existingId = element.getAttribute('data-webild-id');
-    if (existingId) {
-      return '[data-webild-id="' + existingId + '"]';
-    }
-    
-    if (assignId) {
-      const uniqueId = 'webild-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
-      element.setAttribute('data-webild-id', uniqueId);
-      return '[data-webild-id="' + uniqueId + '"]';
-    }
-    
-    return null;
-  };
-  
-  const getSectionId = (element) => {
-    let current = element;
-    while (current && current !== document.body) {
-      const sectionId = current.getAttribute('data-section');
-      if (sectionId) {
-        return sectionId;
-      }
-      current = current.parentElement;
-    }
-    return 'hero';
-  };
-  
-  const getElementType = (element) => {
-  const tagName = element.tagName.toLowerCase();
-  const computedStyle = window.getComputedStyle(element);
-
-  if (tagName === 'img') {
-    return 'Image';
-  }
-
-  if (tagName === 'video') {
-    return 'Video';
-  }
-
-  const backgroundImage = computedStyle.backgroundImage;
-  if (backgroundImage && backgroundImage !== 'none') {
-    const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
-    if (urlMatch && urlMatch[1] && !urlMatch[1].includes('gradient')) {
-      const area = element.offsetWidth * element.offsetHeight;
-      const hasReasonableSize = area > 1000;
-      const hasFewChildren = element.children.length <= 2;
-      
-      if (hasReasonableSize && hasFewChildren) {
-        return 'Image';
-      }
-    }
-  }
-
-    if (tagName === 'button') return 'Button';
-    if (tagName === 'a' && element.getAttribute('href')) return 'Button';
-    if (element.getAttribute('role') === 'button') return 'Button';
-
-    const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
-    const hasButtonClass = buttonClasses.some(cls =>
-      element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
-    );
-
-    if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
-      return 'Button';
-    }
-
-    const textTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'li'];
-    if (textTags.includes(tagName)) {
-      return 'Text';
-    }
-
-    if (tagName === 'div') {
-      const hasDirectText = Array.from(element.childNodes).some(node => 
-        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
-      );
-      
-      if (hasDirectText && !element.querySelector('div, section, article, main, header, footer')) {
-        return 'Text';
-      }
-      
-      return 'Div';
-    }
-
-    if (tagName === 'article') {
-      return 'Article';
-    }
-
-    if (tagName === 'a' && !element.getAttribute('href')) {
-      return 'Text';
-    }
-
-    return 'Section';
-  };
-
-  const extractOriginalUrl = (url) => {
-    if (!url) return url;
-
-    if (url.includes('/_next/')) {
-      try {
-        const urlObj = new URL(url);
-        const originalPath = urlObj.searchParams.get('url');
-        if (originalPath) {
-          return originalPath;
-        }
-      } catch (e) {
-        return url;
-      }
-    }
-    
-    if (url.includes('.webild.io/')) {
-      try {
-        const urlObj = new URL(url);
-        return urlObj.pathname;
-      } catch (e) {
-        return url;
-      }
-    }
-
-    return url;
-  };
-
-  const getMediaTypeFromUrl = (url) => {
-    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
-    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
-    try {
-      const pathname = new URL(url).pathname.toLowerCase();
-      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
-      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
-    } catch(e) {}
-    return 'unknown';
-  };
-
-  const swapMediaElement = (oldEl, newTag, newSrc) => {
-    const newEl = document.createElement(newTag);
-    Array.from(oldEl.attributes).forEach(function(attr) {
-      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
-        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
-      }
-    });
-    newEl.style.cssText = oldEl.style.cssText;
-    if (newTag === 'video') {
-      newEl.setAttribute('autoplay', '');
-      newEl.setAttribute('loop', '');
-      newEl.setAttribute('muted', '');
-      newEl.setAttribute('playsinline', '');
-    }
-    newEl.src = newSrc;
-    if (oldEl.parentNode) {
-      oldEl.parentNode.replaceChild(newEl, oldEl);
-    }
-    return newEl;
-  };
-
-  const getElementInfo = (element, assignId = false) => {
-    const rect = element.getBoundingClientRect();
-    const tagName = element.tagName.toLowerCase();
-    const selector = getUniqueSelector(element, assignId);
-    const sectionId = getSectionId(element);
-    
-    let className = undefined;
-    try {
-      if (element.className) {
-        if (typeof element.className === 'string') {
-          className = element.className;
-        } else if (element.className.baseVal !== undefined) {
-          className = element.className.baseVal;
-        }
-      }
-    } catch (e) {}
-    
-    const info = {
-      tagName: tagName,
-      id: element.id || undefined,
-      className: className,
-      selector: selector,
-      elementType: null,
-      sectionId: sectionId,
-      boundingBox: {
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height
-      }
-    };
-    
-    if (tagName === 'img') {
-      const originalSrc = extractOriginalUrl(element.src);
-      info.imageData = {
-        src: originalSrc,
-        alt: element.alt || undefined,
-        naturalWidth: element.naturalWidth,
-        naturalHeight: element.naturalHeight,
-        isBackground: false
-      };
-    }
-
-    if (tagName === 'video') {
-      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-      const resolvedSrc = extractOriginalUrl(rawSrc);
-      info.imageData = {
-        src: resolvedSrc,
-        alt: element.getAttribute('aria-label') || undefined,
-        isBackground: false,
-        isVideo: true
-      };
-    }
-
-    const computedStyle = window.getComputedStyle(element);
-    const backgroundImage = computedStyle.backgroundImage;
-    if (backgroundImage && backgroundImage !== 'none') {
-      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
-      if (urlMatch) {
-        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
-        if (tagName !== 'img') {
-          info.imageData = {
-            src: originalBgSrc,
-            isBackground: true
-          };
-        } else {
-          if (!info.imageData) info.imageData = {};
-          info.imageData.backgroundImageSrc = originalBgSrc;
-        }
-      }
-    }
-    
-    const elementType = getElementType(element);
-    info.elementType = elementType;
-    
-    if (elementType === 'Button') {
-      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
-      const buttonHref = element.getAttribute('href') ||
-                        element.getAttribute('data-href') ||
-                        element.getAttribute('onclick') ||
-                        element.dataset?.link ||
-                        undefined;
-
-      info.buttonData = {
-        text: buttonText,
-        href: buttonHref
-      };
-    }
-
-    if (elementType === 'Text') {
-      info.textContent = element.textContent || '';
-    }
-    
-    return info;
-  };
-  
-  const isValidElement = (element) => {
-    if (!isActive) return false;
-    const tagName = element.tagName?.toLowerCase();
-    if (invalidElements.includes(tagName)) return false;
-    const isImage = tagName === 'img';
-    const isVideo = tagName === 'video';
-    if (isImage || isVideo) return true;
-    const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
-    const hasTextContent = element.textContent && element.textContent.trim().length > 0;
-    const hasChildren = element.children && element.children.length > 0;
-    if (!hasInnerHTML && !hasTextContent && !hasChildren) {
-      return false;
-    }
-    const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
-    if (hasBackgroundImage && !hasChildren && !hasTextContent) {
-      return false;
-    }
-    
-    return true;
-  };
-
-  const getMostSpecificElement = (x, y) => {
-    const elements = document.elementsFromPoint(x, y);
-    const validElements = elements.filter(el =>
-      isValidElement(el) &&
-      !el.classList.contains('webild-hover-overlay') &&
-      !el.classList.contains('webild-element-type-label')
-    );
-
-    if (validElements.length === 0) return null;
-    const scoredElements = validElements.map(element => {
-      let score = 0;
-      const rect = element.getBoundingClientRect();
-      const tagName = element.tagName.toLowerCase();
-      const computedStyle = window.getComputedStyle(element);
-      let depth = 0;
-      let current = element;
-      while (current && current !== document.body) {
-        depth++;
-        current = current.parentElement;
-      }
-      score += depth * 2;
-      const hasDirectText = Array.from(element.childNodes).some(node => 
-        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
-      );
-
-      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
-      const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
-      const hasFewChildren = element.children.length <= 3;
-      const area = rect.width * rect.height;
-      const viewportArea = window.innerWidth * window.innerHeight;
-      const isSmallElement = area < viewportArea * 0.1;
-      if (hasDirectText) score += 20;
-      if (hasImages) score += 15;
-      if (isInteractive) score += 25;
-      if (hasFewChildren) score += 10;
-      if (isSmallElement) score += 5;
-      if (area > viewportArea * 0.3) score -= 30;
-      if (element.hasAttribute('data-section')) score -= 15;
-      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
-      if (['p', 'span', 'label'].includes(tagName)) score += 15;
-      if (tagName === 'div' && !hasDirectText && element.children.length > 2) score -= 10;
-
-      return { element, score };
-    });
-    scoredElements.sort((a, b) => b.score - a.score);
-    return scoredElements[0]?.element || validElements[0];
-  };
-
-  const isTextElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Text';
-  };
-
-  const isButtonElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Button';
-  };
-
-  const updateButtonText = (element, newText) => {
-    const textNodes = [];
-    const walker = document.createTreeWalker(
-      element,
-      NodeFilter.SHOW_TEXT,
-      null
-    );
-
-    let node;
-    while (node = walker.nextNode()) {
-      if (node.textContent && node.textContent.trim()) {
-        textNodes.push(node);
-      }
-    }
-
-    if (textNodes.length > 0) {
-      textNodes[0].textContent = newText;
-      for (let i = 1; i < textNodes.length; i++) {
-        textNodes[i].textContent = '';
-      }
-    } else {
-      element.textContent = newText;
-    }
-  };
-
-  const makeEditable = (element, clickEvent) => {
-    if (!isTextElement(element)) return;
-    
-    originalContent = element.textContent;
-    element.contentEditable = 'true';
-    
-    if (!element.dataset.webildOriginalWhiteSpace) {
-      const computedStyle = window.getComputedStyle(element);
-      element.dataset.webildOriginalWhiteSpace = computedStyle.whiteSpace;
-      element.dataset.webildOriginalWordWrap = computedStyle.wordWrap;
-      element.dataset.webildOriginalOverflowWrap = computedStyle.overflowWrap;
-      element.dataset.webildOriginalOverflow = computedStyle.overflow;
-    }
-    
-    element.style.whiteSpace = 'pre-wrap';
-    element.style.wordWrap = 'break-word';
-    element.style.overflowWrap = 'break-word';
-    element.style.overflow = 'visible';
-    
-    element.focus();
-    isEditing = true;
-    
-    window.parent.postMessage({
-      type: 'webild-text-editing-started',
-      data: { selector: getElementInfo(element).selector }
-    }, '*');
-    
-    const handleBeforeInput = (e) => {
-      // Prevent deletion if it would leave the element empty
-      const currentText = element.textContent || '';
-      const inputType = e.inputType;
-      
-      // Check if this is a delete operation that would leave the element empty
-      if ((inputType === 'deleteContentBackward' || inputType === 'deleteContentForward' || inputType === 'deleteByCut') && currentText.length <= 1) {
-        e.preventDefault();
-        element.textContent = ' ';
-        // Move cursor to the beginning
-        const range = document.createRange();
-        const sel = window.getSelection();
-        range.setStart(element.firstChild || element, 0);
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-      }
-    };
-    
-    const handleInput = () => {
-      const elementInfo = getElementInfo(element);
-      let currentText = element.textContent;
-      
-      // Ensure there's always at least a space to keep the element editable
-      if (currentText === '' || currentText === null || currentText.length === 0) {
-        element.textContent = ' ';
-        currentText = ' ';
-        // Move cursor to the beginning
-        try {
-          const range = document.createRange();
-          const sel = window.getSelection();
-          range.setStart(element.firstChild || element, 0);
-          range.collapse(true);
-          sel.removeAllRanges();
-          sel.addRange(range);
-        } catch (e) {
-          // Ignore cursor positioning errors
-        }
-      }
-
-      window.parent.postMessage({
-        type: 'webild-element-changed',
-        data: {
-          type: 'updateText',
-          selector: elementInfo.selector,
-          oldValue: originalContent,
-          newValue: currentText,
-          elementType: elementInfo.elementType,
-          sectionId: elementInfo.sectionId,
-          timestamp: Date.now()
-        }
-      }, '*');
-      
-      if (currentText !== originalContent) {
-        window.parent.postMessage({
-          type: 'webild-text-changed',
-          data: { 
-            selector: elementInfo.selector,
-            hasChanges: true
-          }
-        }, '*');
-      }
-    };
-    
-    element.addEventListener('beforeinput', handleBeforeInput);
-    element.addEventListener('input', handleInput);
-    element.dataset.inputHandler = 'true';
-    element.dataset.beforeInputHandler = 'true';
-    
-    if (clickEvent && element.childNodes.length > 0) {
-      try {
-        let range = null;
-        
-        if (document.caretRangeFromPoint) {
-          range = document.caretRangeFromPoint(clickEvent.clientX, clickEvent.clientY);
-        } else if (document.caretPositionFromPoint) {
-          const position = document.caretPositionFromPoint(clickEvent.clientX, clickEvent.clientY);
-          if (position) {
-            range = document.createRange();
-            range.setStart(position.offsetNode, position.offset);
-            range.collapse(true);
-          }
-        }
-        
-        if (range) {
-          const selection = window.getSelection();
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }
-      } catch (e) {
-        console.warn('[Webild] Could not set caret position:', e);
-      }
-    }
-  };
-  
-  const makeUneditable = (element, save = false) => {
-    if (!element || element.contentEditable !== 'true') return;
-    
-    element.contentEditable = 'false';
-    isEditing = false;
-    
-    if (element.dataset.webildOriginalWhiteSpace) {
-      element.style.whiteSpace = element.dataset.webildOriginalWhiteSpace === 'normal' ? '' : element.dataset.webildOriginalWhiteSpace;
-      delete element.dataset.webildOriginalWhiteSpace;
-    }
-    if (element.dataset.webildOriginalWordWrap) {
-      element.style.wordWrap = element.dataset.webildOriginalWordWrap === 'normal' ? '' : element.dataset.webildOriginalWordWrap;
-      delete element.dataset.webildOriginalWordWrap;
-    }
-    if (element.dataset.webildOriginalOverflowWrap) {
-      element.style.overflowWrap = element.dataset.webildOriginalOverflowWrap === 'normal' ? '' : element.dataset.webildOriginalOverflowWrap;
-      delete element.dataset.webildOriginalOverflowWrap;
-    }
-    if (element.dataset.webildOriginalOverflow) {
-      element.style.overflow = element.dataset.webildOriginalOverflow === 'visible' ? '' : element.dataset.webildOriginalOverflow;
-      delete element.dataset.webildOriginalOverflow;
-    }
-    
-    if (element.dataset.beforeInputHandler === 'true') {
-      element.removeEventListener('beforeinput', () => {});
-      delete element.dataset.beforeInputHandler;
-    }
-    
-    if (element.dataset.inputHandler === 'true') {
-      element.removeEventListener('input', () => {});
-      delete element.dataset.inputHandler;
-    }
-    
-    window.parent.postMessage({
-      type: 'webild-text-editing-ended',
-      data: { selector: getElementInfo(element).selector }
-    }, '*');
-    
-    if (save && originalContent !== element.textContent) {
-      const elementInfo = getElementInfo(element);
-      let finalText = element.textContent;
-      
-      // Trim the final text and convert space-only to empty string for saving
-      if (finalText === ' ' || finalText.trim() === '') {
-        finalText = '';
-        // Update the actual element text to empty for display
-        element.textContent = '';
-      }
-      
-      const change = {
-        type: 'updateText',
-        selector: elementInfo.selector,
-        oldValue: originalContent,
-        newValue: finalText,
-        elementType: elementInfo.elementType,
-        sectionId: elementInfo.sectionId,
-        timestamp: Date.now()
-      };
-
-      saveChangeToStorage(change);
-
-      window.parent.postMessage({
-        type: 'webild-element-changed',
-        data: change
-      }, '*');
-    } else if (!save && originalContent !== null) {
-      element.textContent = originalContent;
-    }
-    
-    originalContent = null;
-  };
-  
-  const createHoverOverlay = (element) => {
-    const rect = element.getBoundingClientRect();
-    const overlay = document.createElement('div');
-    overlay.className = 'webild-hover-overlay';
-    overlay.style.cssText = \`
-      position: fixed !important;
-      top: \${rect.top - 2}px !important;
-      left: \${rect.left - 2}px !important;
-      width: \${rect.width + 4}px !important;
-      height: \${rect.height + 4}px !important;
-      background-color: rgba(90, 113, 230, 0.15) !important;
-      pointer-events: none !important;
-      z-index: 999998 !important;
-      transition: all 0.15s ease !important;
-    \`;
-    document.body.appendChild(overlay);
-    return overlay;
-  };
-  
-  const removeHoverOverlay = () => {
-    if (hoverOverlay) {
-      hoverOverlay.remove();
-      hoverOverlay = null;
-    }
-  };
-  
-  const showElementTypeLabel = (element, elementType) => {
-    if (!elementType) return;
-
-    removeElementTypeLabel();
-
-    const rect = element.getBoundingClientRect();
-    elementTypeLabel = document.createElement('div');
-    elementTypeLabel.className = 'webild-element-type-label';
-    const ariaLabel = element.getAttribute('aria-label');
-    let labelText;
-    
-    if (elementType === 'Div') {
-      labelText = 'Div';
-    } else if (elementType === 'Article') {
-      labelText = 'Article';
-    } else if (elementType === 'Section') {
-      labelText = ariaLabel || 'Section';
-    } else {
-      labelText = elementType;
-    }
-    
-    elementTypeLabel.textContent = labelText;
-    document.body.appendChild(elementTypeLabel);
-    const labelRect = elementTypeLabel.getBoundingClientRect();
-    let labelTop = rect.top - labelRect.height - 2;
-    let labelLeft = rect.left - 3;
-    let isLabelOnTop = true;
-    if (labelTop < 0) {
-      labelTop = rect.bottom + 1;
-      isLabelOnTop = false;
-    }
-    if (labelTop + labelRect.height > window.innerHeight) {
-      labelTop = rect.bottom - labelRect.height;
-      isLabelOnTop = false;
-      if (labelTop < 0) {
-        labelTop = rect.top;
-        isLabelOnTop = true;
-      }
-    }
-    if (labelLeft + labelRect.width > window.innerWidth) {
-      labelLeft = window.innerWidth - labelRect.width;
-    }
-    if (labelLeft < 0) {
-      labelLeft = 0;
-    }
-    if (isLabelOnTop) {
-      elementTypeLabel.classList.add('label-top');
-    } else {
-      elementTypeLabel.classList.add('label-bottom');
-    }
-
-    elementTypeLabel.style.cssText = \`
-      left: \${labelLeft}px !important;
-      top: \${labelTop}px !important;
-      transform: none !important;
-    \`;
-  };
-  
-  const removeElementTypeLabel = () => {
-    if (elementTypeLabel) {
-      elementTypeLabel.remove();
-      elementTypeLabel = null;
-    }
-  };
-  
-  const handleMouseOver = (e) => {
-    if (!isActive) return;
-
-    lastMouseX = e.clientX;
-    lastMouseY = e.clientY;
-
-    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
-
-    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
-      return;
-    }
-    
-    if (hoveredElement && hoveredElement !== selectedElement) {
-      hoveredElement.classList.remove(hoverClass);
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      removeHoverOverlay();
-      removeElementTypeLabel();
-    }
-    
-    hoveredElement = target;
-    
-    const computedStyle = window.getComputedStyle(target);
-    const currentPosition = computedStyle.position;
-    
-    if (currentPosition === 'static' || currentPosition === '') {
-      hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
-      hoveredElement.style.position = 'relative';
-    }
-    
-    hoveredElement.classList.add(hoverClass);
-    
-    if ((!selectedElement || selectedElement !== target) && !isScrolling) {
-      hoverOverlay = createHoverOverlay(target);
-    }
-    
-    const elementType = getElementType(target);
-    showElementTypeLabel(target, elementType);
-    
-    window.parent.postMessage({
-      type: 'webild-element-hover',
-      data: getElementInfo(target, false)
-    }, '*');
-  };
-  
-  const handleMouseOut = (e) => {
-    if (!isActive) return;
-    
-    if (hoveredElement && hoveredElement !== selectedElement) {
-      hoveredElement.classList.remove(hoverClass);
-      
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-      
-      hoveredElement = null;
-      
-      window.parent.postMessage({
-        type: 'webild-element-hover',
-        data: null
-      }, '*');
-    }
-  };
-  
-  const handleClick = (e) => {
-  if (!isActive) return;
-
-  if (isEditing) {
-    e.stopPropagation();
-    return;
-  }
-
-  e.preventDefault();
-  e.stopPropagation();
-
-  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
-  if (!isValidElement(target)) return;
-    
-    if (selectedElement && selectedElement !== target) {
-      makeUneditable(selectedElement, false);
-      selectedElement.classList.remove(selectedClass);
-      selectedElement.classList.remove(hoverClass);
-      
-      if (selectedElement.dataset.webildOriginalPosition) {
-        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
-        delete selectedElement.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-    }
-    
-    if (selectedElement === target) {
-      if (target.dataset.webildOriginalPosition) {
-        target.style.position = target.dataset.webildOriginalPosition === 'none' ? '' : target.dataset.webildOriginalPosition;
-        delete target.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-      
-      selectedElement = null;
-      window.parent.postMessage({
-        type: 'webild-element-selected',
-        data: null
-      }, '*');
-      return;
-    }
-    
-    selectedElement = target;
-    selectedElement.classList.add(selectedClass);
-    
-    removeHoverOverlay();
-    removeElementTypeLabel();
-    
-    if (hoveredElement === target) {
-      hoveredElement.classList.remove(hoverClass);
-      hoveredElement = null;
-    }
-    
-    const elementInfo = getElementInfo(target, true);
-    selectedElement.dataset.webildSelector = elementInfo.selector;
-    showElementTypeLabel(target, elementInfo.elementType);
-    
-    window.parent.postMessage({
-      type: 'webild-element-selected',
-      data: elementInfo
-    }, '*');
-    
-    if (isTextElement(target)) {
-      setTimeout(() => makeEditable(target, e), 50);
-    }
-  };
-  
-  const handleKeyDown = (e) => {
-    if (!isActive) return;
-    if (!isEditing || !selectedElement) return;
-    
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      makeUneditable(selectedElement, true);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      makeUneditable(selectedElement, false);
-    }
-  };
-  
-  const handleBlur = (e) => {
-    if (!isActive) return;
-    if (isEditing && selectedElement && e.target === selectedElement) {
-      makeUneditable(selectedElement, true);
-    }
-  };
-  
-  let lastMouseX = 0;
-  let lastMouseY = 0;
-
-  const handleScroll = () => {
-    if (!isActive) return;
-    
-    if (isEditing) return;
-    
-    if (selectedElement) {
-      makeUneditable(selectedElement, false);
-      selectedElement.classList.remove(selectedClass);
-      if (selectedElement.dataset.webildOriginalPosition) {
-        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
-        delete selectedElement.dataset.webildOriginalPosition;
-      }
-      selectedElement = null;
-
-      window.parent.postMessage({
-        type: 'webild-element-selected',
-        data: null
-      }, '*');
-    }
-
-    if (hoveredElement) {
-      hoveredElement.classList.remove(hoverClass);
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      hoveredElement = null;
-
-      window.parent.postMessage({
-        type: 'webild-element-hover',
-        data: null
-      }, '*');
-    }
-
-    removeHoverOverlay();
-    removeElementTypeLabel();
-
-    isScrolling = true;
-
-    if (scrollTimeout) {
-      clearTimeout(scrollTimeout);
-    }
-
-    scrollTimeout = setTimeout(() => {
-      isScrolling = false;
-
-      if (lastMouseX > 0 && lastMouseY > 0) {
-        const target = getMostSpecificElement(lastMouseX, lastMouseY);
-        if (target && isValidElement(target) && target !== selectedElement) {
-          hoveredElement = target;
-
-          const computedStyle = window.getComputedStyle(target);
-          const currentPosition = computedStyle.position;
-
-          if (currentPosition === 'static' || currentPosition === '') {
-            hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
-            hoveredElement.style.position = 'relative';
-          }
-
-          hoveredElement.classList.add(hoverClass);
-          hoverOverlay = createHoverOverlay(target);
-
-          const elementType = getElementType(target);
-          showElementTypeLabel(target, elementType);
-
-          window.parent.postMessage({
-            type: 'webild-element-hover',
-            data: getElementInfo(target, false)
-          }, '*');
-        }
-      }
-    }, 150);
-
-    window.parent.postMessage({
-      type: 'webild-iframe-scroll'
-    }, '*');
-  };
-  
-  const getStorageKey = () => {
-    const url = new URL(window.location.href);
-    const pathParts = url.pathname.split('/').filter(Boolean);
-    return \`webild-changes-\${pathParts.join('-')}\`;
-  };
-
-  const saveChangeToStorage = (change) => {
-    try {
-      const storageKey = getStorageKey();
-      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
-
-      const filteredChanges = existingChanges.filter(c => {
-        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
-      });
-      filteredChanges.push(change);
-
-      localStorage.setItem(storageKey, JSON.stringify(filteredChanges));
-
-      window.parent.postMessage({
-        type: 'webild-change-saved-locally',
-        data: { change, allChanges: filteredChanges }
-      }, '*');
-    } catch (error) {
-      console.error('Failed to save change to localStorage:', error);
-    }
-  };
-
-  const clearLocalChanges = () => {
-    try {
-      const storageKey = getStorageKey();
-      localStorage.removeItem(storageKey);
-      window.parent.postMessage({
-        type: 'webild-local-changes-cleared',
-        data: {}
-      }, '*');
-    } catch (error) {
-      console.error('Failed to clear local changes:', error);
-    }
-  };
-
-  const handleMessage = (e) => {
-    if (!e.data || !e.data.type) return;
-
-    if (e.data.type === 'webild-activate-editor') {
-      if (!isActive) {
-        isActive = true;
-        window.parent.postMessage({ type: 'webild-editor-activated' }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-deactivate-editor') {
-      if (isActive) {
-        isActive = false;
-
-        if (selectedElement) {
-          makeUneditable(selectedElement, false);
-          selectedElement.classList.remove(selectedClass);
-          selectedElement = null;
-        }
-        if (hoveredElement) {
-          hoveredElement.classList.remove(hoverClass);
-          hoveredElement = null;
-        }
-
-        removeHoverOverlay();
-        removeElementTypeLabel();
-        window.parent.postMessage({ type: 'webild-editor-deactivated' }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-clear-local-changes') {
-      clearLocalChanges();
-      return;
-    }
-
-    if (e.data.type === 'webild-cancel-changes') {
-      try {
-        const storageKey = getStorageKey();
-        const savedChanges = localStorage.getItem(storageKey);
-        if (savedChanges) {
-          const changes = JSON.parse(savedChanges);
-          changes.forEach(change => {
-            try {
-              const element = document.querySelector(change.selector);
-              if (!element) return;
-
-              if (change.type === 'updateText') {
-                if (isTextElement(element)) {
-                  element.textContent = change.oldValue;
-                }
-              } else if (change.type === 'updateButton') {
-                if (isButtonElement(element)) {
-                  updateButtonText(element, change.oldValue);
-                }
-              } else if (change.type === 'replaceImage') {
-                const revertTag = element.tagName.toLowerCase();
-                const isBackground = revertTag !== 'img' && revertTag !== 'video';
-                if (isBackground) {
-                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
-                } else {
-                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
-                  if (revertTag === 'video' && oldMediaType === 'image') {
-                    swapMediaElement(element, 'img', change.oldValue);
-                  } else if (revertTag === 'img' && oldMediaType === 'video') {
-                    swapMediaElement(element, 'video', change.oldValue);
-                  } else if (revertTag === 'video') {
-                    element.src = change.oldValue;
-                    element.load();
-                  } else {
-                    element.src = change.oldValue;
-                  }
-                }
-              }
-            } catch (err) {
-              console.warn('[Webild] Failed to revert change:', err);
-            }
-          });
-        }
-        clearLocalChanges();
-      } catch (error) {
-        console.error('[Webild] Failed to cancel changes:', error);
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-update-text') {
-      const { selector, newValue, oldValue, sectionId } = e.data.data;
-      try {
-        let element = null;
-        
-        if (selectedElement && isTextElement(selectedElement)) {
-          element = selectedElement;
-        }
-        else if (selector) {
-          try {
-            element = document.querySelector(selector);
-          } catch (err) {
-            console.warn('[Webild] Invalid selector:', selector);
-          }
-        }
-        
-        if (!element && sectionId) {
-          const sectionElement = document.querySelector('[data-section="' + sectionId + '"]');
-          if (sectionElement) {
-            const textElements = sectionElement.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, div');
-            for (let i = 0; i < textElements.length; i++) {
-              const el = textElements[i];
-              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
-                element = el;
-                const newSelector = getUniqueSelector(element, true);
-                if (newSelector) {
-                  element.dataset.webildSelector = newSelector;
-                }
-                break;
-              }
-            }
-          }
-        }
-        
-        if (element && isTextElement(element)) {
-          element.textContent = newValue;
-          const finalSelector = element.dataset.webildSelector || getUniqueSelector(element, true);
-          
-          window.parent.postMessage({
-            type: 'webild-text-update-success',
-            data: {
-              selector: finalSelector,
-              newValue: newValue
-            }
-          }, '*');
-        } else {
-          window.parent.postMessage({
-            type: 'webild-text-update-failed',
-            data: { selector, newValue }
-          }, '*');
-        }
-      } catch (error) {
-        window.parent.postMessage({
-          type: 'webild-text-update-failed',
-          data: { selector, newValue, error: error.message }
-        }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-update-button') {
-      const { selector, text, href } = e.data.data;
-      try {
-        const element = document.querySelector(selector);
-        if (element && isButtonElement(element)) {
-          if (text !== undefined) {
-            updateButtonText(element, text);
-          }
-          if (href !== undefined) {
-            if (element.tagName.toLowerCase() === 'a') {
-              element.href = href;
-            } else {
-              element.setAttribute('data-href', href);
-            }
-          }
-        }
-      } catch (error) {
-        console.error('[Webild] Invalid selector for button update:', selector, error);
-      }
-      return;
-    }
-
-    if (!isActive) return;
-
-    if (e.data.type === 'webild-replace-image') {
-      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
-      let element = null;
-
-      try {
-        element = document.querySelector(selector);
-      } catch {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: 'Invalid selector: ' + error.message, success: false }
-        }, '*');
-        return;
-      }
-
-      if (!element) {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: 'Element not found', success: false }
-        }, '*');
-        return;
-      }
-
-      try {
-        let replaced = false;
-        let oldValue = '';
-
-        if (isBackground) {
-          oldValue = window.getComputedStyle(element).backgroundImage;
-          element.style.backgroundImage = \`url('\${newSrc}')\`;
-          replaced = true;
-        } else if (element.tagName.toLowerCase() === 'img') {
-          oldValue = element.src;
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          if (newMediaType === 'video' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'video', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
-            element = swapped;
-          } else {
-            element.src = newSrc;
-          }
-          replaced = true;
-        } else if (element.tagName.toLowerCase() === 'video') {
-          oldValue = element.src || element.currentSrc || '';
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          const sources = element.querySelectorAll('source');
-          if (newMediaType === 'image' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'img', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
-            element = swapped;
-          } else {
-            if (sources.length > 0) {
-              sources.forEach(function(source) { source.src = newSrc; });
-              element.load();
-            } else {
-              element.src = newSrc;
-              element.load();
-            }
-          }
-          replaced = true;
-        } else {
-          const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
-          if (hasBackgroundImage) {
-            oldValue = window.getComputedStyle(element).backgroundImage;
-            element.style.backgroundImage = \`url('\${newSrc}')\`;
-            replaced = true;
-          }
-        }
-
-        if (replaced) {
-          const elementInfo = getElementInfo(element);
-
-          let cleanOldValue = oldValue;
-          if (oldValue.includes('url(')) {
-            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
-            if (urlMatch) {
-              cleanOldValue = urlMatch[1];
-            }
-          }
-
-          cleanOldValue = extractOriginalUrl(cleanOldValue);
-
-          const change = {
-            type: 'replaceImage',
-            selector: selector,
-            oldValue: cleanOldValue,
-            newValue: newSrc,
-            elementType: elementInfo.elementType,
-            sectionId: elementInfo.sectionId,
-            timestamp: Date.now()
-          };
-
-          saveChangeToStorage(change);
-
-          window.parent.postMessage({
-            type: 'webild-element-changed',
-            data: change
-          }, '*');
-
-          window.parent.postMessage({
-            type: 'webild-image-replaced',
-            data: { selector, newSrc, success: true }
-          }, '*');
-        } else {
-          window.parent.postMessage({
-            type: 'webild-image-replacement-error',
-            data: { selector, message: 'Could not determine how to replace image', success: false }
-          }, '*');
-        }
-      } catch (error) {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: error.message || 'Failed to replace image', success: false }
-        }, '*');
-      }
-    }
-  };
-  
-  document.addEventListener('mouseover', handleMouseOver, true);
-  document.addEventListener('mouseout', handleMouseOut, true);
-  document.addEventListener('click', handleClick, true);
-  document.addEventListener('keydown', handleKeyDown, true);
-  document.addEventListener('blur', handleBlur, true);
-  window.addEventListener('scroll', handleScroll, true);
-  window.addEventListener('message', handleMessage, true);
-  
-  let lastPathname = window.location.pathname;
-  
-  const notifyPageChange = () => {
-    window.parent.postMessage({
-      type: 'webild-page-changed',
-      data: { pathname: window.location.pathname }
-    }, '*');
-  };
-  
-  window.addEventListener('popstate', () => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, true);
-  
-  const urlCheckInterval = setInterval(() => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, 500);
-  
-  notifyPageChange();
-  
-  window.webildCleanup = () => {
-    isActive = false;
-    
-    if (selectedElement) {
-      makeUneditable(selectedElement, false);
-    }
-    
-    removeHoverOverlay();
-    removeElementTypeLabel();
-    
-    if (urlCheckInterval) {
-      clearInterval(urlCheckInterval);
-    }
-    
-    document.removeEventListener('mouseover', handleMouseOver, true);
-    document.removeEventListener('mouseout', handleMouseOut, true);
-    document.removeEventListener('click', handleClick, true);
-    document.removeEventListener('keydown', handleKeyDown, true);
-    document.removeEventListener('blur', handleBlur, true);
-    window.removeEventListener('scroll', handleScroll, true);
-    window.removeEventListener('message', handleMessage, true);
-    
-    document.querySelectorAll('.' + hoverClass).forEach(el => {
-      el.classList.remove(hoverClass);
-    });
-    document.querySelectorAll('.' + selectedClass).forEach(el => {
-      el.classList.remove(selectedClass);
-    });
-    
-    const styleEl = document.getElementById('webild-inspector-styles');
-    if (styleEl) styleEl.remove();
-    
-    hoveredElement = null;
-    selectedElement = null;
-  };
-  
-  window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
-})();
-`
-          }}
-        />
+          src="https://cdnjs.cloudflare.com/ajax/libs/lenis/1.1.13/lenis.min.js"
+          integrity="sha512-+ZrK7rJ8h09z0/VVl3c+dRkXGaSLScjqlXN8uvWGSfh+ugEGH2FCi//N0JKLaML937xsqt3g7IoGD1afS+vQ==="
+          crossOrigin="anonymous"
+          referrerPolicy="no-referrer"
+        ></script>
       
         <script
           dangerouslySetInnerHTML={{
@@ -2784,7 +1396,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a2aab40..402b60d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,8 +8,15 @@ 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 { useRouter } from "next/navigation";
 
 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"
diff --git a/src/app/project/[id]/page.tsx b/src/app/project/[id]/page.tsx
new file mode 100644
index 0000000..137cbe0
--- /dev/null
+++ b/src/app/project/[id]/page.tsx
@@ -0,0 +1,220 @@
+"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";
+
+// Project data
+const projectsData: Record<string, any> = {
+  "1": {
+    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.",    fullDescription:
+      "This comprehensive project involved a complete visual identity redesign for a growing tech startup. We developed extensive brand guidelines covering typography, color systems, and application patterns. Created a modular digital asset library that scales across all platforms. The result was a 40% increase in brand recognition within six months of launch.",    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",    challenges: [
+      "Balancing innovation with brand consistency",      "Creating a system scalable across digital and print",      "Ensuring accessibility compliance across all assets"],
+    solutions: [
+      "Developed a modular design system with clear documentation",      "Created adaptive color palettes for different contexts",      "Implemented WCAG AA compliance throughout the identity"],
+    results: [
+      "40% increase in brand recognition",      "30% improvement in design consistency",      "50+ assets in comprehensive asset library"],
+  },
+  "2": {
+    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.",    fullDescription:
+      "This project involved a comprehensive redesign of an enterprise e-commerce platform serving millions of monthly users. We implemented a mobile-first approach, streamlined navigation, and optimized the checkout flow. The result was a 35% improvement in conversion rate and significant reduction in cart abandonment.",    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",    challenges: [
+      "Managing complex product hierarchies",      "Optimizing for mobile without losing desktop functionality",      "Reducing checkout friction while adding trust signals"],
+    solutions: [
+      "Implemented progressive disclosure for product filters",      "Created responsive layouts that adapt to all screen sizes",      "Added contextual help and security indicators"],
+    results: [
+      "35% improvement in conversion rate",      "42% reduction in cart abandonment",      "28% increase in average order value"],
+  },
+  "3": {
+    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%.",    fullDescription:
+      "This project focused on designing a user-friendly interface for a complex data analytics SaaS platform. We created an extensive design system with 15+ component variations and built interactive prototypes. The redesigned onboarding flow resulted in a 50% reduction in support tickets.",    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",    challenges: [
+      "Simplifying complex data visualization",      "Creating intuitive onboarding for technical users",      "Maintaining consistency across multiple product modules"],
+    solutions: [
+      "Implemented guided tours and contextual help",      "Created reusable visualization components",      "Built comprehensive design system documentation"],
+    results: [
+      "50% reduction in support tickets",      "35% faster user adoption",      "25% increase in feature adoption rate"],
+  },
+};
+
+export default function ProjectPage() {
+  const params = useParams();
+  const router = useRouter();
+  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 items-center justify-center">
+          <div className="text-center">
+            <h1 className="text-4xl font-bold mb-4">Project Not Found</h1>
+            <button
+              onClick={() => router.push("/")}
+              className="mt-8 px-8 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90"
+            >
+              Back to Portfolio
+            </button>
+          </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 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: "/#contact"}}
+        />
+      </div>
+
+      <main className="py-20">
+        <div className="container mx-auto px-4">
+          {/* Back button */}
+          <button
+            onClick={() => router.push("/#work")}
+            className="text-secondary-cta hover:text-primary-cta transition-colors mb-8"
+          >
+            ← Back to Work
+          </button>
+
+          {/* Project Hero */}
+          <section className="mb-20">
+            <div className="space-y-8">
+              <div>
+                <div className="text-sm text-secondary-cta mb-4">{project.author}</div>
+                <h1 className="text-5xl md:text-6xl font-bold mb-6">{project.title}</h1>
+                <p className="text-xl text-foreground/80 max-w-3xl">
+                  {project.fullDescription}
+                </p>
+              </div>
+
+              {/* Tags */}
+              <div className="flex flex-wrap gap-2">
+                {project.tags.map((tag: string, index: number) => (
+                  <span
+                    key={index}
+                    className="px-4 py-2 bg-card text-foreground rounded-full text-sm border border-accent"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+
+              {/* Project Image */}
+              <div className="mt-12">
+                <img
+                  src={project.imageSrc}
+                  alt={project.imageAlt}
+                  className="w-full h-auto rounded-lg object-cover"
+                />
+              </div>
+            </div>
+          </section>
+
+          {/* Project Details */}
+          <section className="grid md:grid-cols-2 gap-12 mb-20">
+            {/* Challenges */}
+            <div>
+              <h2 className="text-2xl font-bold mb-6">Challenges</h2>
+              <ul className="space-y-4">
+                {project.challenges.map((challenge: string, index: number) => (
+                  <li key={index} className="flex items-start gap-4">
+                    <div className="w-2 h-2 bg-primary-cta rounded-full mt-2 flex-shrink-0"></div>
+                    <span className="text-foreground/80">{challenge}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Solutions */}
+            <div>
+              <h2 className="text-2xl font-bold mb-6">Solutions</h2>
+              <ul className="space-y-4">
+                {project.solutions.map((solution: string, index: number) => (
+                  <li key={index} className="flex items-start gap-4">
+                    <div className="w-2 h-2 bg-primary-cta rounded-full mt-2 flex-shrink-0"></div>
+                    <span className="text-foreground/80">{solution}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </section>
+
+          {/* Results */}
+          <section className="mb-20">
+            <h2 className="text-2xl font-bold mb-6">Results & Impact</h2>
+            <div className="grid md:grid-cols-3 gap-8">
+              {project.results.map((result: string, index: number) => (
+                <div
+                  key={index}
+                  className="p-6 bg-card rounded-lg border border-accent text-center"
+                >
+                  <p className="text-foreground/80">{result}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* CTA */}
+          <section className="text-center py-12">
+            <h2 className="text-3xl font-bold mb-6">Ready to Work Together?</h2>
+            <button
+              onClick={() => router.push("/#contact")}
+              className="px-8 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity"
+            >
+              Start Your Project
+            </button>
+          </section>
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Portfolio"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
new file mode 100644
index 0000000..c552dea
--- /dev/null
+++ b/src/app/projects/[id]/page.tsx
@@ -0,0 +1,264 @@
+"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 FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { useParams } from "next/navigation";
+
+// Project data - can be moved to a separate data file or API
+const projectsData: Record<
+  string,
+  {
+    title: string;
+    description: string;
+    tag: string;
+    heroImages: Array<{ imageSrc: string; imageAlt: string }>;
+    overview: string[];
+    challenge: string;
+    solution: string;
+    results: string;
+    details: Array<{
+      id: string;
+      title: string;
+      author: string;
+      description: string;
+      tags: string[];
+      imageSrc: string;
+      imageAlt: string;
+    }>;
+    nextProjectId?: string;
+    nextProjectName?: string;
+  }
+> = {
+  "1": {
+    title: "Digital Brand Identity System",    description: "Complete visual identity redesign for tech startup",    tag: "Brand Strategy",    heroImages: [
+      {
+        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/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "Brand identity secondary view"},
+    ],
+    overview: [
+      "This project involved a comprehensive rebrand for a rapidly growing tech startup. The client needed a modern, cohesive visual identity that reflected their innovation and positioned them as a market leader.",      "Working closely with the leadership team, we developed a complete brand system including logo design, color palette, typography guidelines, and a comprehensive asset library for all digital and print applications."],
+    challenge:
+      "The startup had outgrown their initial branding and needed a more professional identity that would resonate with enterprise clients while maintaining the energy and innovation of their brand culture.",    solution:
+      "We conducted extensive brand research, stakeholder interviews, and competitive analysis. The result was a bold, modern brand identity featuring a distinctive logomark, carefully curated color system, and a flexible typography hierarchy that works across all mediums.",    results:
+      "Post-rebrand, the company experienced a 40% increase in brand recognition, improved website conversion rates by 28%, and successfully closed three major enterprise deals attributed partially to the strengthened brand positioning.",    details: [
+      {
+        id: "1",        title: "Logo Design & Variations",        author: "Visual Identity",        description: "Primary logo, secondary mark, and application variations for different contexts",        tags: ["Logo", "Identity", "Design"],
+        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: "Logo design variations"},
+      {
+        id: "2",        title: "Color System & Palette",        author: "Brand System",        description: "Comprehensive color palette with primary, secondary, and accent colors",        tags: ["Color", "System", "Branding"],
+        imageSrc:
+          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "Color palette"},
+      {
+        id: "3",        title: "Typography Guidelines",        author: "Brand System",        description: "Font selection, sizing scales, and usage guidelines for consistency",        tags: ["Typography", "System", "Branding"],
+        imageSrc:
+          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "Typography guidelines"},
+    ],
+    nextProjectId: "2",    nextProjectName: "E-commerce Platform Redesign"},
+  "2": {
+    title: "E-commerce Platform Redesign",    description: "User-centered redesign of enterprise e-commerce platform",    tag: "UX Design",    heroImages: [
+      {
+        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/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "E-commerce platform secondary view"},
+    ],
+    overview: [
+      "This enterprise e-commerce platform was experiencing high cart abandonment rates and low user satisfaction. The redesign focused on streamlining the user journey and creating an intuitive, accessible interface.",      "Through user research, usability testing, and iterative design, we transformed the platform into a modern, conversion-focused experience that caters to diverse user needs and accessibility requirements."],
+    challenge:
+      "The existing platform had accumulated complex features over years of updates, resulting in a cluttered interface and confusing navigation. Users struggled to find products and complete purchases efficiently.",    solution:
+      "We conducted extensive user research including interviews and usability testing. The redesign involved a complete information architecture overhaul, simplified navigation, optimized product discovery, and a streamlined checkout process with clear progress indicators.",    results:
+      "The redesign resulted in a 35% improvement in conversion rate, 42% reduction in cart abandonment, and 60% decrease in support inquiries. Mobile traffic increased significantly, and user satisfaction scores improved by 48%.",    details: [
+      {
+        id: "1",        title: "Product Discovery & Search",        author: "UX Design",        description: "Enhanced search functionality and filtering system for better product discovery",        tags: ["UX", "Search", "Discovery"],
+        imageSrc:
+          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "Product discovery interface"},
+      {
+        id: "2",        title: "Checkout Flow Optimization",        author: "UX Design",        description: "Streamlined checkout process reducing steps and friction points",        tags: ["UX", "Checkout", "Conversion"],
+        imageSrc:
+          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "Checkout interface"},
+      {
+        id: "3",        title: "Accessibility Implementation",        author: "UX Design",        description: "WCAG 2.1 AA compliance across all interface elements",        tags: ["Accessibility", "WCAG", "UX"],
+        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: "Accessibility features"},
+    ],
+    nextProjectId: "3",    nextProjectName: "SaaS Product Interface Design"},
+  "3": {
+    title: "SaaS Product Interface Design",    description: "Intuitive interface for data analytics SaaS platform",    tag: "Product Design",    heroImages: [
+      {
+        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/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "SaaS product secondary view"},
+    ],
+    overview: [
+      "Designed a comprehensive product interface for a data analytics SaaS platform targeting enterprise users. The challenge was creating an intuitive interface for complex data visualization without overwhelming users.",      "Working with the product team, we developed a scalable design system with 15+ core components and established clear interaction patterns for data exploration and visualization."],
+    challenge:
+      "The platform handles complex data analytics with hundreds of potential configurations. Previous iterations were confusing and had a steep learning curve, resulting in poor user adoption and high support costs.",    solution:
+      "We designed a progressive disclosure interface that reveals complexity gradually. Created interactive component library, conducted extensive user testing, developed onboarding flows, and established clear mental models for data exploration.",    results:
+      "User onboarding time reduced by 65%, support tickets decreased by 50%, and feature adoption increased significantly. Users reported 75% improvement in interface intuitiveness compared to the previous version.",    details: [
+      {
+        id: "1",        title: "Data Visualization Components",        author: "Product Design",        description: "Interactive charts, graphs, and data display components",        tags: ["Visualization", "Components", "Design"],
+        imageSrc:
+          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",        imageAlt: "Data visualization components"},
+      {
+        id: "2",        title: "Dashboard Configuration",        author: "Product Design",        description: "Flexible dashboard builder with drag-and-drop functionality",        tags: ["Dashboard", "UI", "Product"],
+        imageSrc:
+          "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",        imageAlt: "Dashboard configuration"},
+      {
+        id: "3",        title: "Onboarding Experience",        author: "Product Design",        description: "Interactive tutorial and guided onboarding for new users",        tags: ["Onboarding", "UX", "Product"],
+        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: "Onboarding experience"},
+    ],
+    nextProjectId: "1",    nextProjectName: "Digital Brand Identity System"},
+};
+
+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 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 style={{ padding: "4rem 2rem", textAlign: "center" }}>
+          <h1>Project not found</h1>
+          <p>Sorry, we couldn't find the project you're looking for.</p>
+        </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: "contact"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardCarousel
+          title={project.title}
+          description={project.description}
+          tag={project.tag}
+          background={{ variant: "sparkles-gradient" }}
+          mediaItems={project.heroImages}
+          buttons={[
+            { text: "View More Work", href: "/" },
+            { text: "Start a Project", href: "/contact" },
+          ]}
+        />
+      </div>
+
+      <div id="overview" data-section="overview">
+        <TextSplitAbout
+          title="Project Overview"
+          description={project.overview}
+          buttons={[]}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="details" data-section="details">
+        <FeatureCardTwentyFour
+          title="Project Details"
+          description="Comprehensive breakdown of the design solution and components"
+          features={project.details}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="approach" data-section="approach">
+        <TextSplitAbout
+          title="Design Approach"
+          description={[
+            `Challenge: ${project.challenge}`,
+            `Solution: ${project.solution}`,
+            `Results: ${project.results}`,
+          ]}
+          buttons={[]}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      {project.nextProjectId && (
+        <div id="next-project" data-section="next-project">
+          <ContactCenter
+            tag="Next Project"
+            title={`Ready to explore our next work?`}
+            description={`Check out ${project.nextProjectName} to see another example of design excellence and strategic thinking.`}
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+            inputPlaceholder="Enter your email address"
+            buttonText="View Next Project"
+            termsText="Interested in learning more about our design process and capabilities."
+          />
+        </div>
+      )}
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Portfolio"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/projects/digital-brand-identity/page.tsx b/src/app/projects/digital-brand-identity/page.tsx
new file mode 100644
index 0000000..155ca4b
--- /dev/null
+++ b/src/app/projects/digital-brand-identity/page.tsx
@@ -0,0 +1,130 @@
+"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 FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function DigitalBrandIdentityPage() {
+  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: "contact" },
+          ]}
+          button={{
+            text: "Get in Touch",            href: "contact"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardCarousel
+          title="Digital Brand Identity System"
+          description="Complete visual identity redesign for a forward-thinking tech startup. This comprehensive project encompassed brand strategy, visual identity development, and full design system creation that elevated brand presence and market positioning."
+          tag="Case Study"
+          background={{ variant: "sparkles-gradient" }}
+          mediaItems={[
+            {
+              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: "Digital brand identity system showcase"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png",              imageAlt: "Brand identity design details"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png",              imageAlt: "Brand guidelines documentation"},
+          ]}
+          buttons={[
+            { text: "Back to Work", href: "/" },
+            { text: "Next Project", href: "/projects/ecommerce-platform-redesign" },
+          ]}
+        />
+      </div>
+
+      <div id="overview" data-section="overview">
+        <TextSplitAbout
+          title="Project Overview"
+          description={[
+            "Our client, a rapidly growing SaaS company, needed a cohesive visual identity to stand out in a competitive market. Their existing branding felt generic and didn't communicate their innovative spirit.",            "We conducted extensive market research and stakeholder interviews to understand their vision, values, and target audience. This informed every design decision from color palette to typography.",            "The result was a comprehensive brand system that included logo redesign, color palette, typography guidelines, imagery style, and a complete digital asset library. The new identity increased brand recognition by 40% and contributed to a 25% growth in customer acquisition within six months."]}
+          buttons={[
+            { text: "View More Projects", href: "/" },
+          ]}
+          showBorder={false}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="challenge" data-section="challenge">
+        <FeatureCardTwentyFour
+          title="Challenges & Solutions"
+          description="Key obstacles and our strategic approach to solving them"
+          tag="Strategy"
+          features={[
+            {
+              id: "1",              title: "Brand Differentiation",              author: "Challenge",              description: "The tech startup market is saturated with similar visual identities. We needed to create something distinctive that would cut through the noise while remaining professional and trustworthy.",              tags: ["Market Research", "Strategy", "Differentiation"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1",              imageAlt: "Brand differentiation strategy"},
+            {
+              id: "2",              title: "Scalability Requirements",              author: "Challenge",              description: "The design system needed to work across web, mobile, print, and emerging platforms. We created flexible guidelines that maintained consistency while adapting to different mediums and formats.",              tags: ["Scalability", "Design System", "Flexibility"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png",              imageAlt: "Scalable design system approach"},
+            {
+              id: "3",              title: "Brand Evolution",              author: "Challenge",              description: "The client needed flexibility for future growth and brand evolution. We designed a modular system that could evolve without losing its core identity. This approach has allowed them to expand into new markets with confidence.",              tags: ["Growth", "Evolution", "Modularity"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=2",              imageAlt: "Brand evolution framework"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="results" data-section="results">
+        <TextSplitAbout
+          title="Project Results & Impact"
+          description={[
+            "Following the implementation of the new brand identity, the client experienced significant business improvements. Brand recognition increased by 40% as measured by customer surveys and market research.",            "Customer acquisition grew by 25% in the six months following the rebrand, demonstrating the direct impact of stronger brand positioning. The new identity helped the company communicate its innovative approach more effectively.",            "The design system reduced internal design time by 35%, allowing the team to focus on strategic projects rather than repetitive design work. Developers also reported a smoother handoff process thanks to comprehensive documentation."]}
+          buttons={[
+            { text: "Start Your Project", href: "contact" },
+          ]}
+          showBorder={true}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Let's Collaborate"
+          title="Ready to Transform Your Brand?"
+          description="Let's discuss how strategic branding and design can elevate your business and create lasting impact in your market."
+          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>
+  );
+}
diff --git a/src/app/projects/ecommerce-platform-redesign/page.tsx b/src/app/projects/ecommerce-platform-redesign/page.tsx
new file mode 100644
index 0000000..acafcc4
--- /dev/null
+++ b/src/app/projects/ecommerce-platform-redesign/page.tsx
@@ -0,0 +1,130 @@
+"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 FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function EcommercePlatformRedesignPage() {
+  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: "contact" },
+          ]}
+          button={{
+            text: "Get in Touch",            href: "contact"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardCarousel
+          title="E-commerce Platform Redesign"
+          description="A complete UX/UI overhaul of an enterprise e-commerce platform that resulted in significant conversion improvements. This project focused on user-centered design, accessibility compliance, and mobile-first optimization."
+          tag="Case Study"
+          background={{ variant: "sparkles-gradient" }}
+          mediaItems={[
+            {
+              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 redesign showcase"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png",              imageAlt: "Platform interface design"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png",              imageAlt: "Checkout flow optimization"},
+          ]}
+          buttons={[
+            { text: "Back to Work", href: "/" },
+            { text: "Next Project", href: "/projects/saas-product-interface-design" },
+          ]}
+        />
+      </div>
+
+      <div id="overview" data-section="overview">
+        <TextSplitAbout
+          title="Project Overview"
+          description={[
+            "Our enterprise e-commerce client was struggling with declining conversion rates and high cart abandonment. The existing platform felt cluttered, confusing, and not optimized for mobile shopping.",            "We conducted extensive user research through surveys, interviews, and usability testing. The findings revealed critical pain points in product discovery, checkout flow, and mobile experience.",            "Through iterative design and testing, we improved the conversion rate by 35%, reduced cart abandonment by 40%, and achieved WCAG 2.1 AA accessibility compliance. The mobile-first redesign resulted in a 60% increase in mobile revenue."]}
+          buttons={[
+            { text: "View More Projects", href: "/" },
+          ]}
+          showBorder={false}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="key-improvements" data-section="key-improvements">
+        <FeatureCardTwentyFour
+          title="Key Design Improvements"
+          description="Major changes that drove business results"
+          tag="Design"
+          features={[
+            {
+              id: "1",              title: "Streamlined Checkout Flow",              author: "UX Improvement",              description: "Reduced checkout steps from 6 to 3, implemented auto-fill for returning customers, and added clear progress indicators. Guest checkout option was made more prominent, reducing friction for new users.",              tags: ["Checkout", "Conversion", "UX"],
+              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: "Checkout flow redesign"},
+            {
+              id: "2",              title: "Mobile-First Navigation",              author: "Mobile Optimization",              description: "Redesigned navigation architecture for touch interaction. Implemented sticky product recommendations and simplified category hierarchy. Mobile revenue increased by 60% following these changes.",              tags: ["Mobile", "Navigation", "Responsive"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png",              imageAlt: "Mobile navigation redesign"},
+            {
+              id: "3",              title: "Accessibility First",              author: "Compliance",              description: "Achieved WCAG 2.1 AA compliance with proper color contrast, keyboard navigation, screen reader support, and semantic HTML. Created accessible patterns for complex components like product filters and carousels.",              tags: ["Accessibility", "WCAG", "Compliance"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",              imageAlt: "Accessibility improvements"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="results" data-section="results">
+        <TextSplitAbout
+          title="Measurable Results"
+          description={[
+            "The redesigned platform delivered exceptional business results. Conversion rate increased by 35%, translating to significant revenue growth. Cart abandonment decreased by 40% as the streamlined checkout reduced friction.",            "Mobile optimization proved critical, with mobile revenue increasing by 60%. The mobile-first approach ensured the platform performed excellently across all devices, from smartphones to tablets and desktops.",            "Customer satisfaction improved significantly. Support ticket volume decreased by 30%, indicating users found the interface more intuitive. The accessibility improvements expanded the addressable market by making the platform usable for everyone."]}
+          buttons={[
+            { text: "Start Your Project", href: "contact" },
+          ]}
+          showBorder={true}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Let's Collaborate"
+          title="Ready to Improve Your Platform?"
+          description="Let's discuss how user-centered design and optimization can boost your conversions and customer satisfaction."
+          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>
+  );
+}
diff --git a/src/app/projects/saas-product-interface-design/page.tsx b/src/app/projects/saas-product-interface-design/page.tsx
new file mode 100644
index 0000000..01b785d
--- /dev/null
+++ b/src/app/projects/saas-product-interface-design/page.tsx
@@ -0,0 +1,130 @@
+"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 FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function SaasProductInterfaceDesignPage() {
+  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: "contact" },
+          ]}
+          button={{
+            text: "Get in Touch",            href: "contact"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardCarousel
+          title="SaaS Product Interface Design"
+          description="Designed an intuitive data analytics interface for a growing SaaS platform. Created a comprehensive design system that improved user onboarding, reduced support tickets by 50%, and accelerated feature development."
+          tag="Case Study"
+          background={{ variant: "sparkles-gradient" }}
+          mediaItems={[
+            {
+              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 showcase"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png",              imageAlt: "Data visualization design"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png",              imageAlt: "Dashboard interface design"},
+          ]}
+          buttons={[
+            { text: "Back to Work", href: "/" },
+            { text: "View All Projects", href: "/" },
+          ]}
+        />
+      </div>
+
+      <div id="overview" data-section="overview">
+        <TextSplitAbout
+          title="Project Overview"
+          description={[
+            "A data analytics SaaS company approached us with a complex challenge: their product was powerful but difficult to use. New customers struggled during onboarding, and support costs were escalating rapidly.",            "We conducted extensive user research and discovered that the complexity wasn't the features themselves, but the interface that presented them. Users felt overwhelmed by options and uncertain where to start.",            "Our solution was a thoughtful redesign that prioritized clarity, progressive disclosure, and contextual guidance. We created an interactive design system with 15+ component variations that maintained consistency while supporting the product's sophisticated capabilities."]}
+          buttons={[
+            { text: "View More Projects", href: "/" },
+          ]}
+          showBorder={false}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="design-strategy" data-section="design-strategy">
+        <FeatureCardTwentyFour
+          title="Design Strategy & Approach"
+          description="Our methodical approach to solving complex product challenges"
+          tag="Strategy"
+          features={[
+            {
+              id: "1",              title: "Progressive Disclosure",              author: "UX Pattern",              description: "Implemented progressive disclosure patterns to surface advanced features only when needed. Guided users through workflows step-by-step with contextual help and smart defaults that made quick wins possible.",              tags: ["UX", "Onboarding", "Progressive Disclosure"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1",              imageAlt: "Progressive disclosure implementation"},
+            {
+              id: "2",              title: "Design System Creation",              author: "System Design",              description: "Built a comprehensive design system with 15+ interactive component variations. Documented every component with usage guidelines, do's and don'ts, and code examples. This system enabled developers to build new features 40% faster.",              tags: ["Design System", "Components", "Documentation"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png",              imageAlt: "Design system components"},
+            {
+              id: "3",              title: "User Onboarding Experience",              author: "Product Experience",              description: "Redesigned the onboarding flow with interactive tutorials, contextual tooltips, and guided tours. New users could complete key tasks within 15 minutes instead of hours. Support tickets decreased by 50%.",              tags: ["Onboarding", "User Education", "Experience"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png",              imageAlt: "Onboarding flow design"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="outcomes" data-section="outcomes">
+        <TextSplitAbout
+          title="Project Outcomes & Impact"
+          description={[
+            "The redesigned interface delivered measurable improvements across all key metrics. Support tickets decreased by 50% as users found the product more intuitive and easier to navigate. The onboarding experience was transformed from frustrating to delightful.",            "Customer retention improved significantly, with churn decreasing by 25%. Users reported higher satisfaction scores and were more likely to recommend the product to colleagues. The design system became a core competitive advantage.",            "Development velocity increased by 40% as the comprehensive design system eliminated design-to-development friction. New features could be implemented consistently and quickly. The company used this efficiency to accelerate their product roadmap."]}
+          buttons={[
+            { text: "Start Your Project", href: "contact" },
+          ]}
+          showBorder={true}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Let's Collaborate"
+          title="Ready to Simplify Your Product?"
+          description="Let's discuss how thoughtful design and strategic product thinking can make your complex product intuitive and delightful to use."
+          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>
+  );
+}
