412 lines
15 KiB
TypeScript
412 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "/",
|
|
},
|
|
{
|
|
name: "Plan",
|
|
id: "/plan",
|
|
},
|
|
{
|
|
name: "Settings",
|
|
id: "/settings",
|
|
},
|
|
{
|
|
name: "Account",
|
|
id: "/account",
|
|
},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/education-business-logo-template-branding-design-vector-learning-institution-text_53876-151216.jpg"
|
|
logoAlt="StudyBalance Logo"
|
|
brandName="StudyBalance"
|
|
bottomLeftText="💰 Streaks"
|
|
bottomRightText="❓ Help"
|
|
button={{
|
|
text: "Log In",
|
|
href: "/account",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="What should we study today?"
|
|
description="Unlock your potential with personalized study tools. Organize, plan, and conquer your academic goals with StudyBalance."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/filing-taxes-smartphone_23-2151953952.jpg?_wi=1",
|
|
imageAlt: "Uploaded Study Material",
|
|
videoAriaLabel: "Uploaded study material example",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/employee-putting-sticky-notes-laptop-screen-as-work-reminder-company-office-manager-using-adhesive-post-it-paper-display-remember-business-schedule-presentation-close-up_482257-33914.jpg?_wi=1",
|
|
imageAlt: "Pace Setting for Study Plan",
|
|
videoAriaLabel: "Pace setting for study plan example",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/application-form-employment-document-concept_53876-125605.jpg",
|
|
imageAlt: "Application Form Employment Document Concept",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-typing-his-phone-desk_1150-170.jpg",
|
|
imageAlt: "Man typing on his phone on a desk",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/patient-filling-online-form-out_1098-16972.jpg",
|
|
imageAlt: "Patient filling online form out",
|
|
},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/worker-examines-phone-with-greenscreen_482257-76605.jpg?_wi=1",
|
|
imageAlt: "Linked External Resources",
|
|
videoAriaLabel: "Linked external resources example",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-girl-holding-smartphone_23-2149442436.jpg",
|
|
imageAlt: "Voice Input for Notes",
|
|
videoAriaLabel: "Voice input for notes example",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/rear-view-dark-skinned-student-holding-smart-phone-with-blank-screen-your-information-writing-down-notes-copybook-while-learning-university-library-canteen_273609-7526.jpg",
|
|
imageAlt: "Rear view of dark-skinned student holding smart phone with blank screen for your information, writing down notes in copybook while learning at university library or canteen",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-laptop-desk-still-life_23-2149386364.jpg",
|
|
imageAlt: "High angle laptop on desk still life",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stock-portfolio-computer-monitor-containing-collection-financial-assets_482257-93465.jpg",
|
|
imageAlt: "Stock portfolio on computer monitor containing collection of financial assets",
|
|
},
|
|
]}
|
|
tag="Your Learning Partner"
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Start Learning Free",
|
|
href: "/upload",
|
|
},
|
|
{
|
|
text: "Explore Plans",
|
|
href: "/plan",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselPosition="right"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-woman-wearing-striped-shirt-eyeglasses_273609-13242.jpg",
|
|
alt: "Young woman wearing striped shirt and eyeglasses",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186160.jpg",
|
|
alt: "Selfie portrait for videocall",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/medium-shot-happy-woman-taking-photo_23-2148294051.jpg",
|
|
alt: "Medium shot happy woman taking a photo ",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-eyewear-holding-smartphone-using-mobile-phone-online-shopping_1258-203167.jpg",
|
|
alt: "Portrait of beautiful young woman in eyewear holding smartphone using mobile phone online shopping",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-handsome-student-smiling_23-2148586538.jpg",
|
|
alt: "Portrait of handsome student smiling",
|
|
},
|
|
]}
|
|
avatarText="Join 10,000+ happy learners!"
|
|
marqueeItems={[
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/digital-nomad-working-remotly-their-project_23-2149241865.jpg",
|
|
alt: "Digital nomad working remotly on their project",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/classroom-class-study-academic-schedule_53876-124509.jpg",
|
|
alt: "Classroom Class Study Academic Schedule",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/abstract-green-background_23-2151820861.jpg",
|
|
alt: "Abstract green background",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/businesswoman-using-horizontal-greenscreen-smartphone-sitting-desk-freelancer-looking-blank-mockup-background-with-isolated-copyspace-chroma-key-template-telephone-display_482257-47715.jpg",
|
|
alt: "Businesswoman using horizontal greenscreen on smartphone, sitting at desk. Freelancer looking at blank mockup background with isolated copyspace and chroma key template on telephone display.",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/mockup-laptop-used-by-data-center-admins-blurry-background_482257-117838.jpg",
|
|
alt: "Mockup laptop used by data center admins in blurry background",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about-games" data-section="about-games">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Gamify Your Learning Journey"
|
|
description="Transform your study routine into an adventure! Play free educational games tailored to your material, earn coins, and hatch unique pet avatars. These companions offer in-game advantages, extra points, and even help you purchase premium features for a day."
|
|
bulletPoints={[
|
|
{
|
|
title: "Free Educational Games",
|
|
description: "Learn while playing games based on your study materials.",
|
|
},
|
|
{
|
|
title: "Earn Coins & Rewards",
|
|
description: "Collect virtual currency through gameplay to unlock new features.",
|
|
},
|
|
{
|
|
title: "Hatch Unique Pet Avatars",
|
|
description: "Discover and customize your animal companions with special advantages.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-student-with-book-education-day_23-2150980047.jpg"
|
|
imageAlt="Gamified learning interface with pets and coins"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof-ads" data-section="social-proof-ads">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Sponsored Partner 1",
|
|
"Ad Partner 2",
|
|
"Promotion 3",
|
|
"Featured Content 4",
|
|
"Learning Sponsor 5",
|
|
"Education Partner 6",
|
|
"Study Aid 7",
|
|
]}
|
|
title="Our Valued Partners & Sponsors"
|
|
description="We collaborate with leading educational providers to bring you the best resources, and ads support our mission to keep core features free."
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq-general" data-section="faq-general">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "What is StudyBalance?",
|
|
content: "StudyBalance is a personalized learning platform designed to help students organize notes, create study plans, and engage with educational games based on their materials.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "How do I create a study plan?",
|
|
content: "Navigate to the 'Plan' tab, where you can choose from free or premium study plan templates and customize them to fit your academic schedule and goals.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Are the educational games free?",
|
|
content: "Yes, all our educational games are completely free and are designed to complement your study materials, helping you learn in an engaging way.",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "What are coins used for?",
|
|
content: "Coins are earned through playing games and can be used to purchase pet avatars, hatch eggs for new animals with advantages, customize your avatar, or even buy a day of premium access.",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "How can I get help if I have a question?",
|
|
content: "You can find help by clicking the question mark symbol in the corner of the application, or by visiting our dedicated support page.",
|
|
},
|
|
]}
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find quick answers to common questions about StudyBalance and how to make the most of your learning experience."
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials-success" data-section="testimonials-success">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah Johnson",
|
|
role: "University Student",
|
|
company: "Maplewood University",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-notebook_23-2147953175.jpg",
|
|
imageAlt: "Sarah Johnson",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Michael Chen",
|
|
role: "High School Senior",
|
|
company: "Bright Future Academy",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pretty-self-confident-millennial-girl-wears-pink-shirt-knitted-vest-headband-looks-directly-camera-has-walk-outside-spare-time-poses-outside_273609-55310.jpg",
|
|
imageAlt: "Michael Chen",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emily Rodriguez",
|
|
role: "Online Learner",
|
|
company: "Global Skills Institute",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-is-carefully-reading-book-emotion-concept_169016-65638.jpg",
|
|
imageAlt: "Emily Rodriguez",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "David Kim",
|
|
role: "College Freshman",
|
|
company: "State College",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-outdoors-portrait_158595-3551.jpg",
|
|
imageAlt: "David Kim",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Jessica Lee",
|
|
role: "Graduate Student",
|
|
company: "National Research Institute",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-female-model-wearing-rectangular-glasses-posing-indoors-against-wooden-wall_273609-1878.jpg",
|
|
imageAlt: "Jessica Lee",
|
|
},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "95%",
|
|
label: "Improved Grades",
|
|
},
|
|
{
|
|
value: "10K+",
|
|
label: "Active Learners",
|
|
},
|
|
{
|
|
value: "5/5",
|
|
label: "Average Rating",
|
|
},
|
|
]}
|
|
title="What Our Students Say"
|
|
description="Hear from students who have transformed their study habits and achieved academic excellence with StudyBalance."
|
|
/>
|
|
</div>
|
|
|
|
<div id="main-footer" data-section="main-footer">
|
|
<FooterBaseReveal
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7zpdi0"
|
|
logoAlt="StudyBalance Logo"
|
|
logoText="StudyBalance"
|
|
columns={[
|
|
{
|
|
title: "Platform",
|
|
items: [
|
|
{
|
|
label: "Home",
|
|
href: "/",
|
|
},
|
|
{
|
|
label: "Plan",
|
|
href: "/plan",
|
|
},
|
|
{
|
|
label: "Settings",
|
|
href: "/settings",
|
|
},
|
|
{
|
|
label: "Account",
|
|
href: "/account",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{
|
|
label: "Upload Materials",
|
|
href: "/upload",
|
|
},
|
|
{
|
|
label: "Educational Games",
|
|
href: "/#about-games",
|
|
},
|
|
{
|
|
label: "Help & Support",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "FAQ",
|
|
href: "/#faq-general",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 StudyBalance. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|