denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add new design closer to gremiumhub landing

Browse Source
This commit is contained in:
Denis Lugowski
2026-02-15 09:59:15 +01:00
parent 454321dad2
commit 05b89778cf
10 changed files with 358 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
legalconsenthub/app/app.config.ts
View File

@@ -1,8 +1,23 @@
export default defineAppConfig({
ui: {
colors: {
primary: 'green',
primary: 'teal',
neutral: 'zinc'
},
// Card customizations with vibrant hover effect
card: {
slots: {
root: 'hover:ring-2 hover:ring-teal-400/50 dark:hover:ring-teal-500/40 hover:shadow-lg hover:shadow-teal-500/10 transition-all duration-200'
}
},
// Dashboard navbar with glass morphism
dashboardNavbar: {
slots: {
root: 'bg-white/90 dark:bg-gray-950/90 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-800/50 transition-all duration-300',
title: 'font-semibold text-gray-900 dark:text-white'
}
}
}
})

103
legalconsenthub/app/assets/css/main.css
View File

@@ -2,15 +2,96 @@
@import '@nuxt/ui';
@theme static {
--color-green-50: #effdf5;
--color-green-100: #d9fbe8;
--color-green-200: #b3f5d1;
--color-green-300: #75edae;
--color-green-400: #00dc82;
--color-green-500: #00c16a;
--color-green-600: #00a155;
--color-green-700: #007f45;
--color-green-800: #016538;
--color-green-900: #0a5331;
--color-green-950: #052e16;
/* Primary color - Teal (matching landing page) */
--color-teal-50: #f0fdfa;
--color-teal-100: #ccfbf1;
--color-teal-200: #99f6e4;
--color-teal-300: #5eead4;
--color-teal-400: #2dd4bf;
--color-teal-500: #14b8a6;
--color-teal-600: #0d9488;
--color-teal-700: #0f766e;
--color-teal-800: #115e59;
--color-teal-900: #134e4a;
--color-teal-950: #042f2e;
/* Cyan for accent highlights */
--color-cyan-50: #ecfeff;
--color-cyan-100: #cffafe;
--color-cyan-200: #a5f3fc;
--color-cyan-300: #67e8f9;
--color-cyan-400: #22d3ee;
--color-cyan-500: #06b6d4;
--color-cyan-600: #0891b2;
--color-cyan-700: #0e7490;
--color-cyan-800: #155e75;
--color-cyan-900: #164e63;
--color-cyan-950: #083344;
/* Violet color palette (for Tailwind classes and hover effects) */
--color-violet-50: #f5f3ff;
--color-violet-100: #ede9fe;
--color-violet-200: #ddd6fe;
--color-violet-300: #c4b5fd;
--color-violet-400: #a78bfa;
--color-violet-500: #8b5cf6;
--color-violet-600: #7c3aed;
--color-violet-700: #6d28d9;
--color-violet-800: #5b21b6;
--color-violet-900: #4c1d95;
--color-violet-950: #2e1065;
}
/* ============================================
FOCUS & ACCESSIBILITY
============================================ */
/* Global focus styles for elements without built-in focus styling.
Nuxt UI components (inputs, buttons, selects, etc.) have their own
focus ring styling, so we exclude them to avoid double borders. */
:focus-visible:not(input):not(textarea):not(select):not(button):not([role="combobox"]):not([role="listbox"]):not([role="option"]):not([role="checkbox"]):not([role="radio"]):not([role="switch"]):not([role="slider"]):not([role="tab"]):not([role="menuitem"]) {
outline: 2px solid var(--color-teal-500);
outline-offset: 2px;
}
/* ============================================
HEADER STYLING
============================================ */
/* Header logo accent with gradient */
.header-logo-accent {
background: linear-gradient(135deg, var(--color-teal-500), var(--color-cyan-400));
box-shadow: 0 4px 6px -1px rgba(20, 184, 166, 0.2);
}
/* ============================================
NAVIGATION BUTTON GROUP
============================================ */
.nav-button-group {
display: flex;
gap: 0.75rem;
align-items: center;
}
@media (max-width: 640px) {
.nav-button-group {
flex-direction: column;
width: 100%;
}
.nav-button-group > * {
width: 100%;
justify-content: center;
}
}
/* Navigation separator line */
.nav-separator {
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-gray-200), transparent);
margin-bottom: 1.5rem;
}
.dark .nav-separator {
background: linear-gradient(90deg, transparent, var(--color-gray-700), transparent);
}

79
legalconsenthub/app/components/FormStepperWithNavigation.vue
View File

