Merge remote-tracking branch 'origin/dev' into in-house-filter-sort/Jordan

Author: pamplonajp45-eng

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

@@ -15,6 +15,11 @@ export const revalidate = 0;
 
 export default async function CodevsProfiles() {
   const [{ data: allCodevs, error }] = await Promise.all([
+    // Accepted developers are identified by application_status, not by role_id.
+    // The accept flow sets application_status "passed" while role_id tracks the
+    // Intern → Codev → Mentor progression, so filtering on role_id 10 hid every
+    // newly accepted developer. /profiles already uses this same filter.
+    getCodevs({ filters: { application_status: "passed" } }),
     getCodevs({ filters: { application_status: "passed" } }), // show only accepted Codevs 
   ]);
 

apps/codebility/app/(marketing)/hire-a-codev/_components/HiringProcess.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import { fadeInOutDownToUp } from "@/components/FramerAnimation/Framer";
 import { SectionWrapper } from "@/components/shared/home";
 import { User, MessageSquare, UserCheck, Handshake } from "lucide-react";
 
@@ -248,30 +250,81 @@ const HiringProcess = () => {
           })}
         </div>
 
-        {/* ── Call to Action (unchanged from original) ── */}
-        <div className="mt-16 text-center">
-          <h3 className="mb-4 text-2xl font-semibold text-white">
-            Ready to Build Your Dream Team?
-          </h3>
-          <p className="mb-6 text-gray-300 max-w-2xl mx-auto">
-            Start your hiring journey today. Get matched with skilled developers
-            who can bring your vision to life.
-          </p>
-          <div className="flex flex-col gap-4 items-center sm:flex-row sm:justify-center">
-            <a
-              href="/contact"
-              className="inline-flex items-center justify-center rounded-full bg-customViolet-100 px-8 py-3 text-sm font-medium text-white transition-all hover:bg-customViolet-100/90"
-            >
-              Start Hiring Process
-            </a>
-            <a
-              href="/bookacall"
-              className="inline-flex items-center justify-center rounded-full border border-customTeal/20 bg-customTeal/10 px-8 py-3 text-sm font-medium text-customTeal transition-all hover:bg-customTeal/20 hover:border-customTeal/40"
-            >
-              Schedule a Call
-            </a>
+        {/* Call to Action */}
+        <motion.div
+          variants={fadeInOutDownToUp}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: false, amount: 0.3 }}
+          className="mt-16 px-4 sm:px-6 lg:px-0"
+        >
+          <div className="relative mx-auto max-w-5xl overflow-hidden rounded-2xl p-6 sm:p-8 lg:p-10 backdrop-blur-sm transition-all duration-300">
+
+            {/* Ambient animated glow background */}
+            <div className="absolute inset-0 -z-10 overflow-hidden rounded-2xl">
+              <motion.div
+                className="pointer-events-none absolute inset-0"
+                animate={{
+                  background: [
+                    "radial-gradient(circle at 30% 50%, rgba(45,212,191,0.15), transparent 60%)",
+                    "radial-gradient(circle at 70% 50%, rgba(124,58,237,0.15), transparent 60%)",
+                    "radial-gradient(circle at 30% 50%, rgba(45,212,191,0.15), transparent 60%)",
+                  ],
+                }}
+                transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
+              />
+            </div>
+
+            <div className="relative flex flex-col gap-10 text-center md:flex-row md:items-center md:justify-between md:gap-8 md:text-left">
+
+              {/* Column 1: Text */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: false, amount: 0.3 }}
+                transition={{ duration: 0.6, ease: "easeOut" }}
+                className="flex flex-col gap-4 min-w-0"
+              >
+                <h3 className="text-3xl sm:text-4xl lg:text-4xl font-bold text-white leading-tight">
+                  Ready to Build Your Dream Team?
+                </h3>
+                <p className="text-base sm:text-xs text-gray-300">
+                  Start your hiring journey today. Get matched with skilled developers who can bring your vision to life.
+                </p>
+              </motion.div>
+
+              {/* Column 2: Buttons */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: false, amount: 0.3 }}
+                transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
+                className="flex flex-col sm:flex-row gap-3 items-center justify-center md:justify-end shrink-0 w-full md:w-auto"
+              >
+                <motion.a
+                  initial={{ opacity: 0, y: 10 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: false, amount: 0.3 }}
+                  transition={{ duration: 0.5, delay: 0.3 }}
+                  href="/contact"
+                  className="inline-flex w-full sm:w-auto items-center justify-center rounded-full bg-[#7C3AED] px-8 py-2.5 text-sm sm:text-base font-medium text-white transition-all hover:bg-[#7C3AED]/90"
+                >
+                  Start Hiring
+                </motion.a>
+                <motion.a
+                  initial={{ opacity: 0, y: 10 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: false, amount: 0.3 }}
+                  transition={{ duration: 0.5, delay: 0.45 }}
+                  href="/bookacall"
+                  className="inline-flex w-full sm:w-auto items-center justify-center rounded-full border border-customTeal/20 bg-transparent px-8 py-2.5 text-sm sm:text-base font-medium text-customTeal transition-all hover:bg-customTeal/20 hover:border-customTeal/40"
+                >
+                  Schedule a Call
+                </motion.a>
+              </motion.div>
+            </div>
           </div>
