From e1ccf94b6cc5d8c18ee02793e18462271fe005b1 Mon Sep 17 00:00:00 2001
From: meistergpc <jap1centeno@gmail.com>
Date: Fri, 7 Nov 2025 12:50:06 +0100
Subject: [PATCH 1/5] feat: implement service detail view and enhance services
 grid functionality

---
 .../_components/ClientTechyBackground.tsx     |  11 +
 .../_components/ServiceDetailView.tsx         |  23 ++
 .../services/_components/ServicesGrid.tsx     |  35 +++
 .../_components/ServicesPageContent.tsx       |  43 +++
 .../_components/ServicesServiceCard.tsx       | 123 ++++----
 .../services/_components/ServicesTab.tsx      |  26 +-
 .../app/(marketing)/services/page.tsx         |  27 +-
 .../home/projects/_components/ProjectCard.tsx | 266 +++++++++---------
 8 files changed, 348 insertions(+), 206 deletions(-)
 create mode 100644 apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx
 create mode 100644 apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx
 create mode 100644 apps/codebility/app/(marketing)/services/_components/ServicesGrid.tsx
 create mode 100644 apps/codebility/app/(marketing)/services/_components/ServicesPageContent.tsx

diff --git a/apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx b/apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx
new file mode 100644
index 000000000..93aed7a80
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const TechyBackground = dynamic(() => import("./TechyBackground"), {
+  ssr: false,
+});
+
+export default function ClientTechyBackground() {
+  return <TechyBackground />;
+}
diff --git a/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx b/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx
new file mode 100644
index 000000000..45e58090d
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+export const ServiceDetailView = ({ service, onBack }) => {
+  console.log("ServiceDetailView rendered with service:", service);
+
+  return (
+    <div className="mt-32 flex min-h-screen flex-col gap-4 bg-[#030303] px-8 py-8 text-white md:px-8 lg:px-16">
+      <button
+        onClick={onBack}
+        className="mb-8 flex w-fit items-center gap-2 rounded-lg bg-white/10 px-6 py-3 text-white transition-all hover:bg-white/20"
+      >
+        ← Back to Services
+      </button>
+      <h1 className="mb-4 text-4xl font-bold">{service.name}</h1>
+      <p className="text-gray-400">{service.description}</p>
+      {/* Design here */}
+      <div className="mt-8">
+        <p className="text-xl">Full-page detail view for: {service.name}</p>
+        <p className="mt-4 text-gray-500">Add your custom design here</p>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesGrid.tsx b/apps/codebility/app/(marketing)/services/_components/ServicesGrid.tsx
new file mode 100644
index 000000000..e7be5a0e7
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/ServicesGrid.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useState } from "react";
+
+import type { ServiceProject } from "./ServicesServiceCard";
+import { ServiceDetailView } from "./ServiceDetailView";
+import ServicesServiceCard from "./ServicesServiceCard";
+
+export const ServicesGrid = ({ services }) => {
+  const [activeService, setActiveService] = useState<ServiceProject | null>(
+    null,
+  );
+
+  console.log("ServicesGrid - activeService:", activeService);
+
+  if (activeService) {
+    return (
+      <ServiceDetailView
+        service={activeService}
+        onBack={() => setActiveService(null)}
+      />
+    );
+  }
+  return (
+    <div>
+      {services.map((service) => (
+        <ServicesServiceCard
+          key={service.id}
+          service={service}
+          onSelect={(s) => setActiveService(s)}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesPageContent.tsx b/apps/codebility/app/(marketing)/services/_components/ServicesPageContent.tsx
new file mode 100644
index 000000000..9b0f6149b
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/ServicesPageContent.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+
+import type { ServiceProject } from "./ServicesServiceCard";
+import Calendly from "../../_components/MarketingCalendly";
+import Footer from "../../_components/MarketingFooter";
+import { ServiceDetailView } from "./ServiceDetailView";
+import Hero from "./ServicesHero";
+import ServicesTab from "./ServicesTab";
+
+interface Props {
+  servicesData: any[];
+}
+
+export function ServicesPageContent({ servicesData }: Props) {
+  const [activeService, setActiveService] = useState<ServiceProject | null>(
+    null,
+  );
+
+  // If a service is selected, show only the detail view
+  if (activeService) {
+    return (
+      <ServiceDetailView
+        service={activeService}
+        onBack={() => setActiveService(null)}
+      />
+    );
+  }
+
+  // Otherwise, show the normal services page
+  return (
+    <>
+      <Hero />
+      <ServicesTab
+        servicesData={servicesData}
+        onServiceSelect={(service) => setActiveService(service)}
+      />
+      <Calendly />
+      <Footer />
+    </>
+  );
+}
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesServiceCard.tsx b/apps/codebility/app/(marketing)/services/_components/ServicesServiceCard.tsx
index c5e79734d..8edb34e47 100644
--- a/apps/codebility/app/(marketing)/services/_components/ServicesServiceCard.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/ServicesServiceCard.tsx
@@ -1,4 +1,6 @@
-import { useState, memo, useMemo } from "react";
+"use client";
+
+import { memo, useMemo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import DefaultAvatar from "@/components/DefaultAvatar";
@@ -19,7 +21,7 @@ interface TeamMember {
   joined_at?: string;
 }
 
-interface ServiceProject {
+export interface ServiceProject {
   id: string;
   name: string;
   description?: string;
@@ -43,9 +45,10 @@ interface ServiceProject {
 
 interface Props {
   service: ServiceProject;
+  onSelect?: (service: ServiceProject) => void;
 }
 
-function ServiceCard({ service }: Props) {
+function ServiceCard({ service, onSelect }: Props) {
   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
 
   const {
@@ -58,38 +61,42 @@ function ServiceCard({ service }: Props) {
     tech_stack = [],
   } = service;
 
-  const imageUrl = useMemo(() => 
-    main_image
-      ? main_image.startsWith("public")
-        ? `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/services-image/${main_image}`
-        : main_image
-      : "https://codebility-cdn.pages.dev/assets/images/default-avatar-1248x845.jpg"
-  , [main_image]);
+  const imageUrl = useMemo(
+    () =>
+      main_image
+        ? main_image.startsWith("public")
+          ? `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/services-image/${main_image}`
+          : main_image
+        : "https://codebility-cdn.pages.dev/assets/images/default-avatar-1248x845.jpg",
+    [main_image],
+  );
 
-  const hasValidWebsite = useMemo(() =>
-    website_url &&
-    website_url !== "" &&
-    website_url.toLowerCase() !== "n/a" &&
-    website_url !== "."
-  , [website_url]);
+  const hasValidWebsite = useMemo(
+    () =>
+      website_url &&
+      website_url !== "" &&
+      website_url.toLowerCase() !== "n/a" &&
+      website_url !== ".",
+    [website_url],
+  );
 
   const { teamLeader, teamMembers, isDescriptionLong } = useMemo(() => {
-    const leader = members.find(member => member.role === 'team_leader');
-    const regularMembers = members.filter(member => member.role === 'member');
-    
+    const leader = members.find((member) => member.role === "team_leader");
+    const regularMembers = members.filter((member) => member.role === "member");
+
     return {
       teamLeader: leader || null,
       teamMembers: regularMembers,
-      isDescriptionLong: description && description.length > 120
+      isDescriptionLong: description && description.length > 120,
     };
   }, [members, description]);
 
   return (
-    <div 
-      className="group relative flex h-full flex-col overflow-hidden rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm transition-all duration-500 hover:shadow-2xl hover:shadow-blue-500/20 hover:border-blue-400/30 hover:bg-white/10 transform-gpu hover:-translate-y-2 hover:scale-105 aspect-[3/5] min-h-[480px]"
+    <div
+      className="group relative flex aspect-[3/5] h-full min-h-[480px] transform-gpu  flex-col overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm transition-all duration-500 hover:-translate-y-2 hover:scale-105 hover:border-blue-400/30 hover:bg-white/10 hover:shadow-2xl hover:shadow-blue-500/20"
       style={{
-        transformStyle: 'preserve-3d',
-        perspective: '1000px',
+        transformStyle: "preserve-3d",
+        perspective: "1000px",
       }}
       onMouseEnter={(e) => {
         const card = e.currentTarget;
@@ -100,61 +107,73 @@ function ServiceCard({ service }: Props) {
         const centerY = rect.height / 2;
         const rotateX = (y - centerY) / 25;
         const rotateY = (centerX - x) / 25;
-        
+
         card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-4px) scale(1.01)`;
       }}
       onMouseLeave={(e) => {
         const card = e.currentTarget;
-        card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px) scale(1)';
+        card.style.transform =
+          "perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px) scale(1)";
       }}
     >
-      <div className="relative aspect-[4/3] w-full overflow-hidden flex-shrink-0">
+      {/* Project Image */}
+      <div
+        className="relative aspect-[4/3] w-full flex-shrink-0 cursor-pointer overflow-hidden"
+        onClick={() => {
+          console.log("Image clicked, service:", service.name);
+          onSelect?.(service);
+        }}
+      >
         <Image
           src={imageUrl}
           alt={name}
           fill
           sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
           className="object-cover transition-all duration-500 group-hover:scale-105 group-hover:brightness-105"
-          loading="lazy"
+          priority
           quality={75}
         />
         {categories.length > 0 && (
-          <div className="absolute left-3 top-3 flex flex-wrap gap-1.5 max-w-[calc(100%-1.5rem)]">
+          <div className="absolute left-3 top-3 flex max-w-[calc(100%-1.5rem)] flex-wrap gap-1.5">
             {categories.map((category) => (
               <div
                 key={category.id}
-                className="inline-flex items-center px-3 py-1.5 text-xs font-semibold text-white rounded-full backdrop-blur-sm shadow-lg bg-blue-600/80 transition-all duration-300 group-hover:scale-105 group-hover:shadow-lg group-hover:shadow-blue-500/20"
+                className="inline-flex items-center rounded-full bg-blue-600/80 px-3 py-1.5 text-xs font-semibold text-white shadow-lg backdrop-blur-sm transition-all duration-300 group-hover:scale-105 group-hover:shadow-lg group-hover:shadow-blue-500/20"
               >
                 {category.name}
               </div>
             ))}
           </div>
         )}
-        
+
         {/* 3D Overlay Effect */}
-        <div className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-blue-500/5 opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
       </div>
 
-      <div className="flex flex-1 flex-col text-white transition-all duration-500 group-hover:translate-z-4">
+      <div className="group-hover:translate-z-4 flex flex-1 flex-col text-white transition-all duration-500">
         {/* Scrollable Content Area */}
         <div className="flex-1 overflow-y-auto p-4 pb-2">
           <div className="space-y-3">
-            <h3 className="line-clamp-1 text-lg font-bold group-hover:text-blue-300 transition-colors lg:text-xl">
+            <h3 className="line-clamp-1 text-lg font-bold transition-colors group-hover:text-blue-300 lg:text-xl">
               {name}
             </h3>
 
             <div className="relative">
-              <div className={`${isDescriptionExpanded ? 'max-h-24 overflow-y-auto pr-2' : ''}`}>
+              <div
+                className={`${isDescriptionExpanded ? "max-h-24 overflow-y-auto pr-2" : ""}`}
+              >
                 <p
-                  className={`text-gray-300 text-sm leading-relaxed ${!isDescriptionExpanded ? "line-clamp-3" : ""}`}
+                  className={`text-sm leading-relaxed text-gray-300 ${!isDescriptionExpanded ? "line-clamp-3" : ""}`}
                 >
                   {description || "No description available."}
                 </p>
               </div>
               {isDescriptionLong && (
                 <button
-                  onClick={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
-                  className="mt-1 text-xs text-blue-400 hover:text-blue-300 transition-colors sticky bottom-0 bg-gradient-to-t from-black/50 to-transparent px-1 py-0.5 rounded"
+                  onClick={() =>
+                    setIsDescriptionExpanded(!isDescriptionExpanded)
+                  }
+                  className="sticky bottom-0 mt-1 rounded bg-gradient-to-t from-black/50 to-transparent px-1 py-0.5 text-xs text-blue-400 transition-colors hover:text-blue-300"
                 >
                   {isDescriptionExpanded ? "Show less" : "Read more"}
                 </button>
@@ -164,28 +183,28 @@ function ServiceCard({ service }: Props) {
             {/* Tech Stack */}
             {tech_stack && tech_stack.length > 0 && (
               <div className="space-y-2">
-                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+                <h4 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
                   Tech Stack
                 </h4>
                 <div className="flex flex-wrap gap-1.5">
                   {tech_stack.slice(0, 3).map((tech, index) => (
                     <span
                       key={index}
-                      className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-blue-500/20 to-indigo-500/20 text-blue-300 border border-blue-500/30 hover:shadow-sm hover:shadow-blue-500/20 transition-all duration-300 hover:scale-105 hover:bg-gradient-to-r hover:from-blue-500/30 hover:to-indigo-500/30 hover:border-blue-400/40 animate-fade-in-up group-hover:translate-y-[-1px]"
+                      className="animate-fade-in-up inline-flex items-center rounded-full border border-blue-500/30 bg-gradient-to-r from-blue-500/20 to-indigo-500/20 px-2 py-1 text-xs font-medium text-blue-300 transition-all duration-300 hover:scale-105 hover:border-blue-400/40 hover:bg-gradient-to-r hover:from-blue-500/30 hover:to-indigo-500/30 hover:shadow-sm hover:shadow-blue-500/20 group-hover:translate-y-[-1px]"
                       style={{
                         animationDelay: `${index * 100}ms`,
-                        animationFillMode: 'both'
+                        animationFillMode: "both",
                       }}
                     >
                       {tech}
                     </span>
                   ))}
                   {tech_stack.length > 3 && (
-                    <span 
-                      className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-gray-600/20 to-gray-500/20 text-gray-300 border border-gray-500/30 hover:scale-110 transition-all duration-300 animate-fade-in-up"
+                    <span
+                      className="animate-fade-in-up inline-flex items-center rounded-full border border-gray-500/30 bg-gradient-to-r from-gray-600/20 to-gray-500/20 px-2 py-1 text-xs font-medium text-gray-300 transition-all duration-300 hover:scale-110"
                       style={{
                         animationDelay: `${3 * 100}ms`,
-                        animationFillMode: 'both'
+                        animationFillMode: "both",
                       }}
                     >
                       +{tech_stack.length - 3}
@@ -198,18 +217,21 @@ function ServiceCard({ service }: Props) {
         </div>
 
         {/* Fixed Bottom Section - Always Visible */}
-        <div className="relative px-4 pb-4 pt-2 flex-shrink-0 min-h-[80px]">
+        <div className="relative min-h-[80px] flex-shrink-0 px-4 pb-4 pt-2">
           {/* Team Section */}
           {members.length > 0 ? (
             <div>
-              <p className="mb-1.5 text-xs font-semibold text-gray-400 uppercase tracking-wide">Team</p>
+              <p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400">
+                Team
+              </p>
               <div className="flex flex-wrap items-center gap-1">
                 {teamLeader && (
                   <Tooltip>
                     <TooltipTrigger>
                       <div className="relative">
-                        <div className="relative h-10 w-10 overflow-hidden rounded-full border-2 border-customBlue-500">
-                          {teamLeader.image_url ? (
+                        <div className="border-customBlue-500 relative h-10 w-10 overflow-hidden rounded-full border-2">
+                          {teamLeader.image_url &&
+                          teamLeader.image_url.trim() !== "" ? (
                             <Image
                               src={teamLeader.image_url}
                               alt={`${teamLeader.first_name} ${teamLeader.last_name}`}
@@ -240,7 +262,8 @@ function ServiceCard({ service }: Props) {
                     <TooltipTrigger>
                       <div>
                         <div className="relative h-8 w-8 overflow-hidden rounded-full border-2 border-gray-700">
-                          {member.image_url ? (
+                          {member.image_url &&
+                          member.image_url.trim() !== "" ? (
                             <Image
                               src={member.image_url}
                               alt={`${member.first_name} ${member.last_name}`}
@@ -279,7 +302,7 @@ function ServiceCard({ service }: Props) {
           <Link
             href={website_url!}
             target="_blank"
-            className="absolute bottom-3 right-3 inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 border border-blue-400/30 hover:border-blue-300/50 px-3 py-2 text-sm font-semibold text-white shadow-lg hover:shadow-xl hover:shadow-blue-500/25 transition-all duration-300 hover:scale-105 hover:translate-y-[-1px] backdrop-blur-sm"
+            className="absolute bottom-3 right-3 inline-flex items-center gap-2 rounded-lg border border-blue-400/30 bg-gradient-to-r from-blue-600 to-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-lg backdrop-blur-sm transition-all duration-300 hover:translate-y-[-1px] hover:scale-105 hover:border-blue-300/50 hover:from-blue-500 hover:to-indigo-500 hover:shadow-xl hover:shadow-blue-500/25"
           >
             <IconLink className="size-4" />
             <span>View</span>
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesTab.tsx b/apps/codebility/app/(marketing)/services/_components/ServicesTab.tsx
index 50bd6caef..cd9b4b5b7 100644
--- a/apps/codebility/app/(marketing)/services/_components/ServicesTab.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/ServicesTab.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useEffect, useState, useMemo, memo } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import DefaultPagination from "@/components/ui/pagination";
 import { CATEGORIES, pageSize } from "@/constants";
 import usePagination from "@/hooks/use-pagination";
 
+import type { ServiceProject } from "./ServicesServiceCard";
 import Container from "../../_components/MarketingContainer";
 import Section from "../../_components/MarketingSection";
 import ServiceCard from "./ServicesServiceCard";
@@ -42,12 +43,13 @@ interface ProjectData {
 
 interface Props {
   servicesData: ProjectData[];
+  onServiceSelect?: (service: ServiceProject) => void;
 }
 
 // Define a special ID for the "All" category
 const ALL_CATEGORY_ID = 0;
 
-function ServicesTab({ servicesData }: Props) {
+function ServicesTab({ servicesData, onServiceSelect }: Props) {
   // Initialize with "All" category
   const [currentCategory, setCurrentCategory] =
     useState<number>(ALL_CATEGORY_ID);
@@ -66,8 +68,8 @@ function ServicesTab({ servicesData }: Props) {
   const projects = useMemo(() => {
     return currentCategory === ALL_CATEGORY_ID
       ? servicesData
-      : servicesData.filter(
-          (project) => project.categories?.some(cat => cat.id === currentCategory),
+      : servicesData.filter((project) =>
+          project.categories?.some((cat) => cat.id === currentCategory),
         );
   }, [currentCategory, servicesData]);
 
@@ -98,10 +100,10 @@ function ServicesTab({ servicesData }: Props) {
       <Container className="relative z-0">
         <div className="flex flex-col gap-4">
           {/* Category Tabs with "All" option */}
-          <div className="mx-auto flex flex-wrap justify-center gap-2 p-1 bg-white/10 dark:bg-white/5 rounded-2xl backdrop-blur-sm border border-white/20">
+          <div className="mx-auto flex flex-wrap justify-center gap-2 rounded-2xl border border-white/20 bg-white/10 p-1 backdrop-blur-sm dark:bg-white/5">
             <button
               onClick={() => handleTabClick(ALL_CATEGORY_ID)}
-              className={`px-3 py-1.5 rounded-xl text-sm font-semibold transition-all duration-200 ${
+              className={`rounded-xl px-3 py-1.5 text-sm font-semibold transition-all duration-200 ${
                 currentCategory === ALL_CATEGORY_ID
                   ? "bg-white text-gray-900 shadow-lg"
                   : "text-white hover:bg-white/20 hover:text-white"
@@ -113,7 +115,7 @@ function ServicesTab({ servicesData }: Props) {
               <button
                 key={cat.id}
                 onClick={() => handleTabClick(cat.id)}
-                className={`px-3 py-1.5 rounded-xl text-sm font-semibold transition-all duration-200 ${
+                className={`rounded-xl px-3 py-1.5 text-sm font-semibold transition-all duration-200 ${
                   currentCategory === cat.id
                     ? "bg-white text-gray-900 shadow-lg"
                     : "text-white hover:bg-white/20 hover:text-white"
@@ -125,18 +127,18 @@ function ServicesTab({ servicesData }: Props) {
           </div>
 
           {/* Projects Grid */}
-          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 mx-[-4px]">
+          <div className="mx-[-4px] grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
             {paginatedProjects && paginatedProjects.length > 0 ? (
               paginatedProjects.map((project, index) => (
-                <div 
-                  key={project.id} 
+                <div
+                  key={project.id}
                   className="animate-fade-in-up px-1"
                   style={{
                     animationDelay: `${index * 150}ms`,
-                    animationFillMode: 'both'
+                    animationFillMode: "both",
                   }}
                 >
-                  <ServiceCard service={project} />
+                  <ServiceCard service={project} onSelect={onServiceSelect} />
                 </div>
               ))
             ) : (
diff --git a/apps/codebility/app/(marketing)/services/page.tsx b/apps/codebility/app/(marketing)/services/page.tsx
index 551d6ead5..9f4461cff 100644
--- a/apps/codebility/app/(marketing)/services/page.tsx
+++ b/apps/codebility/app/(marketing)/services/page.tsx
@@ -3,12 +3,10 @@ import { getOrSetCache } from "@/lib/server/redis-cache";
 import { cacheKeys } from "@/lib/server/redis-cache-keys";
 import { createClientServerComponent } from "@/utils/supabase/server";
 
-import Calendly from "../_components/MarketingCalendly";
-import Footer from "../_components/MarketingFooter";
 import Navigation from "../_components/MarketingNavigation";
-import Hero from "./_components/ServicesHero";
-import ServicesTab from "./_components/ServicesTab";
-import TechyBackground from "./_components/TechyBackground";
+import ClientTechyBackground from "./_components/ClientTechyBackground";
+import { ServicesPageContent } from "./_components/ServicesPageContent";
+import { servicesData } from "./_lib/dummy-data";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
@@ -65,23 +63,22 @@ const ServicesPage = async () => {
     categories: item.categories || [],
     client_id: item.client_id,
     members:
-      item.project_members?.map((pm: any) => ({
-        ...pm.codev,
-        role: pm.role,
-        joined_at: pm.joined_at
-      })).filter(Boolean) || [],
+      item.project_members
+        ?.map((pm: any) => ({
+          ...pm.codev,
+          role: pm.role,
+          joined_at: pm.joined_at,
+        }))
+        .filter(Boolean) || [],
     tech_stack: item.tech_stack || [],
   }));
 
   return (
     <div className="relative flex min-h-screen w-full flex-col overflow-x-hidden overflow-y-hidden bg-[#030303]">
-      <TechyBackground />
+      <ClientTechyBackground />
       <div className="relative z-10">
         <Navigation />
-        <Hero />
-        <ServicesTab servicesData={mappedData} />
-        <Calendly />
-        <Footer />
+        <ServicesPageContent servicesData={mappedData} />
       </div>
     </div>
   );
diff --git a/apps/codebility/app/home/projects/_components/ProjectCard.tsx b/apps/codebility/app/home/projects/_components/ProjectCard.tsx
index 9f25f4d98..52788b5f3 100644
--- a/apps/codebility/app/home/projects/_components/ProjectCard.tsx
+++ b/apps/codebility/app/home/projects/_components/ProjectCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, memo, useMemo } from "react";
+import React, { memo, useMemo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { SimpleMemberData } from "@/app/home/projects/actions";
@@ -24,25 +24,29 @@ export interface ProjectCardProps {
 }
 
 const ProjectCard = ({ project, onOpen, categoryId }: ProjectCardProps) => {
-  const projectStatus = useMemo(() =>
-    project.status &&
-    project.status.charAt(0).toUpperCase() + project.status.slice(1)
-  , [project.status]);
+  const projectStatus = useMemo(
+    () =>
+      project.status &&
+      project.status.charAt(0).toUpperCase() + project.status.slice(1),
+    [project.status],
+  );
 
-  const bgProjectStatus = useMemo(() =>
-    project.status === "pending"
-      ? "bg-orange-500"
-      : project.status === "completed"
-        ? "bg-green-500"
-        : project.status === "active" || project.status === "inprogress"
-          ? "bg-blue-500"
-          : "bg-gray-500"
-  , [project.status]);
+  const bgProjectStatus = useMemo(
+    () =>
+      project.status === "pending"
+        ? "bg-orange-500"
+        : project.status === "completed"
+          ? "bg-green-500"
+          : project.status === "active" || project.status === "inprogress"
+            ? "bg-blue-500"
+            : "bg-gray-500",
+    [project.status],
+  );
 
   return (
     <div
       onClick={() => onOpen("projectViewModal", project)}
-      className="group relative flex cursor-pointer flex-col overflow-hidden rounded-2xl bg-white border border-gray-200 transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-1 hover:border-blue-300 dark:bg-gray-900/50 dark:border-gray-700 dark:hover:border-blue-500/50 backdrop-blur-sm"
+      className="group relative flex cursor-pointer flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-300 hover:shadow-2xl hover:shadow-blue-500/10 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-blue-500/50"
     >
       {/* Project Image */}
       <div className="relative aspect-[4/3] w-full overflow-hidden">
@@ -57,7 +61,7 @@ const ProjectCard = ({ project, onOpen, categoryId }: ProjectCardProps) => {
         />
         <div className="absolute right-3 top-3">
           <span
-            className={`inline-flex items-center px-3 py-1.5 text-xs font-semibold text-white rounded-full backdrop-blur-sm shadow-lg ${bgProjectStatus}`}
+            className={`inline-flex items-center rounded-full px-3 py-1.5 text-xs font-semibold text-white shadow-lg backdrop-blur-sm ${bgProjectStatus}`}
           >
             {project.status === "inprogress"
               ? "In Progress"
@@ -80,82 +84,44 @@ const ProjectCard = ({ project, onOpen, categoryId }: ProjectCardProps) => {
         <div className="space-y-3">
           {/* Project Name & Description */}
           <div className="space-y-2">
-          <div className="flex items-start justify-between">
-            <h3 className="text-gray-900 dark:text-white line-clamp-1 text-lg font-bold group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
-              {project.name}
-            </h3>
-            <ProjectOptionsMenu
-              project={project}
-              onOpen={onOpen}
-              categoryId={categoryId}
-            />
-          </div>
-          <div className="h-10">
-            <p className="text-gray-600 dark:text-gray-300 line-clamp-2 text-sm leading-relaxed">
-              {project.description || "No description provided"}
-            </p>
+            <div className="flex items-start justify-between">
+              <h3 className="line-clamp-1 text-lg font-bold text-gray-900 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">
+                {project.name}
+              </h3>
+              <ProjectOptionsMenu
+                project={project}
+                onOpen={onOpen}
+                categoryId={categoryId}
+              />
+            </div>
+            <div className="h-10">
+              <p className="line-clamp-2 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+                {project.description || "No description provided"}
+              </p>
+            </div>
           </div>
-        </div>
 
-        {/* Team Section */}
-        <div className="space-y-2">
-          {/* Team Lead */}
-          {useMemo(() => {
-            const teamLead = project.project_members?.find(
-              (member) => member.role === "team_leader",
-            );
+          {/* Team Section */}
+          <div className="space-y-2">
+            {/* Team Lead */}
+            {useMemo(() => {
+              const teamLead = project.project_members?.find(
+                (member) => member.role === "team_leader",
+              );
 
-            if (!teamLead || !teamLead.codev) return null;
+              if (!teamLead || !teamLead.codev) return null;
 
-            return (
-              <div className="flex items-center gap-3">
-                <div className="relative h-8 w-8 ring-2 ring-blue-100 dark:ring-blue-900 rounded-full">
-                  {(() => {
-                    const validUrl = getValidImageUrl(teamLead.codev.image_url);
-                    return validUrl ? (
-                      <Image
-                        src={validUrl}
-                        alt={`${teamLead.codev.first_name} ${teamLead.codev.last_name}`}
-                        fill
-                        sizes="32px"
-                        className="rounded-full object-cover"
-                      />
-                    ) : (
-                      <DefaultAvatar size={32} />
-                    );
-                  })()}
-                </div>
-                <div className="flex flex-col">
-                  <span className="text-blue-600 dark:text-blue-400 text-xs font-semibold uppercase tracking-wide">
-                    Team Lead
-                  </span>
-                  <span className="text-gray-900 dark:text-white text-sm font-medium">
-                    {`${teamLead.codev.first_name} ${teamLead.codev.last_name}`}
-                  </span>
-                </div>
-              </div>
-            );
-          }, [project.project_members])}
-
-          {/* Team Members */}
-          {project.project_members?.some(
-            (member) => member.role === "member",
-          ) ? (
-            <div className="flex -space-x-2">
-              {project.project_members
-                .filter((member) => member.role === "member")
-                .slice(0, 4)
-                .map((member) => (
-                  <div
-                    key={member.id}
-                    className="relative h-8 w-8 rounded-full"
-                  >
+              return (
+                <div className="flex items-center gap-3">
+                  <div className="relative h-8 w-8 rounded-full ring-2 ring-blue-100 dark:ring-blue-900">
                     {(() => {
-                      const validUrl = getValidImageUrl(member.codev?.image_url);
+                      const validUrl = getValidImageUrl(
+                        teamLead.codev.image_url,
+                      );
                       return validUrl ? (
                         <Image
                           src={validUrl}
-                          alt={`${member.codev?.first_name} ${member.codev?.last_name}`}
+                          alt={`${teamLead.codev.first_name} ${teamLead.codev.last_name}`}
                           fill
                           sizes="32px"
                           className="rounded-full object-cover"
@@ -165,61 +131,103 @@ const ProjectCard = ({ project, onOpen, categoryId }: ProjectCardProps) => {
                       );
                     })()}
                   </div>
+                  <div className="flex flex-col">
+                    <span className="text-xs font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">
+                      Team Lead
+                    </span>
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      {`${teamLead.codev.first_name} ${teamLead.codev.last_name}`}
+                    </span>
+                  </div>
+                </div>
+              );
+            }, [project.project_members])}
+
+            {/* Team Members */}
+            {project.project_members?.some(
+              (member) => member.role === "member",
+            ) ? (
+              <div className="flex -space-x-2">
+                {project.project_members
+                  .filter((member) => member.role === "member")
+                  .slice(0, 4)
+                  .map((member) => (
+                    <div
+                      key={member.id}
+                      className="relative h-8 w-8 rounded-full"
+                    >
+                      {(() => {
+                        const validUrl = getValidImageUrl(
+                          member.codev?.image_url,
+                        );
+                        return validUrl ? (
+                          <Image
+                            src={validUrl}
+                            alt={`${member.codev?.first_name} ${member.codev?.last_name}`}
+                            fill
+                            sizes="32px"
+                            className="rounded-full object-cover"
+                          />
+                        ) : (
+                          <DefaultAvatar size={32} />
+                        );
+                      })()}
+                    </div>
+                  ))}
+                {project.project_members.filter(
+                  (member) => member.role === "member",
+                ).length > 4 && (
+                  <div className="text-dark100_light900 relative flex h-8 w-8 items-center justify-center rounded-full dark:bg-zinc-700">
+                    <span className="text-xs font-medium">
+                      +
+                      {project.project_members.filter(
+                        (member) => member.role === "member",
+                      ).length - 4}
+                    </span>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="flex -space-x-2">
+                <div className="relative flex h-8 w-full rounded-full text-gray-600 dark:text-gray-400">
+                  No Members
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Tech Stack */}
+          {project.tech_stack && project.tech_stack.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                Tech Stack
+              </h4>
+              <div className="flex flex-wrap gap-1.5">
+                {project.tech_stack.slice(0, 4).map((tech, index) => (
+                  <span
+                    key={index}
+                    className="inline-flex items-center rounded-full border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 px-2.5 py-1 text-xs font-medium text-blue-700 transition-shadow hover:shadow-sm dark:border-blue-700 dark:from-blue-900/30 dark:to-indigo-900/30 dark:text-blue-300"
+                  >
+                    {tech}
+                  </span>
                 ))}
-              {project.project_members.filter(
-                (member) => member.role === "member",
-              ).length > 4 && (
-                <div className="text-dark100_light900 relative flex h-8 w-8 items-center justify-center rounded-full dark:bg-zinc-700">
-                  <span className="text-xs font-medium">
-                    +
-                    {project.project_members.filter(
-                      (member) => member.role === "member",
-                    ).length - 4}
+                {project.tech_stack.length > 4 && (
+                  <span className="inline-flex items-center rounded-full border border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100 px-2.5 py-1 text-xs font-medium text-gray-600 dark:border-gray-600 dark:from-gray-800 dark:to-gray-700 dark:text-gray-300">
+                    +{project.tech_stack.length - 4} more
                   </span>
-                </div>
-              )}
-            </div>
-          ) : (
-            <div className="flex -space-x-2">
-              <div className="text-gray-600 dark:text-gray-400 relative flex h-8 w-full rounded-full">
-                No Members
+                )}
               </div>
             </div>
           )}
         </div>
 
-        {/* Tech Stack */}
-        {project.tech_stack && project.tech_stack.length > 0 && (
-          <div className="space-y-2">
-            <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
-              Tech Stack
-            </h4>
-            <div className="flex flex-wrap gap-1.5">
-              {project.tech_stack.slice(0, 4).map((tech, index) => (
-                <span
-                  key={index}
-                  className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 border border-blue-200 hover:shadow-sm transition-shadow dark:from-blue-900/30 dark:to-indigo-900/30 dark:text-blue-300 dark:border-blue-700"
-                >
-                  {tech}
-                </span>
-              ))}
-              {project.tech_stack.length > 4 && (
-                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-gray-50 to-gray-100 text-gray-600 border border-gray-200 dark:from-gray-800 dark:to-gray-700 dark:text-gray-300 dark:border-gray-600">
-                  +{project.tech_stack.length - 4} more
-                </span>
-              )}
-            </div>
-          </div>
-        )}
-        </div>
-
         {/* Links */}
-        <div className="flex items-center gap-2 pt-3 mt-auto">
+        <div className="mt-auto flex items-center gap-2 pt-3">
           {project.github_link && (
             <Link
               href={project.github_link}
               target="_blank"
-              className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-200 hover:scale-110"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 transition-all duration-200 hover:scale-110 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               onClick={(e) => e.stopPropagation()}
             >
               <IconGithub className="size-4 text-gray-600 dark:text-gray-300" />
@@ -229,7 +237,7 @@ const ProjectCard = ({ project, onOpen, categoryId }: ProjectCardProps) => {
             <Link
               href={project.website_url}
               target="_blank"
-              className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-200 hover:scale-110"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 transition-all duration-200 hover:scale-110 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               onClick={(e) => e.stopPropagation()}
             >
               <IconLink className="size-4 text-gray-600 dark:text-gray-300" />
@@ -239,7 +247,7 @@ const ProjectCard = ({ project, onOpen, categoryId }: ProjectCardProps) => {
             <Link
               href={project.figma_link}
               target="_blank"
-              className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-200 hover:scale-110"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 transition-all duration-200 hover:scale-110 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
               onClick={(e) => e.stopPropagation()}
             >
               <IconFigma className="size-4 text-gray-600 dark:text-gray-300" />

From 936286492339d2b583598ddafb96a5fd13108c9e Mon Sep 17 00:00:00 2001
From: meistergpc <jap1centeno@gmail.com>
Date: Tue, 11 Nov 2025 19:00:48 +0100
Subject: [PATCH 2/5] feat: enhance ServiceDetailView with improved layout and
 animations

---
 .../_components/ServiceDetailView.tsx         | 113 ++++++++++++++++--
 1 file changed, 100 insertions(+), 13 deletions(-)

diff --git a/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx b/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx
index 45e58090d..12a36b5d1 100644
--- a/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx
@@ -1,23 +1,110 @@
 "use client";
 
+import Image from "next/image";
+import Link from "next/link";
+import { defaultAvatar } from "@/public/assets/images";
+import { motion } from "framer-motion";
+
+import { Button } from "@codevs/ui";
+
 export const ServiceDetailView = ({ service, onBack }) => {
   console.log("ServiceDetailView rendered with service:", service);
 
   return (
-    <div className="mt-32 flex min-h-screen flex-col gap-4 bg-[#030303] px-8 py-8 text-white md:px-8 lg:px-16">
-      <button
-        onClick={onBack}
-        className="mb-8 flex w-fit items-center gap-2 rounded-lg bg-white/10 px-6 py-3 text-white transition-all hover:bg-white/20"
-      >
-        ← Back to Services
-      </button>
-      <h1 className="mb-4 text-4xl font-bold">{service.name}</h1>
-      <p className="text-gray-400">{service.description}</p>
-      {/* Design here */}
-      <div className="mt-8">
-        <p className="text-xl">Full-page detail view for: {service.name}</p>
-        <p className="mt-4 text-gray-500">Add your custom design here</p>
+    <div className="mx-auto w-full max-w-[1200px] px-4 py-8 pb-24 sm:px-6 md:pb-8">
+      {/* Back Button */}
+      <div className="mb-6 mt-24">
+        <Button
+          onClick={onBack}
+          className="from-customTeal to-customViolet-100 via-customBlue-100 h-12 rounded-full bg-gradient-to-r p-0.5 hover:bg-gradient-to-br md:w-40"
+        >
+          <span className="bg-black-500 flex h-full w-full items-center justify-center rounded-full text-sm text-white lg:text-lg">
+            ← Back to Services
+          </span>
+        </Button>
+      </div>
+
+      {/* Hero Section */}
+      <div className="relative h-[500px] w-full overflow-hidden rounded-3xl border border-white/10 shadow-2xl">
+        <Image
+          src={service.main_image || defaultAvatar}
+          alt={service.name}
+          fill
+          priority
+          className="object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
+
+        {/* Header Content */}
+        <div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-white"
+          >
+            <h1 className="mb-3 text-4xl font-extrabold md:text-6xl">
+              {service.name}
+            </h1>
+            <p className="max-w-2xl text-lg text-gray-200 md:text-xl">
+              {service.description}
+            </p>
+          </motion.div>
+        </div>
       </div>
+
+      {/* Details Section */}
+      <section className="mt-24 space-y-24">
+        {/* Info + Image Split */}
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+          className="grid grid-cols-1 items-center gap-12 md:grid-cols-2"
+        >
+          <div>
+            <h2 className="text-3xl font-bold text-white md:text-4xl">
+              About the Service
+            </h2>
+            <p className="mt-6 leading-relaxed text-gray-400">
+              {service.details ||
+                "This section can describe what the service offers in depth, how it helps clients, and why it stands out."}
+            </p>
+          </div>
+
+          <div className="relative h-[350px] w-full overflow-hidden rounded-2xl border border-white/10 shadow-xl">
+            <Image
+              src={service.secondary_image || service.main_image}
+              alt={`${service.name} showcase`}
+              fill
+              className="object-cover"
+            />
+          </div>
+        </motion.div>
+
+        {/* Highlight Cards */}
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+          {[1, 2, 3].map((i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.1, duration: 0.6 }}
+              className="rounded-2xl bg-gradient-to-b from-white/10 to-white/5 p-6 shadow-lg backdrop-blur-sm transition hover:from-white/20"
+            >
+              <h3 className="text-xl font-semibold text-white">
+                {service[`highlight_${i}_title`] || `Feature ${i}`}
+              </h3>
+              <p className="mt-3 text-sm text-gray-400">
+                {service[`highlight_${i}_desc`] ||
+                  "Short description of a core feature or benefit related to this service."}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </section>
     </div>
   );
 };

From e96234edf31d7f7f3bc152bf351072230bf08d94 Mon Sep 17 00:00:00 2001
From: meistergpc <jap1centeno@gmail.com>
Date: Thu, 13 Nov 2025 00:25:18 +0100
Subject: [PATCH 3/5] feat: implement service context for managing active
 service state across components

---
 apps/codebility/app/(marketing)/layout.tsx    |  1 +
 apps/codebility/app/(marketing)/page.tsx      |  9 ++--
 .../_components/ClientTechyBackground.tsx     | 11 ----
 .../services/_components/ServicesGrid.tsx     | 35 -------------
 .../_components/ServicesPageContent.tsx       | 43 ---------------
 .../(marketing)/services/_components/index.ts |  5 ++
 .../{ => layout}/ServiceDetailView.tsx        |  3 --
 .../_components/layout/ServicesGrid.tsx       | 28 ++++++++++
 .../_components/{ => layout}/ServicesHero.tsx | 10 ++--
 .../layout/ServicesPageContent.tsx            | 36 +++++++++++++
 .../services/_components/layout/index.ts      |  5 ++
 .../_components/{ => tabs}/ServicesTab.tsx    | 28 +++++-----
 .../services/_components/tabs/index.ts        |  1 +
 .../{ => ui}/ServicesServiceCard.tsx          | 16 +++---
 .../services/_components/ui/index.ts          |  1 +
 .../visuals/ClientTechyBackground.tsx         | 14 +++++
 .../{ => visuals}/TechyBackground.tsx         | 52 +++++++++++--------
 .../services/_components/visuals/index.ts     |  2 +
 .../services/_context/ServiceContext.tsx      | 37 +++++++++++++
 .../(marketing)/services/_context/index.ts    |  1 +
 .../app/(marketing)/services/loading.tsx      |  2 +-
 .../app/(marketing)/services/page.tsx         | 12 +++--
 22 files changed, 200 insertions(+), 152 deletions(-)
 delete mode 100644 apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx
 delete mode 100644 apps/codebility/app/(marketing)/services/_components/ServicesGrid.tsx
 delete mode 100644 apps/codebility/app/(marketing)/services/_components/ServicesPageContent.tsx
 create mode 100644 apps/codebility/app/(marketing)/services/_components/index.ts
 rename apps/codebility/app/(marketing)/services/_components/{ => layout}/ServiceDetailView.tsx (97%)
 create mode 100644 apps/codebility/app/(marketing)/services/_components/layout/ServicesGrid.tsx
 rename apps/codebility/app/(marketing)/services/_components/{ => layout}/ServicesHero.tsx (79%)
 create mode 100644 apps/codebility/app/(marketing)/services/_components/layout/ServicesPageContent.tsx
 create mode 100644 apps/codebility/app/(marketing)/services/_components/layout/index.ts
 rename apps/codebility/app/(marketing)/services/_components/{ => tabs}/ServicesTab.tsx (86%)
 create mode 100644 apps/codebility/app/(marketing)/services/_components/tabs/index.ts
 rename apps/codebility/app/(marketing)/services/_components/{ => ui}/ServicesServiceCard.tsx (97%)
 create mode 100644 apps/codebility/app/(marketing)/services/_components/ui/index.ts
 create mode 100644 apps/codebility/app/(marketing)/services/_components/visuals/ClientTechyBackground.tsx
 rename apps/codebility/app/(marketing)/services/_components/{ => visuals}/TechyBackground.tsx (83%)
 create mode 100644 apps/codebility/app/(marketing)/services/_components/visuals/index.ts
 create mode 100644 apps/codebility/app/(marketing)/services/_context/ServiceContext.tsx
 create mode 100644 apps/codebility/app/(marketing)/services/_context/index.ts

diff --git a/apps/codebility/app/(marketing)/layout.tsx b/apps/codebility/app/(marketing)/layout.tsx
index 535423f41..c20c3f822 100644
--- a/apps/codebility/app/(marketing)/layout.tsx
+++ b/apps/codebility/app/(marketing)/layout.tsx
@@ -1,4 +1,5 @@
 "use server";
+
 import { ModalProviderMarketing } from "@/components/providers/modal-provider-marketing";
 
 export default async function MarketingLayout({
diff --git a/apps/codebility/app/(marketing)/page.tsx b/apps/codebility/app/(marketing)/page.tsx
index 46efb9ef8..e27597700 100644
--- a/apps/codebility/app/(marketing)/page.tsx
+++ b/apps/codebility/app/(marketing)/page.tsx
@@ -1,6 +1,8 @@
+import ForceScrollTop from "./_components/landing/ForceScrollTop";
 import Admins from "./_components/landing/LandingAdmins";
 import Features from "./_components/landing/LandingFeatures";
 import Hero from "./_components/landing/LandingHero";
+import InternSectionContainer from "./_components/landing/LandingInternSection";
 import Partners from "./_components/landing/LandingPartners";
 import WhyChooseUs from "./_components/landing/LandingWhyChoose-us";
 import WorkWithUs from "./_components/landing/LandingWorkWithUs";
@@ -8,8 +10,6 @@ import Calendly from "./_components/MarketingCalendly";
 import Footer from "./_components/MarketingFooter";
 import Navigation from "./_components/MarketingNavigation";
 import Testimonials from "./_components/testimonial/Testimonials";
-import InternSectionContainer from "./_components/landing/LandingInternSection";
-import ForceScrollTop from "./_components/landing/ForceScrollTop";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
@@ -17,7 +17,6 @@ export const revalidate = 0;
 export default async function Index() {
   return (
     <div className="bg-black-400 relative w-full overflow-x-hidden">
-  
       <Navigation />
       <Hero />
       <Features />
@@ -29,8 +28,6 @@ export default async function Index() {
       <Testimonials />
       <Calendly />
       <Footer />
-      
-
     </div>
   );
-} 
+}
diff --git a/apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx b/apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx
deleted file mode 100644
index 93aed7a80..000000000
--- a/apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-
-const TechyBackground = dynamic(() => import("./TechyBackground"), {
-  ssr: false,
-});
-
-export default function ClientTechyBackground() {
-  return <TechyBackground />;
-}
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesGrid.tsx b/apps/codebility/app/(marketing)/services/_components/ServicesGrid.tsx
deleted file mode 100644
index e7be5a0e7..000000000
--- a/apps/codebility/app/(marketing)/services/_components/ServicesGrid.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import type { ServiceProject } from "./ServicesServiceCard";
-import { ServiceDetailView } from "./ServiceDetailView";
-import ServicesServiceCard from "./ServicesServiceCard";
-
-export const ServicesGrid = ({ services }) => {
-  const [activeService, setActiveService] = useState<ServiceProject | null>(
-    null,
-  );
-
-  console.log("ServicesGrid - activeService:", activeService);
-
-  if (activeService) {
-    return (
-      <ServiceDetailView
-        service={activeService}
-        onBack={() => setActiveService(null)}
-      />
-    );
-  }
-  return (
-    <div>
-      {services.map((service) => (
-        <ServicesServiceCard
-          key={service.id}
-          service={service}
-          onSelect={(s) => setActiveService(s)}
-        />
-      ))}
-    </div>
-  );
-};
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesPageContent.tsx b/apps/codebility/app/(marketing)/services/_components/ServicesPageContent.tsx
deleted file mode 100644
index 9b0f6149b..000000000
--- a/apps/codebility/app/(marketing)/services/_components/ServicesPageContent.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import type { ServiceProject } from "./ServicesServiceCard";
-import Calendly from "../../_components/MarketingCalendly";
-import Footer from "../../_components/MarketingFooter";
-import { ServiceDetailView } from "./ServiceDetailView";
-import Hero from "./ServicesHero";
-import ServicesTab from "./ServicesTab";
-
-interface Props {
-  servicesData: any[];
-}
-
-export function ServicesPageContent({ servicesData }: Props) {
-  const [activeService, setActiveService] = useState<ServiceProject | null>(
-    null,
-  );
-
-  // If a service is selected, show only the detail view
-  if (activeService) {
-    return (
-      <ServiceDetailView
-        service={activeService}
-        onBack={() => setActiveService(null)}
-      />
-    );
-  }
-
-  // Otherwise, show the normal services page
-  return (
-    <>
-      <Hero />
-      <ServicesTab
-        servicesData={servicesData}
-        onServiceSelect={(service) => setActiveService(service)}
-      />
-      <Calendly />
-      <Footer />
-    </>
-  );
-}
diff --git a/apps/codebility/app/(marketing)/services/_components/index.ts b/apps/codebility/app/(marketing)/services/_components/index.ts
new file mode 100644
index 000000000..abaa4301e
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/index.ts
@@ -0,0 +1,5 @@
+export * from "./layout";
+export * from "./ui";
+export * from "./visuals";
+export * from "./tabs";
+export * from "../_context";
diff --git a/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx b/apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx
similarity index 97%
rename from apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx
rename to apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx
index 12a36b5d1..cdc055015 100644
--- a/apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx
@@ -1,15 +1,12 @@
 "use client";
 
 import Image from "next/image";
-import Link from "next/link";
 import { defaultAvatar } from "@/public/assets/images";
 import { motion } from "framer-motion";
 
 import { Button } from "@codevs/ui";
 
 export const ServiceDetailView = ({ service, onBack }) => {
-  console.log("ServiceDetailView rendered with service:", service);
-
   return (
     <div className="mx-auto w-full max-w-[1200px] px-4 py-8 pb-24 sm:px-6 md:pb-8">
       {/* Back Button */}
diff --git a/apps/codebility/app/(marketing)/services/_components/layout/ServicesGrid.tsx b/apps/codebility/app/(marketing)/services/_components/layout/ServicesGrid.tsx
new file mode 100644
index 000000000..ffa3e2afe
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/layout/ServicesGrid.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useServiceContext } from "../../_context";
+import { ServicesServiceCard } from "../ui";
+
+export const ServicesGrid = ({ services }) => {
+  const { activeService, setActiveService, clearActiveService } =
+    useServiceContext();
+
+  if (activeService) {
+    const { ServiceDetailView } = require("./ServiceDetailView");
+    return (
+      <ServiceDetailView service={activeService} onBack={clearActiveService} />
+    );
+  }
+
+  return (
+    <div>
+      {services.map((service) => (
+        <ServicesServiceCard
+          key={service.id}
+          service={service}
+          onSelect={(s) => setActiveService(s)}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesHero.tsx b/apps/codebility/app/(marketing)/services/_components/layout/ServicesHero.tsx
similarity index 79%
rename from apps/codebility/app/(marketing)/services/_components/ServicesHero.tsx
rename to apps/codebility/app/(marketing)/services/_components/layout/ServicesHero.tsx
index 52a7ef0a5..a23c24113 100644
--- a/apps/codebility/app/(marketing)/services/_components/ServicesHero.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/layout/ServicesHero.tsx
@@ -1,7 +1,7 @@
-import Container from "../../_components/MarketingContainer";
-import SideNavMenu from "../../_components/MarketingSidenavMenu";
+import Container from "../../../_components/MarketingContainer";
+import SideNavMenu from "../../../_components/MarketingSidenavMenu";
 
-export default function Hero() {
+export const Hero = () => {
   return (
     <div className="relative">
       <section className="relative mt-2 flex min-h-[300px] w-full flex-col items-center justify-center overflow-hidden bg-cover bg-no-repeat lg:mt-20">
@@ -26,9 +26,9 @@ export default function Hero() {
             clipPath:
               "polygon(20.7% 28%, 76.2% 29%, 89.8% 59.5%, 87.3% 98%, 70% 100%, 30% 100%, 9.4% 96.8%, 7.3% 64.8%)",
           }}
-          className="relative aspect-[855/678] w-[40rem] bg-customBlue-200 opacity-30 sm:w-[72.1875rem]"
+          className="bg-customBlue-200 relative aspect-[855/678] w-[40rem] opacity-30 sm:w-[72.1875rem]"
         />
       </div>
     </div>
   );
-}
+};
diff --git a/apps/codebility/app/(marketing)/services/_components/layout/ServicesPageContent.tsx b/apps/codebility/app/(marketing)/services/_components/layout/ServicesPageContent.tsx
new file mode 100644
index 000000000..b837991e9
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/layout/ServicesPageContent.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useServiceContext } from "../../_context";
+import Calendly from "../../../_components/MarketingCalendly";
+import Footer from "../../../_components/MarketingFooter";
+import { ServicesHero, ServicesTab } from "../layout";
+import { ServiceDetailView } from "./ServiceDetailView";
+
+interface Props {
+  servicesData: any[];
+}
+
+export const ServicesPageContent = ({ servicesData }: Props) => {
+  const { activeService, clearActiveService, setActiveService } =
+    useServiceContext();
+
+  // If a service is selected, show only the detail view
+  if (activeService) {
+    return (
+      <ServiceDetailView service={activeService} onBack={clearActiveService} />
+    );
+  }
+
+  // Otherwise, show the normal services page
+  return (
+    <>
+      <ServicesHero />
+      <ServicesTab
+        servicesData={servicesData}
+        onServiceSelect={setActiveService}
+      />
+      <Calendly />
+      <Footer />
+    </>
+  );
+};
diff --git a/apps/codebility/app/(marketing)/services/_components/layout/index.ts b/apps/codebility/app/(marketing)/services/_components/layout/index.ts
new file mode 100644
index 000000000..ed63d35dd
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/layout/index.ts
@@ -0,0 +1,5 @@
+export * from "./ServicesPageContent";
+export { Hero as ServicesHero } from "./ServicesHero";
+export * from "../tabs/ServicesTab";
+export * from "./ServiceDetailView";
+export * from "./ServicesGrid";
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesTab.tsx b/apps/codebility/app/(marketing)/services/_components/tabs/ServicesTab.tsx
similarity index 86%
rename from apps/codebility/app/(marketing)/services/_components/ServicesTab.tsx
rename to apps/codebility/app/(marketing)/services/_components/tabs/ServicesTab.tsx
index cd9b4b5b7..a26289213 100644
--- a/apps/codebility/app/(marketing)/services/_components/ServicesTab.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/tabs/ServicesTab.tsx
@@ -1,14 +1,14 @@
 "use client";
 
 import { memo, useEffect, useMemo, useState } from "react";
+import Container from "@/app/(marketing)/_components/MarketingContainer";
+import Section from "@/app/(marketing)/_components/MarketingSection";
 import DefaultPagination from "@/components/ui/pagination";
 import { CATEGORIES, pageSize } from "@/constants";
 import usePagination from "@/hooks/use-pagination";
 
-import type { ServiceProject } from "./ServicesServiceCard";
-import Container from "../../_components/MarketingContainer";
-import Section from "../../_components/MarketingSection";
-import ServiceCard from "./ServicesServiceCard";
+import type { ServiceProject } from "../ui/ServicesServiceCard";
+import { ServicesServiceCard } from "../ui";
 
 interface TeamMember {
   id: string;
@@ -46,17 +46,14 @@ interface Props {
   onServiceSelect?: (service: ServiceProject) => void;
 }
 
-// Define a special ID for the "All" category
 const ALL_CATEGORY_ID = 0;
 
-function ServicesTab({ servicesData, onServiceSelect }: Props) {
-  // Initialize with "All" category
+export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
   const [currentCategory, setCurrentCategory] =
     useState<number>(ALL_CATEGORY_ID);
-
   const [tabPages, setTabPages] = useState(() => {
     const pages: Record<number, number> = {
-      [ALL_CATEGORY_ID]: 1, // Add "All" category to tracked pages
+      [ALL_CATEGORY_ID]: 1,
     };
     CATEGORIES.forEach((cat) => {
       pages[cat.id] = 1;
@@ -64,7 +61,6 @@ function ServicesTab({ servicesData, onServiceSelect }: Props) {
     return pages;
   });
 
-  // Memoize filtered projects to prevent unnecessary recalculations
   const projects = useMemo(() => {
     return currentCategory === ALL_CATEGORY_ID
       ? servicesData
@@ -82,7 +78,6 @@ function ServicesTab({ servicesData, onServiceSelect }: Props) {
     setCurrentPage,
   } = usePagination(projects, pageSize.services);
 
-  // Update current page when category changes
   useEffect(() => {
     setCurrentPage(tabPages[currentCategory] || 1);
   }, [currentCategory, setCurrentPage, tabPages]);
@@ -99,7 +94,7 @@ function ServicesTab({ servicesData, onServiceSelect }: Props) {
     <Section className="relative">
       <Container className="relative z-0">
         <div className="flex flex-col gap-4">
-          {/* Category Tabs with "All" option */}
+          {/* Tabs */}
           <div className="mx-auto flex flex-wrap justify-center gap-2 rounded-2xl border border-white/20 bg-white/10 p-1 backdrop-blur-sm dark:bg-white/5">
             <button
               onClick={() => handleTabClick(ALL_CATEGORY_ID)}
@@ -138,7 +133,10 @@ function ServicesTab({ servicesData, onServiceSelect }: Props) {
                     animationFillMode: "both",
                   }}
                 >
-                  <ServiceCard service={project} onSelect={onServiceSelect} />
+                  <ServicesServiceCard
+                    service={project}
+                    onSelect={onServiceSelect}
+                  />
                 </div>
               ))
             ) : (
@@ -164,6 +162,4 @@ function ServicesTab({ servicesData, onServiceSelect }: Props) {
       </Container>
     </Section>
   );
-}
-
-export default memo(ServicesTab);
+});
diff --git a/apps/codebility/app/(marketing)/services/_components/tabs/index.ts b/apps/codebility/app/(marketing)/services/_components/tabs/index.ts
new file mode 100644
index 000000000..fb674d1c2
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/tabs/index.ts
@@ -0,0 +1 @@
+export * from "./ServicesTab";
diff --git a/apps/codebility/app/(marketing)/services/_components/ServicesServiceCard.tsx b/apps/codebility/app/(marketing)/services/_components/ui/ServicesServiceCard.tsx
similarity index 97%
rename from apps/codebility/app/(marketing)/services/_components/ServicesServiceCard.tsx
rename to apps/codebility/app/(marketing)/services/_components/ui/ServicesServiceCard.tsx
index 8edb34e47..eec898c7b 100644
--- a/apps/codebility/app/(marketing)/services/_components/ServicesServiceCard.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/ui/ServicesServiceCard.tsx
@@ -12,6 +12,8 @@ import {
 import { IconLink } from "@/public/assets/svgs";
 import { Crown } from "lucide-react";
 
+import { useServiceContext } from "../../_context";
+
 interface TeamMember {
   id: string;
   first_name: string;
@@ -48,8 +50,9 @@ interface Props {
   onSelect?: (service: ServiceProject) => void;
 }
 
-function ServiceCard({ service, onSelect }: Props) {
+export const ServicesServiceCard = memo(({ service, onSelect }: Props) => {
   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
+  const { setActiveService } = useServiceContext();
 
   const {
     name,
@@ -120,8 +123,11 @@ function ServiceCard({ service, onSelect }: Props) {
       <div
         className="relative aspect-[4/3] w-full flex-shrink-0 cursor-pointer overflow-hidden"
         onClick={() => {
-          console.log("Image clicked, service:", service.name);
-          onSelect?.(service);
+          if (onSelect) {
+            onSelect(service);
+          } else {
+            setActiveService(service);
+          }
         }}
       >
         <Image
@@ -311,6 +317,4 @@ function ServiceCard({ service, onSelect }: Props) {
       </div>
     </div>
   );
-}
-
-export default memo(ServiceCard);
+});
diff --git a/apps/codebility/app/(marketing)/services/_components/ui/index.ts b/apps/codebility/app/(marketing)/services/_components/ui/index.ts
new file mode 100644
index 000000000..3b0cc154a
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/ui/index.ts
@@ -0,0 +1 @@
+export * from "./ServicesServiceCard";
diff --git a/apps/codebility/app/(marketing)/services/_components/visuals/ClientTechyBackground.tsx b/apps/codebility/app/(marketing)/services/_components/visuals/ClientTechyBackground.tsx
new file mode 100644
index 000000000..4d1e5f29a
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/visuals/ClientTechyBackground.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const TechyBackground = dynamic(
+  () => import("./TechyBackground").then((mod) => mod.TechyBackground),
+  {
+    ssr: false,
+  },
+);
+
+export const ClientTechyBackground = () => {
+  return <TechyBackground />;
+};
diff --git a/apps/codebility/app/(marketing)/services/_components/TechyBackground.tsx b/apps/codebility/app/(marketing)/services/_components/visuals/TechyBackground.tsx
similarity index 83%
rename from apps/codebility/app/(marketing)/services/_components/TechyBackground.tsx
rename to apps/codebility/app/(marketing)/services/_components/visuals/TechyBackground.tsx
index 722918ba4..4f11b98dc 100644
--- a/apps/codebility/app/(marketing)/services/_components/TechyBackground.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/visuals/TechyBackground.tsx
@@ -2,9 +2,9 @@
 
 import { useEffect, useRef } from "react";
 
-export default function TechyBackground() {
+export const TechyBackground = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const animationRef = useRef<number>();
+  const animationRef = useRef<number | undefined>(undefined);
   const timeRef = useRef(0);
 
   useEffect(() => {
@@ -25,7 +25,7 @@ export default function TechyBackground() {
     // Animation loop
     const animate = () => {
       timeRef.current += 0.005; // Slower animation
-      
+
       // Clear canvas
       ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -35,71 +35,79 @@ export default function TechyBackground() {
       animationRef.current = requestAnimationFrame(animate);
     };
 
-    const drawGradientWaves = (ctx: CanvasRenderingContext2D, width: number, height: number) => {
+    const drawGradientWaves = (
+      ctx: CanvasRenderingContext2D,
+      width: number,
+      height: number,
+    ) => {
       // Create multiple subtle wave layers
       for (let i = 0; i < 3; i++) {
         ctx.save();
-        
+
         // Create gradient for each wave
         const gradient = ctx.createLinearGradient(0, 0, width, height);
         const opacity = 0.02 + i * 0.01; // Very subtle
-        
+
         gradient.addColorStop(0, `rgba(88, 61, 255, 0)`); // customBlue-500 transparent
         gradient.addColorStop(0.3, `rgba(88, 61, 255, ${opacity})`);
         gradient.addColorStop(0.7, `rgba(64, 73, 147, ${opacity})`); // customBlue-200
         gradient.addColorStop(1, `rgba(64, 73, 147, 0)`);
-        
+
         ctx.fillStyle = gradient;
-        
+
         // Draw flowing wave shape
         ctx.beginPath();
         const waveHeight = height * (0.3 + i * 0.1);
         const frequency = 0.002 + i * 0.001;
         const amplitude = 50 + i * 20;
         const phase = timeRef.current * (0.5 + i * 0.3);
-        
+
         // Start the wave
         ctx.moveTo(0, height);
-        
+
         // Create smooth wave path
         for (let x = 0; x <= width; x += 5) {
-          const y = waveHeight + 
-                   Math.sin(x * frequency + phase) * amplitude +
-                   Math.sin(x * frequency * 2 + phase * 1.5) * (amplitude * 0.3);
-          
+          const y =
+            waveHeight +
+            Math.sin(x * frequency + phase) * amplitude +
+            Math.sin(x * frequency * 2 + phase * 1.5) * (amplitude * 0.3);
+
           if (x === 0) {
             ctx.moveTo(x, y);
           } else {
             ctx.lineTo(x, y);
           }
         }
-        
+
         // Complete the shape
         ctx.lineTo(width, height);
         ctx.lineTo(0, height);
         ctx.closePath();
-        
+
         ctx.fill();
         ctx.restore();
       }
 
       // Add a few minimal floating orbs
       for (let i = 0; i < 4; i++) {
-        const x = (width * 0.2) + (width * 0.6 * (i / 3)) + Math.sin(timeRef.current * 0.8 + i * 2) * 30;
+        const x =
+          width * 0.2 +
+          width * 0.6 * (i / 3) +
+          Math.sin(timeRef.current * 0.8 + i * 2) * 30;
         const y = height * 0.3 + Math.sin(timeRef.current * 0.6 + i * 1.5) * 50;
         const size = 2 + Math.sin(timeRef.current + i) * 1;
         const opacity = 0.1 + Math.sin(timeRef.current * 1.2 + i * 0.8) * 0.05;
-        
+
         // Subtle glow
         const gradient = ctx.createRadialGradient(x, y, 0, x, y, size * 6);
         gradient.addColorStop(0, `rgba(88, 61, 255, ${opacity})`);
-        gradient.addColorStop(1, 'rgba(88, 61, 255, 0)');
-        
+        gradient.addColorStop(1, "rgba(88, 61, 255, 0)");
+
         ctx.fillStyle = gradient;
         ctx.beginPath();
         ctx.arc(x, y, size * 6, 0, Math.PI * 2);
         ctx.fill();
-        
+
         // Small core
         ctx.fillStyle = `rgba(244, 244, 244, ${opacity * 2})`;
         ctx.beginPath();
@@ -125,4 +133,4 @@ export default function TechyBackground() {
       style={{ background: "transparent" }}
     />
   );
-}
\ No newline at end of file
+};
diff --git a/apps/codebility/app/(marketing)/services/_components/visuals/index.ts b/apps/codebility/app/(marketing)/services/_components/visuals/index.ts
new file mode 100644
index 000000000..15c217d10
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_components/visuals/index.ts
@@ -0,0 +1,2 @@
+export * from "./ClientTechyBackground";
+export * from "./TechyBackground";
diff --git a/apps/codebility/app/(marketing)/services/_context/ServiceContext.tsx b/apps/codebility/app/(marketing)/services/_context/ServiceContext.tsx
new file mode 100644
index 000000000..920344a61
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_context/ServiceContext.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { createContext, ReactNode, useContext, useState } from "react";
+
+import { ServiceProject } from "../_components";
+
+interface ServiceContextType {
+  activeService: ServiceProject | null;
+  setActiveService: (service: ServiceProject) => void;
+  clearActiveService: () => void;
+}
+
+const ServiceContext = createContext<ServiceContextType | undefined>(undefined);
+
+export const ServiceProvider = ({ children }: { children: ReactNode }) => {
+  const [activeService, setActiveServiceState] =
+    useState<ServiceProject | null>(null);
+
+  const setActiveService = (service: ServiceProject) =>
+    setActiveServiceState(service);
+  const clearActiveService = () => setActiveServiceState(null);
+
+  return (
+    <ServiceContext.Provider
+      value={{ activeService, setActiveService, clearActiveService }}
+    >
+      {children}
+    </ServiceContext.Provider>
+  );
+};
+
+export const useServiceContext = (): ServiceContextType => {
+  const context = useContext(ServiceContext);
+  if (!context)
+    throw new Error("useServiceContext must be used within ServiceProvider");
+  return context;
+};
diff --git a/apps/codebility/app/(marketing)/services/_context/index.ts b/apps/codebility/app/(marketing)/services/_context/index.ts
new file mode 100644
index 000000000..702068fbe
--- /dev/null
+++ b/apps/codebility/app/(marketing)/services/_context/index.ts
@@ -0,0 +1 @@
+export * from "./ServiceContext";
diff --git a/apps/codebility/app/(marketing)/services/loading.tsx b/apps/codebility/app/(marketing)/services/loading.tsx
index b7291cb2e..17bc47210 100644
--- a/apps/codebility/app/(marketing)/services/loading.tsx
+++ b/apps/codebility/app/(marketing)/services/loading.tsx
@@ -2,7 +2,7 @@ import { Navigation } from "lucide-react";
 
 import Calendly from "../_components/MarketingCalendly";
 import Footer from "../_components/MarketingFooter";
-import Hero from "./_components/ServicesHero";
+import { Hero } from "./_components/layout/ServicesHero";
 
 export default function ServicesLoading() {
   return (
diff --git a/apps/codebility/app/(marketing)/services/page.tsx b/apps/codebility/app/(marketing)/services/page.tsx
index 9f4461cff..c2c3d9816 100644
--- a/apps/codebility/app/(marketing)/services/page.tsx
+++ b/apps/codebility/app/(marketing)/services/page.tsx
@@ -3,10 +3,11 @@ import { getOrSetCache } from "@/lib/server/redis-cache";
 import { cacheKeys } from "@/lib/server/redis-cache-keys";
 import { createClientServerComponent } from "@/utils/supabase/server";
 
+import Footer from "../_components/MarketingFooter";
 import Navigation from "../_components/MarketingNavigation";
-import ClientTechyBackground from "./_components/ClientTechyBackground";
-import { ServicesPageContent } from "./_components/ServicesPageContent";
-import { servicesData } from "./_lib/dummy-data";
+import { ServicesPageContent } from "./_components/layout";
+import { ClientTechyBackground } from "./_components/visuals";
+import { ServiceProvider } from "./_context";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
@@ -78,8 +79,11 @@ const ServicesPage = async () => {
       <ClientTechyBackground />
       <div className="relative z-10">
         <Navigation />
-        <ServicesPageContent servicesData={mappedData} />
+        <ServiceProvider>
+          <ServicesPageContent servicesData={mappedData} />
+        </ServiceProvider>
       </div>
+      <Footer />
     </div>
   );
 };

From 1c47af18c311b362f7967af33ad9094f0cf85e06 Mon Sep 17 00:00:00 2001
From: meistergpc <jap1centeno@gmail.com>
Date: Tue, 25 Nov 2025 01:10:03 +0100
Subject: [PATCH 4/5] feat: enhance project view modal and backend to support
 new project features

- Updated ProjectViewModal component to display new fields: tagline, key features, and gallery.
- Added parsing for key features and gallery in create and update project actions.
- Extended Project interface to include new fields: tagline, key_features, team_lead, team_members, gallery, and secondary_image.
- Created SQL scripts to check existing columns and migrate the database schema to add new fields with appropriate comments.
---
 .../_components/layout/ServiceDetailView.tsx  | 451 ++++++++++++++++--
 .../app/(marketing)/services/page.tsx         |   6 +
 .../projects/_components/ProjectAddModal.tsx  | 348 ++++++++++----
 .../projects/_components/ProjectEditModal.tsx | 405 +++++++++++-----
 .../projects/_components/ProjectViewModal.tsx | 237 ++++++---
 apps/codebility/app/home/projects/actions.ts  |  57 ++-
 apps/codebility/types/home/codev.ts           |  13 +-
 check_existing_columns.sql                    |  10 +
 database_migration.sql                        |  16 +
 9 files changed, 1239 insertions(+), 304 deletions(-)
 create mode 100644 check_existing_columns.sql
 create mode 100644 database_migration.sql

diff --git a/apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx b/apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx
index cdc055015..c9d45f3e6 100644
--- a/apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx
+++ b/apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx
@@ -1,12 +1,80 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import Image from "next/image";
+import Link from "next/link";
+import {
+  getMembers,
+  getTeamLead,
+  SimpleMemberData,
+} from "@/app/home/projects/actions";
 import { defaultAvatar } from "@/public/assets/images";
+import { useQuery } from "@tanstack/react-query";
 import { motion } from "framer-motion";
 
 import { Button } from "@codevs/ui";
 
+const IconGithub = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+  </svg>
+);
+
+const IconLink = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+  </svg>
+);
+
+const IconFigma = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.354-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.015-4.49-4.491S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148z" />
+  </svg>
+);
+
 export const ServiceDetailView = ({ service, onBack }) => {
+  const formatDate = (dateString) => {
+    if (!dateString) return "Not specified";
+    return new Date(dateString).toLocaleDateString("en-US", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: true,
+    });
+  };
+
+  // Fetch team lead data
+  const { data: teamLead } = useQuery({
+    queryKey: ["teamLead", service?.id],
+    queryFn: async () => {
+      if (!service?.id) return null;
+      const result = await getTeamLead(service.id);
+      return result.data;
+    },
+    enabled: !!service?.id,
+  });
+
+  // Fetch members data
+  const { data: members = [] } = useQuery({
+    queryKey: ["members", service?.id],
+    queryFn: async () => {
+      if (!service?.id) return [];
+      const result = await getMembers(service.id);
+      return result.data || [];
+    },
+    enabled: !!service?.id,
+  });
+
   return (
     <div className="mx-auto w-full max-w-[1200px] px-4 py-8 pb-24 sm:px-6 md:pb-8">
       {/* Back Button */}
@@ -21,7 +89,7 @@ export const ServiceDetailView = ({ service, onBack }) => {
         </Button>
       </div>
 
-      {/* Hero Section */}
+      {/* 1. Project Image with Name and Tagline */}
       <div className="relative h-[500px] w-full overflow-hidden rounded-3xl border border-white/10 shadow-2xl">
         <Image
           src={service.main_image || defaultAvatar}
@@ -31,8 +99,6 @@ export const ServiceDetailView = ({ service, onBack }) => {
           className="object-cover"
         />
         <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
-
-        {/* Header Content */}
         <div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
@@ -44,62 +110,345 @@ export const ServiceDetailView = ({ service, onBack }) => {
               {service.name}
             </h1>
             <p className="max-w-2xl text-lg text-gray-200 md:text-xl">
-              {service.description}
+              {service.tagline || "Innovative solutions for modern challenges"}
             </p>
           </motion.div>
         </div>
       </div>
 
-      {/* Details Section */}
-      <section className="mt-24 space-y-24">
-        {/* Info + Image Split */}
-        <motion.div
-          initial={{ opacity: 0, y: 50 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="grid grid-cols-1 items-center gap-12 md:grid-cols-2"
-        >
-          <div>
-            <h2 className="text-3xl font-bold text-white md:text-4xl">
-              About the Service
-            </h2>
-            <p className="mt-6 leading-relaxed text-gray-400">
-              {service.details ||
-                "This section can describe what the service offers in depth, how it helps clients, and why it stands out."}
-            </p>
-          </div>
+      {/* 2. Project Information */}
+      <section className="mt-12">
+        <div className="rounded-lg bg-gray-50 p-6 dark:bg-gray-800/50">
+          <h2 className="mb-6 flex items-center gap-3 text-2xl font-bold">
+            <span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-lg font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+              2
+            </span>
+            Project Information
+          </h2>
+
+          <div className="grid gap-8 md:grid-cols-2">
+            <div className="space-y-6">
+              {/* Description */}
+              <div>
+                <h3 className="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                  Description / Project Overview
+                </h3>
+                <p className="leading-relaxed text-gray-600 dark:text-gray-300">
+                  {service.description ||
+                    "A comprehensive overview of the project's goals, scope, and implementation."}
+                </p>
+              </div>
+
+              {/* Key Features */}
+              <div>
+                <h3 className="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                  Key Features
+                </h3>
+                <div className="space-y-2">
+                  {service.key_features ? (
+                    Array.isArray(service.key_features) ? (
+                      service.key_features.map((feature, index) => (
+                        <div key={index} className="flex items-start gap-2">
+                          <span className="mt-2 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
+                          <span className="text-gray-600 dark:text-gray-300">
+                            {feature}
+                          </span>
+                        </div>
+                      ))
+                    ) : (
+                      <p className="text-gray-600 dark:text-gray-300">
+                        {service.key_features}
+                      </p>
+                    )
+                  ) : (
+                    <p className="text-gray-500 dark:text-gray-400">
+                      Key features not specified
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* External Links */}
+              <div>
+                <h3 className="mb-3 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                  External Links
+                </h3>
+                <div className="flex flex-wrap gap-3">
+                  {service.github_link && (
+                    <Link
+                      href={service.github_link}
+                      target="_blank"
+                      className="flex items-center gap-2 rounded-lg border bg-white px-4 py-2 transition-colors hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600"
+                    >
+                      <IconGithub className="h-4 w-4" />
+                      <span className="text-sm font-medium">Github</span>
+                    </Link>
+                  )}
+                  {service.website_url && (
+                    <Link
+                      href={service.website_url}
+                      target="_blank"
+                      className="flex items-center gap-2 rounded-lg border bg-white px-4 py-2 transition-colors hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600"
+                    >
+                      <IconLink className="h-4 w-4" />
+                      <span className="text-sm font-medium">Website</span>
+                    </Link>
+                  )}
+                  {service.figma_link && (
+                    <Link
+                      href={service.figma_link}
+                      target="_blank"
+                      className="flex items-center gap-2 rounded-lg border bg-white px-4 py-2 transition-colors hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600"
+                    >
+                      <IconFigma className="h-4 w-4" />
+                      <span className="text-sm font-medium">Figma</span>
+                    </Link>
+                  )}
+                  {!service.github_link &&
+                    !service.website_url &&
+                    !service.figma_link && (
+                      <p className="text-gray-500 dark:text-gray-400">
+                        No external links available
+                      </p>
+                    )}
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              {/* Current Status */}
+              <div>
+                <h3 className="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                  Current Status
+                </h3>
+                <span
+                  className={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${
+                    service.status === "completed"
+                      ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                      : service.status === "inprogress"
+                        ? "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
+                        : "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
+                  }`}
+                >
+                  {service.status === "inprogress"
+                    ? "In Progress"
+                    : service.status
+                      ? service.status.charAt(0).toUpperCase() +
+                        service.status.slice(1)
+                      : "Completed"}
+                </span>
+              </div>
+
+              {/* Project Categories */}
+              <div>
+                <h3 className="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                  Project Categories
+                </h3>
+                <div className="flex flex-wrap gap-2">
+                  {service.categories && service.categories.length > 0 ? (
+                    service.categories.map((category, index) => (
+                      <span
+                        key={index}
+                        className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                      >
+                        {category.name || category}
+                      </span>
+                    ))
+                  ) : (
+                    <span className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                      Web Applications
+                    </span>
+                  )}
+                </div>
+              </div>
 
-          <div className="relative h-[350px] w-full overflow-hidden rounded-2xl border border-white/10 shadow-xl">
-            <Image
-              src={service.secondary_image || service.main_image}
-              alt={`${service.name} showcase`}
-              fill
-              className="object-cover"
-            />
+              {/* Duration */}
+              <div>
+                <h3 className="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                  Duration
+                </h3>
+                <div className="text-gray-600 dark:text-gray-300">
+                  <p>
+                    Start:{" "}
+                    {service.start_date
+                      ? formatDate(service.start_date).split(",")[0]
+                      : "31/12/2025"}
+                  </p>
+                  <p>
+                    End:{" "}
+                    {service.end_date
+                      ? formatDate(service.end_date).split(",")[0]
+                      : "Ongoing"}
+                  </p>
+                </div>
+              </div>
+
+              {/* Created */}
+              <div>
+                <h3 className="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                  Created
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300">
+                  {service.created_at
+                    ? formatDate(service.created_at)
+                    : "31/12/2025 03:58:22 PM"}
+                </p>
+              </div>
+            </div>
           </div>
-        </motion.div>
-
-        {/* Highlight Cards */}
-        <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-          {[1, 2, 3].map((i) => (
-            <motion.div
-              key={i}
-              initial={{ opacity: 0, y: 40 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.1, duration: 0.6 }}
-              className="rounded-2xl bg-gradient-to-b from-white/10 to-white/5 p-6 shadow-lg backdrop-blur-sm transition hover:from-white/20"
-            >
-              <h3 className="text-xl font-semibold text-white">
-                {service[`highlight_${i}_title`] || `Feature ${i}`}
+
+          {/* Technology Stack */}
+          {service.tech_stack && service.tech_stack.length > 0 && (
+            <div className="mt-8 border-t pt-6">
+              <h3 className="mb-3 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                Technology Stack
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {service.tech_stack.map((tech, index) => (
+                  <span
+                    key={index}
+                    className="inline-flex items-center rounded-full bg-blue-600 px-3 py-1 text-sm font-medium text-white"
+                  >
+                    {tech}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* 3. Team Information */}
+      <section className="mt-12">
+        <div className="rounded-lg bg-gray-50 p-6 dark:bg-gray-800/50">
+          <h2 className="mb-6 flex items-center gap-3 text-2xl font-bold">
+            <span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-lg font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+              3
+            </span>
+            Team Information
+          </h2>
+
+          <div className="space-y-8">
+            {/* Team Leader */}
+            <div>
+              <h3 className="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                Team Leader
               </h3>
-              <p className="mt-3 text-sm text-gray-400">
-                {service[`highlight_${i}_desc`] ||
-                  "Short description of a core feature or benefit related to this service."}
-              </p>
-            </motion.div>
-          ))}
+              {teamLead ? (
+                <div className="flex items-center gap-4 rounded-lg border border-gray-300 p-4 dark:border-gray-600">
+                  <div className="relative h-12 w-12">
+                    <Image
+                      src={teamLead.image_url || defaultAvatar}
+                      alt={`${teamLead.first_name} ${teamLead.last_name}`}
+                      fill
+                      className="rounded-full object-cover"
+                    />
+                  </div>
+                  <div>
+                    <p className="font-medium text-gray-900 dark:text-gray-100">
+                      {teamLead.first_name} {teamLead.last_name}
+                    </p>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      {teamLead.display_position || "Team Lead"}
+                    </p>
+                  </div>
+                </div>
+              ) : (
+                <p className="text-gray-500 dark:text-gray-400">
+                  Team leader not assigned
+                </p>
+              )}
+            </div>
+
+            {/* Team Members */}
+            <div>
+              <h3 className="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-300">
+                Team Members
+              </h3>
+              {members && members.length > 0 ? (
+                <div className="grid gap-4 md:grid-cols-2">
+                  {members.map((member, index) => (
+                    <div
+                      key={member.id}
+                      className="flex items-center gap-4 rounded-lg border border-gray-300 p-4 dark:border-gray-600"
+                    >
+                      <div className="relative h-12 w-12">
+                        <Image
+                          src={member.image_url || defaultAvatar}
+                          alt={`${member.first_name} ${member.last_name}`}
+                          fill
+                          className="rounded-full object-cover"
+                        />
+                      </div>
+                      <div>
+                        <p className="font-medium text-gray-900 dark:text-gray-100">
+                          {member.first_name} {member.last_name}
+                        </p>
+                        <p className="text-sm text-gray-600 dark:text-gray-400">
+                          {member.display_position || "Team Member"}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-gray-500 dark:text-gray-400">
+                  No team members assigned
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 4. Project Gallery */}
+      <section className="mt-12">
+        <div className="rounded-lg bg-gray-50 p-6 dark:bg-gray-800/50">
+          <h2 className="mb-6 flex items-center gap-3 text-2xl font-bold">
+            <span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-lg font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+              4
+            </span>
+            Project Gallery
+          </h2>
+
+          {service.gallery && service.gallery.length > 0 ? (
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {service.gallery.map((imageUrl, index) => (
+                <div
+                  key={index}
+                  className="relative h-48 overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600"
+                >
+                  <Image
+                    src={imageUrl}
+                    alt={`Gallery image ${index + 1}`}
+                    fill
+                    className="object-cover transition-transform duration-300 hover:scale-105"
+                  />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <div className="relative h-48 overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600">
+                <Image
+                  src={service.main_image || defaultAvatar}
+                  alt="Project showcase"
+                  fill
+                  className="object-cover"
+                />
+              </div>
+              {service.secondary_image && (
+                <div className="relative h-48 overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600">
+                  <Image
+                    src={service.secondary_image}
+                    alt="Project showcase 2"
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </section>
     </div>
diff --git a/apps/codebility/app/(marketing)/services/page.tsx b/apps/codebility/app/(marketing)/services/page.tsx
index c2c3d9816..0b5346c34 100644
--- a/apps/codebility/app/(marketing)/services/page.tsx
+++ b/apps/codebility/app/(marketing)/services/page.tsx
@@ -25,6 +25,9 @@ interface ProjectData {
   id: string;
   name: string;
   description?: string;
+  tagline?: string;
+  key_features?: string[];
+  gallery?: string[];
   status?: string;
   start_date?: string;
   end_date?: string;
@@ -55,6 +58,9 @@ const ServicesPage = async () => {
     id: item.id,
     name: item.name,
     description: item.description || "",
+    tagline: item.tagline || "",
+    key_features: item.key_features || [],
+    gallery: item.gallery || [],
     main_image: item.main_image || "",
     website_url: item.website_url || "",
     github_link: item.github_link || "",
diff --git a/apps/codebility/app/home/projects/_components/ProjectAddModal.tsx b/apps/codebility/app/home/projects/_components/ProjectAddModal.tsx
index 1f814dfb7..db87f17b7 100644
--- a/apps/codebility/app/home/projects/_components/ProjectAddModal.tsx
+++ b/apps/codebility/app/home/projects/_components/ProjectAddModal.tsx
@@ -19,8 +19,8 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { MemberSelection } from "@/components/ui/MemberSelection";
-import { useModal } from "@/hooks/use-modal-projects";
 import { useModal as useGlobalModal } from "@/hooks/use-modal";
+import { useModal } from "@/hooks/use-modal-projects";
 import { useTechStackStore } from "@/hooks/use-techstack";
 import { Client, Codev, SkillCategory } from "@/types/home/codev";
 import { uploadImage } from "@/utils/uploadImage";
@@ -35,6 +35,9 @@ import ImageCrop from "./ImageCrop";
 export interface ProjectFormData {
   name: string;
   description?: string;
+  tagline?: string;
+  key_features?: string;
+  gallery?: string;
   github_link?: string;
   website_url?: string;
   figma_link?: string;
@@ -69,6 +72,11 @@ const ProjectAddModal = () => {
   const [croppedImage, setCroppedImage] = useState<string | null>(null);
   const [croppedFile, setCroppedFile] = useState<File | null>(null);
 
+  // Gallery states
+  const [galleryImages, setGalleryImages] = useState<
+    { url: string; file: File }[]
+  >([]);
+
   // Loading states
   const [isLoading, setIsLoading] = useState(false);
   const [isDataLoading, setIsDataLoading] = useState(true);
@@ -150,6 +158,7 @@ const ProjectAddModal = () => {
     setProjectImage(null);
     setCroppedImage(null);
     setCroppedFile(null);
+    setGalleryImages([]);
     setSelectedMembers([]);
     setCurrentTeamLeader(null);
     setSelectedCategoryIds([]); // Clear selected categories
@@ -163,33 +172,47 @@ const ProjectAddModal = () => {
       {/* Project Configuration */}
       <div className="grid grid-cols-1 gap-4">
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Project Categories * (Select at least one)</label>
-          <div className="grid grid-cols-2 gap-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800">
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Project Categories * (Select at least one)
+          </label>
+          <div className="grid grid-cols-2 gap-3 rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-800">
             {categories.map((category) => (
               <label
                 key={category.id}
-                className="flex items-center space-x-2 cursor-pointer p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+                className="flex cursor-pointer items-center space-x-2 rounded p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50"
               >
                 <input
                   type="checkbox"
-                  checked={selectedCategoryIds.includes(category.id)}
+                  checked={selectedCategoryIds.includes(Number(category.id))}
                   onChange={(e) => {
                     if (e.target.checked) {
-                      setSelectedCategoryIds([...selectedCategoryIds, category.id]);
+                      setSelectedCategoryIds([
+                        ...selectedCategoryIds,
+                        Number(category.id),
+                      ]);
                     } else {
-                      setSelectedCategoryIds(selectedCategoryIds.filter(id => id !== category.id));
+                      setSelectedCategoryIds(
+                        selectedCategoryIds.filter(
+                          (id) => id !== Number(category.id),
+                        ),
+                      );
                     }
                   }}
-                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:focus:ring-blue-600"
+                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:focus:ring-blue-600"
                 />
-                <span className="text-sm text-gray-700 dark:text-gray-300">{category.name}</span>
+                <span className="text-sm text-gray-700 dark:text-gray-300">
+                  {category.name}
+                </span>
               </label>
             ))}
           </div>
         </div>
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Client</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Client
+          </label>
           <CustomSelect
+            label="Client"
             options={clientOptions}
             onChange={(value) => setValue("client_id", value)}
             placeholder="Select Client"
@@ -198,16 +221,22 @@ const ProjectAddModal = () => {
           />
         </div>
       </div>
-      
+
       {/* Team Configuration */}
       <div className="border-t pt-6">
-        <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-4">Team Configuration</h4>
+        <h4 className="text-md mb-4 font-medium text-gray-900 dark:text-gray-100">
+          Team Configuration
+        </h4>
         <div className="space-y-6">
           <div className="space-y-1">
-            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Team Leader *</label>
+            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+              Team Leader *
+            </label>
             <CustomSelect
+              label="Team Leader"
               options={userOptions.filter(
-                (user) => !selectedMembers.find((member) => member.id === user.value),
+                (user) =>
+                  !selectedMembers.find((member) => member.id === user.value),
               )}
               value={currentTeamLeader?.id || ""}
               onChange={handleTeamLeaderSelect}
@@ -216,9 +245,11 @@ const ProjectAddModal = () => {
               searchable
             />
           </div>
-          
+
           <div className="space-y-1">
-            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Team Members</label>
+            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+              Team Members
+            </label>
             <MemberSelection
               users={users.filter((user) => user.id !== currentTeamLeader?.id)}
               selectedMembers={selectedMembers}
@@ -226,41 +257,46 @@ const ProjectAddModal = () => {
                 setSelectedMembers((prev) => [...prev, member])
               }
               onMemberRemove={(memberId) =>
-                setSelectedMembers((prev) => prev.filter((m) => m.id !== memberId))
+                setSelectedMembers((prev) =>
+                  prev.filter((m) => m.id !== memberId),
+                )
               }
               excludeMembers={currentTeamLeader ? [currentTeamLeader.id] : []}
             />
           </div>
         </div>
       </div>
-      
+
       {/* Tech Stack Selection */}
       <div className="border-t pt-6">
-        <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-4">Technology Stack</h4>
+        <h4 className="text-md mb-4 font-medium text-gray-900 dark:text-gray-100">
+          Technology Stack
+        </h4>
         <div className="space-y-4">
           <Button
             type="button"
             variant="outline"
             onClick={() => openGlobalModal("techStackModal")}
-            className="w-full h-12 justify-start text-left border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-950 transition-colors"
+            className="h-12 w-full justify-start border-2 border-dashed border-gray-300 text-left transition-colors hover:border-blue-500 hover:bg-blue-50 dark:border-gray-600 dark:hover:bg-blue-950"
           >
             <div className="flex items-center gap-3">
-              <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">+</span>
-              {selectedTechStack.length > 0 
-                ? `${selectedTechStack.length} technology(ies) selected` 
-                : "Select Technologies Used"
-              }
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                +
+              </span>
+              {selectedTechStack.length > 0
+                ? `${selectedTechStack.length} technology(ies) selected`
+                : "Select Technologies Used"}
             </div>
           </Button>
-          
+
           {/* Display selected tech stack */}
           {selectedTechStack.length > 0 && (
-            <div className="bg-blue-50 dark:bg-blue-950/30 rounded-lg p-4">
+            <div className="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
               <div className="flex flex-wrap gap-2">
                 {selectedTechStack.map((tech, index) => (
                   <span
                     key={index}
-                    className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-600 text-white shadow-sm"
+                    className="inline-flex items-center rounded-full bg-blue-600 px-3 py-1 text-sm font-medium text-white shadow-sm"
                   >
                     {tech}
                   </span>
@@ -287,23 +323,52 @@ const ProjectAddModal = () => {
     try {
       const form = new FormData();
 
-      // Upload image if provided
+      // Upload main image if provided
       if (croppedFile) {
-        const publicUrl = await uploadImage(croppedFile, {
+        const uploadResult = await uploadImage(croppedFile, {
           bucket: "codebility",
           folder: `projectImage/${Date.now()}_${croppedFile.name.replace(/\s+/g, "_")}`,
         });
 
-        if (!publicUrl) {
+        if (!uploadResult) {
           throw new Error("Failed to upload image");
         }
-        form.append("main_image", publicUrl);
+        form.append("main_image", uploadResult);
+      }
+
+      // Upload gallery images if provided
+      if (galleryImages.length > 0) {
+        const galleryUrls: string[] = [];
+        for (const galleryImage of galleryImages) {
+          const uploadResult = await uploadImage(galleryImage.file, {
+            bucket: "codebility",
+            folder: `projectGallery/${Date.now()}_${galleryImage.file.name.replace(/\s+/g, "_")}`,
+          });
+          if (uploadResult) {
+            galleryUrls.push(uploadResult);
+          }
+        }
+        if (galleryUrls.length > 0) {
+          form.append("gallery", JSON.stringify(galleryUrls));
+        }
       }
 
       // Add form data
       Object.entries(formData).forEach(([key, value]) => {
         if (value !== undefined && value !== null && value !== "") {
-          form.append(key, value);
+          // Handle array fields
+          if (key === "key_features") {
+            const arrayValue = value
+              .split(",")
+              .map((item) => item.trim())
+              .filter(Boolean);
+            if (arrayValue.length > 0) {
+              form.append(key, JSON.stringify(arrayValue));
+            }
+          } else if (key !== "gallery") {
+            // Skip gallery as it's handled separately
+            form.append(key, value);
+          }
         }
       });
 
@@ -356,33 +421,37 @@ const ProjectAddModal = () => {
       {/* Image Preview */}
       <div className="relative w-full max-w-md">
         {croppedImage ? (
-          <div className="relative h-48 w-full rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 overflow-hidden">
+          <div className="relative h-48 w-full overflow-hidden rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600">
             <Image
               src={croppedImage}
               alt="Project Preview"
               fill
-              className="object-cover cursor-pointer hover:opacity-80 transition-opacity"
+              className="cursor-pointer object-cover transition-opacity hover:opacity-80"
               onClick={() => setOpenImageCropper(true)}
             />
-            <div className="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
-              <span className="text-white text-sm font-medium">Click to edit</span>
+            <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition-opacity hover:opacity-100">
+              <span className="text-sm font-medium text-white">
+                Click to edit
+              </span>
             </div>
           </div>
         ) : (
-          <div className="h-48 w-full rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 flex flex-col items-center justify-center gap-3">
+          <div className="flex h-48 w-full flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800">
             <ProjectAvatar size={64} />
-            <p className="text-sm text-gray-500 dark:text-gray-400">No image selected</p>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              No image selected
+            </p>
           </div>
         )}
       </div>
-      
+
       {/* Upload Controls */}
       <div className="flex gap-3">
         <label
           htmlFor="image-upload"
-          className="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 cursor-pointer transition-colors"
+          className="inline-flex cursor-pointer items-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
         >
-          {croppedImage ? 'Change Image' : 'Upload Image'}
+          {croppedImage ? "Change Image" : "Upload Image"}
         </label>
         <input
           id="image-upload"
@@ -413,13 +482,13 @@ const ProjectAddModal = () => {
               setCroppedImage(null);
               setCroppedFile(null);
             }}
-            className="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors"
+            className="inline-flex items-center rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
           >
             Remove
           </button>
         )}
       </div>
-      
+
       <ImageCrop
         image={projectImage || ""}
         setImage={setCroppedImage}
@@ -436,70 +505,169 @@ const ProjectAddModal = () => {
       {/* Basic Information */}
       <div className="grid gap-4">
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Project Name *</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Project Name *
+          </label>
           <Input
             type="text"
             placeholder="Enter a descriptive project name"
             {...register("name", { required: "Project name is required" })}
-            className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+            className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
           />
           {errors.name && (
-            <p className="text-sm text-red-500 flex items-center gap-1">
-              <span className="w-4 h-4 text-red-500">⚠</span>
+            <p className="flex items-center gap-1 text-sm text-red-500">
+              <span className="h-4 w-4 text-red-500">⚠</span>
               {errors.name.message}
             </p>
           )}
         </div>
-        
+
+        <div className="space-y-2">
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Tagline
+          </label>
+          <Input
+            type="text"
+            placeholder="A catchy tagline for your project"
+            {...register("tagline")}
+            className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
+          />
+        </div>
+
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Project Description</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Project Description
+          </label>
           <textarea
             placeholder="Describe what this project is about, its goals, and key features"
             {...register("description")}
             rows={3}
-            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none bg-white dark:bg-gray-800"
+            className="w-full resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Key Features
+          </label>
+          <textarea
+            placeholder="Enter key features separated by commas (e.g., Responsive Design, Modern UI/UX, Cross-platform)"
+            {...register("key_features")}
+            rows={2}
+            className="w-full resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
           />
         </div>
-        
+
+        <div className="space-y-2">
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Gallery Images
+          </label>
+          <div className="space-y-3">
+            <label
+              htmlFor="gallery-upload"
+              className="inline-flex cursor-pointer items-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            >
+              + Add Gallery Images
+            </label>
+            <input
+              id="gallery-upload"
+              type="file"
+              accept="image/*"
+              multiple
+              className="hidden"
+              onChange={async (e: ChangeEvent<HTMLInputElement>) => {
+                const files = Array.from(e.target.files || []);
+                for (const file of files) {
+                  const objectUrl = URL.createObjectURL(file);
+                  setGalleryImages((prev) => [
+                    ...prev,
+                    { url: objectUrl, file },
+                  ]);
+                }
+                // Reset the input value to allow selecting the same files again
+                e.target.value = '';
+              }}
+            />
+
+            {galleryImages.length > 0 && (
+              <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
+                {galleryImages.map((image, index) => (
+                  <div key={index} className="group relative">
+                    <div className="relative h-24 w-full overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600">
+                      <Image
+                        src={image.url}
+                        alt={`Gallery ${index + 1}`}
+                        fill
+                        className="object-cover"
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setGalleryImages((prev) =>
+                          prev.filter((_, i) => i !== index),
+                        );
+                      }}
+                      className="absolute -right-2 -top-2 h-6 w-6 rounded-full bg-red-500 text-xs text-white transition-colors hover:bg-red-600"
+                    >
+                      ×
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Start Date</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Start Date
+          </label>
           <Input
             type="date"
             {...register("start_date")}
-            className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+            className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
           />
         </div>
       </div>
-      
+
       {/* External Links */}
       <div className="border-t pt-3">
-        <h4 className="text-xs font-medium text-gray-900 dark:text-gray-100 mb-2">External Links (Optional)</h4>
+        <h4 className="mb-2 text-xs font-medium text-gray-900 dark:text-gray-100">
+          External Links (Optional)
+        </h4>
         <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
           <div className="space-y-1">
-            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">GitHub Repository</label>
+            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">
+              GitHub Repository
+            </label>
             <Input
               type="url"
               placeholder="https://github.com/..."
               {...register("github_link")}
-              className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+              className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
             />
           </div>
           <div className="space-y-1">
-            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">Live Website</label>
+            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">
+              Live Website
+            </label>
             <Input
               type="url"
               placeholder="https://yourproject.com"
               {...register("website_url")}
-              className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+              className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
             />
           </div>
           <div className="space-y-1">
-            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">Figma Design</label>
+            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">
+              Figma Design
+            </label>
             <Input
               type="url"
               placeholder="https://figma.com/..."
               {...register("figma_link")}
-              className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+              className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
             />
           </div>
         </div>
@@ -509,47 +677,61 @@ const ProjectAddModal = () => {
 
   return (
     <Dialog open={isModalOpen} onOpenChange={resetForm}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden">
+      <DialogContent className="max-h-[80vh] max-w-2xl overflow-hidden">
         <DialogHeader className="border-b pb-2">
-          <DialogTitle className="text-lg font-bold">{PROJECT_ADD_MODAL_TITLE}</DialogTitle>
+          <DialogTitle className="text-lg font-bold">
+            {PROJECT_ADD_MODAL_TITLE}
+          </DialogTitle>
           <DialogDescription className="text-xs text-gray-600 dark:text-gray-400">
             Fill in the project details below to create a new project.
           </DialogDescription>
         </DialogHeader>
-        
-        <div className="overflow-y-auto flex-1 p-3" style={{ maxHeight: "calc(80vh - 200px)" }}>
+
+        <div
+          className="flex-1 overflow-y-auto p-3"
+          style={{ maxHeight: "calc(80vh - 200px)" }}
+        >
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             {/* Project Image Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">1</span>
-                Project Image <span className="text-xs font-normal text-gray-500 dark:text-gray-400">(Optional)</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  1
+                </span>
+                Project Image{" "}
+                <span className="text-xs font-normal text-gray-500 dark:text-gray-400">
+                  (Optional)
+                </span>
               </h3>
               <ImageUploadSection />
             </div>
-            
+
             {/* Project Details Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">2</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  2
+                </span>
                 Project Information
               </h3>
               <ProjectDetailsSection />
             </div>
-            
+
             {/* Team & Configuration Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">3</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  3
+                </span>
                 Team & Configuration
               </h3>
               <SelectSection />
             </div>
           </form>
         </div>
-        
-        <DialogFooter className="border-t pt-4 bg-gray-50 dark:bg-gray-800/30">
-          <div className="flex justify-end gap-3 w-full">
+
+        <DialogFooter className="border-t bg-gray-50 pt-4 dark:bg-gray-800/30">
+          <div className="flex w-full justify-end gap-3">
             <Button
               type="button"
               variant="outline"
@@ -563,11 +745,11 @@ const ProjectAddModal = () => {
               type="submit"
               disabled={isLoading || isDataLoading}
               onClick={handleSubmit(onSubmit)}
-              className="min-w-[120px] bg-blue-600 hover:bg-blue-700 text-white"
+              className="min-w-[120px] bg-blue-600 text-white hover:bg-blue-700"
             >
               {isLoading ? (
                 <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
                   Creating...
                 </div>
               ) : (
diff --git a/apps/codebility/app/home/projects/_components/ProjectEditModal.tsx b/apps/codebility/app/home/projects/_components/ProjectEditModal.tsx
index 905539743..d57160760 100644
--- a/apps/codebility/app/home/projects/_components/ProjectEditModal.tsx
+++ b/apps/codebility/app/home/projects/_components/ProjectEditModal.tsx
@@ -20,8 +20,8 @@ import {
 } from "@/components/ui/dialog";
 import { MemberSelection } from "@/components/ui/MemberSelection";
 import { Skeleton } from "@/components/ui/skeleton/skeleton";
-import { useModal } from "@/hooks/use-modal-projects";
 import { useModal as useGlobalModal } from "@/hooks/use-modal";
+import { useModal } from "@/hooks/use-modal-projects";
 import { useTechStackStore } from "@/hooks/use-techstack";
 import { Client, Codev, Project, SkillCategory } from "@/types/home/codev";
 import { uploadImage } from "@/utils/uploadImage";
@@ -48,6 +48,9 @@ const PROJECT_STATUSES = [
 export interface ProjectFormData {
   name: string;
   description?: string;
+  tagline?: string;
+  key_features?: string;
+  gallery?: string;
   github_link?: string;
   website_url?: string;
   figma_link?: string;
@@ -62,7 +65,11 @@ export interface ProjectFormData {
 const ProjectEditModal = () => {
   const { isOpen, onClose, type, data } = useModal();
   const { onOpen: openGlobalModal } = useGlobalModal();
-  const { stack: selectedTechStack, clearStack, setStack } = useTechStackStore();
+  const {
+    stack: selectedTechStack,
+    clearStack,
+    setStack,
+  } = useTechStackStore();
   const isModalOpen = isOpen && type === "projectEditModal";
   const queryClient = useQueryClient();
 
@@ -80,6 +87,11 @@ const ProjectEditModal = () => {
   const [croppedFile, setCroppedFile] = useState<File | null>(null);
   const [imageLoaded, setImageLoaded] = useState(false);
 
+  // Gallery states
+  const [galleryImages, setGalleryImages] = useState<
+    { url: string; file: File }[]
+  >([]);
+
   // Loading states
   const [isLoading, setIsLoading] = useState(false);
 
@@ -131,7 +143,8 @@ const ProjectEditModal = () => {
 
   // Only show loading for essential data that blocks form interaction
   const isDataLoading = false; // Allow form to show immediately
-  const isSelectDataLoading = isUsersLoading || isClientsLoading || isCategoriesLoading;
+  const isSelectDataLoading =
+    isUsersLoading || isClientsLoading || isCategoriesLoading;
 
   // Prepare select options using useMemo
   const userOptions = useMemo(
@@ -167,6 +180,11 @@ const ProjectEditModal = () => {
       // Set form values immediately - don't wait for users to load
       setValue("name", data.name || "");
       setValue("description", data.description || "");
+      setValue("tagline", data.tagline || "");
+      setValue(
+        "key_features",
+        data.key_features && Array.isArray(data.key_features) ? data.key_features.join(", ") : "",
+      );
       setValue("github_link", data.github_link || "");
       setValue("website_url", data.website_url || "");
       setValue("figma_link", data.figma_link || "");
@@ -174,7 +192,7 @@ const ProjectEditModal = () => {
 
       // Set selected categories from the data
       if (data.categories && Array.isArray(data.categories)) {
-        setSelectedCategoryIds(data.categories.map(cat => cat.id));
+        setSelectedCategoryIds(data.categories.map((cat) => cat.id));
       } else {
         setSelectedCategoryIds([]);
       }
@@ -261,6 +279,7 @@ const ProjectEditModal = () => {
     setProjectImage(null);
     setCroppedImage(null);
     setCroppedFile(null);
+    setGalleryImages([]);
     setSelectedMembers([]);
     setCurrentTeamLeader(null);
     setImageLoaded(false);
@@ -274,7 +293,7 @@ const ProjectEditModal = () => {
       {/* Image Preview */}
       <div className="relative w-full max-w-md">
         {croppedImage ? (
-          <div className="relative h-48 w-full rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 overflow-hidden">
+          <div className="relative h-48 w-full overflow-hidden rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600">
             {!imageLoaded && (
               <div className="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700">
                 <Skeleton className="h-full w-full" />
@@ -284,31 +303,35 @@ const ProjectEditModal = () => {
               src={croppedImage}
               alt="Project Preview"
               fill
-              className={`object-cover cursor-pointer hover:opacity-80 transition-opacity ${
+              className={`cursor-pointer object-cover transition-opacity hover:opacity-80 ${
                 imageLoaded ? "opacity-100" : "opacity-0"
               }`}
               onClick={() => setOpenImageCropper(true)}
               onLoad={() => setImageLoaded(true)}
             />
-            <div className="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
-              <span className="text-white text-sm font-medium">Click to edit</span>
+            <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition-opacity hover:opacity-100">
+              <span className="text-sm font-medium text-white">
+                Click to edit
+              </span>
             </div>
           </div>
         ) : (
-          <div className="h-48 w-full rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 flex flex-col items-center justify-center gap-3">
+          <div className="flex h-48 w-full flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800">
             <ProjectAvatar size={64} />
-            <p className="text-sm text-gray-500 dark:text-gray-400">No image selected</p>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              No image selected
+            </p>
           </div>
         )}
       </div>
-      
+
       {/* Upload Controls */}
       <div className="flex gap-3">
         <label
           htmlFor="image-upload"
-          className="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 cursor-pointer transition-colors"
+          className="inline-flex cursor-pointer items-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
         >
-          {croppedImage ? 'Change Image' : 'Upload Image'}
+          {croppedImage ? "Change Image" : "Upload Image"}
         </label>
         <input
           id="image-upload"
@@ -321,13 +344,13 @@ const ProjectEditModal = () => {
           <button
             type="button"
             onClick={handleRemoveImage}
-            className="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors"
+            className="inline-flex items-center rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
           >
             Remove
           </button>
         )}
       </div>
-      
+
       <ImageCrop
         image={projectImage || ""}
         setImage={setCroppedImage}
@@ -344,84 +367,169 @@ const ProjectEditModal = () => {
       {/* Basic Information */}
       <div className="grid gap-4">
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Project Name *</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Project Name *
+          </label>
           <Input
             type="text"
             placeholder="Enter a descriptive project name"
             {...register("name", { required: "Project name is required" })}
-            className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+            className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
           />
           {errors.name && (
-            <p className="text-sm text-red-500 flex items-center gap-1">
-              <span className="w-4 h-4 text-red-500">⚠</span>
+            <p className="flex items-center gap-1 text-sm text-red-500">
+              <span className="h-4 w-4 text-red-500">⚠</span>
               {errors.name.message}
             </p>
           )}
         </div>
-        
+
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Project Description *</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Tagline
+          </label>
+          <Input
+            type="text"
+            placeholder="A catchy tagline for your project"
+            {...register("tagline")}
+            className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Project Description
+          </label>
           <textarea
             placeholder="Describe what this project is about, its goals, and key features"
-            {...register("description", {
-              required: "Project description is required",
-            })}
+            {...register("description")}
             rows={3}
-            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none bg-white dark:bg-gray-800"
+            className="w-full resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
           />
-          {errors.description && (
-            <p className="text-sm text-red-500 flex items-center gap-1">
-              <span className="w-4 h-4 text-red-500">⚠</span>
-              {errors.description.message}
-            </p>
-          )}
         </div>
-        
+
+        <div className="space-y-2">
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Key Features
+          </label>
+          <textarea
+            placeholder="Enter key features separated by commas (e.g., Responsive Design, Modern UI/UX, Cross-platform)"
+            {...register("key_features")}
+            rows={2}
+            className="w-full resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+          />
+        </div>
+
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Start Date *</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Gallery Images
+          </label>
+          <div className="space-y-3">
+            <label
+              htmlFor="gallery-upload"
+              className="inline-flex cursor-pointer items-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            >
+              + Add Gallery Images
+            </label>
+            <input
+              id="gallery-upload"
+              type="file"
+              accept="image/*"
+              multiple
+              className="hidden"
+              onChange={async (e: ChangeEvent<HTMLInputElement>) => {
+                const files = Array.from(e.target.files || []);
+                for (const file of files) {
+                  const objectUrl = URL.createObjectURL(file);
+                  setGalleryImages((prev) => [
+                    ...prev,
+                    { url: objectUrl, file },
+                  ]);
+                }
+                // Reset the input value to allow selecting the same files again
+                e.target.value = '';
+              }}
+            />
+
+            {galleryImages.length > 0 && (
+              <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
+                {galleryImages.map((image, index) => (
+                  <div key={index} className="group relative">
+                    <div className="relative h-24 w-full overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600">
+                      <Image
+                        src={image.url}
+                        alt={`Gallery ${index + 1}`}
+                        fill
+                        className="object-cover"
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setGalleryImages((prev) =>
+                          prev.filter((_, i) => i !== index),
+                        );
+                      }}
+                      className="absolute -right-2 -top-2 h-6 w-6 rounded-full bg-red-500 text-xs text-white transition-colors hover:bg-red-600"
+                    >
+                      ×
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Start Date
+          </label>
           <Input
             type="date"
-            {...register("start_date", { required: "Start date is required" })}
-            className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+            {...register("start_date")}
+            className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
           />
-          {errors.start_date && (
-            <p className="text-sm text-red-500 flex items-center gap-1">
-              <span className="w-4 h-4 text-red-500">⚠</span>
-              {errors.start_date.message}
-            </p>
-          )}
         </div>
       </div>
-      
+
       {/* External Links */}
       <div className="border-t pt-3">
-        <h4 className="text-xs font-medium text-gray-900 dark:text-gray-100 mb-2">External Links (Optional)</h4>
+        <h4 className="mb-2 text-xs font-medium text-gray-900 dark:text-gray-100">
+          External Links (Optional)
+        </h4>
         <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
           <div className="space-y-1">
-            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">GitHub Repository</label>
+            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">
+              GitHub Repository
+            </label>
             <Input
               type="url"
               placeholder="https://github.com/..."
               {...register("github_link")}
-              className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+              className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
             />
           </div>
           <div className="space-y-1">
-            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">Live Website</label>
+            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">
+              Live Website
+            </label>
             <Input
               type="url"
               placeholder="https://yourproject.com"
               {...register("website_url")}
-              className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+              className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
             />
           </div>
           <div className="space-y-1">
-            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">Figma Design</label>
+            <label className="text-xs font-medium text-gray-700 dark:text-gray-300">
+              Figma Design
+            </label>
             <Input
               type="url"
               placeholder="https://figma.com/..."
               {...register("figma_link")}
-              className="h-11 focus:ring-2 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
+              className="h-11 border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
             />
           </div>
         </div>
@@ -435,49 +543,68 @@ const ProjectEditModal = () => {
       {/* Project Configuration */}
       <div className="grid grid-cols-1 gap-4">
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Project Categories * (Select at least one)</label>
-          <div className="grid grid-cols-2 gap-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800">
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Project Categories * (Select at least one)
+          </label>
+          <div className="grid grid-cols-2 gap-3 rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-800">
             {categories.map((category) => (
               <label
                 key={category.id}
-                className="flex items-center space-x-2 cursor-pointer p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+                className="flex cursor-pointer items-center space-x-2 rounded p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50"
               >
                 <input
                   type="checkbox"
                   checked={selectedCategoryIds.includes(category.id)}
                   onChange={(e) => {
                     if (e.target.checked) {
-                      setSelectedCategoryIds([...selectedCategoryIds, category.id]);
+                      setSelectedCategoryIds([
+                        ...selectedCategoryIds,
+                        category.id,
+                      ]);
                     } else {
-                      setSelectedCategoryIds(selectedCategoryIds.filter(id => id !== category.id));
+                      setSelectedCategoryIds(
+                        selectedCategoryIds.filter((id) => id !== category.id),
+                      );
                     }
                   }}
-                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:focus:ring-blue-600"
+                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:focus:ring-blue-600"
                 />
-                <span className="text-sm text-gray-700 dark:text-gray-300">{category.name}</span>
+                <span className="text-sm text-gray-700 dark:text-gray-300">
+                  {category.name}
+                </span>
               </label>
             ))}
           </div>
         </div>
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Client *</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Client *
+          </label>
           <CustomSelect
+            label="Client"
             options={clientOptions}
             onChange={(value) => setValue("client_id", value)}
             value={data?.client_id || ""}
-            placeholder={isClientsLoading ? "Loading clients..." : "Select Client"}
+            placeholder={
+              isClientsLoading ? "Loading clients..." : "Select Client"
+            }
             disabled={isClientsLoading}
             searchable
           />
         </div>
       </div>
-      
+
       {/* Project Status */}
       <div className="border-t pt-6">
-        <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-4">Project Status</h4>
+        <h4 className="text-md mb-4 font-medium text-gray-900 dark:text-gray-100">
+          Project Status
+        </h4>
         <div className="space-y-2">
-          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Status *</label>
+          <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+            Status *
+          </label>
           <CustomSelect
+            label="Status"
             options={PROJECT_STATUSES}
             value={selectedStatus}
             onChange={(value) => setSelectedStatus(value)}
@@ -486,46 +613,60 @@ const ProjectEditModal = () => {
           />
         </div>
       </div>
-      
+
       {/* Team Configuration */}
       <div className="border-t pt-6">
-        <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-4">Team Configuration</h4>
+        <h4 className="text-md mb-4 font-medium text-gray-900 dark:text-gray-100">
+          Team Configuration
+        </h4>
         <div className="space-y-6">
           <div className="space-y-1">
-            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Team Leader *</label>
+            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+              Team Leader *
+            </label>
             <CustomSelect
+              label="Team Leader"
               options={userOptions.filter(
-                (user) => !selectedMembers.find((member) => member.id === user.value),
+                (user) =>
+                  !selectedMembers.find((member) => member.id === user.value),
               )}
               value={currentTeamLeader?.id || ""}
               onChange={(value) => {
                 const leader = users.find((u) => u.id === value);
                 if (leader) setCurrentTeamLeader(leader);
               }}
-              placeholder={isUsersLoading ? "Loading users..." : "Select Team Leader"}
+              placeholder={
+                isUsersLoading ? "Loading users..." : "Select Team Leader"
+              }
               disabled={isUsersLoading}
               searchable
             />
           </div>
-          
+
           <div className="space-y-1">
-            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Team Members</label>
+            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+              Team Members
+            </label>
             {isUsersLoading ? (
-              <div className="p-4 border border-gray-300 dark:border-gray-600 rounded-lg">
+              <div className="rounded-lg border border-gray-300 p-4 dark:border-gray-600">
                 <div className="flex items-center gap-2 text-sm text-gray-500">
-                  <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin" />
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" />
                   Loading team members...
                 </div>
               </div>
             ) : (
               <MemberSelection
-                users={users.filter((user) => user.id !== currentTeamLeader?.id)}
+                users={users.filter(
+                  (user) => user.id !== currentTeamLeader?.id,
+                )}
                 selectedMembers={selectedMembers}
                 onMemberAdd={(member) =>
                   setSelectedMembers((prev) => [...prev, member])
                 }
                 onMemberRemove={(memberId) =>
-                  setSelectedMembers((prev) => prev.filter((m) => m.id !== memberId))
+                  setSelectedMembers((prev) =>
+                    prev.filter((m) => m.id !== memberId),
+                  )
                 }
                 excludeMembers={currentTeamLeader ? [currentTeamLeader.id] : []}
               />
@@ -533,34 +674,37 @@ const ProjectEditModal = () => {
           </div>
         </div>
       </div>
-      
+
       {/* Tech Stack Selection */}
       <div className="border-t pt-6">
-        <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-4">Technology Stack</h4>
+        <h4 className="text-md mb-4 font-medium text-gray-900 dark:text-gray-100">
+          Technology Stack
+        </h4>
         <div className="space-y-4">
           <Button
             type="button"
             variant="outline"
             onClick={() => openGlobalModal("techStackModal")}
-            className="w-full h-12 justify-start text-left border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-950 transition-colors"
+            className="h-12 w-full justify-start border-2 border-dashed border-gray-300 text-left transition-colors hover:border-blue-500 hover:bg-blue-50 dark:border-gray-600 dark:hover:bg-blue-950"
           >
             <div className="flex items-center gap-3">
-              <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">+</span>
-              {selectedTechStack.length > 0 
-                ? `${selectedTechStack.length} technology(ies) selected` 
-                : "Select Technologies Used"
-              }
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                +
+              </span>
+              {selectedTechStack.length > 0
+                ? `${selectedTechStack.length} technology(ies) selected`
+                : "Select Technologies Used"}
             </div>
           </Button>
-          
+
           {/* Display selected tech stack */}
           {selectedTechStack.length > 0 && (
-            <div className="bg-blue-50 dark:bg-blue-950/30 rounded-lg p-4">
+            <div className="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
               <div className="flex flex-wrap gap-2">
                 {selectedTechStack.map((tech, index) => (
                   <span
                     key={index}
-                    className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-600 text-white shadow-sm"
+                    className="inline-flex items-center rounded-full bg-blue-600 px-3 py-1 text-sm font-medium text-white shadow-sm"
                   >
                     {tech}
                   </span>
@@ -601,28 +745,62 @@ const ProjectEditModal = () => {
       // Handle image upload if there's a new cropped file
       if (croppedFile) {
         console.log("Uploading new image");
-        const publicUrl = await uploadImage(croppedFile, {
+        const uploadResult = await uploadImage(croppedFile, {
           bucket: "codebility",
           folder: `projectImage/${Date.now()}_${croppedFile.name.replace(/\s+/g, "_")}`,
         });
 
-        if (!publicUrl) {
+        if (!uploadResult) {
           throw new Error("Failed to upload image");
         }
 
         // Set the new image URL
-        console.log("Setting new main_image:", publicUrl);
-        form.append("main_image", publicUrl);
+        console.log("Setting new main_image:", uploadResult);
+        form.append("main_image", uploadResult);
       } else if (data.main_image && croppedImage) {
         // If using existing image without changes
         console.log("Keeping existing image:", data.main_image);
         form.append("main_image", data.main_image);
       }
 
+      // Upload gallery images if provided
+      if (galleryImages.length > 0) {
+        const galleryUrls: string[] = [];
+        for (const galleryImage of galleryImages) {
+          const uploadResult = await uploadImage(galleryImage.file, {
+            bucket: "codebility",
+            folder: `projectGallery/${Date.now()}_${galleryImage.file.name.replace(/\s+/g, "_")}`,
+          });
+          if (uploadResult) {
+            galleryUrls.push(uploadResult);
+          }
+        }
+        if (galleryUrls.length > 0) {
+          form.append("gallery", JSON.stringify(galleryUrls));
+        }
+      }
+
       // Add form data - make sure we add all fields
       Object.entries(formData).forEach(([key, value]) => {
-        if (value !== undefined && value !== null && key !== "main_image") {
-          form.append(key, value);
+        if (
+          value !== undefined &&
+          value !== null &&
+          value !== "" &&
+          key !== "main_image" &&
+          key !== "gallery"
+        ) {
+          // Handle array fields
+          if (key === "key_features") {
+            const arrayValue = value
+              .split(",")
+              .map((item) => item.trim())
+              .filter(Boolean);
+            if (arrayValue.length > 0) {
+              form.append(key, JSON.stringify(arrayValue));
+            }
+          } else {
+            form.append(key, value);
+          }
         }
       });
 
@@ -680,42 +858,51 @@ const ProjectEditModal = () => {
 
   return (
     <Dialog open={isModalOpen} onOpenChange={resetForm}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden">
+      <DialogContent className="max-h-[80vh] max-w-2xl overflow-hidden">
         <DialogHeader className="border-b pb-2">
           <DialogTitle className="text-lg font-bold">Edit Project</DialogTitle>
           <p className="text-xs text-gray-600 dark:text-gray-400">
             Update the project details below to modify your project.
           </p>
         </DialogHeader>
-        
-        <div className="overflow-y-auto flex-1 p-3" style={{ maxHeight: "calc(80vh - 200px)" }}>
+
+        <div
+          className="flex-1 overflow-y-auto p-3"
+          style={{ maxHeight: "calc(80vh - 200px)" }}
+        >
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             {/* Project Image Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">1</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  1
+                </span>
                 Project Image
               </h3>
               <ImageUploadSection />
             </div>
-            
+
             {/* Project Details Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">2</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  2
+                </span>
                 Project Information
               </h3>
               <ProjectDetailsSection />
             </div>
-            
+
             {/* Team & Configuration Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">3</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  3
+                </span>
                 Team & Configuration
                 {isSelectDataLoading && (
                   <div className="ml-2 flex items-center gap-2 text-sm text-gray-500">
-                    <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin" />
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" />
                     Loading...
                   </div>
                 )}
@@ -724,9 +911,9 @@ const ProjectEditModal = () => {
             </div>
           </form>
         </div>
-        
-        <DialogFooter className="border-t pt-4 bg-gray-50 dark:bg-gray-800/30">
-          <div className="flex justify-end gap-3 w-full">
+
+        <DialogFooter className="border-t bg-gray-50 pt-4 dark:bg-gray-800/30">
+          <div className="flex w-full justify-end gap-3">
             <Button
               type="button"
               variant="outline"
@@ -740,11 +927,11 @@ const ProjectEditModal = () => {
               type="submit"
               disabled={isLoading}
               onClick={handleSubmit(onSubmit)}
-              className="min-w-[120px] bg-blue-600 hover:bg-blue-700 text-white"
+              className="min-w-[120px] bg-blue-600 text-white hover:bg-blue-700"
             >
               {isLoading ? (
                 <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
                   Updating...
                 </div>
               ) : (
diff --git a/apps/codebility/app/home/projects/_components/ProjectViewModal.tsx b/apps/codebility/app/home/projects/_components/ProjectViewModal.tsx
index 4025ec773..fc0a5d081 100644
--- a/apps/codebility/app/home/projects/_components/ProjectViewModal.tsx
+++ b/apps/codebility/app/home/projects/_components/ProjectViewModal.tsx
@@ -74,25 +74,32 @@ const ProjectViewModal = () => {
 
   return (
     <Dialog open={isModalOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden">
+      <DialogContent className="max-h-[80vh] max-w-2xl overflow-hidden">
         <DialogHeader className="border-b pb-2">
-          <DialogTitle className="text-lg font-bold">Project Details</DialogTitle>
+          <DialogTitle className="text-lg font-bold">
+            Project Details
+          </DialogTitle>
           <p className="text-xs text-gray-600 dark:text-gray-400">
             Complete overview of the project information and team.
           </p>
         </DialogHeader>
 
-        <div className="overflow-y-auto flex-1 p-3" style={{ maxHeight: "calc(80vh - 200px)" }}>
+        <div
+          className="flex-1 overflow-y-auto p-3"
+          style={{ maxHeight: "calc(80vh - 200px)" }}
+        >
           <div className="space-y-4">
             {/* Project Image Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">1</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  1
+                </span>
                 Project Image
               </h3>
               <div className="flex justify-center">
                 {data?.main_image ? (
-                  <div className="relative h-64 w-full max-w-md rounded-lg overflow-hidden border-2 border-gray-300 dark:border-gray-600">
+                  <div className="relative h-64 w-full max-w-md overflow-hidden rounded-lg border-2 border-gray-300 dark:border-gray-600">
                     {!imageLoaded && (
                       <div className="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700">
                         <Skeleton className="h-full w-full rounded-lg" />
@@ -111,47 +118,92 @@ const ProjectViewModal = () => {
                     />
                   </div>
                 ) : (
-                  <div className="h-64 w-full max-w-md rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 flex flex-col items-center justify-center gap-3">
+                  <div className="flex h-64 w-full max-w-md flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800">
                     <DefaultAvatar size={80} />
-                    <p className="text-sm text-gray-500 dark:text-gray-400">No image available</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      No image available
+                    </p>
                   </div>
                 )}
               </div>
             </div>
 
             {/* Project Information Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">2</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  2
+                </span>
                 Project Information
               </h3>
-              
+
               <div className="grid gap-6 md:grid-cols-2">
                 {/* Project Details */}
                 <div className="space-y-4">
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Project Name</h4>
+                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Project Name
+                    </h4>
                     <p className="text-xl font-medium text-blue-600 dark:text-blue-400">
                       {data?.name}
                     </p>
                   </div>
 
+                  <div>
+                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Tagline
+                    </h4>
+                    <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+                      {data?.tagline ||
+                        "Innovative solutions for modern challenges"}
+                    </p>
+                  </div>
+
                   {data?.description && (
                     <div>
-                      <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Description</h4>
-                      <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">{data.description}</p>
+                      <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                        Description
+                      </h4>
+                      <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+                        {data.description}
+                      </p>
                     </div>
                   )}
 
+                  <div>
+                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Key Features
+                    </h4>
+                    <div className="space-y-1">
+                      {(data?.key_features && Array.isArray(data.key_features) && data.key_features.length > 0
+                        ? data.key_features
+                        : [
+                            "Responsive Design",
+                            "Modern UI/UX",
+                            "Cross-platform Compatibility",
+                          ]
+                      ).map((feature, index) => (
+                        <div key={index} className="flex items-start gap-2">
+                          <span className="mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-blue-500"></span>
+                          <span className="text-sm text-gray-600 dark:text-gray-300">
+                            {feature}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
                   {/* External Links */}
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">External Links</h4>
+                    <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      External Links
+                    </h4>
                     <div className="flex flex-wrap gap-4">
                       {data?.github_link && (
                         <Link
                           href={data.github_link}
                           target="_blank"
-                          className="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+                          className="flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600"
                         >
                           <IconGithub className="h-4 w-4 invert dark:invert-0" />
                           <span className="text-sm font-medium">GitHub</span>
@@ -161,7 +213,7 @@ const ProjectViewModal = () => {
                         <Link
                           href={data.website_url}
                           target="_blank"
-                          className="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+                          className="flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600"
                         >
                           <IconLink className="h-4 w-4 invert dark:invert-0" />
                           <span className="text-sm font-medium">Website</span>
@@ -171,15 +223,19 @@ const ProjectViewModal = () => {
                         <Link
                           href={data.figma_link}
                           target="_blank"
-                          className="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+                          className="flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600"
                         >
                           <IconFigma className="h-4 w-4 invert dark:invert-0" />
                           <span className="text-sm font-medium">Figma</span>
                         </Link>
                       )}
-                      {!data?.github_link && !data?.website_url && !data?.figma_link && (
-                        <p className="text-sm text-gray-500 dark:text-gray-400">No external links available</p>
-                      )}
+                      {!data?.github_link &&
+                        !data?.website_url &&
+                        !data?.figma_link && (
+                          <p className="text-sm text-gray-500 dark:text-gray-400">
+                            No external links available
+                          </p>
+                        )}
                     </div>
                   </div>
                 </div>
@@ -187,37 +243,53 @@ const ProjectViewModal = () => {
                 {/* Project Status & Metadata */}
                 <div className="space-y-4">
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Current Status</h4>
-                    <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${
-                      data?.status === 'completed' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
-                      data?.status === 'inprogress' ? 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200' :
-                      'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
-                    }`}>
-                      {data?.status === "inprogress" ? "In Progress" : 
-                       data?.status ? data.status.charAt(0).toUpperCase() + data.status.slice(1) : "Pending"}
+                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Current Status
+                    </h4>
+                    <span
+                      className={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${
+                        data?.status === "completed"
+                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                          : data?.status === "inprogress"
+                            ? "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
+                            : "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
+                      }`}
+                    >
+                      {data?.status === "inprogress"
+                        ? "In Progress"
+                        : data?.status
+                          ? data.status.charAt(0).toUpperCase() +
+                            data.status.slice(1)
+                          : "Pending"}
                     </span>
                   </div>
 
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Project Categories</h4>
+                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Project Categories
+                    </h4>
                     {data?.categories && data.categories.length > 0 ? (
-                      <div className="flex flex-wrap gap-2 mt-1">
+                      <div className="mt-1 flex flex-wrap gap-2">
                         {data.categories.map((category) => (
                           <span
                             key={category.id}
-                            className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 border border-blue-200 dark:from-blue-900/30 dark:to-indigo-900/30 dark:text-blue-300 dark:border-blue-700"
+                            className="inline-flex items-center rounded-full border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 px-2.5 py-1 text-xs font-medium text-blue-700 dark:border-blue-700 dark:from-blue-900/30 dark:to-indigo-900/30 dark:text-blue-300"
                           >
                             {category.name}
                           </span>
                         ))}
                       </div>
                     ) : (
-                      <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">Not specified</p>
+                      <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                        Not specified
+                      </p>
                     )}
                   </div>
 
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Duration</h4>
+                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Duration
+                    </h4>
                     <div className="text-sm text-gray-600 dark:text-gray-300">
                       <p>Start: {startDate || "Not specified"}</p>
                       <p>End: {endDate}</p>
@@ -225,22 +297,28 @@ const ProjectViewModal = () => {
                   </div>
 
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Created</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-300">{createdAt || "Not available"}</p>
+                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Created
+                    </h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      {createdAt || "Not available"}
+                    </p>
                   </div>
                 </div>
               </div>
-              
+
               {/* Tech Stack Section */}
               {data?.tech_stack && data.tech_stack.length > 0 && (
-                <div className="border-t pt-6 mt-6">
-                  <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-4">Technology Stack</h4>
-                  <div className="bg-blue-50 dark:bg-blue-950/30 rounded-lg p-4">
+                <div className="mt-6 border-t pt-6">
+                  <h4 className="text-md mb-4 font-medium text-gray-900 dark:text-gray-100">
+                    Technology Stack
+                  </h4>
+                  <div className="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                     <div className="flex flex-wrap gap-2">
                       {data.tech_stack.map((tech, index) => (
                         <span
                           key={index}
-                          className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-600 text-white shadow-sm"
+                          className="inline-flex items-center rounded-full bg-blue-600 px-3 py-1 text-sm font-medium text-white shadow-sm"
                         >
                           {tech}
                         </span>
@@ -251,21 +329,58 @@ const ProjectViewModal = () => {
               )}
             </div>
 
+            {/* Project Gallery Section */}
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  3
+                </span>
+                Project Gallery
+              </h3>
+              <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
+                {(data?.gallery && Array.isArray(data.gallery) && data.gallery.length > 0
+                  ? data.gallery
+                  : [data?.main_image]
+                )
+                  .filter(Boolean)
+                  .map((imageUrl, index) => (
+                    <div
+                      key={index}
+                      className="relative h-32 overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600"
+                    >
+                      <Image
+                        src={imageUrl}
+                        alt={`Gallery image ${index + 1}`}
+                        fill
+                        className="object-cover transition-transform duration-300 hover:scale-105"
+                        loading="lazy"
+                      />
+                    </div>
+                  ))}
+              </div>
+            </div>
+
             {/* Team Information Section */}
-            <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3">
-              <h3 className="text-sm font-semibold mb-2 flex items-center gap-2">
-                <span className="w-6 h-6 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold">3</span>
+            <div className="rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-sm font-bold text-blue-600 dark:bg-blue-900 dark:text-blue-400">
+                  {data?.gallery && data.gallery.length > 0 ? "4" : "3"}
+                </span>
                 Team Information
               </h3>
 
               {isLoading ? (
                 <div className="space-y-6">
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Team Leader</h4>
+                    <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Team Leader
+                    </h4>
                     <Skeleton className="h-16 w-64 rounded-lg" />
                   </div>
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Team Members</h4>
+                    <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Team Members
+                    </h4>
                     <div className="flex gap-4">
                       <Skeleton className="h-16 w-64 rounded-lg" />
                       <Skeleton className="h-16 w-64 rounded-lg" />
@@ -277,8 +392,10 @@ const ProjectViewModal = () => {
                   {/* Team Lead */}
                   {teamLead ? (
                     <div>
-                      <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Team Leader</h4>
-                      <div className="flex items-center gap-4 p-4 rounded-lg border border-gray-300 dark:border-gray-600">
+                      <h4 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                        Team Leader
+                      </h4>
+                      <div className="flex items-center gap-4 rounded-lg border border-gray-300 p-4 dark:border-gray-600">
                         {teamLead.image_url ? (
                           <div className="relative h-12 w-12">
                             <Image
@@ -304,20 +421,26 @@ const ProjectViewModal = () => {
                     </div>
                   ) : (
                     <div>
-                      <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Team Leader</h4>
-                      <p className="text-sm text-gray-500 dark:text-gray-400">No team leader assigned</p>
+                      <h4 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                        Team Leader
+                      </h4>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        No team leader assigned
+                      </p>
                     </div>
                   )}
 
                   {/* Team Members */}
                   <div>
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Team Members</h4>
+                    <h4 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Team Members
+                    </h4>
                     {members.length > 0 ? (
                       <div className="grid gap-3 md:grid-cols-2">
                         {members.map((member) => (
                           <div
                             key={member.id}
-                            className="flex items-center gap-4 p-4 rounded-lg border border-gray-300 dark:border-gray-600"
+                            className="flex items-center gap-4 rounded-lg border border-gray-300 p-4 dark:border-gray-600"
                           >
                             {member.image_url ? (
                               <div className="relative h-12 w-12">
@@ -354,11 +477,11 @@ const ProjectViewModal = () => {
             </div>
           </div>
         </div>
-        
+
         {/* Action Buttons */}
-        <div className="border-t pt-4 bg-gray-50 dark:bg-gray-800/30">
+        <div className="border-t bg-gray-50 pt-4 dark:bg-gray-800/30">
           <div className="flex justify-end gap-3 px-6">
-            <Button 
+            <Button
               variant="outline"
               onClick={() => onOpen("projectEditModal", data)}
               className="min-w-[100px]"
diff --git a/apps/codebility/app/home/projects/actions.ts b/apps/codebility/app/home/projects/actions.ts
index 6debe6838..b5c7c8ce0 100644
--- a/apps/codebility/app/home/projects/actions.ts
+++ b/apps/codebility/app/home/projects/actions.ts
@@ -180,12 +180,36 @@ export async function createProject(
       }
     }
 
+    // Parse key_features and gallery if provided
+    const keyFeaturesData = formData.get("key_features");
+    let keyFeatures: string[] | null = null;
+    if (keyFeaturesData) {
+      try {
+        keyFeatures = JSON.parse(keyFeaturesData as string) as string[];
+      } catch (error) {
+        console.warn("Invalid key_features data:", error);
+      }
+    }
+
+    const galleryData = formData.get("gallery");
+    let gallery: string[] | null = null;
+    if (galleryData) {
+      try {
+        gallery = JSON.parse(galleryData as string) as string[];
+      } catch (error) {
+        console.warn("Invalid gallery data:", error);
+      }
+    }
+
     // Create project (removed project_category_id as it no longer exists)
     const { data: project, error: projectError } = await supabase
       .from("projects")
       .insert({
         name: formData.get("name"),
         description: formData.get("description"),
+        tagline: formData.get("tagline"),
+        key_features: keyFeatures,
+        gallery: gallery,
         github_link: formData.get("github_link"),
         website_url: formData.get("website_url"),
         figma_link: formData.get("figma_link"),
@@ -379,10 +403,31 @@ export async function updateProject(projectId: string, formData: FormData) {
       }
     }
 
+    // Parse key_features and gallery if provided
+    const keyFeaturesData = formData.get("key_features");
+    let keyFeatures: string[] | null = null;
+    if (keyFeaturesData) {
+      try {
+        keyFeatures = JSON.parse(keyFeaturesData as string) as string[];
+      } catch (error) {
+        console.warn("Invalid key_features data:", error);
+      }
+    }
+
+    const galleryData = formData.get("gallery");
+    let gallery: string[] | null = null;
+    if (galleryData) {
+      try {
+        gallery = JSON.parse(galleryData as string) as string[];
+      } catch (error) {
+        console.warn("Invalid gallery data:", error);
+      }
+    }
+
     // Update project details
     const updateData: any = {};
     for (const [key, value] of formData.entries()) {
-      if (key !== "project_members" && key !== "tech_stack" && key !== "category_ids") {
+      if (key !== "project_members" && key !== "tech_stack" && key !== "category_ids" && key !== "key_features" && key !== "gallery") {
         // Log the key-value pairs to debug
         console.log(`Processing form field: ${key} = ${value}`);
         updateData[key] = value;
@@ -394,6 +439,16 @@ export async function updateProject(projectId: string, formData: FormData) {
       updateData.tech_stack = techStack;
     }
 
+    // Add key_features if provided
+    if (keyFeatures) {
+      updateData.key_features = keyFeatures;
+    }
+
+    // Add gallery if provided
+    if (gallery) {
+      updateData.gallery = gallery;
+    }
+
     // Log the final update data before sending to Supabase
     console.log("Final update data:", JSON.stringify(updateData, null, 2));
 
diff --git a/apps/codebility/types/home/codev.ts b/apps/codebility/types/home/codev.ts
index 0c8de166e..eefecd380 100644
--- a/apps/codebility/types/home/codev.ts
+++ b/apps/codebility/types/home/codev.ts
@@ -113,7 +113,7 @@ export interface Codev {
   date_applied?: string;
   promote_declined?: boolean;
   date_passed?: string;
-  date_joined?: string; 
+  date_joined?: string;
 }
 
 export type ApplicantStatus =
@@ -129,7 +129,7 @@ export type InternalStatus =
   | "INACTIVE"
   | "MENTOR"
   | "ADMIN"
-  | "DEPLOYED"
+  | "DEPLOYED";
 
 export interface ProjectMember {
   id: string;
@@ -182,6 +182,13 @@ export interface Project {
   project_members?: ProjectMember[];
   kanban_display: boolean;
   public_display: boolean;
+  // new fields
+  tagline?: string;
+  key_features?: string[];
+  team_lead?: string;
+  team_members?: string[];
+  gallery?: string[];
+  secondary_image?: string;
 }
 export interface Education {
   id: string;
@@ -217,7 +224,7 @@ export interface Level {
   max_points?: number; // Optional
 }
 
-export type ActiveStatus = 'active' | 'inactive';
+export type ActiveStatus = "active" | "inactive";
 
 export interface CodevFilter {
   positions?: string[];
diff --git a/check_existing_columns.sql b/check_existing_columns.sql
new file mode 100644
index 000000000..f2c602baa
--- /dev/null
+++ b/check_existing_columns.sql
@@ -0,0 +1,10 @@
+-- Check existing columns in projects table
+SELECT 
+    column_name,
+    data_type,
+    is_nullable,
+    column_default
+FROM information_schema.columns 
+WHERE table_name = 'projects' 
+    AND table_schema = 'public'
+ORDER BY ordinal_position;
\ No newline at end of file
diff --git a/database_migration.sql b/database_migration.sql
new file mode 100644
index 000000000..a82d3f168
--- /dev/null
+++ b/database_migration.sql
@@ -0,0 +1,16 @@
+-- Add new fields to projects table
+ALTER TABLE projects 
+ADD COLUMN IF NOT EXISTS tagline TEXT,
+ADD COLUMN IF NOT EXISTS key_features JSONB,
+ADD COLUMN IF NOT EXISTS gallery JSONB,
+ADD COLUMN IF NOT EXISTS team_lead TEXT,
+ADD COLUMN IF NOT EXISTS team_members JSONB,
+ADD COLUMN IF NOT EXISTS secondary_image TEXT;
+
+-- Add comments for documentation
+COMMENT ON COLUMN projects.tagline IS 'Short catchy tagline for the project';
+COMMENT ON COLUMN projects.key_features IS 'Array of key features as JSON';
+COMMENT ON COLUMN projects.gallery IS 'Array of gallery image URLs as JSON';
+COMMENT ON COLUMN projects.team_lead IS 'ID of the team leader';
+COMMENT ON COLUMN projects.team_members IS 'Array of team member IDs as JSON';
+COMMENT ON COLUMN projects.secondary_image IS 'URL of secondary project image';
\ No newline at end of file

From aa6c57fd34245f623ebc335aab496971bb513412 Mon Sep 17 00:00:00 2001
From: meistergpc <jap1centeno@gmail.com>
Date: Tue, 25 Nov 2025 01:52:51 +0100
Subject: [PATCH 5/5] feat: improve CodevCard and CodevHireCodevButton
 components for better user interaction

---
 .../profiles/_components/CodevCard.tsx        | 25 ++++++++---
 .../profiles/_components/CodevContainer.tsx   | 16 ++++---
 .../_components/CodevHireCodevButton.tsx      | 43 +++++++++----------
 3 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx b/apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx
index a41cbac93..f4de2c464 100644
--- a/apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx
+++ b/apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx
@@ -125,9 +125,11 @@ const CodevCard = ({ codev, color }: Props) => {
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      <div 
-        onClick={() => window.location.href = `https://www.codebility.tech/profiles/${codev.id}`}
-        className="group relative flex h-full w-full flex-col items-center justify-between rounded-lg border border-white/20 bg-white/10 p-4 shadow-2xl backdrop-blur-md transition-all duration-300 cursor-pointer hover:bg-white/20 hover:scale-[1.02] dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10"
+      <div
+        onClick={() =>
+          (window.location.href = `https://www.codebility.tech/profiles/${codev.id}`)
+        }
+        className="group relative flex h-full w-full cursor-pointer flex-col items-center justify-between rounded-lg border border-white/20 bg-white/10 p-4 shadow-2xl backdrop-blur-md transition-all duration-300 hover:scale-[1.02] hover:bg-white/20 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10"
       >
         {/* Background decoration */}
         <div className="from-customBlue-50/30 dark:from-customBlue-950/10 absolute inset-0 bg-gradient-to-br to-purple-50/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:to-purple-950/10" />
@@ -202,7 +204,11 @@ const CodevCard = ({ codev, color }: Props) => {
               <Tooltip delayDuration={100}>
                 <TooltipTrigger asChild>
                   {/* Line 217: Added stopPropagation to prevent card click when button is clicked */}
-                  <Link href={`/profiles/${codev.id}`} target="_blank" onClick={(e) => e.stopPropagation()}>
+                  <Link
+                    href={`/profiles/${codev.id}`}
+                    target="_blank"
+                    onClick={(e) => e.stopPropagation()}
+                  >
                     <Button
                       variant="outline"
                       size="icon"
@@ -241,10 +247,17 @@ const CodevCard = ({ codev, color }: Props) => {
             />
           ) : null}
         </div>
-        <CodevHireCodevButton codevId={codev.id} hovered={hovered} />
+        <div
+          className="relative z-20"
+          onMouseEnter={(e) => e.stopPropagation()}
+          onMouseLeave={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <CodevHireCodevButton codevId={codev.id} />
+        </div>
       </div>
     </div>
   );
 };
 
-export default CodevCard;
\ No newline at end of file
+export default CodevCard;
diff --git a/apps/codebility/app/(marketing)/profiles/_components/CodevContainer.tsx b/apps/codebility/app/(marketing)/profiles/_components/CodevContainer.tsx
index 3a30c44a8..043fcbc09 100644
--- a/apps/codebility/app/(marketing)/profiles/_components/CodevContainer.tsx
+++ b/apps/codebility/app/(marketing)/profiles/_components/CodevContainer.tsx
@@ -9,12 +9,12 @@ import { motion } from "framer-motion";
 
 export default function CodevContainer() {
   return (
-    <div className="flex flex-col gap-6 relative">
+    <div className="relative flex flex-col gap-6">
       <motion.div
         variants={fadeInOutDownToUp}
         initial="hidden"
         whileInView="visible"
-        className="mx-auto relative z-10"
+        className="relative z-10 mx-auto"
       >
         <H2 className="text-white drop-shadow-lg">Codevs</H2>
       </motion.div>
@@ -22,13 +22,15 @@ export default function CodevContainer() {
         variants={fadeInOutDownToUp}
         initial="hidden"
         whileInView="visible"
-        className="mx-auto max-w-[700px] text-center relative z-10 bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 shadow-xl"
+        className="relative z-10 mx-auto max-w-[700px] rounded-2xl border border-white/10 bg-white/5 p-6 text-center shadow-xl backdrop-blur-sm"
       >
-        <Heading3 className="text-white mb-4">Meet Our Skilled Developer Network</Heading3>
+        <Heading3 className="mb-4 text-white">
+          Meet Our Skilled Developer Network
+        </Heading3>
         <IntroText className="text-gray-200">
-          Discover our carefully vetted CoDevs ready to join your team. Each developer 
-          brings proven expertise, strong communication skills, and a passion for delivering 
-          exceptional results on your projects.
+          Discover our carefully vetted CoDevs ready to join your team. Each
+          developer brings proven expertise, strong communication skills, and a
+          passion for delivering exceptional results on your projects.
         </IntroText>
       </motion.div>
     </div>
diff --git a/apps/codebility/app/(marketing)/profiles/_components/CodevHireCodevButton.tsx b/apps/codebility/app/(marketing)/profiles/_components/CodevHireCodevButton.tsx
index c38236c3b..687ebd46e 100644
--- a/apps/codebility/app/(marketing)/profiles/_components/CodevHireCodevButton.tsx
+++ b/apps/codebility/app/(marketing)/profiles/_components/CodevHireCodevButton.tsx
@@ -1,33 +1,32 @@
 "use client";
 
 import { useModal } from "@/hooks/use-modal";
+
 import { cn } from "@codevs/ui";
 import { Button } from "@codevs/ui/button";
 
 interface CodevHireCodevButtonProps {
-	codevId: string;
-	hovered: boolean;
+  codevId: string;
 }
 
-export function CodevHireCodevButton({
-	codevId,
-	hovered,
-}: CodevHireCodevButtonProps) {
-	const { onOpen } = useModal();
+export function CodevHireCodevButton({ codevId }: CodevHireCodevButtonProps) {
+  const { onOpen } = useModal();
 
-	return (
-		<>
-			<Button
-				variant="purple"
-				size="sm"
-				className={cn(
-          "h-[1.75rem] py-0.5 px-3 text-xs rounded-md hover:bg-purple-600 transition-opacity duration-200",
-          hovered ? "opacity-100" : "opacity-0",
-        )}
-				onClick={() => onOpen("marketingCodevHireCodevModal", codevId)}
-			>
-				Hire Me
-			</Button>
-		</>
-	);
+  return (
+    <>
+      <Button
+        variant="purple"
+        size="sm"
+        className="h-[1.75rem] rounded-md bg-purple-600 px-3 py-0.5 text-xs opacity-100"
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpen("marketingCodevHireCodevModal", codevId);
+        }}
+        onMouseEnter={(e) => e.stopPropagation()}
+        onMouseLeave={(e) => e.stopPropagation()}
+      >
+        Hire Me
+      </Button>
+    </>
+  );
 }