grimes contest page

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

@@ -68,11 +68,15 @@ import { NewsPage } from "./pages/news/NewsPage";
 import { LandingPage } from "./pages/landing/LandingPage";
 import { ChannelsPage } from "./pages/channels/Channels";
 import { TrumpTtsPage } from "./pages/character/trump/TrumpTtsPage";
-import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/src/jobs/InferenceJob";
+import {
+  FrontendInferenceJobType,
+  InferenceJob,
+} from "@storyteller/components/src/jobs/InferenceJob";
 //import { LandingPage } from "./pages/landing/LandingPage";
 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 { GrimesPage } from "./pages/contest/GrimesPage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -98,7 +102,10 @@ interface Props {
   isShowingBootstrapLanguageNotice: boolean;
   clearBootstrapLanguageNotice: () => void;
 
-  enqueueInferenceJob: (jobToken: string, frontendInferenceJobType: FrontendInferenceJobType) => void;
+  enqueueInferenceJob: (
+    jobToken: string,
+    frontendInferenceJobType: FrontendInferenceJobType
+  ) => void;
   inferenceJobs: Array<InferenceJob>;
   inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
 
@@ -153,10 +160,14 @@ interface Props {
   setSelectedTtsLanguageScope: (selectedTtsLanguageScope: string) => void;
 
   voiceConversionModels: Array<VoiceConversionModelListItem>;
-  setVoiceConversionModels: (ttsVoices: Array<VoiceConversionModelListItem>) => void;
+  setVoiceConversionModels: (
+    ttsVoices: Array<VoiceConversionModelListItem>
+  ) => void;
 
   maybeSelectedVoiceConversionModel?: VoiceConversionModelListItem;
-  setMaybeSelectedVoiceConversionModel: (maybeSelectedVoiceConversionModel: VoiceConversionModelListItem) => void;
+  setMaybeSelectedVoiceConversionModel: (
+    maybeSelectedVoiceConversionModel: VoiceConversionModelListItem
+  ) => void;
 }
 
 interface State {}
