product usage survey page

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

@@ -490,6 +490,10 @@ styles with important tags:
     list-style: none;
   }
 
+  .form-check {
+    margin-bottom: 0.3rem;
+  }
+
   .form-check-input:checked {
     background-color: $primary;
     border-color: $primary;

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -77,6 +77,7 @@ import { VcModelListPage } from "./pages/vc/vc_model_list/VcModelListPage";
 import { UploadVoiceConversionModel } from "./pages/upload/UploadVoiceConversionModel";
 import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels";
 import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPage";
+import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -494,6 +495,12 @@ class PageContainer extends React.Component<Props, State> {
               <PatronPage sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
+            <Route path="/product-usage">
+              <ProductUsageInfoPage
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
             <Route path="/voice-conversion">
               <VcModelListPage
                 sessionWrapper={this.props.sessionWrapper}

packages/fakeyou.com/src/v2/view/pages/product_usage_info/ProductUsageInfoPage.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { motion } from "framer-motion";
+import { container, panel } from "data/animation";
+import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+
+interface Props {
+  sessionWrapper: SessionWrapper;
+}
+
+const radioButtonsWho = [
+  {
+    label: "Filmmaker",
+  },
+  {
+    label: "Animator",
+  },
+  {
+    label: "Content creator",
+  },
+  {
+    label: "Musician",
+  },
+  {
+    label: "Other",
+  },
+];
+
+const radioButtonsWhy = [
+  {
+    label: "Making social media content",
+  },
+  {
+    label: "Making a short film",
+  },
+  {
+    label: "Making memes for self or friends",
+  },
+  {
+    label: "Using the API",
+  },
+  {
+    label: "Other",
+  },
+];
+
+function ProductUsageInfoPage(props: Props) {
+  usePrefixedDocumentTitle("Product Usage Survey");
+
+  const [selectedOptionWho, setSelectedOptionWho] = useState("");
+  const [selectedOptionWhy, setSelectedOptionWhy] = useState("");
+
+  const handleOptionChangeWho = (event: any) => {
+    setSelectedOptionWho(event.target.value);
+  };
+
+  const handleOptionChangeWhy = (event: any) => {
+    setSelectedOptionWhy(event.target.value);
+  };
+
+  return (
+    <motion.div initial="hidden" animate="visible" variants={container}>
+      <motion.div
+        className="container-panel pt-lg-5 my-lg-5 login-panel"
+        variants={panel}
+      >
+        <div className="panel p-4 p-lg-4 mt-5 mt-lg-0 px-md-4">
+          <h2 className="fw-bold pb-0">Product Usage Survey</h2>
+          <hr className="my-4" />
+          <form className="d-flex flex-column gap-4">
+            <div>
+              <label className="sub-title">What best describes you?</label>
+              {radioButtonsWho.map((radioButton, index) => (
+                <div className="form-check" key={index}>
+                  <input
+                    className="form-check-input"
+                    type="radio"
+                    id={`Radios${index}`}
+                    name="Radios"
+                    value={radioButton.label}
+                    checked={selectedOptionWho === radioButton.label}
+                    onChange={handleOptionChangeWho}
+                  />
+                  <label
+                    className="form-check-label"
+                    htmlFor={`Radios${index}`}
+                  >
+                    {radioButton.label}
+                  </label>
+                </div>
+              ))}
+              {selectedOptionWho === "Other" && (
+                <div className="form-check">
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="Type what best describes you here"
+                  />
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label className="sub-title">
+                What's the main reason you're using FakeYou?
+              </label>
+              {radioButtonsWhy.map((radioButton, index) => (
+                <div className="form-check" key={index}>
+                  <input
+                    className="form-check-input"
+                    type="radio"
+                    id={`Radios2${index}`}
+                    name="Radios2"
+                    value={radioButton.label}
+                    checked={selectedOptionWhy === radioButton.label}
+                    onChange={handleOptionChangeWhy}
+                  />
+                  <label
+                    className="form-check-label"
+                    htmlFor={`Radios2${index}`}
+                  >
+                    {radioButton.label}
+                  </label>
+                </div>
+              ))}
+              {selectedOptionWhy === "Other" && (
+                <div className="form-check">
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="Type your reason here"
+                  />
+                </div>
+              )}
+            </div>
+            <button className="btn btn-primary">Submit</button>
+          </form>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export { ProductUsageInfoPage };