update

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

@@ -17,14 +17,14 @@ function VoiceDesignerPage() {
   usePrefixedDocumentTitle("Voice Designer");
 
   const [currentStep, setCurrentStep] = useState(0);
-  const steps = ["Upload Samples", "Voice Details", "Processing", "Complete"];
+  const steps = ["Voice Details", "Upload Samples", "Processing", "Complete"];
 
   const displayStep = (step: any) => {
     switch (step) {
       case 0:
-        return <UploadSamples />;
-      case 1:
         return <VoiceDetails />;
+      case 1:
+        return <UploadSamples />;
       case 2:
         return <Processing />;
       case 3:
@@ -41,7 +41,7 @@ function VoiceDesignerPage() {
 
   const handleNext = async () => {
     if (currentStep === 1) {
-      // When moving from Voice Details to Processing
+      // When moving from Upload Samples to Processing
       setCurrentStep(2); // Move to processing step immediately
 
       // Simulating a 3-second delay to mimic API call

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

@@ -1,7 +1,18 @@
+import Button from "components/common/Button/Button";
 import React from "react";
 
 function Complete() {
-  return <>Complete</>;
+  return (
+    <div className="d-flex flex-column gap-3 align-items-center">
+      <div className="d-flex gap-3">
+        <Button label="Use Voice" />
+        <Button label="Create another voice" secondary={true} />
+      </div>
+      <a onClick={() => {}} className="text-link fw-medium">
+        View my voices
+      </a>
+    </div>
+  );
 }
 
 export { Complete };

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

@@ -1,7 +1,7 @@
 import {
   faEye,
-  faMicrophoneLines,
-  faTags,
+  // faMicrophoneLines,
+  // faTags,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import useVoiceDetailsStore from "hooks/useVoiceDetailsStore/";
@@ -24,23 +24,12 @@ export const SearchFieldClass = {
 };
 
 function VoiceDetails() {
-  const {
-    name,
-    vocalType,
-    tags,
-    description,
-    visibility,
-    setName,
-    setVocalType,
-    setTags,
-    setDescription,
-    setVisibility,
-  } = useVoiceDetailsStore();
+  const { name, visibility, setName, setVisibility } = useVoiceDetailsStore();
 
   return (
     <div className="d-flex flex-column gap-4">
       <div className="row gy-4">
-        <div className="col-12 col-md-8">
+        <div>
           <label className="sub-title">Name</label>
           <input
             className="form-control"
@@ -50,22 +39,9 @@ function VoiceDetails() {
             onChange={(e) => setName(e.target.value)}
           />
         </div>
-        <div className="col-12 col-md-4">
-          <label className="sub-title">Vocal Type</label>
-          <div className="input-icon-search">
-            <span className="form-control-feedback">
-              <FontAwesomeIcon icon={faMicrophoneLines} />
-            </span>
-            <Select
-              classNames={SearchFieldClass}
-              value={vocalType}
-              onChange={(e) => setVocalType(e.target.value)}
-            />
-          </div>
-        </div>
       </div>
 
-      <div>
+      {/* <div>
         <label className="sub-title">Tags</label>
         <div className="input-icon-search">
           <span className="form-control-feedback">
@@ -77,9 +53,9 @@ function VoiceDetails() {
             onChange={(e) => setTags(e.target.value)}
           />
         </div>
-      </div>
+      </div> */}
 
-      <div>
+      {/* <div>
         <label className="sub-title">Description</label>
         <textarea
           className="form-control"
@@ -87,7 +63,7 @@ function VoiceDetails() {
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
-      </div>
+      </div> */}
 
       <div>
         <label className="sub-title">Visibility</label>