step components

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -1310,6 +1310,57 @@ styles with important tags:
     color: rgba($white, 0.85) !important;
     font-weight: 500 !important;
   }
+
+  .stepper-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .stepper-number {
+      font-size: 16px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      min-width: 32px;
+      background-color: $secondary;
+      border-radius: 48px;
+      opacity: 0.4;
+      transition: all 0.2s;
+
+      &.active {
+        background-color: $primary;
+        opacity: 1;
+      }
+    }
+
+    .stepper-description {
+      font-size: 18px;
+      font-weight: 600;
+      white-space: nowrap;
+      opacity: 0.4;
+      transition: all 0.2s;
+
+      &.active {
+        opacity: 1;
+      }
+    }
+
+    .stepper-line {
+      flex-grow: 1;
+      height: 3px;
+      background: $secondary;
+      transition: all 0.2s;
+
+      &.active {
+        background-color: $primary;
+        opacity: 1;
+      }
+    }
+  }
 }
 
 select {

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerPage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { faWaveform } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
@@ -6,29 +6,62 @@ import { PageHeaderWithImage } from "v2/view/_common/PageHeaderWithImage";
 import { Panel } from "v2/view/_common/Panel";
 import { Stepper } from "./components/Stepper";
 import { StepperControls } from "./components/StepperControls";
+import { motion } from "framer-motion";
+import { container } from "data/animation";
+import { UploadSamples } from "./components/steps/UploadSamples";
+import { VoiceDetails } from "./components/steps/VoiceDetails";
+import { Complete } from "./components/steps/Complete";
 
 function VoiceDesignerPage(this: any) {
   usePrefixedDocumentTitle("Voice Designer");
 
+  const [currentStep, setCurrentStep] = useState(0);
+  const steps = ["Upload Samples", "Voice Details", "Complete"];
+
+  const displayStep = (step: any) => {
+    switch (step) {
+      case 0:
+        return <UploadSamples />;
+      case 1:
+        return <VoiceDetails />;
+      case 2:
+        return <Complete />;
+      default:
+    }
+  };
+
+  const handleBack = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
   return (
-    <div>
+    <motion.div initial="hidden" animate="visible" variants={container}>
       <PageHeaderWithImage
         headerImage="/mascot/kitsune_pose2.webp"
         titleIcon={<FontAwesomeIcon icon={faWaveform} className="me-3" />}
         title={<>Voice Designer</>}
-        subText={
-          <>
-            Clone your own voice or a voice you have permission and rights to!
-          </>
-        }
+        subText={<>Upload and instantly clone your voice!</>}
         showButtons={false}
       />
 
       <Panel>
-        <Stepper />
-        <StepperControls />
+        {/* Stepper */}
+        <Stepper steps={steps} currentStep={currentStep} />
+
+        <div className="my-4">{displayStep(currentStep)}</div>
+
+        {/* Navigation Controls */}
+        <StepperControls onBack={handleBack} onNext={handleNext} />
       </Panel>
-    </div>
+    </motion.div>
   );
 }
 

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/Stepper.tsx

@@ -1,7 +1,43 @@
 import React from "react";
 
-function Stepper(this: any) {
-  return <div></div>;
+interface StepperProps {
+  steps: string[];
+  currentStep: number;
 }
 
+const Stepper: React.FC<StepperProps> = ({ steps, currentStep }) => {
+  return (
+    <div className="stepper-container d-flex w-100 gap-3">
+      {steps.map((step, index) => (
+        <div
+          key={index}
+          className={`position-relative d-flex ${
+            index !== steps.length - 1 ? "w-100" : ""
+          } align-items-center gap-3`}
+        >
+          <div
+            className={`stepper-number ${
+              index === currentStep ? "active" : ""
+            }`}
+          >
+            {index + 1}
+          </div>
+          <div
+            className={`stepper-description ${
+              index === currentStep ? "active" : ""
+            }`}
+          >
+            {step}
+          </div>
+          {index !== steps.length - 1 && (
+            <div
+              className={`stepper-line ${index < currentStep ? "active" : ""}`}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export { Stepper };

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx

@@ -1,12 +1,24 @@
 import React from "react";
 
-function StepperControls(this: any) {
-  return (
-    <div className="d-flex gap-3">
-      <button className="btn btn-secondary w-100">Back</button>
-      <button className="btn btn-primary w-100">Next</button>
-    </div>
-  );
+interface StepperControlsProps {
+  onBack: () => void;
+  onNext: () => void;
 }
 
+const StepperControls: React.FC<StepperControlsProps> = ({
+  onBack,
+  onNext,
+}) => {
+  return (
+    <div className="d-flex gap-3">
+      <button className="btn btn-secondary w-100" onClick={onBack}>
+        Back
+      </button>
+      <button className="btn btn-primary w-100" onClick={onNext}>
+        Next
+      </button>
+    </div>
+  );
+};
+
 export { StepperControls };

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/Complete.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Complete() {
+  return <>Complete</>;
+}
+
+export { Complete };

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/UploadSamples.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+function UploadSamples() {
+  return (
+    <div>
+      <input className="form-control" type="text" />
+    </div>
+  );
+}
+
+export { UploadSamples };

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function VoiceDetails() {
+  return <>Voice Details</>;
+}
+
+export { VoiceDetails };