256 lines
17 KiB
TypeScript
256 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Award, Linkedin, Sparkles, Star, Video, X } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "Pricing", id: "#pricing"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/abstract-geometric-blue-frame-logo_187299-46805.jpg"
|
|
logoAlt="SmartBoard Pro Logo"
|
|
brandName="SmartBoard Pro"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "canvas-reveal"}}
|
|
title="Transform Classrooms with SmartBoard Pro"
|
|
description="An ultra-clean, high-performance interactive smart board application for large classroom touchscreens, featuring smooth 3D-animated tools and transitions."
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/leader-company-presenting-financial-plan-using-mockup-display-front-diverse-team-brainstorming_482257-5053.jpg", imageAlt: "Interactive Smart Board in a modern classroom"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-colorful-translucent-geometric-shapes_23-2148830199.jpg", imageAlt: "SmartBoard Pro's math and geometry suite"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/boy-showing-glass-standing-with-back-girl_259150-60298.jpg", imageAlt: "Interactive Periodic Table on SmartBoard Pro"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/senior-artist-drawing-professional-sketch-with-creative-skills-using-artistic-tools-equipment-draw-vase-design-working-artwork-masterpiece-art-craft-hobby-home-workshop_482257-46722.jpg", imageAlt: "Virtual Electronics Lab simulation"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/freelance-graphic-designer-working-from-home-office-editing-photos_482257-121393.jpg", imageAlt: "Video integration on SmartBoard Pro canvas"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749911.jpg", imageAlt: "Clean UI and collapsible sidebar of SmartBoard Pro"},
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Ignite Learning with Immersive Interactivity"
|
|
description={[
|
|
"SmartBoard Pro redefines the digital classroom experience. Designed for intuitive multi-touch inputs, it empowers educators to create engaging lessons and students to explore concepts with unparalleled clarity. Experience a fluid canvas where every interaction is smooth, precise, and visually stunning.", "Our application is built for performance on large touchscreens, ensuring a lag-free environment for dynamic teaching. With its modern, minimal UI and hardware-accelerated 3D animations, SmartBoard Pro makes complex subjects accessible and captivating for learners of all ages."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-canvas-multimedia" data-section="features-canvas-multimedia">
|
|
<FeatureCardEight
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Advanced Drawing Engine", description: "Access a versatile toolset including Pencil, Calligraphy Pen, semi-transparent Highlighter, Pixel Eraser for fine details, and Object Eraser for quick clean-up. Each tool is optimized for large touchscreens.", imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-girl-answering-standing-near-desk_259150-60249.jpg", imageAlt: "Drawing tools on digital canvas"},
|
|
{
|
|
title: "Universal Color Palette", description: "Dynamically change primary stroke, fill, and UI theme colors with a smooth, interactive color picker. Customize your board instantly to suit any subject or preference.", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-digital-monitors_23-2148910246.jpg", imageAlt: "Color palette selection on smart board"},
|
|
{
|
|
title: "Smooth Stroke Smoothing", description: "Ensure handwriting and drawings look impeccably clean and professional on large touchscreens with our bezier curve-based stroke smoothing technology, enhancing visual quality.", imageSrc: "http://img.b2bpic.net/free-photo/two-young-girls-working-together-using-their-laptop-tablet_23-2149357733.jpg", imageAlt: "Smooth handwriting on digital board"},
|
|
{
|
|
title: "Seamless Media Integration", description: "Import and position external images and videos anywhere on your canvas with ease. Videos are fully interactive, resizable, draggable, and include intuitive play/pause/loop controls.", imageSrc: "http://img.b2bpic.net/free-photo/girl-drawing-with-marker-blackboard-classroom_259150-60357.jpg", imageAlt: "Media player on digital canvas"},
|
|
]}
|
|
title="Dynamic Canvas & Multimedia Tools"
|
|
description="Unleash creativity with an infinite canvas, advanced drawing tools, and seamless multimedia integration for engaging lessons."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-math-geometry" data-section="features-math-geometry">
|
|
<FeatureCardEight
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Interactive Geometry Tools", description: "Utilize a precise Ruler, 180°/360° Protractor, and Compass that can be dragged, rotated, and resized to draw perfect lines and arcs effortlessly.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-minimalistic-geometrical-figures-with-copy-space_23-2148830285.jpg", imageAlt: "Interactive ruler and protractor"},
|
|
{
|
|
title: "Dynamic 2D/3D Shapes Engine", description: "Draw and manipulate Squares, Circles, Triangles, Cones, Cylinders, and Cubes with dynamic 3D shading and animations for enhanced spatial understanding.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-colorful-geometric-forms-with-copy-space_23-2148830195.jpg", imageAlt: "3D geometric shapes on digital board"},
|
|
{
|
|
title: "Equation Editor & Calculator", description: "Access a powerful pop-up scientific and graphing calculator that can seamlessly render complex LaTeX math equations directly onto the board for real-time problem-solving.", imageSrc: "http://img.b2bpic.net/free-photo/kid-concentrating-with-mathematics-homework-learning_53876-139747.jpg", imageAlt: "Scientific calculator with LaTeX equations"},
|
|
{
|
|
title: "3D Symbol Library", description: "Explore a sidebar filled with rotatable, 3D-animated models of mathematical symbols, anatomical organs, and planetary models, perfect for interactive lessons.", imageSrc: "http://img.b2bpic.net/free-photo/modern-medical-research-laboratory-with-two-scientists-using-computer-with-green-chroma-key-screen_482257-8204.jpg", imageAlt: "3D models from a symbol library"},
|
|
]}
|
|
title="Comprehensive Math & Geometry Suite"
|
|
description="Master complex equations and visualize geometric principles with interactive tools and 3D shapes."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-science-lab" data-section="features-science-lab">
|
|
<FeatureCardEight
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Interactive Periodic Table", description: "Engage with a color-coded Periodic Table. Clicking an element opens a clean 3D popup showcasing its atomic structure, mass, and detailed properties.", imageSrc: "http://img.b2bpic.net/free-photo/interior-empty-science-laboratory-with-modern-equipment-prepared-pharmaceutical-innovation-using-high-tech-microbiology-tools-scientific-research-vaccine-development-against-covid19-virus_482257-12800.jpg", imageAlt: "Interactive Periodic Table with 3D element"},
|
|
{
|
|
title: "Virtual Electronics Lab", description: "Drag-and-drop components like Batteries, Lightbulbs, Wires, and Switches. Components snap together dynamically, completing circuits and lighting up bulbs for real-time simulation.", imageSrc: "http://img.b2bpic.net/free-photo/mockup-pc-display-photovoltaics-factory-used-monitor-system-performance_482257-120524.jpg", imageAlt: "Virtual electronics circuit simulation"},
|
|
{
|
|
title: "Chemistry Lab Simulator", description: "Interact with virtual beakers, flasks, and burners. Mix common acids and bases from a dropdown to trigger visual color changes and basic pH simulations.", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-with-equipment-soldering-working-home_1157-47196.jpg", imageAlt: "Virtual chemistry lab with pH simulation"},
|
|
{
|
|
title: "Global System Bar & Backgrounds", description: "A top floating status bar displays a real-time digital clock and battery status. Toggle between Grid, Lined, Pure White, Blackboard Green, and Dark Mode backgrounds for optimal teaching scenarios.", imageSrc: "http://img.b2bpic.net/free-photo/smart-home-screen-panel-monitor-wall_53876-96310.jpg", imageAlt: "Global system bar and background selector"},
|
|
]}
|
|
title="Hands-On Science Lab Simulator"
|
|
description="Explore the building blocks of the universe and conduct virtual experiments safely within an immersive environment."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "basic", badge: "Individual", badgeIcon: Sparkles,
|
|
price: "$19/month", subtitle: "For personal use by one educator", features: [
|
|
"Unlimited Canvas & Tools", "Standard Support", "Monthly Updates", "Access to Core Features"],
|
|
},
|
|
{
|
|
id: "pro", badge: "Classroom", badgeIcon: Star,
|
|
price: "$99/month", subtitle: "Ideal for a single classroom or department", features: [
|
|
"All Basic Features", "5 User Licenses", "Priority Support", "Advanced Analytics", "Exclusive Content Library"],
|
|
},
|
|
{
|
|
id: "enterprise", badge: "Institution", badgeIcon: Award,
|
|
price: "Custom Quote", subtitle: "Tailored for schools, districts, or universities", features: [
|
|
"All Pro Features", "Unlimited User Licenses", "Dedicated Account Manager", "On-site Training & Integration", "Customizable Branding"],
|
|
},
|
|
]}
|
|
title="Flexible Plans for Every Educator"
|
|
description="Choose the perfect SmartBoard Pro subscription to elevate your teaching experience. All plans include continuous updates and premium support."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-office_1301-3828.jpg", imageAlt: "Sarah Johnson, Science Teacher"},
|
|
{
|
|
id: "2", name: "Dr. Lee M.", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-with-books-lecture-hall_23-2147679197.jpg", imageAlt: "Dr. Lee Ming, University Professor"},
|
|
{
|
|
id: "3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/happy-teacher-sitting-her-desk_23-2148668556.jpg", imageAlt: "Emily Rodriguez, Elementary Teacher"},
|
|
{
|
|
id: "4", name: "John D.", imageSrc: "http://img.b2bpic.net/free-photo/business-man-working-late-office_23-2148991380.jpg", imageAlt: "John Davis, IT Administrator"},
|
|
{
|
|
id: "5", name: "Principal A.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-focused-man-typing-laptop_74855-4256.jpg", imageAlt: "Principal Alice Chen"},
|
|
]}
|
|
cardTitle="Hear From Our Educators"
|
|
cardTag="Trusted"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "What devices are compatible with SmartBoard Pro?", content: "SmartBoard Pro is optimized for large classroom touchscreens running modern operating systems, including Windows, macOS, and select Android tablets. Full multi-touch support is ensured on compatible hardware."},
|
|
{
|
|
id: "faq-2", title: "Can I import existing lesson plans or presentations?", content: "Yes, SmartBoard Pro allows seamless import of common image and video formats. You can also easily integrate content from cloud storage and position it anywhere on the infinite canvas."},
|
|
{
|
|
id: "faq-3", title: "Is there training available for educators?", content: "Absolutely! We offer comprehensive tutorials and documentation. For institutional plans, dedicated onboarding, and on-site training sessions can be arranged to ensure a smooth transition and maximum utility."},
|
|
{
|
|
id: "faq-4", title: "How does the 3D animation work for shapes and models?", content: "Our application leverages hardware-accelerated 3D animations and rendering (using Three.js or CSS 3D transforms) to ensure smooth, realistic movement and shading for all dynamic shapes, models, and UI transitions."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-chaos-blue-tunnel-background_1017-3418.jpg"
|
|
imageAlt="Stylized 3D question mark"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="left"
|
|
title="Frequently Asked Questions"
|
|
description="Find quick answers to common questions about SmartBoard Pro, its features, and how it can benefit your classroom."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
tag="Connect"
|
|
title="Get a Demo of SmartBoard Pro"
|
|
description="Interested in bringing SmartBoard Pro to your institution? Contact us for a personalized demonstration or to discuss licensing options tailored to your needs."
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg"
|
|
imageAlt="Abstract tech network representing communication"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your school email"
|
|
buttonText="Request Demo"
|
|
termsText="By clicking Request Demo you're confirming that you agree with our Terms and Conditions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoSrc="http://img.b2bpic.net/free-photo/abstract-geometric-blue-frame-logo_187299-46805.jpg"
|
|
logoAlt="SmartBoard Pro Logo"
|
|
logoText="SmartBoard Pro"
|
|
copyrightText="© 2024 SmartBoard Pro. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/smartboardpro", ariaLabel: "LinkedIn"},
|
|
{
|
|
icon: X,
|
|
href: "https://x.com/smartboardpro", ariaLabel: "X (formerly Twitter)"},
|
|
{
|
|
icon: Video,
|
|
href: "https://youtube.com/smartboardpro", ariaLabel: "YouTube"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|