175 lines
4.2 KiB
Vue
175 lines
4.2 KiB
Vue
<template>
|
|
<div class="design-test-page">
|
|
<div class="container">
|
|
<h1 class="page-title">New Design System Test Pages</h1>
|
|
<p class="page-subtitle">Testing implementation of the new Neumorphic design with morphing dropdowns</p>
|
|
|
|
<div class="navigation-grid">
|
|
<NuxtLink to="/admin/dashboard-v2" class="nav-card neumorphic-card">
|
|
<Icon name="mdi:view-dashboard" class="nav-icon" />
|
|
<h2>Admin Dashboard V2</h2>
|
|
<p>New admin dashboard with neumorphic design and morphing dropdowns</p>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/board/dashboard-v2" class="nav-card neumorphic-card">
|
|
<Icon name="mdi:chart-box" class="nav-icon" />
|
|
<h2>Board Dashboard V2</h2>
|
|
<p>Executive dashboard with KPIs and strategic insights</p>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/admin/dashboard" class="nav-card neumorphic-card">
|
|
<Icon name="mdi:view-dashboard-outline" class="nav-icon" />
|
|
<h2>Current Admin Dashboard</h2>
|
|
<p>Compare with the existing admin dashboard</p>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/board/dashboard" class="nav-card neumorphic-card">
|
|
<Icon name="mdi:chart-box-outline" class="nav-icon" />
|
|
<h2>Current Board Dashboard</h2>
|
|
<p>Compare with the existing board dashboard</p>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="design-info">
|
|
<h3>Design System Features</h3>
|
|
<ul>
|
|
<li>✨ Neumorphic cards and buttons with soft shadows</li>
|
|
<li>💧 Glassmorphic blue morphing dropdowns</li>
|
|
<li>🎯 Monaco red primary color maintained</li>
|
|
<li>📱 Responsive grid layouts</li>
|
|
<li>🎨 Professional and inviting aesthetic</li>
|
|
<li>⚡ Smooth spring animations</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// No authentication required for testing
|
|
definePageMeta({
|
|
auth: false,
|
|
layout: false
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// Import the new design system
|
|
@import '@/design-mockups/styles/design-system.scss';
|
|
|
|
.design-test-page {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
|
|
padding: 3rem 1rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-title {
|
|
text-align: center;
|
|
font-size: $text-4xl;
|
|
font-weight: $font-bold;
|
|
background: linear-gradient(135deg, $primary-600, $primary-800);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.page-subtitle {
|
|
text-align: center;
|
|
color: $neutral-600;
|
|
font-size: $text-lg;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.navigation-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.nav-card {
|
|
@include neumorphic-card('md');
|
|
padding: 2rem;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: all $transition-base;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
@include neumorphic-card('lg');
|
|
transform: translateY(-4px);
|
|
|
|
.nav-icon {
|
|
transform: scale(1.1);
|
|
color: $primary-600;
|
|
}
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
color: $neutral-600;
|
|
margin-bottom: 1rem;
|
|
transition: all $transition-base;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $text-xl;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
p {
|
|
font-size: $text-sm;
|
|
color: $neutral-600;
|
|
line-height: $leading-relaxed;
|
|
}
|
|
}
|
|
|
|
.design-info {
|
|
@include neumorphic-card('lg');
|
|
padding: 2rem;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
|
|
h3 {
|
|
font-size: $text-xl;
|
|
font-weight: $font-semibold;
|
|
color: $neutral-800;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
li {
|
|
padding: 0.75rem 0;
|
|
color: $neutral-700;
|
|
font-size: $text-base;
|
|
border-bottom: 1px solid rgba($neutral-200, 0.5);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Neumorphic Elements
|
|
.neumorphic-card {
|
|
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
|
border-radius: $radius-xl;
|
|
box-shadow: $shadow-soft-md;
|
|
}
|
|
</style> |