Merge pull request #31 from davedumto/feat-built-onboarding-steps-into-one

Feat built onboarding steps into one

Author: codebestia

.DS_Store

@@ -1,19 +1,15 @@
 import Nav from '@/components/onboarding/Nav'
-import StepIndicators from '@/components/onboarding/StepIndicators'
 
 export default function layout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
   return (
-    <main className="w-full lg:px-[50px] md:px-6 px-4 md:py-[50px] py-4 overflow-x-hidden">
+    <main className="w-full lg:px-[50px] md:px-6 px-4 md:py-[50px] py-4 overflow-x-hidden bg-black">
       <Nav />
       <section className="max-w-2xl mx-auto md:mt-28 mt-20">
         <div className="w-full flex flex-col items-center gap-6">
-          {/* Step Indicators */}
-          <StepIndicators />
-
           {children}
         </div>
       </section>

frontend/app/onboarding/layout.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const step1 = () => {
+  return <div>step1</div>
+}
+
+export default step1

frontend/app/onboarding/step1/page.tsx frontend/app/onboarding/step/page.tsxfrontend/app/onboarding/step1/page.tsx renamed to frontend/app/onboarding/step/page.tsx

@@ -25,7 +25,12 @@ const Nav = () => {
   return (
     <header className="w-full flex justify-between items-center">
       {/* Logo */}
-      <Logo href={'/'} className="md:w-[50px] w-[40px]" image={spherreLogo} />
+      <Logo
+        href={'/'}
+        className="md:w-[50px] w-[40px] "
+        image={spherreLogo}
+        textColor="white"
+      />
 
       {/* Connect button & Hamburger Menu Button */}
       <div className="flex items-center gap-4">

frontend/app/onboarding/step/step1.tsx

@@ -1,61 +1,68 @@
 'use client'
 
-import { usePathname } from 'next/navigation'
-
-export default function StepIndicators() {
-  const pathname = usePathname()
+interface StepIndicatorProps {
+  currentStep: number
+}
 
-  const isStep2 = pathname.includes('step2')
-  const isStep3 =
-    pathname.includes('step3') || pathname.includes('confirmSetup')
+export default function StepIndicator({ currentStep }: StepIndicatorProps) {
+  const isStep2 = currentStep >= 2
+  const isStep3 = currentStep >= 3
 
   return (
     <div className="w-full flex justify-between items-center md:px-8 relative">
-      {/* Horizontal Lines */}
-      <div
-        className={`${isStep2 || isStep3 ? 'bg-[#6F2FCE]' : 'bg-[#8E9BAE]'} absolute top-[22.5px] md:left-[18%] left-[23%] w-[15%] md:w-[25%] h-[1px]`}
-      ></div>
-      <div
-        className={`${isStep3 ? 'bg-[#6F2FCE]' : 'bg-[#8E9BAE]'} absolute top-[22.5px] md:right-[18%] right-[23%] w-[15%] md:w-[25%] h-[1px]`}
-      ></div>
-
-      {/* Step 1 */}
+      <div className="absolute top-[22.5px] md:left-[18%] left-[23%] w-[15%] md:w-[25%] h-[1px] bg-[#8E9BAE] overflow-hidden">
+        <div
+          className={`absolute top-0 left-0 h-full bg-[#6F2FCE] transition-all duration-500 ease-in-out ${isStep2 || isStep3 ? 'w-full' : 'w-0'}`}
+        ></div>
+      </div>
+      <div className="absolute top-[22.5px] md:right-[18%] right-[23%] w-[15%] md:w-[25%] h-[1px] bg-[#8E9BAE] overflow-hidden">
+        <div
+          className={`absolute top-0 left-0 h-full bg-[#6F2FCE] transition-all duration-500 ease-in-out ${isStep3 ? 'w-full' : 'w-0'}`}
+        ></div>
+      </div>
       <div className="flex flex-col items-center gap-8 relative">
-        <div className="bg-[#6F2FCE] text-white flex justify-center items-center w-[45px] h-[45px] rounded-full  font-[700] text-lg z-10">
+        <div className="bg-[#6F2FCE] text-white flex justify-center items-center w-[45px] h-[45px] rounded-full font-[700] text-lg z-10 transition-colors duration-300">
           1
         </div>
         <h4 className="text-white text-sm text-center font-[400]">
           Account Details
         </h4>
       </div>
-
-      {/* Step 2 */}
       <div className="flex flex-col items-center gap-8 relative">
         <div
-          className={`${isStep2 || isStep3 ? 'bg-[#6F2FCE] text-white ' : 'bg-[#1C1D1F] text-[#8E9BAE]'} flex justify-center items-center w-[45px] h-[45px] rounded-full  font-[700] text-lg z-10`}
+          className={`${isStep2 || isStep3 ? 'bg-[#6F2FCE] text-white ' : 'bg-[#1C1D1F] text-[#8E9BAE]'} flex justify-center items-center w-[45px] h-[45px] rounded-full font-[700] text-lg z-10 transition-colors duration-300`}
         >
           2
         </div>
         <h4
-          className={`${isStep2 || isStep3 ? 'text-white ' : 'text-[#8E9BAE]'} text-sm text-center font-[400]`}
+          className={`${isStep2 || isStep3 ? 'text-white ' : 'text-[#8E9BAE]'} text-sm text-center font-[400] transition-colors duration-300`}
         >
           Members & Threshold
         </h4>
       </div>
-
-      {/* Step 3 */}
       <div className="flex flex-col items-center gap-8 relative">
         <div
-          className={`${isStep3 ? 'bg-[#6F2FCE] text-white ' : 'bg-[#1C1D1F] text-[#8E9BAE]'} flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#1C1D1F] text-[#8E9BAE] font-[700] text-lg z-10`}
+          className={`${isStep3 ? 'bg-[#6F2FCE] text-white ' : 'bg-[#1C1D1F] text-[#8E9BAE]'} flex justify-center items-center w-[45px] h-[45px] rounded-full font-[700] text-lg z-10 transition-colors duration-300`}
         >
           3
         </div>
         <h4
-          className={`${isStep3 ? 'text-white ' : 'text-[#8E9BAE]'} text-sm text-center font-[400]`}
+          className={`${isStep3 ? 'text-white ' : 'text-[#8E9BAE]'} text-sm text-center font-[400] transition-colors duration-300`}
         >
           Confirm & Setup
         </h4>
       </div>
+
+      <style jsx>{`
+        @keyframes slide-right {
+          from {
+            width: 0;
+          }
+          to {
+            width: 100%;
+          }
+        }
+      `}</style>
     </div>
   )
 }