209 lines
9.2 KiB
TypeScript
209 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Lightbulb, Calendar, Users, CheckCircle, Zap, Award, Send, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Noterium"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Noterium"
|
|
description="Capture your thoughts, organize your life. A premium note-taking and daily planning application designed for focused productivity with smooth animations and intelligent organization."
|
|
buttons={[
|
|
{ text: "Start Planning", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-vector/set-colorful-paper-notes-with-different-designs_23-2147590667.jpg"
|
|
imageAlt="Noterium premium note taker dashboard"
|
|
mediaAnimation="blur-reveal"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
title="Powerful Features"
|
|
description="Everything you need for seamless note-taking and daily planning"
|
|
tag="Features"
|
|
features={[
|
|
{
|
|
title: "Smart Note Taking", description: "Create, organize, and tag notes with intelligent categorization and full-text search capabilities.", icon: Lightbulb,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/academic-resume-template-design_742173-29970.jpg?_wi=1", imageAlt: "Note taking interface"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/academic-resume-template-design_742173-29970.jpg?_wi=2", imageAlt: "Note organization system"},
|
|
],
|
|
},
|
|
{
|
|
title: "Daily Planning", description: "Plan your day with visual calendar, task prioritization, and progress tracking at a glance.", icon: Calendar,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/calendar-template-design_742173-20947.jpg?_wi=1", imageAlt: "Daily planner calendar"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/calendar-template-design_742173-20947.jpg?_wi=2", imageAlt: "Task scheduling interface"},
|
|
],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<AboutMetric
|
|
title="Trusted by productivity enthusiasts worldwide"
|
|
metrics={[
|
|
{ icon: Users, label: "Active Users", value: "50K+" },
|
|
{ icon: CheckCircle, label: "Tasks Completed", value: "2M+" },
|
|
{ icon: Zap, label: "Notes Created", value: "10M+" },
|
|
{ icon: Award, label: "User Satisfaction", value: "98%" },
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Noterium completely transformed how I manage my daily tasks and notes. The smooth animations and intuitive interface make planning a pleasure rather than a chore. I've doubled my productivity since switching."
|
|
rating={5}
|
|
author="Sarah Chen, Productivity Designer"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "Sarah Chen" },
|
|
{ src: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202433.jpg", alt: "James Wilson" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-smiling-black-man-wool-suit_613910-16049.jpg", alt: "Emma Rodriguez" },
|
|
{ src: "http://img.b2bpic.net/free-photo/smart-looking-teacher_53876-23045.jpg", alt: "Michael Torres" },
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
title="Choose Your Plan"
|
|
description="Select the perfect plan to boost your productivity"
|
|
tag="Pricing"
|
|
plans={[
|
|
{
|
|
id: "starter", price: "$9/mo", name: "Starter", buttons: [
|
|
{ text: "Get Started", href: "#contact" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"Up to 500 notes", "Basic daily planner", "Mobile app access", "Email support"],
|
|
},
|
|
{
|
|
id: "professional", badge: "Most Popular", badgeIcon: Sparkles,
|
|
price: "$19/mo", name: "Professional", buttons: [
|
|
{ text: "Get Started", href: "#contact" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"Unlimited notes", "Advanced planner", "Team collaboration", "Priority support", "Custom tags & colors"],
|
|
},
|
|
{
|
|
id: "enterprise", price: "$49/mo", name: "Enterprise", buttons: [
|
|
{ text: "Get Started", href: "#contact" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"Everything in Professional", "Advanced analytics", "API access", "Custom integrations", "Dedicated account manager"],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get Started"
|
|
tagIcon={Send}
|
|
tagAnimation="slide-up"
|
|
title="Ready to Transform Your Productivity?"
|
|
description="Join thousands of users who have revolutionized their note-taking and planning with Noterium. Start your free trial today and experience the difference."
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "#pricing" },
|
|
{ text: "Contact Sales", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Noterium"
|
|
copyrightText="© 2025 Noterium. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Security", href: "#" },
|
|
{ label: "Roadmap", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "GDPR", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|