Files
89787f07-aea9-4ea0-ac02-5ce…/src/app/page.tsx
2026-03-07 14:44:33 +00:00

534 lines
21 KiB
TypeScript

"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterBase from "@/components/sections/footer/FooterBase";
import { ClipboardList, Timer, Lock, Clock, AlertCircle, FileText, BarChart3, Flag, Eye, Send, HelpCircle, Settings, Library, BookOpen, Tag, Zap, Search, Filter, Copy, PlusCircle, FileCheck, Award, Rocket } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Features", id: "features" },
{ name: "How It Works", id: "howItWorks" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Security", href: "#" },
{ label: "Roadmap", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Resources",
items: [
{ label: "Help Center", href: "#" },
{ label: "Documentation", href: "#" },
{ label: "API Reference", href: "#" },
{ label: "Community", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLargeSizeLargeTitles"
background="fluid"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{
text: "Start Exam",
href: "contact",
}}
brandName="ExamPro"
/>
</div>
<div id="hero" data-section="hero">
<HeroCarouselLogo
logoText="EXAMPRO"
description="Empower your institution with a comprehensive, secure exam management platform. Create, administer, and evaluate assessments with instant results and detailed analytics."
buttons={[
{
text: "Create Exam",
href: "#",
},
{
text: "Take Exam",
href: "/student",
},
]}
slides={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcaYRk3z3M05uTeey6FerOdbdi/a-modern-student-exam-dashboard-interfac-1772894605647-52b67c72.png?_wi=1",
imageAlt: "Student Exam Dashboard",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcaYRk3z3M05uTeey6FerOdbdi/an-administrator-dashboard-for-creating--1772894606306-423da63a.png?_wi=1",
imageAlt: "Admin Exam Management",
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcaYRk3z3M05uTeey6FerOdbdi/a-results-page-showing-exam-completion-w-1772894606988-b5b27536.png?_wi=1",
imageAlt: "Instant Exam Results",
},
]}
autoplayDelay={5000}
showDimOverlay={true}
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="About ExamPro"
title="Transform how you assess, teach, and learn with ExamPro's intelligent exam platform designed for modern education."
useInvertedBackground={false}
buttons={[
{
text: "Learn More",
href: "#features",
},
{
text: "Request Demo",
href: "#contact",
},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureBento
title="Powerful Features for Every Role"
description="From question creation to performance analytics, ExamPro provides comprehensive tools for administrators, educators, and students."
tag="Features"
features={[
{
title: "Admin Exam Management",
description: "Easily create, edit, and organize exams with our intuitive exam builder. Set time limits, question types, and passing scores.",
bentoComponent: "icon-info-cards",
items: [
{
icon: ClipboardList,
label: "Question Types",
value: "MCQ, Essay, Fill-in",
},
{
icon: Timer,
label: "Time Management",
value: "Flexible Duration",
},
{
icon: Lock,
label: "Security",
value: "256-bit Encryption",
},
],
},
{
title: "Student Exam Interface",
description: "Clean, distraction-free interface for students to answer questions, manage time, and navigate seamlessly through the exam.",
bentoComponent: "phone",
statusIcon: Clock,
alertIcon: AlertCircle,
alertTitle: "Time Remaining",
alertMessage: "You have 15 minutes left",
apps: [
{
name: "Questions",
icon: FileText,
},
{
name: "Progress",
icon: BarChart3,
},
{
name: "Flag",
icon: Flag,
},
{
name: "Review",
icon: Eye,
},
{
name: "Timer",
icon: Clock,
},
{
name: "Submit",
icon: Send,
},
{
name: "Help",
icon: HelpCircle,
},
{
name: "Settings",
icon: Settings,
},
],
},
{
title: "Instant Results & Analytics",
description: "Get immediate exam results with detailed performance breakdowns, answer key comparisons, and personalized analytics.",
bentoComponent: "animated-bar-chart",
},
{
title: "Question Bank Management",
description: "Organize thousands of questions by category, difficulty, and learning outcomes. Reuse questions across exams efficiently.",
bentoComponent: "orbiting-icons",
centerIcon: Library,
items: [
{
icon: BookOpen,
ring: 1,
duration: 12,
},
{
icon: Tag,
ring: 1,
duration: 12,
},
{
icon: Zap,
ring: 2,
duration: 14,
},
{
icon: Search,
ring: 2,
duration: 14,
},
{
icon: Filter,
ring: 3,
duration: 16,
},
{
icon: Copy,
ring: 3,
duration: 16,
},
],
},
{
title: "Real-Time Proctoring",
description: "Monitor multiple students simultaneously with real-time activity tracking, alert systems, and comprehensive exam logs.",
bentoComponent: "3d-stack-cards",
items: [
{
icon: Eye,
title: "Live Monitoring",
subtitle: "Watch All Students",
detail: "Real-time status updates",
},
{
icon: AlertCircle,
title: "Alert System",
subtitle: "Anomaly Detection",
detail: "Instant notifications",
},
{
icon: FileCheck,
title: "Exam Logs",
subtitle: "Complete Audit Trail",
detail: "Every interaction recorded",
},
],
},
{
title: "Detailed Performance Reports",
description: "Comprehensive reports showing question-wise analysis, time spent, difficulty ratings, and comparative benchmarks.",
bentoComponent: "line-chart",
},
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="howItWorks" data-section="howItWorks">
<FeatureBento
title="How ExamPro Works"
description="A streamlined three-step process: Create your exams, let students take them, and review comprehensive results instantly."
tag="Process"
features={[
{
title: "Setup Process",
description: "Log in to the admin dashboard, create a new exam, add questions from the question bank or create new ones, set parameters like time limit and passing score.",
bentoComponent: "3d-task-list",
items: [
{
icon: PlusCircle,
label: "Create Exam",
time: "2 min",
},
{
icon: FileText,
label: "Add Questions",
time: "10 min",
},
{
icon: Settings,
label: "Configure Settings",
time: "3 min",
},
{
icon: Copy,
label: "Share Link",
time: "1 min",
},
],
},
{
title: "Step 2: Student Takes Exam",
description: "Students receive a secure link to the exam, log in with credentials, and solve all questions within the time limit with a clean, intuitive interface.",
bentoComponent: "timeline",
heading: "Student Journey",
subheading: "Complete Steps",
items: [
{
label: "Access Link",
detail: "Student receives secure exam link via email",
},
{
label: "Answer Questions",
detail: "Complete all questions before time expires",
},
{
label: "Submit Exam",
detail: "Submit answers for immediate evaluation",
},
],
completedLabel: "Exam Complete",
},
{
title: "Step 3: Instant Results & Analysis",
description: "After submission, students and admins receive instant results with detailed breakdowns, correct answers, time analysis, and performance insights.",
bentoComponent: "reveal-icon",
icon: Award,
},
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="ExamPro by the Numbers"
description="Trusted by educational institutions worldwide for reliable, secure, and efficient assessment management."
tag="Impact"
metrics={[
{
id: "1",
value: "50K+",
title: "Exams Created Monthly",
items: [
"Global reach across 120+ countries",
"24/7 platform uptime",
"Zero security incidents since launch",
],
},
{
id: "2",
value: "2.5M+",
title: "Students Assessed Annually",
items: [
"Average 98% student satisfaction",
"Sub-second result delivery",
"Accessible to all learning types",
],
},
{
id: "3",
value: "99.9%",
title: "Platform Reliability",
items: [
"Enterprise-grade infrastructure",
"Automatic disaster recovery",
"Real-time monitoring & alerts",
],
},
{
id: "4",
value: "15+",
title: "Years in EdTech Leadership",
items: [
"Trusted by top universities",
"Award-winning innovation",
"Continuous feature development",
],
},
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="Trusted by Educational Leaders"
description="Hear directly from educators, administrators, and students about their experience with ExamPro."
tag="Testimonials"
gridVariant="uniform-all-items-equal"
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Dr. Sarah Mitchell",
role: "Dean of Academic Affairs",
company: "State University",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcaYRk3z3M05uTeey6FerOdbdi/professional-headshot-of-a-confident-edu-1772894605353-ec1e9f3d.png",
imageAlt: "Dr. Sarah Mitchell",
},
{
id: "2",
name: "James Chen",
role: "Director, Testing Services",
company: "Metro High School",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcaYRk3z3M05uTeey6FerOdbdi/professional-headshot-of-a-student-or-yo-1772894604966-a86c5b4f.png",
imageAlt: "James Chen",
},
{
id: "3",
name: "Prof. Elena Rodriguez",
role: "Department Head",
company: "Regional Institute",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcaYRk3z3M05uTeey6FerOdbdi/professional-headshot-of-an-academic-or--1772894604952-0a81e299.png",
imageAlt: "Prof. Elena Rodriguez",
},
{
id: "4",
name: "Aisha Patel",
role: "Education Coordinator",
company: "Global Learning Center",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcaYRk3z3M05uTeey6FerOdbdi/professional-headshot-of-a-diverse-profe-1772894605506-21c1cb2a.png",
imageAlt: "Aisha Patel",
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Find answers to common questions about ExamPro features, security, pricing, and implementation."
tag="Help"
faqsAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "How secure is ExamPro for exam administration?",
content: "ExamPro uses 256-bit AES encryption, secure authentication, and real-time monitoring. All data is hosted on secure servers with GDPR, FERPA, and HIPAA compliance. We conduct regular security audits and penetration testing to ensure maximum protection.",
},
{
id: "2",
title: "Can I create different types of questions?",
content: "Yes! ExamPro supports Multiple Choice Questions (MCQ), True/False, Fill in the Blank, Short Answer, and Essay questions. Each type can have custom scoring, partial credit options, and detailed answer keys.",
},
{
id: "3",
title: "How long does it take to get results after exam submission?",
content: "Results are generated instantly for objective questions (MCQ, True/False, Fill in the Blank). Essay and short answer questions can be configured for auto-grading or manual review by instructors, which typically takes 24-48 hours.",
},
{
id: "4",
title: "What happens if a student loses internet connection during an exam?",
content: "ExamPro has built-in auto-save functionality that saves answers every 30 seconds. If connection is lost, students can reconnect within 5 minutes and resume from where they left off. Exams have a 2-hour reconnection grace period.",
},
{
id: "5",
title: "Can I use ExamPro for proctored online exams?",
content: "Yes! ExamPro includes integrated proctoring tools with real-time monitoring, screen sharing detection, AI-powered anomaly detection, and comprehensive audit logs. Administrators can monitor multiple students simultaneously.",
},
{
id: "6",
title: "How many students can take an exam simultaneously?",
content: "ExamPro can handle thousands of concurrent test-takers with zero performance degradation. Our cloud infrastructure automatically scales based on demand, ensuring smooth performance for large batch exams.",
},
{
id: "7",
title: "Can I randomize questions and answer options?",
content: "Absolutely! You can randomize question order, shuffle multiple choice options, and create question pools where different students receive different sets of questions from the pool. This enhances exam integrity and reduces cheating.",
},
{
id: "8",
title: "Do you provide detailed analytics and reports?",
content: "Yes! ExamPro provides comprehensive analytics including question-wise performance, time analysis, difficulty indices, student comparisons, and custom reports. Data can be exported in multiple formats (PDF, Excel, CSV).",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Get Started"
title="Ready to transform your assessment process?"
description="Join thousands of educational institutions using ExamPro. Sign up for a free demo and see how we can streamline your exam management today."
tagIcon={Rocket}
background={{
variant: "sparkles-gradient",
}}
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcaYRk3z3M05uTeey6FerOdbdi/a-warm-welcoming-illustration-showing-st-1772894605533-3faab2bc.png?_wi=1"
imageAlt="Students collaborating with technology"
mediaAnimation="blur-reveal"
mediaPosition="right"
inputPlaceholder="Enter your institutional email"
buttonText="Start Free Trial"
termsText="By signing up, you agree to our Terms of Service and Privacy Policy. We respect your data and never share it with third parties."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={footerColumns}
logoText="ExamPro"
copyrightText="© 2025 ExamPro. All rights reserved."
/>
</div>
</ThemeProvider>
);
}