implement cover page for challenge

zacharyLYH · Dec 6, 2023 · e36c1e1 · e36c1e1
1 parent e1ddfe9
commit e36c1e1
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 3 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -11,7 +11,7 @@ import GrowOnScroll from "@/components/ui/grow-on-scroll";
 import Footer from "@/components/landing/footer";
 import ComponentCarousel from "@/components/ui/component-carousel";
 import { Separator } from "@/components/ui/separator";
-import StepperCard from "@/components/landing/challenge/stepper-pages/StepperCard";
+import ChallengeMain from "@/components/landing/challenge/challenge-main";
 
 export default function Home() {
     return (
@@ -47,7 +47,7 @@ export default function Home() {
                         </p>
                     </div>
                 </div>
-                <StepperCard />
+                <ChallengeMain />
             </section>
             <GrowOnScroll className='flex flex-col md:flex-row'>
                 <SiteCounter />
@@ -61,7 +61,7 @@ export default function Home() {
                 />
             </section>
             <Separator />
-            <section>
+            <section id='rating'>
                 <RatingBody />
             </section>
             <section>

diff --git a/components/landing/challenge/challenge-intro.tsx b/components/landing/challenge/challenge-intro.tsx
@@ -0,0 +1,63 @@
+import { Badge } from "@/components/ui/badge";
+import Link from "next/link";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+    CardFooter,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+interface ChallengeIntroProps {
+    button: () => React.ReactNode;
+}
+
+const ChallengeIntro: React.FC<ChallengeIntroProps> = ({ button }) => {
+    return (
+        <Card className='mx-auto my-8 h-[420px] w-2/3 rounded-2xl bg-gray-800'>
+            <CardHeader className='p-4'>
+                <CardTitle className='mb-4 text-3xl font-semibold text-white'>
+                    We&apos;re glad you&apos;re here!
+                </CardTitle>
+                <CardDescription>
+                    <Badge className='rounded-full bg-blue-400 px-2 py-1 text-white'>
+                        Alpha
+                    </Badge>
+                </CardDescription>
+            </CardHeader>
+            <Separator className='bg-gray-700' />
+            <CardContent className='p-4'>
+                <p className='text-gray-300'>
+                    It&apos;s simple. We&apos;ll provide you a coding
+                    environment and a target image. Your job is to recreate that
+                    image using{" "}
+                    <span className='font-semibold text-green-500'>HTML</span>{" "}
+                    and{" "}
+                    <span className='font-semibold text-green-500'>
+                        TailwindCSS
+                    </span>
+                    . After you submit, we&apos;ll send your scores via Email
+                    📧.
+                </p>
+            </CardContent>
+            <CardFooter className='p-4'>
+                <p className='text-sm text-muted-foreground'>
+                    At this stage, we&apos;re presenting a bare bones look at
+                    what&apos;s to come for Tailspin and looking for{" "}
+                    <Link href='#rating' className='text-blue-500 underline'>
+                        feedback
+                    </Link>
+                    !
+                </p>
+            </CardFooter>
+            <Separator className='bg-gray-700' />
+            <div className='flex items-center justify-center p-4'>
+                {button()}
+            </div>
+        </Card>
+    );
+};
+
+export default ChallengeIntro;
diff --git a/components/landing/challenge/challenge-main.tsx b/components/landing/challenge/challenge-main.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import ChallengeIntro from "./challenge-intro";
+import StepperCard from "./stepper-pages/StepperCard";
+import { Button } from "@/components/ui/button";
+import { Code } from "lucide-react";
+
+const ChallengeMain = () => {
+    const [goToStepper, setGoToStepper] = useState(false);
+
+    const readyToCodeButton = () => {
+        return (
+            <Button onClick={() => setGoToStepper(true)}>
+                <code>Ready to code</code>
+                <Code className='ml-2' />
+            </Button>
+        );
+    };
+    return (
+        <>
+            {!goToStepper && <ChallengeIntro button={readyToCodeButton} />}
+            {goToStepper && <StepperCard />}
+        </>
+    );
+};
+
+export default ChallengeMain;