diff --git a/README.md b/README.md
index 70b7c82..408fd40 100644
--- a/README.md
+++ b/README.md
@@ -1,73 +1,3 @@
-# Welcome to your Lovable project
-
-## Project info
-
-**URL**: https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID
-
-## How can I edit this code?
-
-There are several ways of editing your application.
-
-**Use Lovable**
-
-Simply visit the [Lovable Project](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and start prompting.
-
-Changes made via Lovable will be committed automatically to this repo.
-
-**Use your preferred IDE**
-
-If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
-
-The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
-
-Follow these steps:
-
-```sh
-# Step 1: Clone the repository using the project's Git URL.
-git clone <YOUR_GIT_URL>
-
-# Step 2: Navigate to the project directory.
-cd <YOUR_PROJECT_NAME>
-
-# Step 3: Install the necessary dependencies.
-npm i
-
-# Step 4: Start the development server with auto-reloading and an instant preview.
-npm run dev
-```
-
-**Edit a file directly in GitHub**
-
-- Navigate to the desired file(s).
-- Click the "Edit" button (pencil icon) at the top right of the file view.
-- Make your changes and commit the changes.
-
-**Use GitHub Codespaces**
-
-- Navigate to the main page of your repository.
-- Click on the "Code" button (green button) near the top right.
-- Select the "Codespaces" tab.
-- Click on "New codespace" to launch a new Codespace environment.
-- Edit files directly within the Codespace and commit and push your changes once you're done.
-
-## What technologies are used for this project?
-
-This project is built with:
-
-- Vite
-- TypeScript
-- React
-- shadcn-ui
-- Tailwind CSS
-
-## How can I deploy this project?
-
-Simply open [Lovable](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and click on Share -> Publish.
-
-## Can I connect a custom domain to my Lovable project?
-
-Yes, you can!
-
-To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
-
-Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)
+techzaa.alpha@gmail.com,
+</br>
+TechZaa@@##123
\ No newline at end of file
diff --git a/src/components/home/ProjectCard.tsx b/src/components/home/ProjectCard.tsx
index 75dfd4a..419a877 100644
--- a/src/components/home/ProjectCard.tsx
+++ b/src/components/home/ProjectCard.tsx
@@ -1,102 +1,173 @@
-import { motion } from "framer-motion";
-import {  ExternalLink } from "lucide-react";
-import { useState } from "react";
+import { motion, useReducedMotion } from "framer-motion";
+import { ArrowUpRight, Layers } from "lucide-react";
+import { useId, useState } from "react";
 import { Link } from "react-router-dom";
 
-export function ProjectCard({ project, color, index, isInView }) {
+interface ProjectPayload {
+  _id: string;
+  title: string;
+  category: string[];
+  isFeatured: boolean;
+  technologies: string[];
+  publishedYear: string | number;
+  previewUrl: string;
+  image?: string;
+}
+
+interface ProjectCardProps {
+  project: ProjectPayload;
+  index: number;
+  isInView: boolean;
+}
+
+export function ProjectCard({ project, index, isInView }: ProjectCardProps) {
   const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
   const [isHovered, setIsHovered] = useState(false);
+  const shouldReduceMotion = useReducedMotion();
+  const titleId = useId();
 
   const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (shouldReduceMotion) return;
     const rect = e.currentTarget.getBoundingClientRect();
     const x = ((e.clientX - rect.left) / rect.width) * 100;
     const y = ((e.clientY - rect.top) / rect.height) * 100;
     setMousePosition({ x, y });
   };
 
+  // Safe Fallback Asset Frame
+  const projectImage =
+    project.image ||
+    "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=800&auto=format&fit=crop";
+
   return (
-   <Link to={`/projects/${project._id}`}>
     <motion.div
-      initial={{ opacity: 0, y: 60, rotateX: 15 }}
-      animate={isInView ? { opacity: 1, y: 0, rotateX: 0 } : {}}
-      transition={{ duration: 0.6, delay: index * 0.08 }}
-      whileHover={{ scale: 1.02 }}
-      className="group relative rounded-3xl overflow-hidden cursor-pointer h-full"
+      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 40 }}
+      animate={isInView ? { opacity: 1, y: 0 } : {}}
+      transition={{
+        duration: 0.5,
+        delay: index * 0.05,
+        ease: [0.215, 0.61, 0.355, 1],
+      }}
+      className="group relative bg-card border border-border/60 hover:border-primary/30 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 flex flex-col h-full transform-gpu"
       onMouseMove={handleMouseMove}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => {
         setIsHovered(false);
         setMousePosition({ x: 50, y: 50 });
       }}
+      aria-labelledby={titleId}
     >
-      {/* Main Card Container with 3D Tilt */}
+      {/* Interactive Visual Window */}
       <div
-        className="relative h-full rounded-3xl overflow-hidden shadow-2xl transition-transform duration-300"
+        className="aspect-[16/10] overflow-hidden relative bg-muted w-full border-b border-border/40"
         style={{
-          transform: isHovered
-            ? `perspective(1000px) rotateX(${(50 - mousePosition.y) * 0.12}deg) rotateY(${(mousePosition.x - 50) * 0.15}deg)`
-            : "perspective(1000px) rotateX(0deg) rotateY(0deg)",
+          transform:
+            isHovered && !shouldReduceMotion
+              ? `perspective(1000px) rotateX(${(50 - mousePosition.y) * 0.06}deg) rotateY(${(mousePosition.x - 50) * 0.06}deg)`
+              : "perspective(1000px) rotateX(0deg) rotateY(0deg)",
           transition: isHovered
-            ? "transform 0.1s ease-out"
-            : "transform 0.4s ease-out",
+            ? "transform 0.05s ease-out"
+            : "transform 0.3s ease-out",
         }}
       >
