feat: add developer profiles to /codevs page and improve UX

- Add CodevsProfiles component to show current developers for inspiration
- Create dedicated ProfilesContainer with intern-focused messaging
- Separate /hire-a-codev from /codevs for different user journeys
- Update navigation to point to correct routes
- Improve Work with Us section with proper CTAs and updated copy
- Fix carousel image loading with error handling and fallbacks
- Update hero messaging for intern recruitment focus

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Zeff01

apps/codebility/app/(marketing)/_components/MarketingNavigation.tsx

@@ -39,7 +39,7 @@ const NAV_ITEMS = [
   { id: "1", title: "Our Services", path: "/services" },
   { id: "2", title: "About Us", path: "/#whychooseus" },
   { id: "3", title: "Book a Call", path: "/bookacall" },
-  { id: "4", title: "Hire a CoDevs", path: "/codevs" },
+  { id: "4", title: "Hire a CoDevs", path: "/hire-a-codev" },
 ] as const;
 
 const getMenuItems = (

apps/codebility/app/(marketing)/_components/MarketingSidenavMenu.tsx

@@ -8,7 +8,7 @@ const links = [
   { href: "/services", label: "Our Services" },
   { href: "/#whychooseus", label: "About Us" },
   { href: "/bookacall", label: "Book a Call" },
-  { href: "/codevs", label: "Hire Codevs" },
+  { href: "/hire-a-codev", label: "Hire Codevs" },
   { href: "/careers", label: "Careers" },
 ];
 

apps/codebility/app/(marketing)/_components/landing/LandingWorkWithUs.tsx

@@ -29,21 +29,21 @@ const WORK_WITH_US_CARDS = [
     description:
       "Accelerate delivery with vetted engineers, designers, and strategists who integrate seamlessly with your roadmap.",
     link: {
-      href: "/codevs",
-      text: "Meet CoDevs",
+      href: "/hire-a-codev",
+      text: "Hire CoDevs",
     },
   },
   {
     id: "developer-journey",
-    title: "Developer Journey",
+    title: "Be a Codev",
     image: {
       src: "/assets/images/index/image.png",
-      alt: "developer learning journey phases",
+      alt: "become a codev developer",
     },
     description:
       "Join our community, sharpen your craft through real projects, and unlock career opportunities across the globe.",
     link: {
-      href: "/auth/onboarding",
+      href: "/codevs",
       text: "Join the Program",
     },
   },
@@ -58,7 +58,7 @@ const WORK_WITH_US_CARDS = [
       "Explore exciting career opportunities with our team. Join a dynamic environment where innovation meets collaboration.",
     link: {
       href: "/careers",
-      text: "Apply as a Dev",
+      text: "View Careers",
     },
   },
 ];

apps/codebility/app/(marketing)/_shared/CodevsCarousel.tsx

@@ -72,12 +72,17 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
                   alt="Project Image"
                   width={1000}
                   height={500}
-                  
+                  onError={(e) => {
+                    console.error('Failed to load image:', src);
+                    // Replace with fallback image
+                    const target = e.target as HTMLImageElement;
+                    target.src = '/assets/images/index/projects-large.jpg';
+                  }}
                   className={`${
                     index === activeIndex
-                      ? "lg:h-[35rem]"
-                      : "lg:mt-14 lg:h-[25rem] "
-                  } border-black-800 bg-black-600 h-[20rem]  w-full  rounded-lg border object-cover p-4`}
+                      ? "lg:h-[30rem]"
+                      : "lg:mt-10 lg:h-[22rem] "
+                  } border-black-800 bg-black-600 h-[18rem]  w-full  rounded-lg border object-cover p-4`}
                 />
               </div>
             </div>

apps/codebility/app/(marketing)/codevs/_components/CodevsHero.tsx

@@ -29,25 +29,25 @@ export default function Hero() {
       ></div>
       <OrbitingCirclesBackground />
       <div className="z-10 flex w-full flex-1 flex-col items-center justify-center gap-3 p-4 text-center text-white">
-        <p className="text-sm lg:text-xl">Find Your Next Developer</p>
+        <p className="text-sm lg:text-xl">Join Our Community</p>
         <div className="relative">
           <h1
             className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl uppercase tracking-widest opacity-5 md:text-6xl lg:text-9xl ${rowdies.className}`}
           >
             Codebility
           </h1>
           <h2 className="text-xl font-semibold lg:text-5xl">
-            Hire Talented Codevs
+            Become a CoDevs
           </h2>
         </div>
         <p className="text-xs md:text-sm lg:text-2xl">
-          Connect with skilled developers ready to bring your projects to life
+          Start your journey as a developer and grow with real-world projects
         </p>
         <div className="mx-auto mt-6 flex w-full justify-center">
-          <Link href="#codevs">
+          <Link href={pathsConfig.auth.onboarding}>
             <Button className="from-customTeal to-customViolet-100 h-12 rounded-full bg-gradient-to-r via-customBlue-100 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">
-                Hire Codevs
+                Join Now
               </span>
             </Button>
           </Link>