@@ -392,8 +403,12 @@ class PageContainer extends React.Component<Props, State> {
             <Route path="/upload/voice_conversion">
               <UploadVoiceConversionModel
                 sessionWrapper={this.props.sessionWrapper}
-                voiceConversionModelUploadJobs={this.props.voiceConversionModelUploadJobs}
-                enqueueVoiceConversionModelUploadJob={this.props.enqueueVoiceConversionModelUploadJob}
+                voiceConversionModelUploadJobs={
+                  this.props.voiceConversionModelUploadJobs
+                }
+                enqueueVoiceConversionModelUploadJob={
+                  this.props.enqueueVoiceConversionModelUploadJob
+                }
               />
             </Route>
 
@@ -487,8 +502,12 @@ class PageContainer extends React.Component<Props, State> {
                 }
                 voiceConversionModels={this.props.voiceConversionModels}
                 setVoiceConversionModels={this.props.setVoiceConversionModels}
-                maybeSelectedVoiceConversionModel={this.props.maybeSelectedVoiceConversionModel}
-                setMaybeSelectedVoiceConversionModel={this.props.setMaybeSelectedVoiceConversionModel}
+                maybeSelectedVoiceConversionModel={
+                  this.props.maybeSelectedVoiceConversionModel
+                }
+                setMaybeSelectedVoiceConversionModel={
+                  this.props.setMaybeSelectedVoiceConversionModel
+                }
                 enqueueInferenceJob={this.props.enqueueInferenceJob}
                 inferenceJobs={this.props.inferenceJobs}
                 inferenceJobsByCategory={this.props.inferenceJobsByCategory}
@@ -499,6 +518,10 @@ class PageContainer extends React.Component<Props, State> {
               <AboutPage />
             </Route>
 
+            <Route path="/grimes">
+              <GrimesPage />
+            </Route>
+
             <Route path="/terms">
               <TermsPage />
             </Route>

packages/fakeyou.com/src/v2/view/pages/contest/GrimesPage.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { container, item, image, panel } from "../../../../data/animation";
+import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileMusic, faWaveformLines } from "@fortawesome/pro-solid-svg-icons";
+
+interface Props {}
+
+function GrimesPage(props: Props) {
+  usePrefixedDocumentTitle("Grimes AI Contest");
+
+  return (
+    <motion.div initial="hidden" animate="visible" variants={container}>
+      <div className="container pt-3 pt-lg-5 pb-5">
+        <div className="row gx-3 align-items-center">
+          <div className="col-lg-5">
+            <div className="d-flex justify-content-center justify-content-lg-start mb-3 mb-lg-0">
+              <motion.img
+                src="/mascot/contest.webp"
+                className="img-fluid"
+                width="350"
+                alt="FakeYou Kitsune Mascot!"
+                variants={image}
+              />
+            </div>
+          </div>
+          <div className="col-lg-7 px-md-2 ps-lg-5 ps-xl-2">
+            <div className="text-center text-lg-start">
+              <div>
+                <motion.h1
+                  className=" fw-bold lh-1 mb-4 display-5"
+                  variants={item}
+                >
+                  Grimes AI Song Contest
+                </motion.h1>
+              </div>
+              <div>
+                <motion.p className="lead" variants={item}>
+                  We at FakeYou are thrilled to present the Grimes AI Song
+                  Contest! Participants have the opportunity to compete for a
+                  share of the huge <b>$20,000</b> prize pool! Read more about
+                  this event in the details below.
+                </motion.p>
+                <div className="d-flex gap-3 mt-3 pt-3 justify-content-center justify-content-lg-start">
+                  <Link to="/voice-conversion" className="btn btn-primary">
+                    <FontAwesomeIcon icon={faWaveformLines} className="me-2" />
+                    Start Creating
+                  </Link>
+                  <Link to="/voice-conversion" className="btn btn-primary">
+                    <FontAwesomeIcon icon={faFileMusic} className="me-2" />
+                    Submit Song
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <motion.div className="container-panel pt-5 pb-5" variants={panel}>
+        <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
+          <h1 className="panel-title fw-bold">Contest Details</h1>
+          <div className="py-6 d-flex flex-column gap-4">
+            <p>Description of the contest here...</p>
+            <div>
+              <h2 className="mb-4 fw-semibold">Prize Pool</h2>
+              <p>
+                1. Top Grimes AI Song
+                <br />
+                2. Top AI Song by another artist
+                <br />
+                3. Top Grimes Collab
+                <br />
+                4. Top Deceased Musician Song
+                <br />
+                5. Top Grimes x John Oliver (for instance)
+                <br />
+                6. Top Grimes x (other AI celeb)
+              </p>
+            </div>
+            <div>
+              <h2 className="mb-4 fw-semibold">How to Participate</h2>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+                nulla massa, viverra eget commodo a, tincidunt eu ante.
+                Phasellus imperdiet augue rutrum dignissim hendrerit. Sed
+                sodales ante eu est lacinia, eget eleifend sapien imperdiet.
+                Integer a efficitur massa.
+              </p>
+              <br />
+              <p>
+                Nunc sapien sapien, vestibulum venenatis nulla eget, venenatis
+                vulputate dolor. Etiam faucibus dolor vel augue suscipit ornare.
+                Integer et velit metus. Ut enim arcu, hendrerit eget viverra at,
+                sagittis id dui. Maecenas mollis justo libero, sed auctor ligula
+                suscipit vestibulum. Fusce nec dictum metus. Quisque dapibus
+                placerat urna, at tempus velit blandit quis.
+              </p>
+            </div>
+            <div>
+              <h2 className="mb-4 fw-semibold">Contest Terms and Conditions</h2>
+              <h5 className="mb-4 fw-semibold">1. Eligibility</h5>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+                nulla massa, viverra eget commodo a, tincidunt eu ante.
+                Phasellus imperdiet augue rutrum dignissim hendrerit. Sed
+                sodales ante eu est lacinia, eget eleifend sapien imperdiet.
+                Integer a efficitur massa.
+              </p>
+              <br />
+              <h5 className="mb-4 fw-semibold">
+                2. Data Protection and Publicity
+              </h5>
+              <p>
+                Maecenas mollis justo libero, sed auctor ligula suscipit
+                vestibulum. Fusce nec dictum metus. Quisque dapibus placerat
+                urna, at tempus velit blandit quis.
+              </p>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export { GrimesPage };