feat: implement service context for managing active service state across components

Author: japint

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({

apps/codebility/app/(marketing)/page.tsx

@@ -1,23 +1,22 @@
+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";
 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;
 
 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>
   );
-} 
+}

apps/codebility/app/(marketing)/services/_components/ClientTechyBackground.tsx

@@ -0,0 +1,5 @@
+export * from "./layout";
+export * from "./ui";
+export * from "./visuals";
+export * from "./tabs";
+export * from "../_context";

apps/codebility/app/(marketing)/services/_components/ServicesGrid.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 */}

apps/codebility/app/(marketing)/services/_components/ServicesPageContent.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>
+  );
+};

apps/codebility/app/(marketing)/services/_components/index.ts

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

…rvices/_components/ServiceDetailView.tsx …_components/layout/ServiceDetailView.tsxapps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx renamed to apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx apps/codebility/app/(marketing)/services/_components/ServiceDetailView.tsx renamed to apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.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 />
+    </>
+  );
+};