315 lines
9.1 KiB
Vue
315 lines
9.1 KiB
Vue
<template>
|
|
<div class="mockup-index">
|
|
<div class="container">
|
|
<header class="header">
|
|
<img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo" />
|
|
<h1 class="title">MonacoUSA Portal Design Mockups</h1>
|
|
<p class="subtitle">Professional Neumorphic Design System</p>
|
|
</header>
|
|
|
|
<section class="mockup-grid">
|
|
<NuxtLink to="/design-mockups/pages/auth/ProfessionalLogin" class="mockup-card">
|
|
<div class="card-icon card-icon--auth">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="card-title">Login Page</h2>
|
|
<p class="card-description">Professional split-screen login with branding section and neumorphic form</p>
|
|
<span class="card-link">View Mockup →</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/design-mockups/pages/admin/ProfessionalAdminDashboard" class="mockup-card">
|
|
<div class="card-icon card-icon--admin">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="card-title">Admin Dashboard</h2>
|
|
<p class="card-description">Complete admin interface with sidebar navigation, stats, charts, and data tables</p>
|
|
<span class="card-link">View Mockup →</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/design-mockups/pages/board/ProfessionalBoardDashboard" class="mockup-card">
|
|
<div class="card-icon card-icon--board">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="card-title">Board Dashboard</h2>
|
|
<p class="card-description">Strategic insights, KPIs, governance features, and executive metrics</p>
|
|
<span class="card-link">View Mockup →</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/design-mockups/pages/member/ProfessionalMemberDashboard" class="mockup-card">
|
|
<div class="card-icon card-icon--member">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="card-title">Member Dashboard</h2>
|
|
<p class="card-description">Member portal with events, resources, community features, and benefits</p>
|
|
<span class="card-link">View Mockup →</span>
|
|
</NuxtLink>
|
|
</section>
|
|
|
|
<section class="components-section">
|
|
<h2 class="section-title">Core Components</h2>
|
|
<div class="component-list">
|
|
<div class="component-item">
|
|
<span class="component-name">NeumorphicCard</span>
|
|
<span class="component-status">✅ Complete</span>
|
|
</div>
|
|
<div class="component-item">
|
|
<span class="component-name">ProfessionalButton</span>
|
|
<span class="component-status">✅ Complete</span>
|
|
</div>
|
|
<div class="component-item">
|
|
<span class="component-name">StatCard</span>
|
|
<span class="component-status">✅ Complete</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<p>Neumorphic Design System • Professional & Inviting • Built with Vue 3 & Nuxt 3</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// No additional logic needed for this index page
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// Import the neumorphic system
|
|
@import './styles/neumorphic-system.scss';
|
|
|
|
.mockup-index {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
|
|
padding: $space-8 $space-6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: $space-12;
|
|
|
|
.logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto $space-4;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.title {
|
|
font-family: $font-heading;
|
|
font-size: $text-4xl;
|
|
font-weight: $font-bold;
|
|
color: $neutral-800;
|
|
margin-bottom: $space-2;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: $text-lg;
|
|
color: $neutral-600;
|
|
}
|
|
}
|
|
|
|
.mockup-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: $space-6;
|
|
margin-bottom: $space-12;
|
|
}
|
|
|
|
.mockup-card {
|
|
display: block;
|
|
padding: $space-6;
|
|
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
|
border-radius: $radius-xl;
|
|
box-shadow: $shadow-soft-md;
|
|
text-decoration: none;
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: $shadow-soft-lg;
|
|
|
|
.card-link {
|
|
color: $primary-700;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
box-shadow: $shadow-inset-sm;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: $radius-lg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: $space-4;
|
|
box-shadow: $shadow-soft-sm;
|
|
|
|
svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
&--auth {
|
|
background: linear-gradient(135deg, rgba($primary-500, 0.1), rgba($primary-600, 0.15));
|
|
color: $primary-600;
|
|
}
|
|
|
|
&--admin {
|
|
background: linear-gradient(135deg, rgba($info-500, 0.1), rgba($info-500, 0.15));
|
|
color: $info-500;
|
|
}
|
|
|
|
&--board {
|
|
background: linear-gradient(135deg, rgba($success-500, 0.1), rgba($success-500, 0.15));
|
|
color: $success-500;
|
|
}
|
|
|
|
&--member {
|
|
background: linear-gradient(135deg, rgba($warning-500, 0.1), rgba($warning-500, 0.15));
|
|
color: $warning-500;
|
|
}
|
|
}
|
|
|
|
.card-title {
|
|
font-family: $font-heading;
|
|
font-size: $text-xl;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
margin-bottom: $space-2;
|
|
}
|
|
|
|
.card-description {
|
|
font-size: $text-sm;
|
|
color: $neutral-600;
|
|
line-height: $leading-relaxed;
|
|
margin-bottom: $space-4;
|
|
}
|
|
|
|
.card-link {
|
|
font-size: $text-sm;
|
|
font-weight: $font-medium;
|
|
color: $primary-600;
|
|
transition: color $transition-base;
|
|
}
|
|
}
|
|
|
|
.components-section {
|
|
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
|
border-radius: $radius-xl;
|
|
padding: $space-8;
|
|
box-shadow: $shadow-soft-md;
|
|
margin-bottom: $space-8;
|
|
|
|
.section-title {
|
|
font-family: $font-heading;
|
|
font-size: $text-2xl;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
margin-bottom: $space-6;
|
|
}
|
|
|
|
.component-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: $space-4;
|
|
}
|
|
|
|
.component-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: $space-3 $space-4;
|
|
background: rgba($neutral-100, 0.5);
|
|
border-radius: $radius-lg;
|
|
|
|
.component-name {
|
|
font-family: $font-mono;
|
|
font-size: $text-sm;
|
|
color: $neutral-700;
|
|
}
|
|
|
|
.component-status {
|
|
font-size: $text-sm;
|
|
color: $success-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
padding: $space-6;
|
|
|
|
p {
|
|
font-size: $text-sm;
|
|
color: $neutral-600;
|
|
}
|
|
}
|
|
|
|
// Dark mode support
|
|
@include dark-mode {
|
|
.mockup-index {
|
|
background: linear-gradient(135deg, $neutral-900 0%, $neutral-800 100%);
|
|
}
|
|
|
|
.mockup-card {
|
|
background: linear-gradient(145deg, $neutral-800, $neutral-700);
|
|
|
|
.card-title {
|
|
color: $neutral-100;
|
|
}
|
|
|
|
.card-description {
|
|
color: $neutral-400;
|
|
}
|
|
}
|
|
|
|
.components-section {
|
|
background: linear-gradient(145deg, $neutral-800, $neutral-700);
|
|
|
|
.section-title {
|
|
color: $neutral-100;
|
|
}
|
|
|
|
.component-item {
|
|
background: rgba($neutral-700, 0.5);
|
|
|
|
.component-name {
|
|
color: $neutral-300;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
.title {
|
|
color: $neutral-100;
|
|
}
|
|
|
|
.subtitle {
|
|
color: $neutral-400;
|
|
}
|
|
}
|
|
|
|
.footer p {
|
|
color: $neutral-400;
|
|
}
|
|
}
|
|
</style> |