182 lines
9.8 KiB
TypeScript
182 lines
9.8 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 MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Dashboard", id: "dashboard" },
|
|
{ name: "Analytics", id: "analytics" },
|
|
{ name: "Reports", id: "reports" },
|
|
{ name: "Settings", id: "settings" },
|
|
{ name: "Help", id: "help" }
|
|
]}
|
|
brandName="Dashboard"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Dashboard"
|
|
description="Monitor your key metrics, track performance, and manage your operations from a single unified interface. Real-time insights at your fingertips."
|
|
buttons={[
|
|
{ text: "View Analytics", href: "#analytics" },
|
|
{ text: "Download Report", href: "#reports" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
imageSrc="https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg"
|
|
imageAlt="dashboard analytics metrics monitoring interface"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Key Performance Indicators"
|
|
description="Real-time metrics showing your dashboard performance and activity status"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "12,548", title: "Total Users", description: "Active users this month", imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg", imageAlt: "User metrics"
|
|
},
|
|
{
|
|
id: "2", value: "$847,291", title: "Revenue", description: "Monthly recurring revenue", imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg", imageAlt: "Revenue metrics"
|
|
},
|
|
{
|
|
id: "3", value: "94.2%", title: "Uptime", description: "System availability status", imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg", imageAlt: "Uptime metrics"
|
|
},
|
|
{
|
|
id: "4", value: "3.2s", title: "Avg Response", description: "Average server response time", imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg", imageAlt: "Performance metrics"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="charts" data-section="charts">
|
|
<FeatureCardTwentyFour
|
|
title="Analytics & Insights"
|
|
description="Comprehensive visualization of your dashboard data and trends"
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Revenue Trends", author: "Finance Team", description: "Monthly revenue progression with growth indicators and forecast analysis", tags: ["Revenue", "Trends"],
|
|
imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg", imageAlt: "Revenue chart"
|
|
},
|
|
{
|
|
id: "2", title: "User Engagement", author: "Analytics Team", description: "Real-time user activity, session duration, and engagement metrics", tags: ["Users", "Engagement"],
|
|
imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg", imageAlt: "User engagement chart"
|
|
},
|
|
{
|
|
id: "3", title: "System Performance", author: "DevOps Team", description: "CPU usage, memory allocation, and infrastructure health status", tags: ["Performance", "System"],
|
|
imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg", imageAlt: "Performance metrics"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="activity" data-section="activity">
|
|
<TeamCardEleven
|
|
title="Recent Activity"
|
|
description="Latest updates and notifications from your dashboard systems"
|
|
groups={[
|
|
{
|
|
id: "recent", groupTitle: "Today", members: [
|
|
{
|
|
id: "1", title: "System Update Completed", subtitle: "Infrastructure", detail: "2:45 PM - All systems operational", imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg", imageAlt: "System update"
|
|
},
|
|
{
|
|
id: "2", title: "New User Registration", subtitle: "Accounts", detail: "1:30 PM - 3 new accounts created", imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg", imageAlt: "New user"
|
|
},
|
|
{
|
|
id: "3", title: "Revenue Milestone", subtitle: "Finance", detail: "12:15 PM - Monthly target exceeded", imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg", imageAlt: "Revenue update"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "yesterday", groupTitle: "Yesterday", members: [
|
|
{
|
|
id: "4", title: "Backup Completed", subtitle: "Data", detail: "11:30 PM - All data backed up", imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg", imageAlt: "Backup complete"
|
|
},
|
|
{
|
|
id: "5", title: "Security Audit", subtitle: "Security", detail: "6:00 PM - Audit passed successfully", imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg", imageAlt: "Security audit"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="actions" data-section="actions">
|
|
<PricingCardOne
|
|
title="Quick Actions"
|
|
description="Common dashboard operations and management tasks"
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "1", badge: "Essential", price: "Reports", subtitle: "Generate and export analytics reports", features: ["Weekly reports", "Export to PDF", "Email scheduling", "Custom filters"]
|
|
},
|
|
{
|
|
id: "2", badge: "Popular", price: "Settings", subtitle: "Manage dashboard preferences and integrations", features: ["User management", "API access", "Webhooks", "Team collaboration"]
|
|
},
|
|
{
|
|
id: "3", badge: "Advanced", price: "Integrations", subtitle: "Connect external tools and data sources", features: ["Third-party APIs", "Data sync", "Automation rules", "Custom workflows"]
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta" data-section="cta">
|
|
<ContactCTA
|
|
tag="Get Started"
|
|
title="Ready to Optimize Your Dashboard?"
|
|
description="Take control of your operations with advanced monitoring, real-time analytics, and powerful insights. Upgrade your dashboard experience today."
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "#signup" },
|
|
{ text: "Contact Sales", href: "#contact" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Dashboard"
|
|
leftLink={{ text: "Privacy Policy", href: "#privacy" }}
|
|
rightLink={{ text: "Terms of Service", href: "#terms" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |