Added an intern section in landing page with pagination.

Author: Jecomo-Alyssa-Lyn

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

@@ -0,0 +1,97 @@
+// components/LandingInternCard.tsx
+"use client";
+import { useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+
+type Person = {
+  name: string;
+  image?: string; // image URL (optional)
+};
+
+function Avatar({
+  person,
+  size = 80,
+  position = "center top"
+}: {
+  person: Person;
+  size?: number;
+  position?: string;
+}) {
+  const nameParts = (person.name ?? "")
+    .trim()
+    .split(/\s+/)
+    .filter((p) => p.length > 0);
+
+  const initials = nameParts
+    .slice(0, 2)
+    .map((n) => n.charAt(0).toUpperCase())
+    .join("");
+
+  const [imgError, setImgError] = useState(false);
+  const hasImage = Boolean(person.image) && !imgError;
+
+  if (hasImage) {
+    return (
+      <div
+        className="rounded-full overflow-hidden border-2 border-neutral-700 flex-shrink-0 relative bg-gray-800"
+        style={{ height: size, width: size }}
+      >
+        <img
+          src={person.image}
+          alt={person.name}
+          onError={() => setImgError(true)}
+          className="absolute top-1/2 left-1/2 object-cover"
+          style={{
+            objectPosition: position,
+            width: `${size * 1.2}px`,
+            height: `${size * 1.2}px`,
+            transform: "translate(-50%, -50%)",
+            display: "block"
+          }}
+          loading="lazy"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-center justify-center rounded-full bg-gray-800 border-2 border-neutral-700 flex-shrink-0"
+      style={{ height: size, width: size }}
+      aria-hidden
+    >
+      <span
+        className="font-bold text-white"
+        style={{ fontSize: Math.max(12, size * 0.38), lineHeight: 1 }}
+      >
+        {initials || "?"}
+      </span>
+    </div>
+  );
+}
+
+export default function InternCards({ interns }: { interns: Person[] }) {
+  return (
+    <div className="w-full max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 py-10">
+      {interns.map((intern, idx) => (
+        <Card
+          key={idx}
+          className="bg-black-800 text-white rounded-sm shadow-2xl border border-neutral-700 flex flex-col items-center p-4 min-h-[260px]" // ✅ same height, no fixed width
+        >
+          <CardContent className="flex flex-col items-center gap-3 p-5 h-full">
+            {/* Avatar (always aligned at the top) */}
+            <div className="flex justify-center items-start h-20">
+              <Avatar person={intern} size={80} />
+            </div>
+            {/* Name */}
+            <h3 className="text-sm font-medium text-center break-words line-clamp-2">
+              {intern.name}
+            </h3>
+            {/* Role */}
+            <p className="text-sm text-center opacity-70">Intern</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import InternCards from "./LandingInternCard";
+
+type Person = {
+  name: string;
+  image?: string;
+};
+
+interface InternApiResponse {
+  INTERNS: { name: string; image?: string }[];
+  error?: string;
+}
+
+export default function LandingInternPagination() {
+  const [page, setPage] = useState<number>(1);
+  const [interns, setInterns] = useState<Person[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const pageSize = 10;
+
+  useEffect(() => {
+    let mounted = true;
+
+    const fetchInterns = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const res = await fetch("/api/all-active-interns");
+        if (!res.ok) {
+          const txt = await res.text();
+          throw new Error(`Failed to fetch interns: ${res.status} ${txt}`);
+        }
+
+        const data = (await res.json()) as InternApiResponse;
+
+        if (!data || !Array.isArray(data.INTERNS)) {
+          console.warn("Unexpected API response shape for /api/all-active-interns:", data);
+          if (!mounted) return;
+          setInterns([]);
+        } else {
+          const mapped = data.INTERNS.map((i) => ({
+            name: i.name,
+            image: i.image ?? "/avatars/default.png",
+          }));
+          if (!mounted) return;
+          setInterns(mapped);
+          setPage(1);
+        }
+      } catch (err: any) {
+        console.error("Error fetching interns:", err);
+        if (!mounted) return;
+        setError(err?.message ?? "Unknown error");
+        setInterns([]);
+      } finally {
+        if (!mounted) return;
+        setLoading(false);
+      }
+    };
+
+    fetchInterns();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  const totalPages = Math.max(1, Math.ceil(interns.length / pageSize));
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+    if (page < 1) setPage(1);
+  }, [page, totalPages]);
+
+  const paginatedInterns = interns.slice((page - 1) * pageSize, page * pageSize);
+
+  const goToPrevious = () => setPage((p) => Math.max(1, p - 1));
+  const goToNext = () => setPage((p) => Math.min(totalPages, p + 1));
+
+  return (
+    <div className="w-full flex flex-col items-center gap-6">
+      {/* Intern Cards container */}
+      <div className="w-full min-h-[300px] ">
+        {loading ? (
+          <div className="py-12 text-sm text-gray-500 flex items-center justify-center">Loading interns…</div>
+        ) : error ? (
+          <div className="py-12 text-sm text-red-500 flex items-center justify-center">Error: {error}</div>
+        ) : paginatedInterns.length > 0 ? (
+          <InternCards interns={paginatedInterns} />
+        ) : (
+          <div className="py-12 text-sm text-gray-400 flex items-center justify-center">No interns available</div>
+        )}
+      </div>
+
+      {/* Pagination Controls */}
+      <div className="flex items-center gap-3">
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={goToPrevious}
+          disabled={page === 1 || loading}
+          className="rounded-full w-9 h-9 p-0 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <ChevronLeft size={16} className="shrink-0" />
+        </Button>
+
+        <div className="text-sm text-gray-600 dark:text-gray-300">
+          Page {page} of {totalPages}
+        </div>
+
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={goToNext}
+          disabled={page === totalPages || loading}
+          className="rounded-full w-9 h-9 p-0 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <ChevronRight size={16} className="shrink-0" />
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import BlueBg from "./LandingBlueBg";
+import Section from "../MarketingSection";
+import LandingInternPagination from "./LandingInternPagination";
+
+export default async function InternSectionContainer(){
+    return (
+        <Section id="interns" className="text-light-900 relative w-full pt-10">
+            <div className="w-full">
+                    <h1 className="text-center text-3xl font-bold">Codebility Interns</h1>
+                    <div className="flex flex-col items-center justify-center">
+                      <div className="max-w-[1100px] px-4">
+                        <p className="pt-8 pb-10 text-center md:px-44">
+                          Discover the driving force behind CODEVS&apos; success. Our Interns bring fresh 
+                          advantage, high-level performance, and the power to turn ideas into impact—propelling 
+                          us forward with energy and determination.
+                        </p>
+                        <LandingInternPagination />
+                        <BlueBg className="h-[300px] w-full max-w-[1200px] lg:top-[45%]" />
+                        <div className="grid grid-cols-2 gap-2 pb-5 pt-20 md:grid-cols-4">
+                          {/* All active interns in all position to be display here with pagination */}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+        </Section>
+    );
+}

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

@@ -10,6 +10,7 @@ import Footer from "./_components/MarketingFooter";
 import Navigation from "./_components/MarketingNavigation";
 import Testimonials from "./_components/testimonial/Testimonials";
 import CodevLandingHero from "./careers/_components/CodevLandingHero";
+import InternSectionContainer from "./_components/landing/LandingInternSection";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
@@ -27,6 +28,7 @@ export default async function Index() {
       <WhyChooseUs />
       <WorkWithUs />
       <Admins />
+      <InternSectionContainer />
       <Partners />
       <Testimonials />
       <Calendly />

apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx

@@ -60,7 +60,7 @@ const STATUS_CONFIG: Record<
     className: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-400",
   },
 };
-
+ 
 const CodevCard = ({ codev, color }: Props) => {
   const [hovered, setHovered] = useState(false);
   const springConfig = { stiffness: 100, damping: 5 };

apps/codebility/app/api/all-active-interns/route.ts

@@ -0,0 +1,56 @@
+// app/api/all-active-interns/route.ts
+import { NextResponse } from "next/server";
+import { createClientServerComponent } from "@/utils/supabase/server";
+
+type Intern = {
+  name: string;
+  role: string;
+  image?: string;
+};
+
+export async function GET() {
+  try {
+    const supabase = await createClientServerComponent();
+
+    const { data, error } = await supabase
+      .from("codev")
+      .select(
+        `
+        first_name,
+        last_name,
+        image_url,
+        availability_status,
+        roles!inner ( name )
+      `
+      )
+      .eq("availability_status", true)
+      .eq("roles.name", "Intern"); // ✅ only Interns
+
+    if (error) {
+      console.error("Supabase query error (Interns):", error);
+      return NextResponse.json(
+        { INTERNS: [], error: error.message ?? "DB error" },
+        { status: 500 }
+      );
+    }
+
+    const INTERNS: Intern[] = (data ?? []).map((row: any) => {
+      const name = `${row.first_name ?? ""} ${row.last_name ?? ""}`.trim();
+      const role = row.roles?.name ?? "Intern";
+
+      return {
+        name: name || "Unknown Intern",
+        role,
+        image: row.image_url ?? undefined,
+      };
+    });
+
+    return NextResponse.json({ INTERNS });
+  } catch (err) {
+    console.error("Unexpected error in /api/interns:", err);
+    return NextResponse.json(
+      { INTERNS: [], error: "Unexpected server error" },
+      { status: 500 }
+    );
+  }
+}