Merge pull request #514 from CodebilityDev/onboarding-roadmap/adjustmentsimargins

Author: Jecomo-Alyssa-Lyn

apps/codebility/app/auth/onboarding/RoadMapSectionWrapper.tsx

@@ -1,12 +1,10 @@
 import { RefObject } from "react";
-
 import IsRoadMap from "./_components/RoadMap/IsRoadMap";
 import RoadMapIntro from "./_components/RoadMap/RoadMapIntro";
-
 export default function RoadMapWrapper({
   roadmapRef,
 }: {
-  roadmapRef: RefObject<HTMLDivElement | null>;
+  roadmapRef: RefObject<HTMLDivElement>;
 }) {
   // ✅ Works because IsRoadMap is forwardRef
   return (
@@ -15,4 +13,4 @@ export default function RoadMapWrapper({
       <IsRoadMap ref={roadmapRef} />
     </>
   );
-}
+}

apps/codebility/app/auth/onboarding/_components/RoadMap/AnimatedRoadmapSvg.tsx

@@ -9,20 +9,20 @@ gsap.registerPlugin(ScrollTrigger);
 
 const phases = [
   {
-    cx: 220,
-    cy: 520,
+    cx: 540,
+    cy: 530,
     color: "#9333ea",
-    textX: 40,
+    textX: 280,
     textY: 340,
     title: "Phase 1: Intern (0-100 pts)",
     steps: ["Learn The Basics", "Hands-On Practice", "Version Control"],
     icon: <Lightbulb className="h-6 w-6 text-white" strokeWidth={1.5} />,
   },
   {
-    cx: 700, // nudged closer to road curve
+    cx: 960,
     cy: 430,
     color: "#db2777",
-    textX: 750,
+    textX: 1010,
     textY: 480,
     title: "Phase 2: Codev (100-200 pts)",
     steps: [
@@ -34,11 +34,11 @@ const phases = [
     icon: <BarChart3 className="h-6 w-6 text-white" strokeWidth={1.5} />,
   },
   {
-    cx: 1200, // shifted onto road curve
-    cy: 420,
+    cx: 1550,
+    cy: 360,
     color: "#f59e0b",
-    textX: 980,
-    textY: 250,
+    textX: 1280,
+    textY: 220,
     title: "Phase 3: Mentor (200+ pts)",
     steps: ["Specialize", "Advanced Concepts", "Collaborate"],
     icon: <Code2 className="h-6 w-6 text-white" strokeWidth={1.5} />,
@@ -96,16 +96,16 @@ export default function AnimatedRoadmapSvg() {
         ref={svgRef}
         id="roadmap-svg"
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 1450 700"
+        viewBox="0 0 1900 700"
         className="hidden h-auto w-full lg:block"
       >
-        {/* Road Base (smooth S-shape, extended to end) */}
+        {/* Road Base (smooth S-shape, extended to end with more spacing) */}
         <path
           id="main-path"
-          d="M 100 550
-             C 300 450, 400 650, 600 500
-             S 900 300, 1100 400
-             S 1250 250, 1400 200"
+          d="M 360 550
+             C 560 450, 660 650, 860 500
+             S 1160 300, 1360 400
+             S 1600 230, 1650 180"
           stroke="#272728"
           strokeWidth="28"
           fill="none"
@@ -115,10 +115,10 @@ export default function AnimatedRoadmapSvg() {
         {/* Yellow center line (animated, goes full length) */}
         <path
           id="center-line"
-          d="M 100 550
-             C 300 450, 400 650, 600 500
-             S 900 300, 1100 400
-             S 1250 250, 1400 200"
+          d="M 360 550
+             C 560 450, 660 650, 860 500
+             S 1160 300, 1360 400
+             S 1600 230, 1650 180"
           stroke="#fde047"
           strokeWidth="4"
           fill="none"
@@ -127,8 +127,8 @@ export default function AnimatedRoadmapSvg() {
         />
 
         {/* Start marker */}
-        <circle cx="100" cy="550" r="18" fill="#22c55e" stroke="#fff" strokeWidth="3" />
-        <text x="75" y="590" fontSize="12" fill="#374151" fontWeight="bold">
+        <circle cx="360" cy="550" r="18" fill="#22c55e" stroke="#fff" strokeWidth="3" />
+        <text x="335" y="590" fontSize="12" fill="#374151" fontWeight="bold">
           Start
         </text>
 

apps/codebility/app/auth/onboarding/_components/RoadMap/RoadMapIntro.tsx

@@ -63,7 +63,7 @@ export default function RoadMapIntro() {
       </div>
 
       {/* Main Content */}
-      <div className="relative z-10 flex flex-col items-center justify-center py-20 text-center lg:min-h-screen lg:pb-32">
+      <div className="relative z-10 flex flex-col items-center justify-center py-20 text-center lg:min-h-screen">
         {/* Background overlay for better text readability */}
         <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/60 to-transparent"></div>
 
@@ -74,13 +74,13 @@ export default function RoadMapIntro() {
             transition={{ duration: 0.8, ease: "easeOut" }}
             className="mb-8"
           >
-            <div className="flex items-center justify-center space-x-3 mb-4">
+            <div className="flex items-center justify-center space-x-3">
               <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center">
                 <span className="text-white font-bold text-sm">C</span>
               </div>
               <span className="text-teal-300 font-semibold text-lg">Codebility</span>
             </div>
-            <span className="inline-block rounded-full bg-gradient-to-r from-teal-400/20 to-cyan-400/20 px-6 py-2 text-sm font-semibold text-teal-300 backdrop-blur-sm border border-teal-400/30">
+            <span className="inline-block rounded-full bg-gradient-to-r from-teal-400/20 to-cyan-400/20 px-6 py-2 text-sm font-semibold text-teal-300 backdrop-blur-sm border border-teal-400/30 mt-6">
               Welcome to Your Journey
             </span>
           </motion.div>