Update components/discovery-flow.tsx

2026-01-18 18:30:04 +00:00 · 2026-01-18 18:30:04 +00:00 · 411d6e33a2
parent ae57fb500d
commit 411d6e33a2
1 changed files with 126 additions and 0 deletions
--- a/components/discovery-flow.tsx
+++ b/components/discovery-flow.tsx
@ -0,0 +1,126 @@
+"use client";
+import { useState } from "react";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronRight, Sparkles, BrainCircuit } from "lucide-react";
+
+const steps = [
+  {
+    id: "age",
+    question: "What is your age group?",
+    options: ["School (10-15)", "High School (16-18)", "College Student", "Early Professional"],
+  },
+  {
+    id: "interest",
+    question: "What interests you the most?",
+    options: ["Technology", "Business", "Creativity", "Life Skills"],
+  },
+  {
+    id: "goal",
+    question: "What is your primary goal?",
+    options: ["Get a Job", "Start a Business", "Freelancing", "Career Clarity"],
+  },
+];
+
+export function DiscoveryFlow() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [selections, setSelections] = useState<Record<string, string>>({});
+  const [isFinished, setIsFinished] = useState(false);
+
+  const handleSelect = (option: string) => {
+    const stepId = steps[currentStep].id;
+    setSelections({ ...selections, [stepId]: option });
+    
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      setIsFinished(true);
+    }
+  };
+
+  const reset = () => {
+    setCurrentStep(0);
+    setSelections({});
+    setIsFinished(false);
+  };
+
+  return (
+    <section className="py-20 bg-neutral-900 text-white overflow-hidden">
+      <Container>
+        <div className="text-center max-w-3xl mx-auto mb-12">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-sm font-medium mb-4">
+            <Sparkles className="h-4 w-4" />
+            <span>Investor Demo: AI Engine</span>
+          </div>
+          <Heading level="h2" className="text-3xl md:text-4xl text-white">AI Skill Discovery Flow</Heading>
+          <Subheading className="mt-4 text-neutral-400">
+            Experience how our AI understands students and builds their future.
+          </Subheading>
+        </div>
+
+        <div className="max-w-2xl mx-auto">
+          <Card className="bg-neutral-800 border-neutral-700 overflow-hidden">
+            <CardContent className="p-8">
+              <AnimatePresence mode="wait">
+                {!isFinished ? (
+                  <motion.div
+                    key={currentStep}
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -20 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <div className="mb-8">
+                      <span className="text-sm text-blue-400 font-medium">Step {currentStep + 1} of {steps.length}</span>
+                      <h3 className="text-2xl font-bold mt-2 text-white">{steps[currentStep].question}</h3>
+                    </div>
+                    <div className="grid grid-cols-1 gap-3">
+                      {steps[currentStep].options.map((option) => (
+                        <button
+                          key={option}
+                          onClick={() => handleSelect(option)}
+                          className="flex items-center justify-between p-4 rounded-xl border border-neutral-700 bg-neutral-800/50 hover:bg-blue-600 hover:border-blue-500 transition-all text-left group"
+                        >
+                          <span className="font-medium text-white">{option}</span>
+                          <ChevronRight className="h-5 w-5 text-neutral-500 group-hover:text-white" />
+                        </button>
+                      ))}
+                    </div>
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    className="text-center py-6"
+                  >
+                    <div className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-[0_0_30px_rgba(37,99,235,0.5)]">
+                      <BrainCircuit className="h-10 w-10 text-white" />
+                    </div>
+                    <h3 className="text-3xl font-bold mb-4 text-white">Your AI Roadmap is Ready!</h3>
+                    <div className="p-6 rounded-2xl bg-neutral-900 border border-neutral-700 mb-8 text-left">
+                      <p className="text-blue-400 text-sm font-bold uppercase tracking-wider mb-2">Recommendation</p>
+                      <p className="text-xl font-semibold text-white">
+                        Based on your profile, we recommend: <br/>
+                        <span className="text-blue-400">{selections.interest} → Beginner AI & Web Skills</span>
+                      </p>
+                      <div className="mt-4 pt-4 border-t border-neutral-800 text-neutral-400 text-sm italic">
+                        "This roadmap adapts as the student grows, ensuring they always learn what's relevant."
+                      </div>
+                    </div>
+                    <Button onClick={reset} variant="outline" className="text-white border-neutral-700 hover:bg-neutral-700">
+                      Try Again
+                    </Button>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </CardContent>
+          </Card>
+        </div>
+      </Container>
+    </section>
+  );
+}