From f34cd6f88267d7eed0fb4ea9b28659a159abc3c0 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 6 Mar 2026 16:37:48 +0000 Subject: [PATCH 1/3] Update src/app/page.tsx --- src/app/page.tsx | 588 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 442 insertions(+), 146 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 1f62a66..16d6a9f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,6 +10,7 @@ import PricingCardOne from "@/components/sections/pricing/PricingCardOne"; import FaqDouble from "@/components/sections/faq/FaqDouble"; import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import { useState, useRef, useEffect } from "react"; import { Sparkles, BookOpen, @@ -20,11 +21,229 @@ import { Zap, Crown, Building2, - Target, - Code, + Volume2, + RotateCcw, + CheckCircle, } from "lucide-react"; +interface Quiz { + question: string; + options: string[]; + correctAnswer: number; + explanation: string; +} + export default function LandingPage() { + const [isSpeaking, setIsSpeaking] = useState(false); + const [currentSection, setCurrentSection] = useState(null); + const [quizMode, setQuizMode] = useState(false); + const [currentQuizIndex, setCurrentQuizIndex] = useState(0); + const [quizScore, setQuizScore] = useState(0); + const [selectedAnswer, setSelectedAnswer] = useState(null); + const [showExplanation, setShowExplanation] = useState(false); + const [position, setPosition] = useState({ x: 0, y: 0 }); + const [isMoving, setIsMoving] = useState(false); + const synth = useRef(null); + + const quizzes: Quiz[] = [ + { + question: "What is the primary benefit of using study maps?", options: [ + "Visual organization of complex topics", "Automatic grade improvement", "Replacing traditional studying", "Reducing study time to zero"], + correctAnswer: 0, + explanation: "Study maps help visualize connections between topics and organize knowledge in a structured, hierarchical manner."}, + { + question: "Which feature allows real-time learning with others?", options: [ + "Personal workspace", "Collaboration tools", "Basic templates", "Community forums"], + correctAnswer: 1, + explanation: "Collaboration tools enable multiple users to contribute simultaneously to shared study maps, enhancing collective learning."}, + { + question: "What does learning analytics in StudyMap track?", options: [ + "Social media activity", "Progress and areas for improvement", "Your sleep schedule", "Your social connections"], + correctAnswer: 1, + explanation: "Learning analytics provide insights into your study progress, identifying mastered topics and areas needing more focus."}, + ]; + + const sectionExplanations: Record = { + features: "StudyMap offers collaborative learning for real-time knowledge sharing, detailed learning analytics to track your progress, and customizable templates to match your personal learning style.", "how-it-works": "Over fifty thousand active users create study maps daily. Two million study maps have been created in our collaborative community, with a ninety-five percent student satisfaction rate and an average thirty percent G.P.A. improvement.", pricing: "We offer flexible pricing options. The free start plan is perfect for getting started. Premium at nine ninety-nine monthly is best for serious learners. Pro at twenty-four ninety-nine monthly is for educators and teams. Enterprise plans are customized for institutions."}; + + const handleSpeak = (text: string) => { + if (isSpeaking) { + window.speechSynthesis.cancel(); + setIsSpeaking(false); + setCurrentSection(null); + } else { + window.speechSynthesis.cancel(); + const utterance = new SpeechSynthesisUtterance(text); + utterance.rate = 0.9; + utterance.onstart = () => setIsSpeaking(true); + utterance.onend = () => { + setIsSpeaking(false); + setCurrentSection(null); + }; + window.speechSynthesis.speak(utterance); + setCurrentSection(text.substring(0, 20)); + } + }; + + const handleKeyDown = (e: KeyboardEvent) => { + const speed = 10; + switch (e.key) { + case "ArrowUp": + setPosition((prev) => ({ ...prev, y: Math.max(prev.y - speed, 0) })); + setIsMoving(true); + break; + case "ArrowDown": + setPosition((prev) => ({ + ...prev, + y: Math.min(prev.y + speed, window.innerHeight - 50), + })); + setIsMoving(true); + break; + case "ArrowLeft": + setPosition((prev) => ({ ...prev, x: Math.max(prev.x - speed, 0) })); + setIsMoving(true); + break; + case "ArrowRight": + setPosition((prev) => ({ + ...prev, + x: Math.min(prev.x + speed, window.innerWidth - 50), + })); + setIsMoving(true); + break; + default: + break; + } + }; + + useEffect(() => { + window.addEventListener("keydown", handleKeyDown); + return () => window.removeEventListener("keydown", handleKeyDown); + }, []); + + const handleAnswerSelect = (index: number) => { + setSelectedAnswer(index); + if (index === quizzes[currentQuizIndex].correctAnswer) { + setQuizScore((prev) => prev + 1); + } + setShowExplanation(true); + }; + + const handleNextQuestion = () => { + if (currentQuizIndex < quizzes.length - 1) { + setCurrentQuizIndex((prev) => prev + 1); + setSelectedAnswer(null); + setShowExplanation(false); + } else { + setQuizMode(false); + setCurrentQuizIndex(0); + setQuizScore(0); + } + }; + + const handleResetQuiz = () => { + setQuizMode(false); + setCurrentQuizIndex(0); + setQuizScore(0); + setSelectedAnswer(null); + setShowExplanation(false); + }; + + if (quizMode) { + const currentQuiz = quizzes[currentQuizIndex]; + return ( + +
+
+
+

+ Question {currentQuizIndex + 1} of {quizzes.length} +

+

{currentQuiz.question}

+
+ {currentQuiz.options.map((option, idx) => ( + + ))} +
+
+ + {showExplanation && ( +
+

+ Explanation: + {currentQuiz.explanation} +

+
+ )} + +
+ + {showExplanation && ( + + )} +
+ + {currentQuizIndex === quizzes.length - 1 && showExplanation && ( +
+

+ Your Score: {quizScore} / {quizzes.length} +

+

+ {(quizScore / quizzes.length) * 100 >= 80 + ? "Excellent work!" + : (quizScore / quizzes.length) * 100 >= 60 + ? "Good effort! Review the explanations." + : "Keep learning! Try again."} +

+
+ )} +
+
+ + ); + } + return ( + {/* Movement Control Indicator */} +
+ {isMoving &&
} +
+ @@ -70,16 +299,15 @@ export default function LandingPage() { imageAlt="StudyMap Dashboard Interface" mediaAnimation="blur-reveal" imagePosition="right" - background={{ variant: "plain" }} testimonials={[ { name: "Alex Johnson", handle: "Student, MIT", testimonial: "StudyMap transformed how I organize and retain information. My grades improved within weeks!", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/portrait-red-haired-man_158595-3774.jpg" - }, + imageSrc: + "http://img.b2bpic.net/free-photo/portrait-red-haired-man_158595-3774.jpg?_wi=1"}, { name: "Maria Chen", handle: "Teacher, Stanford", testimonial: "An amazing tool for helping students visualize complex concepts. Highly recommended!", rating: 5, - imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg" - }, + imageSrc: + "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1"}, ]} testimonialRotationInterval={5000} useInvertedBackground={false} @@ -99,67 +327,103 @@ export default function LandingPage() {
- + + ]} + showStepNumbers={true} + textboxLayout="default" + animationType="blur-reveal" + useInvertedBackground={false} + /> +
+ +
+
- +
+ +
+ +
+
@@ -169,22 +433,28 @@ export default function LandingPage() { tag="Testimonials" testimonials={[ { - id: "1", name: "Sarah Mitchell", role: "High School Student", testimonial: "StudyMap helped me visualize the connections between topics. I went from struggling with biology to getting straight A's!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-red-haired-man_158595-3774.jpg", icon: BookMarked, + id: "1", name: "Sarah Mitchell", role: "High School Student", testimonial: "StudyMap helped me visualize the connections between topics. I went from struggling with biology to getting straight A's!", imageSrc: + "http://img.b2bpic.net/free-photo/portrait-red-haired-man_158595-3774.jpg?_wi=2", icon: BookMarked, }, { - id: "2", name: "Professor James Lee", role: "University Educator", testimonial: "My students are more engaged than ever. StudyMap makes complex concepts accessible and exciting to explore.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg", icon: Award, + id: "2", name: "Professor James Lee", role: "University Educator", testimonial: "My students are more engaged than ever. StudyMap makes complex concepts accessible and exciting to explore.", imageSrc: + "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2", icon: Award, }, { - id: "3", name: "Emma Rodriguez", role: "Test Prep Student", testimonial: "I used StudyMap to prepare for the SAT and improved my score by 200 points. The visual organization was game-changing.", imageSrc: "http://img.b2bpic.net/free-photo/happy-elegant-joyful-guy-grey-jacket-shirt-wears-glasses-gray_291650-1303.jpg", icon: Star, + id: "3", name: "Emma Rodriguez", role: "Test Prep Student", testimonial: "I used StudyMap to prepare for the SAT and improved my score by 200 points. The visual organization was game-changing.", imageSrc: + "http://img.b2bpic.net/free-photo/happy-elegant-joyful-guy-grey-jacket-shirt-wears-glasses-gray_291650-1303.jpg", icon: Star, }, { - id: "4", name: "David Park", role: "Graduate Student", testimonial: "As a grad student, StudyMap keeps my research organized and helps me see patterns I would have missed otherwise.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-therapy_23-2148928886.jpg", icon: Lightbulb, + id: "4", name: "David Park", role: "Graduate Student", testimonial: "As a grad student, StudyMap keeps my research organized and helps me see patterns I would have missed otherwise.", imageSrc: + "http://img.b2bpic.net/free-photo/close-up-smiley-woman-therapy_23-2148928886.jpg", icon: Lightbulb, }, { - id: "5", name: "Lisa Thompson", role: "Corporate Trainer", testimonial: "We use StudyMap for employee training. It's transformed how we deliver and track learning outcomes.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-red-haired-man_158595-3774.jpg", icon: Target, + id: "5", name: "Lisa Thompson", role: "Corporate Trainer", testimonial: "We use StudyMap for employee training. It's transformed how we deliver and track learning outcomes.", imageSrc: + "http://img.b2bpic.net/free-photo/portrait-red-haired-man_158595-3774.jpg?_wi=3", icon: Award, }, { - id: "6", name: "Michael Chen", role: "Self-Taught Developer", testimonial: "Learning to code was overwhelming until I found StudyMap. Now I can track my progress through different programming concepts.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg", icon: Code, + id: "6", name: "Michael Chen", role: "Self-Taught Developer", testimonial: "Learning to code was overwhelming until I found StudyMap. Now I can track my progress through different programming concepts.", imageSrc: + "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3", icon: Lightbulb, }, ]} animationType="slide-up" @@ -195,79 +465,99 @@ export default function LandingPage() {
- +
+ +
+ +
+
- +
+ +
+ +
+