diff --git a/app/components/home/AxisGrid.vue b/app/components/home/AxisGrid.vue index a33322b..293948b 100644 --- a/app/components/home/AxisGrid.vue +++ b/app/components/home/AxisGrid.vue @@ -40,8 +40,28 @@ + + + + + - +
@@ -76,6 +96,7 @@ const { data: content } = await usePageContent('home') const { launch } = useGrateWizard() const axes = computed(() => (content.value as any)?.axes) +const gw = computed(() => (content.value as any)?.gratewizard) const evenement = computed(() => (content.value as any)?.evenement) function launchGW() { @@ -135,11 +156,84 @@ function launchGW() { flex-shrink: 0; } +/* GrateWizard block */ +.gw-block { + display: flex; + align-items: center; + gap: 1.25rem; + width: 100%; + padding: 1.75rem 2rem; + border-radius: 1rem; + border: none; + background: linear-gradient(135deg, hsl(280 50% 20% / 0.35), hsl(260 40% 15% / 0.25)); + box-shadow: 0 0 40px hsl(280 60% 50% / 0.06), inset 0 1px 0 hsl(280 60% 70% / 0.08); + cursor: pointer; + transition: all 0.3s ease; + text-align: left; + color: inherit; +} + +.gw-block:hover { + background: linear-gradient(135deg, hsl(280 50% 24% / 0.45), hsl(260 40% 18% / 0.35)); + box-shadow: 0 0 60px hsl(280 60% 50% / 0.12), inset 0 1px 0 hsl(280 60% 70% / 0.12); + transform: translateY(-2px); +} + +.gw-block:active { + transform: translateY(0); +} + +.gw-icon { + display: flex; + align-items: center; + justify-content: center; + width: 3.5rem; + height: 3.5rem; + border-radius: 0.875rem; + background: hsl(280 60% 55% / 0.18); + color: hsl(280 60% 72%); + flex-shrink: 0; + box-shadow: 0 0 20px hsl(280 60% 50% / 0.15); +} + +.gw-text { + flex: 1; + min-width: 0; +} + +.gw-arrow { + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + background: hsl(280 60% 55% / 0.1); + color: hsl(280 60% 65%); + flex-shrink: 0; + transition: all 0.2s; +} + +.gw-block:hover .gw-arrow { + background: hsl(280 60% 55% / 0.2); + color: hsl(280 60% 80%); + transform: translate(2px, -2px); +} + @media (max-width: 640px) { .event-block { flex-direction: column; align-items: flex-start; padding: 1.5rem; } + + .gw-block { + padding: 1.25rem; + gap: 1rem; + } + + .gw-arrow { + display: none; + } } diff --git a/app/components/home/HomeMessages.vue b/app/components/home/HomeMessages.vue index b412509..86bf52a 100644 --- a/app/components/home/HomeMessages.vue +++ b/app/components/home/HomeMessages.vue @@ -7,40 +7,36 @@

Laisser un message

-
- - -
+ +

Pour recevoir une réponse, laissez votre e-mail dans le message.