321 lines
11 KiB
TypeScript
321 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { GraduationCap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Features",
|
|
id: "#features",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
id: "#pricing",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="StudyDeck"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
logoText="StudyDeck"
|
|
description="Master your academic journey with the smartest digital study deck hub. Build, share, and scale your learning with AI-driven insights."
|
|
buttons={[
|
|
{
|
|
text: "Start Learning",
|
|
href: "#features",
|
|
},
|
|
{
|
|
text: "View Plans",
|
|
href: "#pricing",
|
|
},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/a-futuristic-digital-study-dashboard-wit-1774857721319-e04dabbf.png?_wi=1"
|
|
imageAlt="Digital Study Platform Dashboard"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardEight
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "AI-Powered Decks",
|
|
description: "Automated generation of study sets from your raw notes using advanced natural language processing.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/close-up-of-an-ai-powered-flashcard-set--1774857720074-7e47de5e.png?_wi=1",
|
|
imageAlt: "AI flashcard interface",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Learning Paths",
|
|
description: "Adaptive curriculum mapping to visualize your academic progress and identify knowledge gaps.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/interactive-learning-path-visualizer-net-1774857719676-f05eba95.png?_wi=1",
|
|
imageAlt: "Learning path visualization",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Global Collaboration",
|
|
description: "Sync your decks with study groups across the world for collective intelligence.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/real-time-collaboration-group-study-inte-1774857724097-1bc61b45.png",
|
|
imageAlt: "Collaborative study interface",
|
|
},
|
|
]}
|
|
title="Smart Features for Success"
|
|
description="Powerful tools designed to accelerate your retention and focus."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={false}
|
|
tag="Our Mission"
|
|
title="Redefining Digital Learning"
|
|
description="We believe that everyone deserves a structured, intelligent path to mastery. StudyDeck leverages modern tech to bridge the gap between note-taking and deep knowledge retention."
|
|
subdescription="Built by students, for students, globally."
|
|
icon={GraduationCap}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/diverse-students-interacting-with-hologr-1774857719845-55fb96bd.png"
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "free",
|
|
title: "Basic Scholar",
|
|
price: "$0",
|
|
period: "/month",
|
|
features: [
|
|
"3 Active Decks",
|
|
"Basic AI generation",
|
|
"Community Access",
|
|
],
|
|
button: {
|
|
text: "Get Started",
|
|
href: "#",
|
|
},
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/a-futuristic-digital-study-dashboard-wit-1774857721319-e04dabbf.png?_wi=2",
|
|
imageAlt: "A futuristic digital study dashboard with glowing charts and study deck card interfaces, neon blue a",
|
|
},
|
|
{
|
|
id: "pro",
|
|
title: "Advanced Learner",
|
|
price: "$12",
|
|
period: "/month",
|
|
features: [
|
|
"Unlimited Decks",
|
|
"Advanced AI Analytics",
|
|
"Offline Access",
|
|
"Group Collaboration",
|
|
],
|
|
button: {
|
|
text: "Choose Pro",
|
|
href: "#",
|
|
},
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/close-up-of-an-ai-powered-flashcard-set--1774857720074-7e47de5e.png?_wi=2",
|
|
imageAlt: "Close up of an AI-powered flashcard set with code snippets, sleek UI, modern design, professional ae",
|
|
},
|
|
{
|
|
id: "team",
|
|
title: "Institutional",
|
|
price: "$49",
|
|
period: "/month",
|
|
features: [
|
|
"Unlimited Users",
|
|
"API Access",
|
|
"Custom Integrations",
|
|
"Priority Support",
|
|
],
|
|
button: {
|
|
text: "Contact Sales",
|
|
href: "#contact",
|
|
},
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/interactive-learning-path-visualizer-net-1774857719676-f05eba95.png?_wi=2",
|
|
imageAlt: "Interactive learning path visualizer, network nodes and connection lines, futuristic, clean, dark bl",
|
|
},
|
|
]}
|
|
title="Affordable Academic Growth"
|
|
description="Choose the right plan to fuel your academic excellence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="StudyDeck completely changed how I approach my final exams. The AI-generated flashcards saved me dozens of hours per semester."
|
|
rating={5}
|
|
author="Sarah Miller, Medical Student"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/portrait-of-a-confident-student-professi-1774857719328-ad3a6c36.png",
|
|
alt: "User 1",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/portrait-of-a-focused-researcher-profess-1774857719581-b5242e42.png",
|
|
alt: "User 2",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/portrait-of-an-innovative-software-devel-1774857721442-e1f03bf9.png",
|
|
alt: "User 3",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/portrait-of-a-creative-designer-soft-lig-1774857719636-820a35f8.png",
|
|
alt: "User 4",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BekglFHX0UTJt9ndoaRZloQDZR/portrait-of-a-confident-student-professi-1774857719328-ad3a6c36.png",
|
|
alt: "User 5",
|
|
},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How does AI deck generation work?",
|
|
content: "Our AI analyzes your uploaded notes and distills the most critical concepts into flashcard formats.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Can I share my decks?",
|
|
content: "Yes, you can easily share your decks with friends or publish them for the global community.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Is there a free trial?",
|
|
content: "Yes, the Basic Scholar plan is free forever with core features for your study needs.",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Can I integrate with other apps?",
|
|
content: "Our Pro and Institutional plans offer deep integration with popular note-taking and LMS platforms.",
|
|
},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Have questions about StudyDeck? We've got answers."
|
|
faqsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Contact Us"
|
|
title="Ready to Master Your Field?"
|
|
description="Get in touch with our team for demos, support, or bulk institutional pricing inquiries."
|
|
buttons={[
|
|
{
|
|
text: "Contact Support",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{
|
|
label: "Features",
|
|
href: "#features",
|
|
},
|
|
{
|
|
label: "Pricing",
|
|
href: "#pricing",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="StudyDeck"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|