244 lines
13 KiB
TypeScript
244 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Sparkles, Play, Award, Users, BarChart3, Globe } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="none"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="QuizMaster"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Start Quiz", href: "pricing" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Test Your Knowledge with Interactive Quizzes"
|
|
description="Engage, learn, and compete with our interactive quiz platform. Perfect for education, corporate training, and fun competitions."
|
|
tag="Interactive Learning"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Take a Quiz", href: "pricing" },
|
|
{ text: "Learn More", href: "features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/instagram-poll-sticker-set_23-2150306045.jpg", imageAlt: "quiz interface questions education interactive"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg", imageAlt: "dashboard results analytics performance metrics"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Trusted by 10,000+ users"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardThree
|
|
title="Powerful Quiz Features"
|
|
description="Everything you need to create, manage, and deliver engaging quizzes"
|
|
tag="Capabilities"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "01", title: "Easy Quiz Creation", description: "Create beautiful quizzes with multiple question types in minutes", imageSrc: "http://img.b2bpic.net/free-photo/person-writing-notebook-table-with-laptop_23-2148036921.jpg", imageAlt: "quiz creation content creation writing design tool"
|
|
},
|
|
{
|
|
id: "02", title: "Real-Time Analytics", description: "Track student progress and performance with detailed analytics dashboards", imageSrc: "http://img.b2bpic.net/free-photo/close-up-business-items_1098-1988.jpg", imageAlt: "analytics data visualization charts graphs insights"
|
|
},
|
|
{
|
|
id: "03", title: "Instant Feedback", description: "Provide immediate feedback to learners with customizable answer explanations", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-speech-bubble_53876-70978.jpg", imageAlt: "feedback response message communication interaction"
|
|
},
|
|
{
|
|
id: "04", title: "Collaboration Tools", description: "Build teams, share quizzes, and collaborate with other educators and trainers", imageSrc: "http://img.b2bpic.net/free-photo/diverse-team-coworkers-having-successful-partnership-feeling-happy-about-professional-teamwork-cheerful-people-celebrating-collaboration-agreement-together-boardroom-meeting_482257-46901.jpg", imageAlt: "collaboration teamwork team meeting group"
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the plan that works best for your needs"
|
|
tag="Plans"
|
|
tagAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "starter", badge: "Great for Beginners", badgeIcon: Play,
|
|
price: "$9/month", subtitle: "Perfect for individual learners", features: [
|
|
"Up to 5 quizzes", "Basic analytics", "Up to 100 questions", "Community support"
|
|
]
|
|
},
|
|
{
|
|
id: "professional", badge: "Most Popular", badgeIcon: Sparkles,
|
|
price: "$29/month", subtitle: "Ideal for educators and small teams", features: [
|
|
"Unlimited quizzes", "Advanced analytics", "Up to 1,000 questions", "Priority support", "Custom branding"
|
|
]
|
|
},
|
|
{
|
|
id: "enterprise", badge: "For Organizations", badgeIcon: Award,
|
|
price: "Custom", subtitle: "Enterprise-grade solution", features: [
|
|
"Everything in Professional", "Dedicated account manager", "Custom integrations", "SSO & security features", "Advanced reporting"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Loved by Educators and Learners"
|
|
description="See what our users have to say about their QuizMaster experience"
|
|
tag="Testimonials"
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "High School Teacher", company: "Lincoln High School", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg", imageAlt: "woman teacher professional portrait headshot"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "Corporate Trainer", company: "Tech Solutions Inc", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg", imageAlt: "man trainer professional portrait business"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", role: "University Professor", company: "State University", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "woman professor academic portrait professional"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", role: "Training Manager", company: "Global Enterprises", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg", imageAlt: "man manager corporate portrait business"
|
|
}
|
|
]}
|
|
kpiItems={[
|
|
{ value: "10,000+", label: "Active Users" },
|
|
{ value: "98%", label: "Satisfaction Rate" },
|
|
{ value: "50M+", label: "Quizzes Taken" }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<AboutMetric
|
|
title="Trusted by schools, universities, and corporations worldwide to transform learning"
|
|
metrics={[
|
|
{ icon: Users, label: "Active Users", value: "10,000+" },
|
|
{ icon: BarChart3, label: "Quizzes Created", value: "125,000+" },
|
|
{ icon: Globe, label: "Countries", value: "50+" },
|
|
{ icon: Award, label: "Years in Business", value: "5" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about QuizMaster"
|
|
tag="Help"
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I create my first quiz?", content: "Creating a quiz is simple! After signing up, click 'Create Quiz', add your questions, set the correct answers, and publish. You can customize the appearance, timing, and feedback options to match your needs."
|
|
},
|
|
{
|
|
id: "2", title: "Can I add different types of questions?", content: "Yes! QuizMaster supports multiple question types including multiple choice, true/false, short answer, matching, and drag-and-drop questions. Mix and match to create engaging quizzes."
|
|
},
|
|
{
|
|
id: "3", title: "Is there a limit to the number of participants?", content: "No limit! Whether you have 10 or 10,000 participants, our platform scales seamlessly. All participants can take the quiz simultaneously without performance issues."
|
|
},
|
|
{
|
|
id: "4", title: "How do I track student progress?", content: "Our advanced analytics dashboard shows real-time progress for each student. You can track completion rates, average scores, time spent, and question-level performance insights."
|
|
},
|
|
{
|
|
id: "5", title: "Can I export quiz results?", content: "Absolutely! Export results in CSV or PDF format for further analysis. Include student scores, responses, time data, and custom metrics. Perfect for reporting and record-keeping."
|
|
},
|
|
{
|
|
id: "6", title: "Do you offer API access?", content: "Yes, our Professional and Enterprise plans include API access. Integrate QuizMaster with your existing systems, LMS, or custom applications using our comprehensive REST API."
|
|
}
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="QuizMaster"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "home" },
|
|
{ label: "Features", href: "features" },
|
|
{ label: "Pricing", href: "pricing" },
|
|
{ label: "FAQ", href: "faq" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "About Us", href: "https://example.com/about" },
|
|
{ label: "Blog", href: "https://example.com/blog" },
|
|
{ label: "Careers", href: "https://example.com/careers" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "https://example.com/privacy" },
|
|
{ label: "Terms of Service", href: "https://example.com/terms" },
|
|
{ label: "Security", href: "https://example.com/security" },
|
|
{ label: "Status Page", href: "https://example.com/status" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|