-        </div>
+        </motion.div>
       </div>
 
       {/* Background decoration (unchanged from original) */}

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

@@ -6,6 +6,7 @@ import { useMemo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import CodevBadge from "@/components/CodevBadge";
+import { item } from "@/components/FramerAnimation/Framer";
 import {
   AnimatePresence,
   motion,
@@ -116,19 +117,21 @@ const CodevCard = ({ codev, color }: Props) => {
   }, [codev.level, codev.codev_points]);
 
   return (
-    <div
-      className="h-64"
+    <motion.div
+      variants={item}
+      transition={{ duration: 0.4, ease: "easeOut" }}
+      className="h-80"
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      <div 
+      <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"
+        className="group relative flex h-full w-full flex-col items-center justify-between rounded-lg border border-white/20 bg-white/10 p-6 shadow-2xl backdrop-blur-md transition-all duration-300 ease-out cursor-pointer hover:bg-white/20 hover:scale-[1.02] 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" />
         <div className="absolute -right-4 -top-4 h-32 w-32 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 opacity-0 blur-2xl transition-opacity duration-500 group-hover:opacity-100" />
-        
+
         <div className="grid w-full grid-cols-4 gap-2">
           <div className="col-span-1" />
           <div className="relative col-span-2 flex justify-center">
@@ -141,9 +144,9 @@ const CodevCard = ({ codev, color }: Props) => {
                   ? codev.image_url
                   : "/assets/svgs/icon-codebility-black.svg"
               }
-              width={70}
-              height={70}
-              className={`${color} h-[70px] w-[70px] rounded-full bg-cover object-cover p-0.5`}
+              width={96}
+              height={96}
+              className={`${color} h-24 w-24 rounded-full bg-cover object-cover p-0.5 transition-transform duration-300 group-hover:scale-105`}
               onMouseMove={handleMouseMove}
               onError={(e) => {
                 console.error(
@@ -186,7 +189,7 @@ const CodevCard = ({ codev, color }: Props) => {
             <div className="absolute bottom-[1px] right-[1px]">
               <p
                 className={cn(
-                  "rounded-full border-2 p-2 text-[9px]",
+                  "rounded-full border-2 p-2.5 text-[9px]",
                   codev.availability_status
                     ? "border-green-600 bg-green-500"
                     : "border-red-600 bg-red-500",
@@ -202,9 +205,9 @@ const CodevCard = ({ codev, color }: Props) => {
                     <Button
                       variant="outline"
                       size="icon"
-                      className="h-8 w-8 rounded-full border-white/30 bg-white/20 backdrop-blur-sm transition-all duration-300 hover:bg-white/30 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/20"
+                      className="relative z-10 h-9 w-9 rounded-full border-white/30 bg-white/20 backdrop-blur-sm transition-all duration-300 hover:bg-white/30 active:scale-95 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/20"
                     >
-                      <BookOpenIcon className="h-3.5 w-3.5" />
+                      <BookOpenIcon className="h-4 w-4" />
                     </Button>
                   </Link>
                 </TooltipTrigger>
@@ -217,29 +220,31 @@ const CodevCard = ({ codev, color }: Props) => {
         </div>
         <div className="flex flex-col items-center gap-0.5">
           <div className="flex flex-col gap-1 text-center">
-            <p className="md:text-md relative z-10 text-sm capitalize text-white dark:text-white lg:text-base">
+            <p className="relative z-10 text-base capitalize text-white dark:text-white lg:text-lg">
               {codev.first_name} {codev.last_name}
             </p>
             {codev.display_position ? (
-              <p className="relative z-10 text-sm text-gray-200 dark:text-gray-300">
+              <p className="relative z-10 text-sm text-gray-200 dark:text-gray-300 lg:text-base">
                 {codev.display_position}
               </p>
             ) : (
               <div className="relative z-10 text-sm lg:text-base">&nbsp;</div>
             )}
           </div>
         </div>
-        <div className="flex min-h-[20px] items-center justify-center">
+        <div className="flex min-h-[24px] items-center justify-center">
           {filteredLevel && Object.keys(filteredLevel).length > 0 ? (
             <CodevBadge
               level={filteredLevel}
               className="transition-transform group-hover:scale-100"
             />
           ) : null}
         </div>
-        <CodevHireCodevButton codevId={codev.id} />
+        <div className="relative z-10">
+          <CodevHireCodevButton codevId={codev.id} />
+        </div>
       </div>
-    </div>
+    </motion.div>
   );
 };
 

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

@@ -7,32 +7,27 @@ import { motion } from "framer-motion";
 
 export default function CodevContainer() {
   return (
-    <div className="relative flex flex-col gap-6">
-      <motion.div
-        variants={fadeInOutDownToUp}
-        initial="hidden"
-        whileInView="visible"
-        className="relative z-10 mx-auto"
-      >
-        <H2 className="text-white drop-shadow-lg">Codevs</H2>
-      </motion.div>
-      <motion.div
-        variants={fadeInOutDownToUp}
-        initial="hidden"
-        whileInView="visible"
-        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"
-      >
-        <div className="mb-4 text-white">
-          <Heading3>Meet Our Skilled Team Network</Heading3>
-        </div>
-        <div className="text-gray-200">
-          <IntroText>
-            Discover our carefully vetted professionals, ready to join your team 
-            and deliver exceptional results. Every member brings proven expertise,
-            strong communication, and a passion for getting things done right. 
-          </IntroText>
-        </div>
-      </motion.div>
-    </div>
+   <div className="relative flex flex-col gap-6">
+  <motion.div
+    variants={fadeInOutDownToUp}
+    initial="hidden"
+    whileInView="visible"
+    viewport={{ once: false, amount: 0.3 }}
+    className="relative z-10 mx-auto"
+  >
+    <H2 className="text-white drop-shadow-lg">Our Skilled Network</H2>
+  </motion.div>
+  <motion.div
+    variants={fadeInOutDownToUp}
+    initial="hidden"
+    whileInView="visible"
+    viewport={{ once: false, amount: 0.3 }}
+    className="relative z-10 mx-auto max-w-auto px-6 py-2 text-center shadow-xl backdrop-blur-sm"
+  >
+    <p className="text-gray-200 text-2xl leading-relaxed">
+      Discover our carefully vetted professionals, ready to join your team and deliver exceptional results. Every member brings proven expertise, strong communication, and a passion for getting things done right.
+    </p>
+  </motion.div>
+</div>
   );
 }

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

@@ -2,7 +2,6 @@
 
 import { useModal } from "@/hooks/use-modal";
 
-import { cn } from "@codevs/ui";
 import { Button } from "@codevs/ui/button";
 
 interface CodevHireCodevButtonProps {
@@ -13,20 +12,19 @@ export function CodevHireCodevButton({ codevId }: CodevHireCodevButtonProps) {
   const { onOpen } = useModal();
 
   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>
-    </>
+    <Button
+      variant="outline"
+      size="sm"
+      className="relative z-10h-[1.75rem] rounded-full border !border-purple-500 !bg-transparent px-4 py-0.5 text-xs font-medium !text-purple-400 transition-all duration-300 hover:!bg-purple-500/10 hover:!text-purple-300"
+      onClick={(e) => {
+        e.stopPropagation();
+        // onOpen("marketingCodevHireCodevModal", codevId);
+        window.location.href = `https://www.codebility.tech/profiles/${codevId}`
+      }}
+      onMouseEnter={(e) => e.stopPropagation()}
+      onMouseLeave={(e) => e.stopPropagation()}
+    >
+      Learn More
+    </Button>
   );
-}
+}