1287 lines
34 KiB
Vue
1287 lines
34 KiB
Vue
<template>
|
|
<div class="member-dashboard">
|
|
<!-- Header with Navigation -->
|
|
<header class="dashboard-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<button @click="mobileMenuOpen = !mobileMenuOpen" class="mobile-menu-toggle">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<div class="logo">
|
|
<img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo-img" />
|
|
<span class="logo-text">Member Portal</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="header-nav" :class="{ 'header-nav--open': mobileMenuOpen }">
|
|
<a v-for="item in memberNavItems" :key="item.name"
|
|
:href="item.path"
|
|
:class="['nav-item', { 'nav-item--active': item.active }]">
|
|
{{ item.name }}
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="header-right">
|
|
<button class="notification-btn">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
<span class="notification-badge">5</span>
|
|
</button>
|
|
|
|
<div class="profile-menu">
|
|
<button @click="profileMenuOpen = !profileMenuOpen" class="profile-button">
|
|
<img src="https://ui-avatars.com/api/?name=John+Doe&background=DC2626&color=fff" alt="Profile" />
|
|
<span class="profile-name">John Doe</span>
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div v-if="profileMenuOpen" class="profile-dropdown">
|
|
<a href="/member/profile" class="dropdown-item">My Profile</a>
|
|
<a href="/member/settings" class="dropdown-item">Settings</a>
|
|
<a href="/member/billing" class="dropdown-item">Billing</a>
|
|
<hr class="dropdown-divider" />
|
|
<a href="/logout" class="dropdown-item">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Welcome Section -->
|
|
<section class="welcome-section">
|
|
<div class="welcome-content">
|
|
<h1 class="welcome-title">Welcome back, John!</h1>
|
|
<p class="welcome-subtitle">Here's what's happening with your MonacoUSA membership</p>
|
|
</div>
|
|
<div class="welcome-actions">
|
|
<ProfessionalButton variant="primary" size="lg">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Book Event
|
|
</ProfessionalButton>
|
|
<ProfessionalButton variant="outline" size="lg">
|
|
Renew Membership
|
|
</ProfessionalButton>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Membership Overview -->
|
|
<section class="membership-overview">
|
|
<NeumorphicCard class="membership-card" elevation="lg">
|
|
<div class="membership-header">
|
|
<div class="membership-badge">
|
|
<svg fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
</svg>
|
|
</div>
|
|
<div class="membership-info">
|
|
<h2 class="membership-type">Platinum Member</h2>
|
|
<p class="membership-since">Member since January 2022</p>
|
|
</div>
|
|
<div class="membership-status">
|
|
<span class="status-badge status-badge--active">Active</span>
|
|
<span class="expiry-date">Expires Dec 31, 2025</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="membership-benefits">
|
|
<h3 class="benefits-title">Your Benefits</h3>
|
|
<div class="benefits-grid">
|
|
<div class="benefit-item">
|
|
<svg fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>Unlimited Event Access</span>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<svg fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>Priority Support</span>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<svg fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>Exclusive Resources</span>
|
|
</div>
|
|
<div class="benefit-item">
|
|
<svg fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>Partner Discounts</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="membership-progress">
|
|
<div class="progress-header">
|
|
<span class="progress-label">Loyalty Points</span>
|
|
<span class="progress-value">8,450 / 10,000</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 84.5%"></div>
|
|
</div>
|
|
<p class="progress-text">1,550 points to Diamond status</p>
|
|
</div>
|
|
</NeumorphicCard>
|
|
</section>
|
|
|
|
<!-- Quick Stats -->
|
|
<section class="quick-stats">
|
|
<StatCard
|
|
label="Events Attended"
|
|
value="24"
|
|
trend="20"
|
|
variant="primary"
|
|
description="This year"
|
|
/>
|
|
<StatCard
|
|
label="Resources Downloaded"
|
|
value="156"
|
|
trend="15"
|
|
variant="success"
|
|
description="Total downloads"
|
|
/>
|
|
<StatCard
|
|
label="Community Posts"
|
|
value="42"
|
|
trend="-5"
|
|
variant="info"
|
|
description="Last 30 days"
|
|
/>
|
|
<StatCard
|
|
label="Savings Earned"
|
|
value="3250"
|
|
prefix="$"
|
|
trend="35"
|
|
variant="warning"
|
|
description="Through benefits"
|
|
format="currency"
|
|
/>
|
|
</section>
|
|
|
|
<!-- Main Dashboard Grid -->
|
|
<div class="dashboard-grid">
|
|
<!-- Upcoming Events -->
|
|
<NeumorphicCard class="events-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<h2 class="card-title">Upcoming Events</h2>
|
|
<a href="/member/events" class="card-link">View All</a>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="events-list">
|
|
<div v-for="event in upcomingEvents" :key="event.id" class="event-item">
|
|
<div class="event-date">
|
|
<span class="event-month">{{ event.month }}</span>
|
|
<span class="event-day">{{ event.day }}</span>
|
|
</div>
|
|
<div class="event-details">
|
|
<span class="event-category">{{ event.category }}</span>
|
|
<h3 class="event-title">{{ event.title }}</h3>
|
|
<div class="event-meta">
|
|
<span class="event-time">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{{ event.time }}
|
|
</span>
|
|
<span class="event-location">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
{{ event.location }}
|
|
</span>
|
|
</div>
|
|
<div class="event-actions">
|
|
<ProfessionalButton size="sm" variant="primary">Register</ProfessionalButton>
|
|
<ProfessionalButton size="sm" variant="ghost">Details</ProfessionalButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NeumorphicCard>
|
|
|
|
<!-- Resources & Documents -->
|
|
<NeumorphicCard class="resources-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<h2 class="card-title">Latest Resources</h2>
|
|
<a href="/member/resources" class="card-link">Browse All</a>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="resources-list">
|
|
<div v-for="resource in latestResources" :key="resource.id" class="resource-item">
|
|
<div class="resource-icon" :class="`resource-icon--${resource.type}`">
|
|
<svg v-if="resource.type === 'pdf'" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-5L9 2H4z" clip-rule="evenodd" />
|
|
</svg>
|
|
<svg v-else-if="resource.type === 'video'" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
|
|
</svg>
|
|
<svg v-else fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="resource-info">
|
|
<h4 class="resource-title">{{ resource.title }}</h4>
|
|
<p class="resource-meta">{{ resource.category }} • {{ resource.size }}</p>
|
|
</div>
|
|
<button class="resource-download">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</NeumorphicCard>
|
|
</div>
|
|
|
|
<!-- Community & Announcements -->
|
|
<div class="community-grid">
|
|
<!-- Community Activity -->
|
|
<NeumorphicCard class="community-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<h2 class="card-title">Community Activity</h2>
|
|
<a href="/member/community" class="card-link">Join Discussion</a>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="activity-feed">
|
|
<div v-for="activity in communityActivity" :key="activity.id" class="activity-item">
|
|
<img :src="`https://ui-avatars.com/api/?name=${activity.author}&background=random`"
|
|
:alt="activity.author"
|
|
class="activity-avatar" />
|
|
<div class="activity-content">
|
|
<div class="activity-header">
|
|
<span class="activity-author">{{ activity.author }}</span>
|
|
<span class="activity-time">{{ activity.time }}</span>
|
|
</div>
|
|
<p class="activity-text">{{ activity.text }}</p>
|
|
<div class="activity-actions">
|
|
<button class="activity-action">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
{{ activity.likes }}
|
|
</button>
|
|
<button class="activity-action">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
{{ activity.comments }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NeumorphicCard>
|
|
|
|
<!-- Important Announcements -->
|
|
<NeumorphicCard class="announcements-card">
|
|
<template #header>
|
|
<h2 class="card-title">Important Announcements</h2>
|
|
</template>
|
|
|
|
<div class="announcements-list">
|
|
<div v-for="announcement in announcements" :key="announcement.id" class="announcement-item">
|
|
<div class="announcement-icon" :class="`announcement-icon--${announcement.type}`">
|
|
<svg v-if="announcement.type === 'info'" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
|
</svg>
|
|
<svg v-else-if="announcement.type === 'warning'" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
<svg v-else fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="announcement-content">
|
|
<h4 class="announcement-title">{{ announcement.title }}</h4>
|
|
<p class="announcement-text">{{ announcement.text }}</p>
|
|
<span class="announcement-date">{{ announcement.date }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NeumorphicCard>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import NeumorphicCard from '../../components/core/NeumorphicCard.vue';
|
|
import ProfessionalButton from '../../components/core/ProfessionalButton.vue';
|
|
import StatCard from '../../components/core/StatCard.vue';
|
|
|
|
// Data
|
|
const mobileMenuOpen = ref(false);
|
|
const profileMenuOpen = ref(false);
|
|
|
|
const memberNavItems = [
|
|
{ name: 'Dashboard', path: '/member', active: true },
|
|
{ name: 'Events', path: '/member/events' },
|
|
{ name: 'Resources', path: '/member/resources' },
|
|
{ name: 'Community', path: '/member/community' },
|
|
{ name: 'Benefits', path: '/member/benefits' },
|
|
{ name: 'Support', path: '/member/support' }
|
|
];
|
|
|
|
const upcomingEvents = ref([
|
|
{
|
|
id: 1,
|
|
month: 'JAN',
|
|
day: '20',
|
|
category: 'Networking',
|
|
title: 'Annual Monaco Gala',
|
|
time: '7:00 PM EST',
|
|
location: 'Grand Ballroom, NYC'
|
|
},
|
|
{
|
|
id: 2,
|
|
month: 'FEB',
|
|
day: '05',
|
|
category: 'Workshop',
|
|
title: 'Investment Strategies 2025',
|
|
time: '2:00 PM EST',
|
|
location: 'Virtual Event'
|
|
},
|
|
{
|
|
id: 3,
|
|
month: 'FEB',
|
|
day: '18',
|
|
category: 'Conference',
|
|
title: 'Innovation Summit',
|
|
time: '9:00 AM EST',
|
|
location: 'Monaco Convention Center'
|
|
}
|
|
]);
|
|
|
|
const latestResources = ref([
|
|
{
|
|
id: 1,
|
|
type: 'pdf',
|
|
title: 'Q4 2024 Market Report',
|
|
category: 'Reports',
|
|
size: '2.5 MB'
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 'video',
|
|
title: 'Tax Planning Webinar',
|
|
category: 'Webinars',
|
|
size: '45 min'
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 'pdf',
|
|
title: 'Member Benefits Guide 2025',
|
|
category: 'Guides',
|
|
size: '1.2 MB'
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 'image',
|
|
title: 'Event Photo Gallery',
|
|
category: 'Media',
|
|
size: '15 photos'
|
|
}
|
|
]);
|
|
|
|
const communityActivity = ref([
|
|
{
|
|
id: 1,
|
|
author: 'Sarah Johnson',
|
|
time: '2 hours ago',
|
|
text: 'Just attended the virtual workshop on sustainable investing. Great insights from the speakers!',
|
|
likes: 24,
|
|
comments: 8
|
|
},
|
|
{
|
|
id: 2,
|
|
author: 'Michael Chen',
|
|
time: '5 hours ago',
|
|
text: 'Looking forward to the Monaco Gala next week. Who else is attending?',
|
|
likes: 15,
|
|
comments: 12
|
|
},
|
|
{
|
|
id: 3,
|
|
author: 'Emily Rodriguez',
|
|
time: '1 day ago',
|
|
text: 'The new member portal is fantastic! Love the improved navigation and resources section.',
|
|
likes: 42,
|
|
comments: 6
|
|
}
|
|
]);
|
|
|
|
const announcements = ref([
|
|
{
|
|
id: 1,
|
|
type: 'success',
|
|
title: 'New Partnership Benefits',
|
|
text: 'Exclusive discounts now available with our new luxury travel partner.',
|
|
date: 'Jan 3, 2025'
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 'warning',
|
|
title: 'System Maintenance',
|
|
text: 'Portal will be unavailable for maintenance on Jan 15, 2-4 AM EST.',
|
|
date: 'Jan 2, 2025'
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 'info',
|
|
title: 'Membership Renewal Reminder',
|
|
text: 'Early bird renewal discount available until February 28, 2025.',
|
|
date: 'Dec 30, 2024'
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../styles/neumorphic-system.scss';
|
|
|
|
.member-dashboard {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
|
|
}
|
|
|
|
// Header
|
|
.dashboard-header {
|
|
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
|
box-shadow: $shadow-soft-md;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 $space-6;
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-4;
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: $neutral-700;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-md) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-3;
|
|
|
|
&-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
&-text {
|
|
font-family: $font-heading;
|
|
font-size: $text-xl;
|
|
font-weight: $font-bold;
|
|
color: $neutral-800;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-nav {
|
|
display: flex;
|
|
gap: $space-2;
|
|
|
|
@media (max-width: $breakpoint-md) {
|
|
position: fixed;
|
|
top: 72px;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
flex-direction: column;
|
|
padding: $space-4;
|
|
box-shadow: $shadow-soft-lg;
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
transition: all $transition-base;
|
|
|
|
&--open {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
padding: $space-2 $space-4;
|
|
color: $neutral-700;
|
|
text-decoration: none;
|
|
font-weight: $font-medium;
|
|
border-radius: $radius-lg;
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
background: rgba($primary-500, 0.05);
|
|
color: $primary-600;
|
|
}
|
|
|
|
&--active {
|
|
background: rgba($primary-500, 0.1);
|
|
color: $primary-600;
|
|
}
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-4;
|
|
}
|
|
|
|
.notification-btn {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: $neutral-100;
|
|
border-radius: $radius-lg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: $shadow-soft-sm;
|
|
transition: all $transition-base;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: $neutral-600;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: $shadow-soft-md;
|
|
}
|
|
}
|
|
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: $primary-500;
|
|
color: white;
|
|
border-radius: $radius-full;
|
|
font-size: $text-xs;
|
|
font-weight: $font-bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.profile-menu {
|
|
position: relative;
|
|
}
|
|
|
|
.profile-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-2;
|
|
padding: $space-2 $space-3;
|
|
border: none;
|
|
background: $neutral-100;
|
|
border-radius: $radius-lg;
|
|
box-shadow: $shadow-soft-sm;
|
|
cursor: pointer;
|
|
transition: all $transition-base;
|
|
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: $radius-full;
|
|
}
|
|
|
|
.profile-name {
|
|
font-weight: $font-medium;
|
|
color: $neutral-800;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: $neutral-600;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: $shadow-soft-md;
|
|
}
|
|
}
|
|
|
|
.profile-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + $space-2);
|
|
right: 0;
|
|
min-width: 200px;
|
|
background: white;
|
|
border-radius: $radius-lg;
|
|
box-shadow: $shadow-soft-lg;
|
|
overflow: hidden;
|
|
|
|
.dropdown-item {
|
|
display: block;
|
|
padding: $space-3 $space-4;
|
|
color: $neutral-700;
|
|
text-decoration: none;
|
|
transition: background $transition-base;
|
|
|
|
&:hover {
|
|
background: rgba($primary-500, 0.05);
|
|
color: $primary-600;
|
|
}
|
|
}
|
|
|
|
.dropdown-divider {
|
|
margin: 0;
|
|
border: none;
|
|
border-top: 1px solid rgba($neutral-300, 0.3);
|
|
}
|
|
}
|
|
|
|
// Main Content
|
|
.main-content {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: $space-8 $space-6;
|
|
}
|
|
|
|
// Welcome Section
|
|
.welcome-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $space-8;
|
|
|
|
@media (max-width: $breakpoint-md) {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: $space-4;
|
|
}
|
|
}
|
|
|
|
.welcome-content {
|
|
.welcome-title {
|
|
font-family: $font-heading;
|
|
font-size: $text-3xl;
|
|
font-weight: $font-bold;
|
|
color: $neutral-800;
|
|
margin-bottom: $space-2;
|
|
}
|
|
|
|
.welcome-subtitle {
|
|
font-size: $text-lg;
|
|
color: $neutral-600;
|
|
}
|
|
}
|
|
|
|
.welcome-actions {
|
|
display: flex;
|
|
gap: $space-3;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
// Membership Overview
|
|
.membership-overview {
|
|
margin-bottom: $space-8;
|
|
}
|
|
|
|
.membership-card {
|
|
.membership-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-4;
|
|
padding-bottom: $space-6;
|
|
border-bottom: 1px solid rgba($neutral-300, 0.3);
|
|
margin-bottom: $space-6;
|
|
|
|
@media (max-width: $breakpoint-sm) {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.membership-badge {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: linear-gradient(135deg, $primary-500, $primary-600);
|
|
border-radius: $radius-xl;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: $shadow-soft-md;
|
|
|
|
svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.membership-info {
|
|
flex: 1;
|
|
|
|
.membership-type {
|
|
font-size: $text-xl;
|
|
font-weight: $font-bold;
|
|
color: $neutral-800;
|
|
margin-bottom: $space-1;
|
|
}
|
|
|
|
.membership-since {
|
|
font-size: $text-sm;
|
|
color: $neutral-600;
|
|
}
|
|
}
|
|
|
|
.membership-status {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: $space-2;
|
|
|
|
.status-badge {
|
|
padding: $space-1 $space-3;
|
|
border-radius: $radius-full;
|
|
font-size: $text-xs;
|
|
font-weight: $font-semibold;
|
|
text-transform: uppercase;
|
|
|
|
&--active {
|
|
background: rgba($success-500, 0.1);
|
|
color: $success-500;
|
|
}
|
|
}
|
|
|
|
.expiry-date {
|
|
font-size: $text-sm;
|
|
color: $neutral-600;
|
|
}
|
|
}
|
|
|
|
.membership-benefits {
|
|
margin-bottom: $space-6;
|
|
|
|
.benefits-title {
|
|
font-size: $text-lg;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
margin-bottom: $space-3;
|
|
}
|
|
|
|
.benefits-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: $space-3;
|
|
}
|
|
|
|
.benefit-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-2;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: $success-500;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
span {
|
|
font-size: $text-sm;
|
|
color: $neutral-700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.membership-progress {
|
|
background: rgba($neutral-100, 0.5);
|
|
padding: $space-4;
|
|
border-radius: $radius-lg;
|
|
|
|
.progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $space-2;
|
|
}
|
|
|
|
.progress-label {
|
|
font-size: $text-sm;
|
|
font-weight: $font-medium;
|
|
color: $neutral-700;
|
|
}
|
|
|
|
.progress-value {
|
|
font-size: $text-sm;
|
|
font-weight: $font-bold;
|
|
color: $primary-600;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 8px;
|
|
background: rgba($neutral-300, 0.3);
|
|
border-radius: $radius-full;
|
|
overflow: hidden;
|
|
box-shadow: $shadow-inset-sm;
|
|
margin-bottom: $space-2;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, $primary-500, $primary-600);
|
|
border-radius: $radius-full;
|
|
transition: width $transition-slow;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: $text-xs;
|
|
color: $neutral-600;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Quick Stats
|
|
.quick-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: $space-4;
|
|
margin-bottom: $space-8;
|
|
}
|
|
|
|
// Dashboard Grid
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: $space-6;
|
|
margin-bottom: $space-6;
|
|
|
|
@media (max-width: $breakpoint-lg) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
// Community Grid
|
|
.community-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: $space-6;
|
|
|
|
@media (max-width: $breakpoint-lg) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
// Card styles
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-title {
|
|
font-family: $font-heading;
|
|
font-size: $text-xl;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
}
|
|
|
|
.card-link {
|
|
font-size: $text-sm;
|
|
color: $primary-600;
|
|
text-decoration: none;
|
|
font-weight: $font-medium;
|
|
transition: color $transition-base;
|
|
|
|
&:hover {
|
|
color: $primary-700;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// Events Card
|
|
.events-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $space-4;
|
|
}
|
|
|
|
.event-item {
|
|
display: flex;
|
|
gap: $space-3;
|
|
padding: $space-3;
|
|
background: rgba($neutral-100, 0.5);
|
|
border-radius: $radius-lg;
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
background: rgba($neutral-100, 0.8);
|
|
box-shadow: $shadow-soft-sm;
|
|
}
|
|
|
|
.event-date {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, $primary-500, $primary-600);
|
|
border-radius: $radius-lg;
|
|
color: white;
|
|
flex-shrink: 0;
|
|
|
|
.event-month {
|
|
font-size: $text-xs;
|
|
text-transform: uppercase;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.event-day {
|
|
font-size: $text-lg;
|
|
font-weight: $font-bold;
|
|
}
|
|
}
|
|
|
|
.event-details {
|
|
flex: 1;
|
|
|
|
.event-category {
|
|
font-size: $text-xs;
|
|
font-weight: $font-semibold;
|
|
text-transform: uppercase;
|
|
color: $primary-600;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.event-title {
|
|
font-size: $text-base;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
margin: $space-1 0;
|
|
}
|
|
|
|
.event-meta {
|
|
display: flex;
|
|
gap: $space-3;
|
|
margin-bottom: $space-2;
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-1;
|
|
font-size: $text-sm;
|
|
color: $neutral-600;
|
|
|
|
svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.event-actions {
|
|
display: flex;
|
|
gap: $space-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Resources Card
|
|
.resources-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $space-3;
|
|
}
|
|
|
|
.resource-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-3;
|
|
padding: $space-3;
|
|
background: rgba($neutral-100, 0.5);
|
|
border-radius: $radius-lg;
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
background: rgba($neutral-100, 0.8);
|
|
box-shadow: $shadow-soft-sm;
|
|
}
|
|
|
|
.resource-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: $radius-lg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
&--pdf {
|
|
background: rgba($error-500, 0.1);
|
|
color: $error-500;
|
|
}
|
|
|
|
&--video {
|
|
background: rgba($info-500, 0.1);
|
|
color: $info-500;
|
|
}
|
|
|
|
&--image {
|
|
background: rgba($success-500, 0.1);
|
|
color: $success-500;
|
|
}
|
|
}
|
|
|
|
.resource-info {
|
|
flex: 1;
|
|
|
|
.resource-title {
|
|
font-size: $text-sm;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
margin-bottom: $space-1;
|
|
}
|
|
|
|
.resource-meta {
|
|
font-size: $text-xs;
|
|
color: $neutral-600;
|
|
}
|
|
}
|
|
|
|
.resource-download {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: $neutral-500;
|
|
transition: color $transition-base;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
&:hover {
|
|
color: $primary-600;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Community Activity
|
|
.activity-feed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $space-4;
|
|
}
|
|
|
|
.activity-item {
|
|
display: flex;
|
|
gap: $space-3;
|
|
|
|
.activity-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: $radius-full;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.activity-content {
|
|
flex: 1;
|
|
|
|
.activity-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: $space-1;
|
|
|
|
.activity-author {
|
|
font-size: $text-sm;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
}
|
|
|
|
.activity-time {
|
|
font-size: $text-xs;
|
|
color: $neutral-500;
|
|
}
|
|
}
|
|
|
|
.activity-text {
|
|
font-size: $text-sm;
|
|
color: $neutral-700;
|
|
line-height: $leading-relaxed;
|
|
margin-bottom: $space-2;
|
|
}
|
|
|
|
.activity-actions {
|
|
display: flex;
|
|
gap: $space-3;
|
|
|
|
.activity-action {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $space-1;
|
|
padding: $space-1 $space-2;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: $text-sm;
|
|
color: $neutral-600;
|
|
cursor: pointer;
|
|
transition: color $transition-base;
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
&:hover {
|
|
color: $primary-600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Announcements
|
|
.announcements-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $space-3;
|
|
}
|
|
|
|
.announcement-item {
|
|
display: flex;
|
|
gap: $space-3;
|
|
padding: $space-3;
|
|
background: rgba($neutral-100, 0.5);
|
|
border-radius: $radius-lg;
|
|
|
|
.announcement-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: $radius-lg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
&--info {
|
|
background: rgba($info-500, 0.1);
|
|
color: $info-500;
|
|
}
|
|
|
|
&--warning {
|
|
background: rgba($warning-500, 0.1);
|
|
color: $warning-500;
|
|
}
|
|
|
|
&--success {
|
|
background: rgba($success-500, 0.1);
|
|
color: $success-500;
|
|
}
|
|
}
|
|
|
|
.announcement-content {
|
|
flex: 1;
|
|
|
|
.announcement-title {
|
|
font-size: $text-sm;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
margin-bottom: $space-1;
|
|
}
|
|
|
|
.announcement-text {
|
|
font-size: $text-sm;
|
|
color: $neutral-600;
|
|
line-height: $leading-normal;
|
|
margin-bottom: $space-1;
|
|
}
|
|
|
|
.announcement-date {
|
|
font-size: $text-xs;
|
|
color: $neutral-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dark mode support
|
|
@include dark-mode {
|
|
.member-dashboard {
|
|
background: linear-gradient(135deg, $neutral-900 0%, $neutral-800 100%);
|
|
}
|
|
|
|
// Update other dark mode styles as needed
|
|
}
|
|
</style> |