@@ -99,38 +99,55 @@
</div>
</UCard>
<div class="flex gap-2 justify-between">
<UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
{{ $t('applicationForms.navigation.previous') }}
</UButton>
<!-- Navigation Section -->
<div class="mt-8">
<div class="nav-separator" />
<div class="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center">
<!-- Previous Button -->
<UButton
leading-icon="i-lucide-arrow-left"
:disabled="!stepper?.hasPrev"
variant="soft"
color="neutral"
size="lg"
class="order-2 sm:order-1 rounded-xl"
@click="handleNavigate('backward')"
>
{{ $t('applicationForms.navigation.previous') }}
</UButton>
<div class="flex flex-wrap items-center gap-1.5">
<UButton
trailing-icon="i-lucide-save"
:disabled="disabled"
variant="outline"
size="lg"
@click="emit('save')"
>
{{ $t('applicationForms.navigation.save') }}
</UButton>
<UButton
v-if="stepper?.hasNext"
trailing-icon="i-lucide-arrow-right"
size="lg"
@click="handleNavigate('forward')"
>
{{ $t('applicationForms.navigation.next') }}
</UButton>
<UButton
v-if="!stepper?.hasNext"
trailing-icon="i-lucide-send-horizontal"
:disabled="disabled"
size="lg"
@click="emit('submit')"
>
{{ $t('applicationForms.navigation.submit') }}
</UButton>
<!-- Primary Actions -->
<div class="nav-button-group order-1 sm:order-2">
<UButton
trailing-icon="i-lucide-save"
:disabled="disabled"
variant="outline"
size="lg"
class="rounded-xl font-semibold"
@click="emit('save')"
>
{{ $t('applicationForms.navigation.save') }}
</UButton>
<UButton
v-if="stepper?.hasNext"
trailing-icon="i-lucide-arrow-right"
size="lg"
class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
@click="handleNavigate('forward')"
>
{{ $t('applicationForms.navigation.next') }}
</UButton>
<UButton
v-if="!stepper?.hasNext"
trailing-icon="i-lucide-send-horizontal"
:disabled="disabled"
size="lg"
class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
@click="emit('submit')"
>
{{ $t('applicationForms.navigation.submit') }}
</UButton>
</div>
</div>
</div>
</div>

4
legalconsenthub/app/composables/useSectionSpawning.ts
View File

@@ -71,9 +71,7 @@ export function useSectionSpawning() {
const newSection = spawnSectionFromTemplate(templateSection, element.reference!, triggerValue)
// Find template index
const templateIndex = sections.findIndex(
(s) => s.isTemplate && s.templateReference === trigger.templateReference
)
const templateIndex = sections.findIndex((s) => s.isTemplate && s.templateReference === trigger.templateReference)
if (templateIndex === -1) {
// Fallback: append if template not found (shouldn't happen)

60
legalconsenthub/app/layouts/auth.vue
View File

@@ -1,5 +1,61 @@
<template>
<div class="h-screen flex items-center justify-center overlay">
<slot />
<div class="auth-layout h-screen flex items-center justify-center p-4">
<!-- Subtle gradient orbs for visual interest -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="auth-orb auth-orb-1" />
<div class="auth-orb auth-orb-2" />
<div class="auth-orb auth-orb-3" />
</div>
<div class="relative z-10 w-full max-w-md">
<slot />
</div>
</div>
</template>
<style scoped>
.auth-layout {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 50%, #ecfeff 100%);
}
.dark .auth-layout {
background: linear-gradient(180deg, #0a0a0a 0%, #042f2e 50%, #083344 100%);
}
/* Subtle floating orbs */
.auth-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
}
.auth-orb-1 {
width: 400px;
height: 400px;
top: -100px;
right: -100px;
background: linear-gradient(135deg, #14b8a6, #22d3ee);
}
.auth-orb-2 {
width: 300px;
height: 300px;
bottom: -50px;
left: -50px;
background: linear-gradient(135deg, #22d3ee, #14b8a6);
}
.auth-orb-3 {
width: 200px;
height: 200px;
bottom: -50px;
right: 20%;
background: linear-gradient(135deg, #a78bfa, #7c3aed);
opacity: 0.3;
}
.dark .auth-orb {
opacity: 0.2;
}
</style>

2
legalconsenthub/app/layouts/default.vue
View File

@@ -6,7 +6,7 @@
v-model:open="open"
collapsible
resizable
class="bg-(--ui-bg-elevated)/25"
class="bg-(--ui-bg-elevated)/75 border-r border-(--ui-border)"
:ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"
>
<template #header>

6
legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
View File

@@ -13,11 +13,7 @@
to="/create"
:disabled="!canWriteApplicationForms"
size="xl"
variant="outline"
color="neutral"
:ui="{
leadingIcon: 'text-primary'
}"
class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
/>
</template>
</UDashboardNavbar>

17
legalconsenthub/app/pages/index.vue
View File

@@ -4,6 +4,9 @@
<UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
<template #leading>
<UDashboardSidebarCollapse />
<div class="header-logo-accent w-8 h-8 rounded-lg flex items-center justify-center ml-2">
<UIcon name="i-lucide-file-text" class="size-5 text-white" />
</div>
</template>
<template #right>
@@ -21,7 +24,13 @@
/>
<UTooltip :text="$t('notifications.tooltip')" :shortcuts="['N']">
<UButton color="neutral" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
<UButton
color="neutral"
variant="ghost"
square
class="hover:bg-teal-50 dark:hover:bg-teal-950/50 transition-colors"
@click="isNotificationsSlideoverOpen = true"
>
<UChip :show="hasUnread" color="error" inset>
<UIcon name="i-lucide-bell" class="size-5 shrink-0" />
</UChip>
@@ -34,11 +43,7 @@
to="/create"
:disabled="!canWriteApplicationForms"
size="xl"
variant="outline"
color="neutral"
:ui="{
leadingIcon: 'text-primary'
}"
class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
/>
</template>
</UDashboardNavbar>

4
legalconsenthub/app/pages/login.vue
View File

@@ -3,10 +3,10 @@
<template #header>
<div class="text-center">
<UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
<h1 class="text-3xl font-bold text-gray-900 mb-2">
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
{{ $t('auth.welcome') }}
</h1>
<p class="text-gray-600">
<p class="text-gray-600 dark:text-gray-400">
{{ $t('auth.redirectMessage') }}
</p>
</div>