Files
017e9da4-de70-47c4-9f16-503…/src/app/dashboard/page.tsx

130 lines
7.1 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
export default function DashboardPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Dashboard", id: "/dashboard" },
];
const footerColumns = [
{
items: [
{ label: "Home", href: "/" },
{ label: "Dashboard", href: "/dashboard" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="large"
background="noiseDiagonalGradient"
cardStyle="glass-elevated"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Creator Quest RPG"
logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
logoAlt="Creator Quest RPG Logo"
navItems={navItems}
button={{
text: "Sign Up", href: "/register"}}
/>
</div>
<div id="dashboard-features" data-section="dashboard-features">
<FeatureCardTwentyThree
animationType="slide-up"
title="Your Personalized Creator Hub"
description="The Dashboard is your command center for growth. Track progress, manage missions, and discover new ways to level up."
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "df1", title: "Live XP & Level Tracking", tags: ["Progress", "Motivation"],
imageSrc: "http://img.b2bpic.net/free-photo/two-factor-authentication-mobile-device_23-2151997022.jpg", imageAlt: "Live XP and Level Tracking"},
{
id: "df2", title: "Daily Mission Overview", tags: ["Habits", "Productivity"],
imageSrc: "http://img.b2bpic.net/free-photo/multimedia-entertainment-play-button-interface_53876-120181.jpg", imageAlt: "Daily Mission Summary"},
{
id: "df3", title: "Achievement Badges Unlocked", tags: ["Rewards", "Recognition"],
imageSrc: "http://img.b2bpic.net/free-photo/8-bits-objects-gaming-assets_23-2151143643.jpg", imageAlt: "Achievement Badges"},
]}
/>
</div>
<div id="dashboard-products" data-section="dashboard-products">
<ProductCardTwo
products={[
{
id: "p1", brand: "Cosmetics", name: "Cybernetic Glasses", price: "$10.00", rating: 5,
reviewCount: "240", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-vr-glasses-gaming_23-2151138300.jpg", imageAlt: "Cybernetic Glasses cosmetic"},
{
id: "p2", brand: "Cosmetics", name: "Glowing Hoodie", price: "$15.00", rating: 4,
reviewCount: "180", imageSrc: "http://img.b2bpic.net/free-photo/woman-hat-walking-market_23-2152003651.jpg", imageAlt: "Glowing Hoodie cosmetic"},
{
id: "p3", brand: "Boosters", name: "Mega XP Boost (x2)", price: "$7.00", rating: 5,
reviewCount: "300", imageSrc: "http://img.b2bpic.net/free-photo/space-astronaut-with-copy-space_1194-638687.jpg", imageAlt: "Mega XP Boost"},
{
id: "p4", brand: "Cosmetics", name: "Angelic Wings", price: "$25.00", rating: 5,
reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-with-magical-wings-fairy-core-aesthetic_23-2151080002.jpg", imageAlt: "Angelic Wings cosmetic"},
{
id: "p5", brand: "Utility", name: "Skill Respec Token", price: "$5.00", rating: 4,
reviewCount: "90", imageSrc: "http://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282445.jpg?_wi=1", imageAlt: "Skill Respec Token"},
{
id: "p6", brand: "Boosters", name: "Creative Spark Pack", price: "$12.00", rating: 5,
reviewCount: "110", imageSrc: "http://img.b2bpic.net/free-photo/messy-office-workplace-workplace-workspace-concept_185193-108721.jpg", imageAlt: "Creative Spark Pack"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
title="Boosters & Cosmetic Items"
description="Personalize your avatar and accelerate your progress with our exclusive shop items."
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="dashboard-metrics" data-section="dashboard-metrics">
<MetricCardEleven
animationType="slide-up"
title="Your Creator Stats"
description="A quick overview of your most important metrics."
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "dm1", value: "Level 25", title: "Current Creator Level", description: "Keep pushing forward to unlock new tiers.", imageSrc: "http://img.b2bpic.net/free-vector/travel-onboarding-app-screens_23-2148407383.jpg"},
{
id: "dm2", value: "850K", title: "Virtual Followers", description: "Your audience is growing, keep up the great work!", imageSrc: "http://img.b2bpic.net/free-photo/people-carrying-burden-concept_23-2150044229.jpg"},
{
id: "dm3", value: "32/50", title: "Achievements Unlocked", description: "So many more to conquer and showcase!", imageSrc: "http://img.b2bpic.net/free-vector/seo-development-round-icons-set_1284-6881.jpg"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoSrc="http://img.b2bpic.net/free-vector/gradient-metaverse-concept-labels_23-2149516151.jpg"
logoAlt="Creator Quest RPG Logo"
logoText="Creator Quest RPG"
columns={footerColumns}
useInvertedBackground={true}
/>
</div>
</ThemeProvider>
);
}