-        {/* Image Container */}
-        <div className="aspect-[16/13] overflow-hidden relative">
-          <img
-            src={project.image}
-            alt={project.title}
-            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-          />
-
-          {/* Dynamic Shine Overlay */}
-          <div
-            className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"
-            style={{
-              background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(255,255,255,0.8) 0%, transparent 60%)`,
-            }}
-          />
-        </div>
-
-        {/* Gradient Overlay */}
-        <div
-          className={`absolute inset-0 bg-gradient-to-t ${color} via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-all duration-500`}
+        <img
+          src={projectImage}
+          alt={`Interface screenshot overview for ${project.title}`}
+          className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
+          loading="lazy"
         />
 
-        {/* Content */}
-        <div className="absolute inset-0 flex flex-col justify-end p-8">
-          <div className="space-y-4 transform transition-all duration-500 group-hover:translate-y-0">
-            {/* Category */}
-            <motion.span
-              initial={{ opacity: 0, y: 20 }}
-              animate={
-                isHovered ? { opacity: 1, y: 0 } : { opacity: 0.7, y: 10 }
-              }
-              className="inline-block px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md text-white text-xs font-medium border border-white/20"
-            >
-              {project.category}
-            </motion.span>
+        {/* Techzaa Radial Spotlight Overlay */}
+        {!shouldReduceMotion && (
+          <div
+            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none mix-blend-screen"
+            style={{
+              background: `radial-gradient(circle 180px at ${mousePosition.x}% ${mousePosition.y}%, rgba(var(--primary-rgb, 99, 102, 241), 0.15), transparent 80%)`,
+            }}
+          />
+        )}
 
-            {/* Title */}
-            <h3 className="text-2xl md:text-3xl font-bold text-white leading-tight tracking-tight">
-              {project.title}
-            </h3>
+        {/* Absolute Year Floating Tag */}
+        <span className="absolute top-3 right-3 text-[10px] font-bold px-2 py-0.5 rounded bg-background/80 backdrop-blur-md border border-border/40 text-muted-foreground tracking-wider">
+          {project.publishedYear}
+        </span>
+      </div>
 
-            {/* View Project Link */}
-            <Link
-              to={project.liveUrl}
-              className="flex items-center gap-3 text-white/80 group-hover:text-white transition-colors"
-            >
-              <span className="font-medium text-sm tracking-wider">live</span>
-              <ExternalLink className="w-5 h-5 transition-transform group-hover:rotate-45" />
-            </Link>
+      {/* Structured Informational Body Content */}
+      <div className="p-6 flex flex-col flex-grow justify-between space-y-6">
+        <div className="space-y-3">
+          {/* Category Chip List Mapping handles strings or arrays cleanly */}
+          <div
+            className="flex flex-wrap gap-1"
+            aria-label="Project classifications"
+          >
+            {Array.isArray(project.category) ? (
+              project.category.slice(0, 3).map((cat) => (
+                <span
+                  key={cat}
+                  className="inline-flex items-center text-[10px] font-bold uppercase tracking-wider text-primary bg-primary/5 border border-primary/10 px-2 py-0.5 rounded"
+                >
+                  {cat}
+                </span>
+              ))
+            ) : (
+              <span className="inline-flex items-center text-[10px] font-bold uppercase tracking-wider text-primary bg-primary/5 border border-primary/10 px-2 py-0.5 rounded">
+                {project.category}
+              </span>
+            )}
           </div>
+
+          {/* Title Identifier linked to parent card components via standard a11y specs */}
+          <h3
+            id={titleId}
+            className="text-xl font-bold tracking-tight text-foreground leading-snug group-hover:text-primary transition-colors duration-200"
+          >
+            {project.title}
+          </h3>
+
+          {/* Previewing active Framework stacks cleanly underneath */}
+          {project.technologies && project.technologies.length > 0 && (
+            <div className="flex flex-wrap gap-1 pt-1">
+              {project.technologies.slice(0, 4).map((tech) => (
+                <span
+                  key={tech}
+                  className="text-[11px] font-medium text-muted-foreground bg-secondary/40 px-2 py-0.5 rounded border border-border/30"
+                >
+                  {tech}
+                </span>
+              ))}
+              {project.technologies.length > 4 && (
+                <span className="text-[10px] font-semibold text-muted-foreground/60 px-1.5 py-0.5">
+                  +{project.technologies.length - 4} more
+                </span>
+              )}
+            </div>
+          )}
         </div>
 
-        {/* Neon Border Glow */}
-        <div className="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-primary/60 transition-all duration-500 pointer-events-none neon-glow" />
+        {/* Action Controls Matrix Bar */}
+        <div className="flex items-center justify-between pt-4 border-t border-border/40 w-full text-xs font-semibold tracking-wide">
+          <Link
+            to={`/projects/${project._id}`}
+            className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors py-1 focus-visible:outline-none focus-visible:underline"
+            aria-label={`Read technical case documentation for ${project.title}`}
+          >
+            <Layers className="w-3.5 h-3.5 mr-1.5 text-primary/70" />
+            Case Study
+          </Link>
+
+          <a
+            href={project.previewUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center text-primary hover:opacity-80 transition-opacity py-1 focus-visible:outline-none focus-visible:underline"
+            aria-label={`Launch deployment window for ${project.title}`}
+          >
+            Live Platform
+            <ArrowUpRight className="w-3.5 h-3.5 ml-1 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+          </a>
+        </div>
       </div>
     </motion.div>
-   </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx
index 1adf35e..2fe7ee4 100644
--- a/src/components/home/ProjectsSection.tsx
+++ b/src/components/home/ProjectsSection.tsx
@@ -4,8 +4,8 @@ import { motion, useInView } from "framer-motion";
 import { ArrowRight } from "lucide-react";
 import { useRef } from "react";
 import { Link } from "react-router-dom";
-import { ProjectCard } from "./ProjectCard";
 import PremiumBadge from "../shared/PremiumBadge";
+import { ProjectCard } from "./ProjectCard";
 
 const gradientColors = [
   "from-neon-blue/90",
@@ -19,9 +19,9 @@ export default function ProjectsSection() {
     fields: "category, title, image, liveUrl",
     limit: 6,
   });
-
-  const projects = projectsData?.data.data.result || [];
-
+  console.log(projectsData?.data.data);
+  const projects = projectsData?.data.data || [];
+  console.log("project from homepage", projects);
   const ref = useRef<HTMLElement>(null);
   const isInView = useInView(ref, { once: true, margin: "-100px" });
 
@@ -50,9 +50,12 @@ export default function ProjectsSection() {
           transition={{ duration: 0.7 }}
           className="text-center mb-20"
         >
-         <PremiumBadge text="our projects"/>
+          <PremiumBadge text="our projects" />
           <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
-            Featured <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Projects</span>
+            Featured{" "}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">
+              Projects
+            </span>
           </h2>
           <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
             Crafted with passion. Delivered with excellence.
@@ -62,13 +65,10 @@ export default function ProjectsSection() {
         {/* Projects Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
           {projects.map((project, index) => {
-            const color = gradientColors[index % gradientColors.length];
-
             return (
               <ProjectCard
                 key={project._id}
                 project={project}
-                color={color}
                 index={index}
                 isInView={isInView}
               />
diff --git a/src/components/home/TeamSection.tsx b/src/components/home/TeamSection.tsx
index ebd58c4..400f0b0 100644
--- a/src/components/home/TeamSection.tsx
+++ b/src/components/home/TeamSection.tsx
@@ -59,7 +59,7 @@ export default function TeamSection() {
             }
             pagination={{ clickable: true }}
             modules={[Autoplay, Pagination]}
-            className="pb-12" // Space for pagination dots
+            className="pb-12"
             breakpoints={{
               640: { slidesPerView: 2 },
               1024: { slidesPerView: 3 },
@@ -84,18 +84,7 @@ export default function TeamSection() {
                         className="absolute inset-0 w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-110"
                       />
                     </div>
-                    <div className="absolute inset-0 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center gap-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                      <Link to={member.linkedin} target="_blank">
-                        <Linkedin className="w-5 h-5 cursor-pointer hover:text-primary transition-colors" />
-                      </Link>
-                      <Link to={member.twitter} target="_blank">
-                        <Twitter className="w-5 h-5 cursor-pointer hover:text-primary transition-colors" />
-                      </Link>
-                      <Link to={member.github} target="_blank">
-                        {" "}
-                        <Github className="w-5 h-5 cursor-pointer hover:text-primary transition-colors" />
-                      </Link>
-                    </div>
+                    
                   </div>
 
                   <h3 className="text-xl font-bold mb-1 group-hover:text-primary transition-colors">
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index dc2dd67..5ff5dec 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -17,7 +17,7 @@ const Index = () => {
         <HeroSection />
         <ServicesSection />
         <ProjectsSection />
-        <TeamSection />
+        {/* <TeamSection /> */}
         <AboutSection />
         <TestimonialsSection />
         {/* <BlogSection /> */}
diff --git a/src/pages/ProjectDetails.tsx b/src/pages/ProjectDetails.tsx
index c2b830b..e2a48c5 100644
--- a/src/pages/ProjectDetails.tsx
+++ b/src/pages/ProjectDetails.tsx
@@ -1,67 +1,77 @@
 import PageTransition from "@/components/home/PageTransition";
 import { Button } from "@/components/ui/button";
 import { useProjectById } from "@/hooks/queires/useProjects";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 import {
+  AlertCircle,
   Calendar,
+  CheckCircle,
   ChevronRight,
   Clock,
   ExternalLink,
-  Github,
-  Users,
+  HelpCircle,
+  Sliders,
+  Sparkles,
 } from "lucide-react";
-import ReactMarkdown from "react-markdown";
 import { Link, useNavigate, useParams } from "react-router-dom";
-import remarkGfm from "remark-gfm";
 
-interface Result {
-  label: string;
-  value: string | number;
-}
-
-interface ProjectData {
-  id: string;
-  category: string;
+// Standardizing backend data matching layer safely
+interface BackendProjectPayload {
+  _id: string;
   title: string;
   description: string;
-  year: string | number;
-  duration: string;
-  team: string | number;
-  client: string;
-  liveUrl: string;
-  codeUrl?: string;
+  category: string[];
+  status: string;
+  isFeatured: boolean;
   image: string;
-  results?: Result[];
-  fullDescription: string;
-  features?: string[];
-  technologies?: string[];
-  challenges?: string[];
-  gallery?: string[];
+  imageGallery: string[];
+  technologies: string[];
+  publishedYear: string | number;
+  problem: string;
+  solutions: string;
+  challenges: string;
+  workingDuration: string;
+  previewUrl: string;
+  features: string[];
 }
 
-const CATEGORY_LABELS: Record<string, string> = {
-  web: "Web Development",
-  mobile: "Mobile App",
-  ai: "AI & Machine Learning",
-  cloud: "Cloud Solutions",
-};
-
 export default function ProjectDetails() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const shouldReduceMotion = useReducedMotion();
   const { data, isLoading, isError } = useProjectById(id || "");
 
-  const project: ProjectData | null =
+  const project: BackendProjectPayload | null =
     data?.data?.data || data?.data || data || null;
 
+  const faderUpVariants = {
+    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
+    visible: (custom: number) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        delay: custom * 0.08,
+        ease: [0.215, 0.61, 0.355, 1],
+      },
+    }),
+  };
+
   if (isLoading) {
     return (
       <PageTransition>
-        <div className="min-h-screen bg-background flex items-center justify-center">
+        <div
+          className="min-h-screen bg-background flex items-center justify-center"
+          role="status"
+          aria-live="polite"
+        >
           <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin" />
-            <span className="text-sm font-medium text-muted-foreground animate-pulse">
-              Loading project details...
+            <div className="relative w-10 h-10">
+              <div className="absolute inset-0 border-4 border-primary/10 rounded-full" />
+              <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin" />
+            </div>
+            <span className="text-xs font-semibold tracking-widest text-muted-foreground uppercase animate-pulse">
+              Parsing Techzaa Case Asset...
             </span>
           </div>
         </div>
@@ -72,20 +82,25 @@ export default function ProjectDetails() {
   if (isError || !project) {
     return (
       <PageTransition>
-        <div className="min-h-screen bg-background flex items-center justify-center p-4">
-          <div className="text-center max-w-md border border-primary/20 bg-secondary/30 backdrop-blur-xl p-8 rounded-3xl shadow-2xl">
-            <h1 className="text-3xl font-bold tracking-tight mb-3">
-              Project Not Found
-            </h1>
-            <p className="text-muted-foreground mb-6">
-              The project you're looking for does not exist or could not be
-              loaded.
-            </p>
+        <div className="min-h-screen bg-background flex items-center justify-center p-6">
+          <div className="text-center max-w-sm border border-destructive/20 bg-card p-8 rounded-2xl shadow-xl space-y-6">
+            <div className="inline-flex p-3 bg-destructive/10 rounded-full text-destructive">
+              <AlertCircle className="w-5 h-5" />
+            </div>
+            <div className="space-y-2">
+              <h1 className="text-xl font-bold tracking-tight">
+                Deployment Not Located
+              </h1>
+              <p className="text-xs text-muted-foreground leading-relaxed">
+                The targeted project record configuration cannot be pulled from
+                the API ecosystem.
+              </p>
+            </div>
             <Button
               onClick={() => navigate("/projects")}
-              className="rounded-full w-full bg-primary text-primary-foreground hover:opacity-90 transition-all shadow-lg"
+              className="w-full rounded-xl text-xs font-semibold uppercase tracking-wider"
             >
-              Back to Projects
+              Return to home
             </Button>
           </div>
         </div>
@@ -95,272 +110,222 @@ export default function ProjectDetails() {
 
   return (
     <PageTransition>
-      <div className="min-h-screen bg-background text-foreground overflow-x-hidden selection:bg-primary/30 selection:text-primary">
+      <div className="min-h-screen bg-background text-foreground selection:bg-primary/20 selection:text-primary antialiased">
+        {/* HERO SECTION - Architectural Dynamic Header */}
+        <section className="pt-36 pb-16 relative overflow-hidden">
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+            {/* Dynamic Breadcrumbs */}
+            <nav aria-label="Breadcrumb" className="mb-10">
+              <ol className="flex items-center space-x-2 text-xs font-medium text-muted-foreground">
+                <li>
+                  <Link
+                    to="/"
+                    className="hover:text-primary transition-colors focus-visible:outline-none focus-visible:underline"
+                  >
+                    Home
+                  </Link>
+                </li>
+                <li className="flex items-center space-x-2">
+                  <ChevronRight className="w-3 h-3 opacity-60" />
+                  <Link
+                    to="/projects"
+                    className="hover:text-primary transition-colors focus-visible:outline-none focus-visible:underline"
+                  >
+                    Projects
+                  </Link>
+                </li>
+                <li className="flex items-center space-x-2" aria-current="page">
+                  <ChevronRight className="w-3 h-3 opacity-60" />
+                  <span className="text-foreground font-semibold truncate max-w-[200px]">
+                    {project.title}
+                  </span>
+                </li>
+              </ol>
+            </nav>
 
-
-        {/* Hero Section */}
-        <section className="pt-36 pb-20 relative overflow-hidden">
-          {/* Ambient Background Glows */}
-          <div className="absolute inset-0 pointer-events-none z-0">
-            <div className="absolute top-1/4 left-[10%] w-[500px] h-[500px] bg-primary/15 rounded-full mix-blend-screen filter blur-[120px] animate-pulse duration-[6000ms]" />
-            <div className="absolute bottom-0 right-[10%] w-[400px] h-[400px] bg-purple-500/10 rounded-full mix-blend-screen filter blur-[100px] delay-1000" />
-          </div>
-
-          <div className="container mx-auto px-4 md:px-6 relative z-10">
-            {/* Breadcrumb Navigation */}
-            <motion.nav
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.4 }}
-              className="flex items-center gap-2 text-xs font-medium text-muted-foreground/80 mb-10"
-              aria-label="Breadcrumb"
-            >
-              <Link to="/" className="hover:text-primary transition-colors">
-                Home
-              </Link>
-              <ChevronRight className="w-3.5 h-3.5 opacity-50" />
-              <Link
-                to="/projects"
-                className="hover:text-primary transition-colors"
-              >
-                Projects
-              </Link>
-              <ChevronRight className="w-3.5 h-3.5 opacity-50" />
-              <span className="text-foreground font-semibold truncate">
-                {project.title}
-              </span>
-            </motion.nav>
-
-            <div className="grid lg:grid-cols-2 gap-12 items-center">
-              {/* Content Block */}
-              <div className="flex flex-col">
-                <motion.span
-                  initial={{ opacity: 0, y: 15 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.4 }}
-                  className="self-start px-3.5 py-1 rounded-full bg-primary/15 text-primary border border-primary/20 text-xs font-semibold tracking-wider uppercase mb-6"
+            {/* Asymmetric Split Layout */}
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
+              {/* Primary Metas Block */}
+              <div className="lg:col-span-7 space-y-6">
+                <motion.div
+                  initial="hidden"
+                  animate="visible"
+                  custom={0}
+                  className="flex flex-wrap gap-1.5"
                 >
-                  {CATEGORY_LABELS[project.category] || project.category}
-                </motion.span>
+                  {Array.isArray(project.category) ? (
+                    project.category.map((cat) => (
+                      <span
+                        key={cat}
+                        className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded bg-secondary text-secondary-foreground border border-border/80 text-[11px] font-semibold tracking-wide"
+                      >
+                        {cat}
+                      </span>
+                    ))
+                  ) : (
+                    <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded bg-secondary text-secondary-foreground border border-border/80 text-[11px] font-semibold tracking-wide">
+                      {project.category}
+                    </span>
+                  )}
+                </motion.div>
 
                 <motion.h1
-                  initial={{ opacity: 0, y: 15 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: 0.1 }}
-                  className="text-4xl md:text-5xl lg:text-6xl font-black tracking-tight leading-none mb-6"
+                  animate="visible"
+                  custom={1}
+                  className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-foreground leading-[1.1]"
                 >
                   {project.title}
                 </motion.h1>
 
                 <motion.p
-                  initial={{ opacity: 0, y: 15 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: 0.2 }}
-                  className="text-base md:text-lg text-muted-foreground leading-relaxed max-w-2xl mb-10"
+                  initial="hidden"
+                  animate="visible"
+                  custom={2}
+                  className="text-base sm:text-lg text-muted-foreground leading-relaxed max-w-2xl"
                 >
                   {project.description}
                 </motion.p>
 
-                {/* Project Metadata */}
+                {/* Primary Interaction Arrays */}
                 <motion.div
-                  initial={{ opacity: 0, y: 15 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: 0.3 }}
-                  className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10"
+                  initial="hidden"
+                  animate="visible"
+                  custom={3}
+                  className="flex flex-col sm:flex-row gap-3 pt-2"
                 >
-                  {[
-                    { label: "Year", value: project.year, icon: Calendar },
-                    { label: "Duration", value: project.duration, icon: Clock },
-                    { label: "Team Size", value: project.team, icon: Users },
-                    { label: "Client", value: project.client },
-                  ].map((item, idx) => (
-                    <div
-                      key={item.label}
-                      className="group flex flex-col items-center justify-center p-4 bg-secondary/40 backdrop-blur-md border border-border/50 rounded-2xl transition-all duration-300 hover:border-primary/30 hover:shadow-lg"
-                    >
-                      {item.icon ? (
-                        <item.icon className="w-5 h-5 text-primary mb-2.5 transition-transform group-hover:scale-105" />
-                      ) : (
-                        <div className="w-5 h-5 mb-2.5" />
-                      )}
-                      <span className="text-[10px] font-medium tracking-wider uppercase text-muted-foreground mb-1">
-                        {item.label}
-                      </span>
-                      <span className="text-sm font-bold truncate max-w-full text-center">
-                        {item.value}
-                      </span>
-                    </div>
-                  ))}
-                </motion.div>
-
-                {/* Call to Actions */}
-                <motion.div
-                  initial={{ opacity: 0, y: 15 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: 0.4 }}
-                  className="flex flex-wrap gap-4"
-                >
-                  <Link
-                    to={project.liveUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="w-full sm:w-auto"
+                  <Button
+                    asChild
+                    size="lg"
+                    className="rounded-xl font-semibold tracking-wide shadow-lg shadow-primary/5 transition-transform active:scale-[0.98]"
                   >
-                    <Button className="w-full sm:w-auto px-6 h-11 rounded-full bg-primary text-primary-foreground font-medium gap-2 shadow-xl shadow-primary/10 hover:opacity-90 transition-all duration-300">
-                      <ExternalLink className="w-4 h-4" />
-                      View Live
-                    </Button>
-                  </Link>
-                  {project.codeUrl && (
-                    <Link
-                      to={project.codeUrl}
+                    <a
+                      href={project.previewUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="w-full sm:w-auto"
                     >
-                      <Button
-                        variant="outline"
-                        className="w-full sm:w-auto px-6 h-11 rounded-full border-border/70 bg-secondary/30 backdrop-blur-sm font-medium gap-2 hover:bg-secondary transition-all duration-300"
-                      >
-                        <Github className="w-4 h-4 text-muted-foreground" />
-                        View Code
-                      </Button>
-                    </Link>
-                  )}
+                      <ExternalLink className="w-4 h-4 mr-2" />
+                      Live Preview Link
+                    </a>
+                  </Button>
                 </motion.div>
               </div>
 
-              {/* Project Cover Visual */}
-              <motion.div
-                initial={{ opacity: 0, scale: 0.95 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.6, delay: 0.2 }}
-                className="relative group rounded-3xl overflow-hidden border border-border/60 shadow-2xl bg-secondary/30 aspect-[4/3] lg:aspect-auto h-[450px]"
-              >
-                <img
-                  src={project.image}
-                  alt={project.title}
-                  className="w-full h-full object-cover object-center transition-transform duration-700 ease-out group-hover:scale-[1.02]"
-                  loading="lazy"
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent opacity-80" />
-              </motion.div>
+              {/* Cover Interactive Card Frame */}
+              <div className="lg:col-span-5 w-full">
+                <motion.div
+                  initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.97 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.5 }}
+                  className="relative rounded-2xl overflow-hidden border border-border bg-card aspect-[4/3] shadow-lg transform-gpu"
+                >
+                  <img
+                    src={project.image}
+                    alt={`Case Application mockup frame for ${project.title}`}
+                    className="w-full h-full object-cover object-center"
+                    loading="eager"
+                  />
+                </motion.div>
+              </div>
             </div>
           </div>
         </section>
 
-        {/* Key Results Section */}
-        {project.results && project.results.length > 0 && (
-          <section className="py-20 border-t border-b border-border/50 bg-secondary/20">
-            <div className="container mx-auto px-4 md:px-6">
-              <motion.div
-                initial={{ opacity: 0, y: 15 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                className="text-center max-w-2xl mx-auto mb-14"
-              >
-                <h2 className="text-3xl font-bold tracking-tight mb-3">
-                  Key Performance Outcomes
-                </h2>
-                <p className="text-sm text-muted-foreground">
-                  Measurable impact and business value generated by this
-                  project.
-                </p>
-              </motion.div>
-
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-5xl mx-auto">
-                {project.results.map((result, index) => (
-                  <motion.div
-                    key={result.label}
-                    initial={{ opacity: 0, y: 25 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ delay: index * 0.08, duration: 0.4 }}
-                    className="flex flex-col items-center bg-background/60 backdrop-blur-md border border-border/40 rounded-3xl p-8 transition-all duration-300 hover:border-primary/30 hover:shadow-xl"
-                  >
-                    <span className="text-3xl md:text-4xl font-black text-primary tracking-tight mb-2">
-                      {result.value}
+        {/* METADATA BAR SECTION */}
+        <section
+          className="py-8 bg-secondary/20 border-y border-border/40"
+          aria-label="System parameters"
+        >
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              {[
+                {
+                  label: "Deployment Year",
+                  value: project.publishedYear,
+                  icon: Calendar,
+                },
+                {
+                  label: "Production Period",
+                  value: project.workingDuration,
+                  icon: Clock,
+                },
+                {
+                  label: "Project Status",
+                  value: project.status,
+                  icon: Sliders,
+                },
+              ].map((item) => (
+                <div
+                  key={item.label}
+                  className="p-4 bg-card border border-border/60 rounded-xl flex items-center justify-between shadow-sm"
+                >
+                  <div className="space-y-0.5 truncate mr-2">
+                    <span className="block text-[10px] font-bold tracking-wider uppercase text-muted-foreground">
+                      {item.label}
                     </span>
-                    <span className="text-xs font-medium text-center text-muted-foreground">
-                      {result.label}
+                    <span className="block text-sm font-bold text-foreground truncate">
+                      {item.value}
                     </span>
-                  </motion.div>
-                ))}
-              </div>
-            </div>
-          </section>
-        )}
-
-        {/* Main Details Section */}
-        <section className="py-28">
-          <div className="container mx-auto px-4 md:px-6">
-            <div className="grid lg:grid-cols-12 gap-16 max-w-7xl mx-auto">
-              {/* Main Text Content */}
-              <div className="lg:col-span-7 flex flex-col justify-start">
-                <h3 className="text-3xl font-bold tracking-tight mb-8">
-                  About the Project
-                </h3>
-                <div className="prose prose-neutral dark:prose-invert max-w-none text-muted-foreground leading-relaxed">
-                  <ReactMarkdown
-                    remarkPlugins={[remarkGfm]}
-                    components={{
-                      p: ({ children }) => (
-                        <p className="text-base md:text-lg text-muted-foreground leading-relaxed mb-6">
-                          {children}
-                        </p>
-                      ),
-                      strong: ({ children }) => (
-                        <strong className="font-semibold text-foreground">
-                          {children}
-                        </strong>
-                      ),
-                      ul: ({ children }) => (
-                        <ul className="list-disc list-inside space-y-2 mb-6 ml-2 text-muted-foreground">
-                          {children}
-                        </ul>
-                      ),
-                      li: ({ children }) => (
-                        <li className="text-muted-foreground">{children}</li>
-                      ),
-                    }}
-                  >
-                    {project.fullDescription}
-                  </ReactMarkdown>
+                  </div>
+                  <item.icon className="w-4 h-4 text-primary opacity-70 flex-shrink-0" />
                 </div>
-              </div>
+              ))}
+            </div>
+          </div>
+        </section>
 
-              {/* Sidebar Capabilities */}
-              <div className="lg:col-span-5 flex flex-col gap-12">
-                {/* Features */}
-                {project.features && project.features.length > 0 && (
-                  <div>
-                    <h3 className="text-xl font-bold tracking-tight mb-6">
-                      Key Capabilities
+        {/* COMPREHENSIVE CASE LOGIC SECTION */}
+        <section className="py-20 bg-background">
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">
+              {/* Engineering Metrics Column (Left side) */}
+              <div className="lg:col-span-6 space-y-10">
+                {project.problem && (
+                  <div className="space-y-3">
+                    <h3 className="text-lg font-bold tracking-tight text-foreground flex items-center gap-2">
+                      <HelpCircle className="w-4 h-4 text-primary" />
+                      The Structural Problem
                     </h3>
-                    <ul className="space-y-4">
-                      {project.features.map((feature, index) => (
-                        <li key={index} className="flex items-start gap-4">
-                          <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-primary mt-2.5" />
-                          <span className="text-sm md:text-base text-muted-foreground leading-snug">
-                            {feature}
-                          </span>
-                        </li>
-                      ))}
-                    </ul>
+                    <p className="text-sm text-muted-foreground leading-relaxed bg-secondary/10 border border-border/40 p-4 rounded-xl">
+                      {project.problem}
+                    </p>
                   </div>
                 )}
 
-                {/* Technologies Used */}
-                {project.technologies && project.technologies.length > 0 && (
-                  <div className="border-t border-border/40 pt-8">
-                    <h3 className="text-xl font-bold tracking-tight mb-6">
-                      Technologies Used
+                {project.solutions && (
+                  <div className="space-y-3">
+                    <h3 className="text-lg font-bold tracking-tight text-foreground flex items-center gap-2">
+                      <CheckCircle className="w-4 h-4 text-primary" />
+                      Our Applied Strategy
                     </h3>
-                    <div className="flex flex-wrap gap-2.5">
+                    <p className="text-sm text-muted-foreground leading-relaxed bg-primary/5 border border-primary/10 p-4 rounded-xl">
+                      {project.solutions}
+                    </p>
+                  </div>
+                )}
+
+                {project.challenges && (
+                  <div className="space-y-3 border-t border-border/40 pt-6">
+                    <h3 className="text-lg font-bold tracking-tight text-foreground">
+                      Critical Bottlenecks Resolved
+                    </h3>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      {project.challenges}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <div className="lg:col-span-6 space-y-10">
+                {project.technologies && project.technologies.length > 0 && (
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-bold tracking-wider  uppercase">
+                      Tech Stack
+                    </h3>
+                    <div className="flex flex-wrap gap-1.5">
                       {project.technologies.map((tech) => (
                         <span
                           key={tech}
-                          className="px-3.5 py-1.5 bg-secondary text-xs font-medium rounded-full border border-border/60 text-muted-foreground"
+                          className="px-3 py-1 bg-card text-xs font-semibold rounded border border-border/80 text-foreground transition-colors cursor-default hover:bg-secondary/40"
                         >
                           {tech}
                         </span>
@@ -369,19 +334,20 @@ export default function ProjectDetails() {
                   </div>
                 )}
 
-                {/* Challenges Solved */}
-                {project.challenges && project.challenges.length > 0 && (
-                  <div className="border-t border-border/40 pt-8">
-                    <h3 className="text-xl font-bold tracking-tight mb-6">
-                      Challenges Solved
+                {project.features && project.features.length > 0 && (
+                  <div className="space-y-4 border-t border-border/40 pt-6">
+                    <h3 className="text-lg font-bold tracking-tight text-foreground flex items-center gap-2">
+                      <Sparkles className="w-4 h-4 text-primary" />
+                      Delivered Platform Capabilities
                     </h3>
-                    <ul className="space-y-4">
-                      {project.challenges.map((challenge, index) => (
-                        <li key={index} className="flex items-start gap-4">
-                          <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-purple-500 mt-2.5" />
-                          <span className="text-sm md:text-base text-muted-foreground leading-snug">
-                            {challenge}
-                          </span>
+                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
+                      {project.features.map((feature, idx) => (
+                        <li
+                          key={idx}
+                          className="flex items-center gap-2 text-xs text-muted-foreground bg-card border border-border/40 p-2.5 rounded-lg"
+                        >
+                          <div className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0" />
+                          <span className="truncate">{feature}</span>
                         </li>
                       ))}
                     </ul>
@@ -392,36 +358,36 @@ export default function ProjectDetails() {
           </div>
         </section>
 
-        {/* Gallery Section */}
-        {project.gallery && project.gallery.length > 0 && (
-          <section className="py-20 border-t border-border/50 bg-secondary/30">
-            <div className="container mx-auto px-4 md:px-6">
-              <div className="text-center max-w-2xl mx-auto mb-14">
-                <h2 className="text-3xl font-bold tracking-tight mb-3">
-                  Project Gallery
+        {/* PLATFORM PRESENTATION SHOWCASE GALLERY */}
+        {project.imageGallery && project.imageGallery.length > 0 && (
+          <section className="py-20 border-t border-border/40 bg-secondary/10">
+            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="max-w-xl mx-auto text-center mb-12 space-y-1">
+                <h2 className="text-xl sm:text-2xl font-bold tracking-tight">
+                  Platform Interface Metrics
                 </h2>
-                <p className="text-sm text-muted-foreground">
-                  A visual overview of the implementation and user interface.
+                <p className="text-xs text-muted-foreground">
+                  Operational state validation screens captured during
+                  deployment execution.
                 </p>
               </div>
 
-              <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
-                {project.gallery.map((image, index) => (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                {project.imageGallery.map((image, index) => (
                   <motion.div
                     key={index}
-                    initial={{ opacity: 0, scale: 0.97 }}
-                    whileInView={{ opacity: 1, scale: 1 }}
-                    viewport={{ once: true }}
-                    transition={{ delay: index * 0.06, duration: 0.4 }}
-                    className="group relative aspect-[4/3] rounded-3xl overflow-hidden border border-border/60 bg-background/40"
+                    initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 15 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, margin: "-20px" }}
+                    transition={{ delay: index * 0.05, duration: 0.4 }}
+                    className="group relative aspect-[4/3] rounded-xl overflow-hidden border border-border bg-card shadow-sm transform-gpu"
                   >
                     <img
                       src={image}
-                      alt={`${project.title} visual display ${index + 1}`}
-                      className="w-full h-full object-cover object-center transition-all duration-500 group-hover:scale-105"
+                      alt={`Platform runtime verification graphic state capture ${index + 1}`}
+                      className="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.02]"
                       loading="lazy"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-background/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                   </motion.div>
                 ))}
               </div>
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 970bda2..9ffb12f 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,315 +1,271 @@
 import PageTransition from "@/components/home/PageTransition";
+import { ProjectCard } from "@/components/home/ProjectCard";
 import { Button } from "@/components/ui/button";
 import { useProjects } from "@/hooks/queires/useProjects";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import {
   ArrowLeft,
   Brain,
   Cloud,
-  ExternalLink,
-  Github,
   Globe,
-  Loader2,
+  Layers,
   Search,
   Smartphone,
+  Sparkles,
   Workflow,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useDeferredValue, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 
-const categories = [
-  { id: "all", name: "All Projects", icon: null },
-  { id: "web", name: "Web", icon: Globe },
+const CATEGORIES = [
+  { id: "all", name: "All Work", icon: Layers },
+  { id: "web", name: "Web Systems", icon: Globe },
   { id: "mobile", name: "Mobile", icon: Smartphone },
-  { id: "ai", name: "AI", icon: Brain },
-  { id: "cloud", name: "Cloud", icon: Cloud },
-  { id: "devops", name: "DEVOPS", icon: Workflow },
+  { id: "ai", name: "AI & ML", icon: Brain },
+  { id: "cloud", name: "Cloud Platforms", icon: Cloud },
+  { id: "devops", name: "DevOps", icon: Workflow },
 ];
 
 const containerVariants = {
   hidden: { opacity: 0 },
   visible: {
     opacity: 1,
-    transition: {
-      staggerChildren: 0.08,
-    },
+    transition: { staggerChildren: 0.04 },
   },
 };
 
 export default function Projects() {
   const { data: projectsData, isLoading, isError } = useProjects();
+  const shouldReduceMotion = useReducedMotion();
 
   const [activeCategory, setActiveCategory] = useState("all");
   const [searchQuery, setSearchQuery] = useState("");
 
+  const deferredSearchQuery = useDeferredValue(searchQuery);
+
   const filteredProjects = useMemo(() => {
-    const projects = projectsData?.data?.data?.result || [];
-    if (!projects) return [];
+    const projects = projectsData?.data?.data || projectsData?.data || [];
+    if (!Array.isArray(projects)) return [];
+
     return projects.filter((project) => {
       const matchesCategory =
-        activeCategory === "all" || project.category === activeCategory;
+        activeCategory === "all" ||
+        (Array.isArray(project.category)
+          ? project.category.some(
+              (cat: string) =>
+                cat.toLowerCase() === activeCategory.toLowerCase() ||
+                cat.toLowerCase().includes(activeCategory.toLowerCase()),
+            )
+          : project.category?.toLowerCase() === activeCategory.toLowerCase());
 
+      const normalizedSearch = deferredSearchQuery.trim().toLowerCase();
       const matchesSearch =
-        searchQuery.trim() === "" ||
-        project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        project.technologies.some((tech: string) =>
-          tech.toLowerCase().includes(searchQuery.toLowerCase()),
-        );
+        normalizedSearch === "" ||
+        project.title?.toLowerCase().includes(normalizedSearch) ||
+        project.description?.toLowerCase().includes(normalizedSearch) ||
+        (Array.isArray(project.technologies) &&
+          project.technologies.some((tech: string) =>
+            tech.toLowerCase().includes(normalizedSearch),
+          ));
 
       return matchesCategory && matchesSearch;
     });
-  }, [projectsData, activeCategory, searchQuery]);
+  }, [projectsData, activeCategory, deferredSearchQuery]);
 
   return (
     <PageTransition>
-      <div className="min-h-screen bg-background overflow-x-hidden text-foreground antialiased">
-        {/* Hero Section */}
-        <section className="pt-32 pb-16 relative overflow-hidden border-b border-primary/10">
-          <div className="absolute inset-0 pointer-events-none select-none">
-            <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
-            <div className="absolute bottom-0 right-1/4 w-64 h-64 bg-accent/20 rounded-full blur-3xl" />
-          </div>
-
-          <div className="container mx-auto px-4 relative z-10">
-            {/* Back Button */}
+      <div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
+        <section className="pt-32 pb-12 relative overflow-hidden border-b border-border/40">
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+            
+            {/* Back Arrow Wrapper - Kept clean on left side */}
             <motion.div
-              initial={{ opacity: 0, x: -20 }}
+              initial={{ opacity: 0, x: shouldReduceMotion ? 0 : -10 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.4 }}
+              transition={{ duration: 0.3 }}
+              className="w-full flex justify-start"
             >
-              <Link to="/">
-                <Button variant="ghost" className="mb-8 group h-10 px-4">
+              <Button
+                asChild
+                variant="ghost"
+                size="sm"
+                className="mb-6 group text-muted-foreground hover:text-foreground"
+              >
+                <Link to="/">
                   <ArrowLeft className="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" />
                   Back to Home
-                </Button>
-              </Link>
+                </Link>
+              </Button>
             </motion.div>
 
-            {/* Header */}
-            <motion.div
-              initial={{ opacity: 0, y: 15 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
-              className="text-center mb-10 max-w-3xl mx-auto"
-            >
-              <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight mb-4 bg-gradient-to-r from-primary via-primary/80 to-accent bg-clip-text text-transparent">
-                Our Projects
-              </h1>
-              <p className="text-muted-foreground text-lg md:text-xl leading-relaxed max-w-2xl mx-auto">
-                Explore our portfolio of innovative solutions designed to scale
-                and transform businesses across industries.
-              </p>
-            </motion.div>
-
-            {/* Interactive Search and Filter Section */}
-            <motion.div
-              initial={{ opacity: 0, y: 15 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.1 }}
-              className="flex flex-col items-center gap-6 mb-12"
-            >
-              {/* Search Bar */}
-              <div className="relative w-full max-w-md">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-                <input
-                  type="text"
-                  placeholder="Search projects, tech, or keywords..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-10 pr-4 py-2.5 rounded-full border border-border/50 bg-background/50 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-primary/40 transition-all text-sm shadow-sm"
-                  aria-label="Search projects"
-                />
+            {/* Core Header Content Module - Flex-centered alignment */}
+            <div className="w-full flex flex-col items-center justify-center text-center">
+              <div className="max-w-3xl mb-12">
+                <motion.h1
+                  initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 15 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight leading-none mb-4"
+                >
+                  All Projects
+                </motion.h1>
+                <motion.p
+                  initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 15 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.05 }}
+                  className="text-base sm:text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto"
+                >
+                  A high-fidelity showroom tracking production ecosystems, AI
+                  operations, and cloud architectures compiled by Techzaa.
+                </motion.p>
               </div>
 
-              {/* Filter Tabs */}
-              <div className="flex flex-wrap justify-center gap-2 max-w-4xl">
-                {categories.map((category) => {
-                  const Icon = category.icon;
-                  const isActive = activeCategory === category.id;
+              {/* Interface Control Bar Matrix - Fully Centered Substructures */}
+              <motion.div
+                initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 15 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.1 }}
+                className="space-y-6 w-full pt-6 border-t border-border/40 flex flex-col items-center justify-center"
+              >
+                {/* Search input container centralized down the layout grid */}
+                <div className="relative max-w-md w-full group mx-auto">
+                  <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
+                  <input
+                    type="text"
+                    placeholder="Query by parameter, core feature, or framework stack..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="w-full pl-10 pr-4 py-2 text-sm rounded-xl border border-border bg-card/60 placeholder:text-muted-foreground/60 focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all shadow-sm"
+                    aria-label="Search deployment records"
+                  />
+                </div>
+
+                {/* Categories Tab Matrix - Wrapped with center axis parameters */}
+                <div
+                  className="flex flex-wrap items-center justify-center gap-2 max-w-2xl w-full"
+                  role="tablist"
+                  aria-label="Project Filtering Options"
+                >
+                  {CATEGORIES.map((cat) => {
+                    const Icon = cat.icon;
+                    const isActive = activeCategory === cat.id;
+
+                    return (
+                      <Button
+                        key={cat.id}
+                        variant={isActive ? "default" : "outline"}
+                        onClick={() => setActiveCategory(cat.id)}
+                        role="tab"
+                        aria-selected={isActive}
+                        className="rounded-xl text-xs font-semibold tracking-wide h-9 px-4 transition-all duration-200"
+                      >
+                        <Icon className="w-3.5 h-3.5 mr-2 opacity-80" />
+                        {cat.name}
+                      </Button>
+                    );
+                  })}
+                </div>
+              </motion.div>
+            </div>
 
-                  return (
-                    <Button
-                      key={category.id}
-                      variant={isActive ? "default" : "outline"}
-                      onClick={() => setActiveCategory(category.id)}
-                      aria-pressed={isActive}
-                      className={`rounded-full px-5 py-2 text-sm font-medium transition-all duration-300 ${
-                        isActive
-                          ? "bg-primary text-primary-foreground shadow-sm shadow-primary/20"
-                          : "border-border/60 hover:bg-muted/50"
-                      }`}
-                    >
-                      {Icon && <Icon className="w-4 h-4 mr-2" />}
-                      {category.name}
-                    </Button>
-                  );
-                })}
-              </div>
-            </motion.div>
           </div>
         </section>
 
-        {/* Projects Grid */}
-        <section className="py-20 bg-background/50">
-          <div className="container mx-auto px-4">
-            {/* Loading / Error State */}
+        {/* Projects View Output Section */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
             {isLoading && (
-              <div className="flex flex-col items-center justify-center py-24 gap-4 text-muted-foreground animate-pulse">
-                <Loader2 className="w-8 h-8 animate-spin text-primary" />
-                <span className="text-sm font-medium">Loading projects...</span>
+              <div
+                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+                role="status"
+                aria-label="Loading project payload"
+              >
+                {[...Array(6)].map((_, idx) => (
+                  <div
+                    key={idx}
+                    className="bg-card border border-border/40 rounded-2xl p-4 space-y-6 animate-pulse"
+                  >
+                    <div className="aspect-[16/10] bg-muted rounded-xl w-full" />
+                    <div className="space-y-3 px-2">
+                      <div className="h-4 bg-muted rounded-md w-1/3" />
+                      <div className="h-6 bg-muted rounded-md w-3/4" />
+                      <div className="h-4 bg-muted rounded-md w-full" />
+                    </div>
+                  </div>
+                ))}
               </div>
             )}
 
             {isError && (
-              <div className="text-center py-20 text-destructive">
-                <p className="text-lg font-semibold mb-2">
-                  Failed to load projects.
+              <div className="text-center py-16 border border-destructive/20 bg-destructive/5 rounded-2xl max-w-lg mx-auto p-6 space-y-3">
+                <p className="text-base font-bold text-foreground">
+                  API Synchronization Failure
                 </p>
-                <p className="text-sm text-muted-foreground">
-                  Please check your network connection or try again later.
+                <p className="text-xs text-muted-foreground leading-normal">
+                  Could not safely sync target records from Techzaa's data layer
+                  cluster. Confirm connection status parameters.
                 </p>
               </div>
             )}
 
             {!isLoading && !isError && (
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={`${activeCategory}-${searchQuery}`}
-                  variants={containerVariants}
-                  initial="hidden"
-                  animate="visible"
-                  exit="hidden"
-                  className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-                >
-                  {filteredProjects.map((project) => (
-                    <motion.article
-                      key={project._id}
-                      layout
-                      className="group flex flex-col justify-between bg-card/40 border border-border/50 backdrop-blur-sm rounded-3xl overflow-hidden hover:border-primary/50 transition-all duration-500 hover:shadow-xl hover:shadow-accent/5 p-4"
-                    >
-                      <div>
-                        {/* Project Image */}
-                        <div className="relative h-56 rounded-2xl overflow-hidden mb-6">
-                          <img
-                            src={project.image}
-                            alt={project.title}
-                            loading="lazy"
-                            className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
-                          />
-                          <div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/20 to-transparent opacity-80" />
-
-                          {/* Category Badge */}
-                          <div className="absolute top-4 left-4">
-                            <span className="px-3 py-1 rounded-full bg-primary/20 text-primary text-xs font-semibold backdrop-blur-md border border-primary/20">
-                              {
-                                categories.find(
-                                  (c) => c.id === project.category,
-                                )?.name
-                              }
-                            </span>
-                          </div>
-
-                          {/* Quick External Links */}
-                          <div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                            {project.liveUrl && (
-                              <a
-                                href={project.liveUrl}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="p-2 rounded-full bg-background/80 backdrop-blur-sm border border-border/40 hover:bg-primary/20 transition-colors"
-                                aria-label={`View live project: ${project.title}`}
-                              >
-                                <ExternalLink className="w-4 h-4" />
-                              </a>
-                            )}
-                            {project.githubUrl && (
-                              <a
-                                href={project.githubUrl}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="p-2 rounded-full bg-background/80 backdrop-blur-sm border border-border/40 hover:bg-primary/20 transition-colors"
-                                aria-label={`View GitHub repository for: ${project.title}`}
-                              >
-                                <Github className="w-4 h-4" />
-                              </a>
-                            )}
-                          </div>
-                        </div>
-
-                        {/* Title & Description */}
-                        <div className="px-2">
-                          <div className="flex items-center gap-3 text-xs font-medium text-muted-foreground mb-3">
-                            <span>{project.client}</span>
-                            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40" />
-                            <span>{project.year}</span>
-                          </div>
-
-                          <h3 className="text-xl font-bold tracking-tight mb-3 group-hover:text-primary transition-colors line-clamp-1">
-                            <Link to={`/projects/${project._id}`}>
-                              {project.title}
-                            </Link>
-                          </h3>
-
-                          <p className="text-muted-foreground text-sm leading-relaxed mb-6 line-clamp-3">
-                            {project.description}
-                          </p>
-                        </div>
-                      </div>
-
-                      {/* Technologies and Detail Navigation */}
-                      <div className="px-2">
-                        <div className="flex flex-wrap gap-1.5 max-h-16 overflow-hidden mb-4">
-                          {project.technologies
-                            .slice(0, 5)
-                            .map((tech: string) => (
-                              <span
-                                key={tech}
-                                className="px-2.5 py-0.5 rounded-md bg-primary text-primary-foreground text-xs font-semibold tracking-wide"
-                              >
-                                {tech}
-                              </span>
-                            ))}
-                          {project.technologies.length > 5 && (
-                            <span className="px-2.5 py-0.5 rounded-md bg-secondary text-secondary-foreground text-xs font-semibold tracking-wide">
-                              +{project.technologies.length - 5}
-                            </span>
-                          )}
-                        </div>
-
-                        <div className="flex justify-end pt-2 border-t border-border/30">
-                          <Link to={`/projects/${project._id}`}>
-                            <Button
-                              variant="link"
-                              size="sm"
-                              className="text-xs text-primary p-0 h-auto font-semibold group/btn"
-                            >
-                              View Details
-                            </Button>
-                          </Link>
-                        </div>
-                      </div>
-                    </motion.article>
-                  ))}
-                </motion.div>
+              <AnimatePresence mode="popLayout">
+                {filteredProjects.length > 0 ? (
+                  <motion.div
+                    key={`${activeCategory}-${deferredSearchQuery}`}
+                    variants={containerVariants}
+                    initial="hidden"
+                    animate="visible"
+                    exit="hidden"
+                    className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch"
+                  >
+                    {filteredProjects.map((project, idx) => (
+                      <motion.div
+                        layout={!shouldReduceMotion}
+                        key={project._id}
+                        className="h-full"
+                      >
+                        <ProjectCard
+                          project={{
+                            _id: project._id,
+                            title: project.title,
+                            category: Array.isArray(project.category)
+                              ? project.category
+                              : [project.category],
+                            isFeatured: project.isFeatured || false,
+                            technologies: project.technologies || [],
+                            publishedYear:
+                              project.publishedYear || project.year || "2026",
+                            previewUrl:
+                              project.previewUrl || project.liveUrl || "#",
+                            image: project.image,
+                          }}
+                          index={idx}
+                          isInView={true}
+                        />
+                      </motion.div>
+                    ))}
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    className="text-center py-24 border border-dashed border-border rounded-2xl max-w-md mx-auto p-8 space-y-2"
+                  >
+                    <Sparkles className="w-5 h-5 text-muted-foreground/60 mx-auto" />
+                    <h3 className="text-sm font-bold text-foreground">
+                      No Projects Located
+                    </h3>
+                    <p className="text-xs text-muted-foreground leading-relaxed">
+                      Your lookup parameter variations produced zero operational
+                      matches in our architecture records.
+                    </p>
+                  </motion.div>
+                )}
               </AnimatePresence>
             )}
-
-            {/* Empty State */}
-            {!isLoading && !isError && filteredProjects.length === 0 && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                className="text-center py-20"
-              >
-                <p className="text-muted-foreground text-lg">
-                  No projects match your current search or category.
-                </p>
-              </motion.div>
-            )}
           </div>
         </section>
       </div>
     </PageTransition>
   );
-}
+}
\ No newline at end of file