apps/codebility/app/(marketing)/codevs/_components/CodevsProfiles.tsx

@@ -0,0 +1,48 @@
+import { Suspense } from "react";
+import { UsersSkeleton } from "@/components/ui/skeleton/UsersSkeleton";
+import { getCodevs } from "@/lib/server/codev.service";
+import { Codev } from "@/types/home/codev";
+import {
+  getPrioritizedAndFilteredCodevs,
+} from "@/utils/codev-priority";
+
+import Section from "../../_shared/CodevsSection";
+import CodevList from "../../profiles/_components/CodevList";
+import CodevsProfilesContainer from "./CodevsProfilesContainer";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export default async function CodevsProfiles() {
+  const [{ data: allCodevs, error }] = await Promise.all([
+    getCodevs({ filters: { role_id: 10 } }), // show only Codevs with role_id 10 which is Codev
+  ]);
+
+  if (error) {
+    throw new Error("Failed to fetch profiles data");
+  }
+
+  const codevsArray: Codev[] = Array.isArray(allCodevs) ? allCodevs : [];
+
+  // Use the utility function with filterAdminAndFailed set to true
+  const sortedCodevs = getPrioritizedAndFilteredCodevs(
+    codevsArray,
+    { activeStatus: ["active"] },
+    true,
+  );
+
+  return (
+    <Section
+      id="codevs-profiles"
+      className="from-black-500 relative w-full bg-gradient-to-b"
+    >
+      <div className="bg-code-pattern absolute inset-0 bg-repeat opacity-5"></div>
+      <div className="relative flex flex-col gap-8">
+        <CodevsProfilesContainer />
+        <Suspense fallback={<UsersSkeleton />}>
+          <CodevList codevs={sortedCodevs} />
+        </Suspense>
+      </div>
+    </Section>
+  );
+}

apps/codebility/app/(marketing)/codevs/_components/CodevsProfilesContainer.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { fadeInOutDownToUp } from "@/components/FramerAnimation/Framer";
+import H2 from "@/components/shared/home/H2";
+import Heading3 from "@/components/shared/home/Heading3";
+import IntroText from "@/components/shared/home/IntroText";
+import { motion } from "framer-motion";
+
+export default function CodevsProfilesContainer() {
+  return (
+    <div className="flex flex-col gap-4">
+      <motion.div
+        variants={fadeInOutDownToUp}
+        initial="hidden"
+        whileInView="visible"
+        className="mx-auto"
+      >
+        <H2 className="text-white">Meet Our CoDevs</H2>
+      </motion.div>
+      <motion.div
+        variants={fadeInOutDownToUp}
+        initial="hidden"
+        whileInView="visible"
+        className="text-gray mx-auto max-w-[650px] text-center"
+      >
+        <Heading3>See Who You'll Be Working With</Heading3>
+        <IntroText>
+          Get inspired by our current CoDevs who started their journey just like you. 
+          These talented developers have grown their skills through real-world projects 
+          and are now contributing to amazing products worldwide.
+        </IntroText>
+      </motion.div>
+    </div>
+  );
+}

apps/codebility/app/(marketing)/codevs/_components/CodevsProject.tsx

@@ -64,23 +64,46 @@ export default async function ProjectSection() {
 
   if (activeProjects && activeProjects.length > 0) {
     for (const project of activeProjects) {
-      if (project.main_image) {
-        let imageUrl = project.main_image;
+      let imageUrl = '';
+      
+      if (project.main_image && project.main_image.trim()) {
+        imageUrl = project.main_image.trim();
 
-        // Transform URL if needed
-        if (imageUrl.startsWith("public")) {
+        // Transform URL if needed - handle various URL formats
+        if (imageUrl.startsWith("public/")) {
+          // Handle public/ prefix
+          imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/services-image/${imageUrl}`;
+        } else if (imageUrl.startsWith("public")) {
+          // Handle public prefix without slash
+          imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/services-image/${imageUrl}`;
+        } else if (!imageUrl.startsWith("http")) {
+          // If it's a relative path, construct the full URL
           imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/services-image/${imageUrl}`;
         }
 
-        // Store both the image URL and project data
-        projectsWithImages.push({
-          ...project,
-          imageUrl,
-        });
-
-        // Add to slides for the carousel
-        slides.push(imageUrl);
+        // Validate the URL before adding to carousel
+        try {
+          new URL(imageUrl);
+          console.log(`✅ Valid image URL for project ${project.name}:`, imageUrl);
+        } catch (error) {
+          console.warn(`❌ Invalid image URL for project ${project.name}:`, imageUrl);
+          // Use fallback image for invalid URLs
+          imageUrl = '/assets/images/index/projects-large.jpg';
+        }
+      } else {
+        console.warn(`⚠️ No image found for project ${project.name}, using fallback`);
+        // Use fallback image for projects without images
+        imageUrl = '/assets/images/index/projects-large.jpg';
       }
+      
+      // Store both the image URL and project data
+      projectsWithImages.push({
+        ...project,
+        imageUrl,
+      });
+
+      // Add to slides for the carousel
+      slides.push(imageUrl);
     }
   }