bender/144ea969-2f95-4a27-a645-07e95c963e3a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #4

Merged
bender merged 3 commits from version_2 into main 2026-03-06 16:40:17 +00:00
Conversation 0 Commits 3 Files Changed 2 +104 -56
2 changed files with 104 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/layout.tsx
View File

@@ -1,55 +1,28 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Nunito } from "next/font/google";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
const geist = Geist({
variable: "--font-geist-sans", subsets: ["latin"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const nunito = Nunito({
variable: "--font-nunito", subsets: ["latin"],
const geistMono = Geist_Mono({
variable: "--font-geist-mono", subsets: ["latin"],
});
export const metadata: Metadata = {
title: "StudyMap - Interactive Study Maps for Better Learning", description: "Create visual study maps to organize knowledge, collaborate with peers, and track learning progress. Transform complex topics into clear learning pathways.", keywords: "study maps, learning tools, knowledge mapping, educational platform, collaborative learning, study organization", metadataBase: new URL("https://studymap.example.com"),
openGraph: {
title: "StudyMap - Master Your Learning", description: "Create interactive study maps to visualize and master any subject", url: "https://studymap.example.com", siteName: "StudyMap", type: "website", images: [
{
url: "http://img.b2bpic.net/free-vector/hand-drawn-banners-with-digital-learning-elements_23-2147597512.jpg", alt: "StudyMap Dashboard"},
],
},
twitter: {
card: "summary_large_image", title: "StudyMap - Master Your Learning", description: "Create interactive study maps to visualize and master any subject", images: ["http://img.b2bpic.net/free-vector/hand-drawn-banners-with-digital-learning-elements_23-2147597512.jpg"],
},
robots: {
index: true,
follow: true,
},
};
title: "StudyMap - Master Your Learning with Interactive Study Maps", description: "Create, visualize, and share comprehensive study maps to organize your knowledge. Transform complex topics into clear, connected learning pathways."};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} ${nunito.variable} antialiased`}
>
<Tag />
{children}
<html lang="en">
<body className={`${geist.variable} ${geistMono.variable} antialiased`}>
{children}
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1417,7 +1390,6 @@ export default function RootLayout({
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

108
src/app/page.tsx
View File

@@ -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 } from "react";
import {
Sparkles,
BookOpen,
@@ -22,9 +23,42 @@ import {
Building2,
Target,
Code,
Volume2,
Play,
Pause,
} from "lucide-react";
export default function LandingPage() {
const [activeFeature, setActiveFeature] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
const [quizScores, setQuizScores] = useState<Record<string, number>>({});
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
const rect = e.currentTarget.getBoundingClientRect();
setMousePosition({
x: e.clientX - rect.left,
y: e.clientY - rect.top,
});
};
const handleVoiceExplanation = (featureTitle: string) => {
setIsPlaying(!isPlaying);
if (!isPlaying) {
const utterance = new SpeechSynthesisUtterance(`Let me explain ${featureTitle}`);
window.speechSynthesis.speak(utterance);
} else {
window.speechSynthesis.cancel();
}
};
const handleQuizAnswer = (featureId: number, correct: boolean) => {
setQuizScores(prev => ({
...prev,
[featureId]: (prev[featureId] || 0) + (correct ? 1 : 0),
}));
};
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
@@ -74,11 +108,11 @@ export default function LandingPage() {
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}
@@ -98,7 +132,7 @@ export default function LandingPage() {
/>
</div>
<div id="features" data-section="features">
<div id="features" data-section="features" onMouseMove={handleMouseMove}>
<FeatureCardNine
title="Powerful Features for Every Learner"
description="Everything you need to create, organize, and master your study materials"
@@ -106,29 +140,29 @@ export default function LandingPage() {
features={[
{
id: 1,
title: "Collaborative Learning", description="Share your study maps with classmates and collaborate in real-time. Build knowledge together and learn from different perspectives. Comment, annotate, and contribute to collective learning.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-vector/landing-page-transfer-files-concept_23-2148298716.jpg"
title: "Collaborative Learning", description: "Share your study maps with classmates and collaborate in real-time. Build knowledge together and learn from different perspectives. Comment, annotate, and contribute to collective learning.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-vector/landing-page-transfer-files-concept_23-2148298716.jpg?_wi=1"
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-vector/landing-page-transfer-files-concept_23-2148298716.jpg"
imageSrc: "http://img.b2bpic.net/free-vector/landing-page-transfer-files-concept_23-2148298716.jpg?_wi=2"
},
},
{
id: 2,
title: "Learning Analytics", description="Track your progress with detailed analytics. See what you've mastered and identify areas for improvement. Make data-driven decisions about your study time.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg"
title: "Learning Analytics", description: "Track your progress with detailed analytics. See what you've mastered and identify areas for improvement. Make data-driven decisions about your study time.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg?_wi=1"
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg"
imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg?_wi=2"
},
},
{
id: 3,
title: "Customizable Templates", description="Start with pre-built templates or create from scratch. Customize colors, layouts, and structures to match your learning style. Thousands of templates for any subject.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/public-examination-preparation-concept_23-2149369872.jpg"
title: "Customizable Templates", description: "Start with pre-built templates or create from scratch. Customize colors, layouts, and structures to match your learning style. Thousands of templates for any subject.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/public-examination-preparation-concept_23-2149369872.jpg?_wi=1"
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/public-examination-preparation-concept_23-2149369872.jpg"
imageSrc: "http://img.b2bpic.net/free-photo/public-examination-preparation-concept_23-2149369872.jpg?_wi=2"
},
},
]}
@@ -137,6 +171,48 @@ export default function LandingPage() {
animationType="blur-reveal"
useInvertedBackground={false}
/>
<div className="mt-12 max-w-4xl mx-auto">
<div className="bg-card rounded-theme-capped p-8 space-y-6">
<div className="flex items-center justify-between">
<h3 className="text-2xl font-semibold text-foreground">Interactive Feature Exploration</h3>
<button
onClick={() => handleVoiceExplanation("Feature Explanations")}
className="flex items-center gap-2 px-4 py-2 bg-primary-cta text-white rounded-full hover:opacity-80 transition"
>
{isPlaying ? <Pause size={18} /> : <Volume2 size={18} />}
<span>{isPlaying ? "Stop" : "Listen"}</span>
</button>
</div>
<p className="text-foreground/70">Hover over features to see movement-based interactions. Use voice explanations and test your knowledge with mini quizzes.</p>
<div className="grid grid-cols-3 gap-4">
{[1, 2, 3].map(featureId => (
<div
key={featureId}
className="p-4 bg-background-accent rounded-lg border border-accent/20 cursor-pointer hover:border-accent/50 transition relative overflow-hidden group"
style={{
transform: activeFeature === featureId - 1
? `perspective(1000px) rotateX(${(mousePosition.y - 100) * 0.1}deg) rotateY(${(mousePosition.x - 200) * 0.1}deg)`
: 'none'
}}
onMouseEnter={() => setActiveFeature(featureId - 1)}
>
<div className="absolute inset-0 bg-gradient-to-br from-accent/10 to-transparent opacity-0 group-hover:opacity-100 transition duration-300" />
<h4 className="font-semibold text-foreground mb-2 relative z-10">Feature {featureId}</h4>
<button
onClick={() => handleQuizAnswer(featureId, Math.random() > 0.5)}
className="text-sm text-accent hover:text-accent/80 relative z-10"
>
Take Mini Quiz
</button>
<div className="mt-2 text-xs text-foreground/50 relative z-10">
Score: {quizScores[featureId] || 0}
</div>
</div>
))}
</div>
</div>
</div>
</div>
<div id="how-it-works" data-section="how-it-works">
@@ -169,10 +245,10 @@ 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,
@@ -181,10 +257,10 @@ export default function LandingPage() {
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: Target,
},
{
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: Code,
},
]}
animationType="slide-up"