IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

progress, performance & buttons

Browse Source
This commit is contained in:
Robert Jagtiani
2025-01-03 00:54:36 +01:00
parent 6a61695106
commit ea9bba2586
18 changed files with 383 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Ausweis/ButtonSpaeterHilfe.svelte
View File

@@ -6,23 +6,26 @@
<!-- Später weitermachen / Hilfe anfordern -->
<div
class="w-full mt-5 grid gap-x-4 gap-y-2 px-4
grid-cols-1
xs:grid-cols-2
"
>
<div class="md:justify-self-start">
<button class="button" type="button" on:click={spaeterWeitermachen}
>Später Weitermachen
</button>
</div>
<div class="md:justify-self-end"><Hilfe /></div>
</div>
<div class="mt-2 px-4">
<button class="button" on:click={automatischAusfüllen} type="button"
>Automatisch Ausfüllen
<div class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8">
<div></div>
<button class="invisible button" on:click={automatischAusfüllen} type="button"
>Automatisch Ausfüllen
</button>
<Hilfe />
<button class="button" type="button" on:click={spaeterWeitermachen}
>Später Weitermachen
</button>
</div>

37
src/components/Ausweis/ButtonWeiterHilfe.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts">
import AusweisWeiter from "#modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte";
import Hilfe from "#components/Ausweis/Hilfe.svelte";
export let ausweis;
export let images;
export let user;
export let gebaeude;
export let gebaeude_aufnahme_allgemein;
export let spaeterWeitermachen;
</script>
<div class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8">
<div></div>
<Hilfe />
<button class="button" type="button" on:click={spaeterWeitermachen}
>Später Weitermachen
</button>
<div class="">
<AusweisWeiter
bind:ausweis
bind:images
bind:user
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
></AusweisWeiter>
</div>
</div>

2
src/components/Ausweis/HeizungImage.svelte
View File

@@ -10,7 +10,7 @@
<div class="grid grid-cols-2 gap-x-6 mt-6">
<div class="box card mb-0">
<div id="getWidth" class="box card mb-0">
<p class="font-bold mb-2">

107
src/components/Ausweis/Hilfe.svelte
View File

@@ -1,15 +1,24 @@
<script lang="ts">
import { PRICES } from "#lib/constants";
let showHelp: boolean = false;
</script>
<div>
<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
>Hilfe anfordern</button
>
>Hilfe anfordern</button>
</div>
{#if showHelp}
<div>
<div>
{#if showHelp}
<div class="col-start-1 row-start-2 col-span-4 mt-4">
<div class="bereich-box grid relative
grid-cols-1 gap-x-4 gap-y-4
"
>
<div class="pr-12">
Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
haben. Kurze Fragen zum Formular oder der Ausweisart werden
kostenfrei telefonisch unter <a href="tel:+4940209339850"
@@ -20,41 +29,61 @@
Auswahl und klicken auf weiter:
</div>
<div class="flex flex-row justify-between mx-4 my-2">
<div class="form-group col-md-7">
Verbrauchsausweis online inkl. ausführlicher telefonischer
Beratung für 60 € inkl. MwSt.
</div>
<div class="form-group col-md-5">
<input
type="radio"
class="IGanlass"
id="Produkttb1"
value="ptb"
name="Produkt"
/>
</div>
</div>
<div class="flex flex-row justify-between mx-4 my-2">
<div class="form-group col-md-7">
Verbrauchsausweis offline für 180 € inkl. MwSt. (Sie
schicken uns 3 Verbrauchsabrechnungen zu)
</div>
<div class="form-group col-md-5">
<input
type="radio"
class="IGanlass"
id="Produktof1"
value="pof"
name="Produkt"
/>
</div>
</div>
<hr class="m-0">
<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
<input
type="radio"
class=" accent-secondary w-[20px] h-[20px]"
id="Produkttb1"
value="ptb"
name="Produkt"
/>
<div class="justify-self-stretch">
Verbrauchsausweis online inkl. ausführlicher telefonischer Beratung
</div>
<div class="text-right">
<b>{PRICES.VerbrauchsausweisWohnen[1]} €</b> inkl. MwSt.
</div>
<div style="text-align:right;">
<button>Weiter</button>
</div>
<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
<input
type="radio"
class=" accent-secondary w-[20px] h-[20px]"
id="Produktof1"
value="pof"
name="Produkt"
/>
<div>
Verbrauchsausweis offline (Sie schicken uns 3 Verbrauchsabrechnungen zu)
</div>
<div class="text-right">
<b>{PRICES.VerbrauchsausweisWohnen[2]} €</b> inkl. MwSt.
</div>
</div>
<hr class="m-0">
<button class="button">jetzt Hilfe bestellen</button>
<button class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0" type="button" on:click={() => (showHelp = !showHelp)}>X</button>
</div>
{/if}
</div>
{/if}

7
src/components/Ausweis/PerformanceScore.svelte
View File

@@ -78,9 +78,8 @@
})();
}
</script>
<img class="" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
<div class="self-center relative">
<img id="skalaImage" class="w-full" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
<ThickArrowDown
size={28}
class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
@@ -103,4 +102,4 @@
100
)}%)"
/>
</div>

50
src/components/Ausweis/Progressbar.svelte
View File

@@ -3,33 +3,39 @@
</script>
<div class="progress-section">
<div class="w-full bg-gray-100 absolute h-3 rounded-lg">
<div class="grid grid-cols-3 self-start">
<div class="col-span-3 relative">
<div class="w-[calc(100%-5rem)] ml-[2.5rem] absolute mt-[0.5rem] bg-gray-200 h-3 rounded-lg">
<div class="bg-green-600 left-0 h-3 absolute" style={`width: ${progress}%;`}></div>
</div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
<div class="flex flex-row justify-between">
<div>Gebäudedaten</div>
<div>Prüfung</div>
<div>Kaufabschluss</div>
</div>
<div class="phase justify-self-start">
<div class="point">1</div>
<div class="">Gebäudedaten</div>
</div>
<div class="phase">
<div class="point">2</div>
<div class="">Prüfung</div>
</div>
<div class="phase justify-self-end">
<div class="point">3</div>
<div class="">Kaufabschluss</div>
</div>
</div>
<style>
.progress-section {
@apply relative items-center flex flex-row justify-between px-0;
}
.progress-section span {
@apply rounded-full bg-green-600 items-center relative flex h-8 w-8 justify-center text-white font-semibold;
}
<style lang="postcss">
.phase{@apply grid grid-cols-1 items-center justify-items-center z-10;
.point{@apply rounded-full w-8 h-8 text-white font-bold bg-secondary text-center pt-1 ring-white ring-4;}
}
p {
padding: 0 !important;
@apply p-0;
}
</style>

86
src/components/design/header/AusweisHeader.astro Normal file
View File

@@ -0,0 +1,86 @@
---
import HeaderLogin from "#header/HeaderLogin.svelte";
---
<header id="header">
<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
grid-cols-1
sm:grid-cols-1
md:grid-cols-1
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
<div class="justify-self-center xs:justify-self-start">
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
md:gap-y-4
lg:px-0 lg:gap-x-4">
<div class="self-start justify-self-start">
<a href="/">
<img id="header-logo" class="w-full
xs:max-w-[64px]
sm:max-w-[64px]
md:max-w-[64px] md:ml-6
lg:max-w-[64px] lg:ml-0
xl:max-w-[94px] xl:ml-0
"
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
</a>
</div>
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
<div id="header-text-1"class="text-secondary justify-self-center
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
lg:[font-size:_clamp(15px,3vw,26px)]
lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,36px)]
xl:leading-[4.5rem] pt-[0px]">
Energieausweis online erstellen</div>
<div id="header-text-2"class="text-primary justify-self-center
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
lg:[font-size:_clamp(15px,3vw,20px)]
lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,24px)]
xl:leading-[0.5rem]">
Energieausweise nach aktuellem GEG</div>
</div>
</div>
</div>
<div class="w-full justify-self-center">
<HeaderLogin client:load />
</div>
</div>
</div>
<div class="col-start-1 col-span-3">
<div id="header-line" class="px-2 flex flex-row w-full justify-end items-center bg-primary
lg:h-[12px] xl:h-[12px]"></div>
</div>
</header>
<style>
.header-button {
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
}
</style>

4
src/components/design/header/HeaderLogin.svelte
View File

@@ -22,7 +22,7 @@
<div
id="card-login"
class="rounded-none lg:rounded-lg lg:card lg:box bg-black/10 md:bg-black/5 lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2"
class="rounded-none lg:rounded-lg lg:card lg:box lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2"
>
<form on:submit={login}>
<div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
@@ -62,7 +62,7 @@
</div>
{/if}
<button class="button self-center" type="submit">login</button>
<button id="LoginButton" class="button self-center" type="submit">login</button>
</div>
<div

68
src/components/design/header/Header_1.astro
View File

@@ -1,68 +0,0 @@
<header class="max-w-[1920px] w-full relative bg-white
md:bg-[url('/images/header/header-bg.jpg')]
md:bg-cover md:grid md:grid-cols-2
lg:grid lg:grid-cols-3">
<div class="
justify-self-center px-2 py-2
xs:px-6 xs:py-4
md:px-4 md:py-4
md:col-end-4 md:justify-self-end
xl:my-4 xl:mr-9 xl:p-0">
<a href="/">
<img class="
w-full
md:w-[350px]
lg:w-[420px]"
src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
</a>
<h2 class="text-secondary font-normal absolute
top-1 right-2 text-[1.1rem]
xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
md:top-[1.25rem] md:right-4 md:text-[1.1rem]
xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
Energieausweis online erstellen
</h2>
<h2 class="text-primary font-normal absolute
top-[1.6rem] right-2 text-[0.85rem]
xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
md:top-[2.5rem] md:right-4 md:text-[0.9rem]
xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
Energieausweise nach aktuellem GEG
</h2>
</div>
<div class="col-start-1 col-span-3">
<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
lg:h-[14px] xl:h-[18px]">
<!-- <a
class="header-button hidden md:block"
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
>Energieausweis erstellen</a
>
<a class="header-button hidden md:block" href="/kontakt"
>Kontakt</a
>
<a class="header-button hidden md:block" href="/agb">AGB</a>
-->
</div>
</div>
</header>
<style>
.header-button {
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
}
</style>

2
src/components/design/sidebars/cards/cardLogin.svelte
View File

@@ -87,7 +87,7 @@
>
</div>
<div></div>
</div>
</div>

4
src/components/labels/BereichLabel.svelte
View File

@@ -27,8 +27,9 @@
>
<div class="formular-abschnitt1">{bereich}</div>
<div class="formular-abschnitt2"><slot></slot></div>
<div
class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
class="justify-self-center self-center mr-[2px] cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
on:click={toggleBereich}
>
{#if open}
@@ -36,6 +37,7 @@
{:else}
+
{/if}
</div>
</div>
</div>

46
src/layouts/AusweisLayout.astro
View File

@@ -2,7 +2,7 @@
import "../style/global.css";
import "../style/formular.css";
import "../../svelte-dialogs.config"
import Header from "#header/Header.astro";
import Header from "#header/AusweisHeader.astro";
import Footer from "#footer/Footer.astro";
import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
import { NotificationWrapper } from "@ibcornelsen/ui";
@@ -12,9 +12,49 @@ export interface Props {
}
const { title } = Astro.props;
---
<script>
window.addEventListener("scroll", (event) => {
let scroll = window.scrollY;
console.log(scroll);
if(scroll>=400){
document.getElementById('skala')?.classList.add('2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20');
document.getElementById('skala')?.classList.remove('w-full');
document.getElementById('skala').style.borderBottom = "3px solid #e6e6e6";
document.getElementById('performance-box').style.maxWidth = "688.5px";
document.getElementById('progress-box').style.maxWidth = "688.5px";
document.getElementById('formInput')?.classList.add('2xl:mt-[370px]');
}else{
document.getElementById('skala')?.classList.remove('2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20');
document.getElementById('skala')?.classList.add('w-full');
document.getElementById('skala').style.borderBottom = "none";
document.getElementById('formInput')?.classList.remove('2xl:mt-[370px]');
}
});
</script>
<!DOCTYPE html>
<html lang="de">

30
src/layouts/Layout.astro
View File

@@ -15,6 +15,7 @@ const { title } = Astro.props;
---
<script>
/*
window.addEventListener("scroll", (event) => {
let scroll = window.scrollY;
@@ -25,19 +26,20 @@ window.addEventListener("scroll", (event) => {
document.getElementById('header').style.width = '100%';
document.getElementById('header').style.top = '0';
document.getElementById('header-grid')?.classList.add('2xl:py-0');
document.getElementById('header-grid')?.classList.remove('2xl:py-4')
document.getElementById('header-grid')?.classList.remove('bg-white');
document.getElementById('header-grid').classList.add('2xl:py-0');
document.getElementById('header-grid').classList.remove('2xl:py-4')
document.getElementById('header-grid').classList.remove('bg-white');
document.getElementById('header-grid')?.classList.add('bg-secondary');
document.getElementById('header-text-1')?.classList.add('text-white');
document.getElementById('header-text-1')?.classList.add('hidden');
document.getElementById('header-text-2')?.classList.add('hidden');
document.getElementById('header-line')?.classList.add('xl:h-[6px]');
document.getElementById('header-grid').classList.add('bg-secondary');
document.getElementById('header-text-1').classList.add('hidden');
document.getElementById('header-text-2').classList.add('hidden');
document.getElementById('header-line').classList.add('xl:h-[6px]');
document.getElementById('header-logo').src= '/images/header/logo-IBC-white.svg';
document.getElementById('header-logo').style.height = '62px';
document.getElementById('header-logo')?.classList.add('xl:bg-white','xl:px-2');
document.getElementById('header-logo').classList.add('xl:px-2','py-[5px]');
;
document.getElementById('card-login')?.classList.remove('lg:ring-2');
document.getElementById('card-login').classList.remove('lg:ring-2','box');
document.getElementById('LoginButton')?.classList.add('ring-[1px]','ring-white');
document.getElementById('passwort-vergessen')?.classList.add('hidden');
document.getElementById('main').style.marginTop = '211px';
@@ -53,15 +55,17 @@ window.addEventListener("scroll", (event) => {
document.getElementById('header-grid')?.classList.add('bg-white');
document.getElementById('header-grid')?.classList.remove('bg-secondary');
document.getElementById('header-text-1').classList.remove('hidden');
document.getElementById('header-text-1')?.classList.remove('text-white');
document.getElementById('header-text-1')?.classList.remove('hidden');
document.getElementById('header-text-1').classList.add('xl:leading-[4.5rem]');
document.getElementById('header-text-2')?.classList.remove('hidden');
document.getElementById('header-line')?.classList.remove('xl:h-[6px]');
document.getElementById('header-logo').src= '/images/header/logo-IBC-big.svg';
document.getElementById('header-logo').style.height = '107.53px';
document.getElementById('header-logo')?.classList.remove('xl:bg-white','xl:px-2');
document.getElementById('card-login')?.classList.add('lg:ring-2');
document.getElementById('LoginButton')?.classList.remove('ring-[1px]','ring-white');
document.getElementById('passwort-vergessen')?.classList.remove('hidden');
document.getElementById('main').style.marginTop = '0px';
@@ -70,7 +74,7 @@ window.addEventListener("scroll", (event) => {
});
*/
</script>
<!DOCTYPE html>

78
src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
import Progressbar from "#components/Ausweis/Progressbar.svelte";
import Hilfe from "#components/Ausweis/Hilfe.svelte";
//import Hilfe from "#components/Ausweis/Hilfe.svelte";
import { PRICES } from "#lib/constants";
import Bereich from "#labels/Bereich.svelte";
//import HelpLabel from "#labels/HelpLabel.svelte";
@@ -9,6 +10,7 @@
//import Label from "#components/Label.svelte";
import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
@@ -55,7 +57,7 @@
UploadedGebaeudeBild,
} from "#components/Ausweis/types.js";
import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
import AusweisWeiter from "./AusweisWeiter.svelte";
//import AusweisWeiter from "./AusweisWeiter.svelte";
import { Enums } from "@ibcornelsen/database/client";
import { OpenInNewWindow } from "radix-svelte-icons";
@@ -181,26 +183,42 @@
</p>
</Overlay>
<h1>Verbrauchsausweis erstellen - 45€</h1>
<div class="grid grid-cols-2 gap-x-8 px-4 items-center">
<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
<Progressbar progress={0} />
</div>
<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
<PerformanceScore
bind:ausweis
bind:gebaeude_aufnahme_allgemein
bind:gebaeude
/>
</div>
<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
2xl:grid-cols-2 2xl:gap-x-8
">
<div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
<PerformanceScore
bind:ausweis
bind:gebaeude_aufnahme_allgemein
bind:gebaeude
/>
</div>
<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
<h2 class="text-primary text-xl">Verbrauchsausweis Wohnen {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
<Progressbar progress={50}
/>
</div>
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
</div>
<form id="formInput" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
<div id="formular-box" class="formular-boxen ring-0">
<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
<!-- A Prüfung der Ausweisart -->
<Bereich bereich="A" title="Prüfung der Ausweisart">
@@ -289,23 +307,19 @@
/></Bereich
>
</div>
<div
class="w-full px-4 mt-5 grid gap-x-4 gap-y-2
grid-cols-1
xs:grid-cols-2"
>
<div class="md:justify-self-start">
<AusweisWeiter
bind:ausweis
bind:images
bind:user
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
></AusweisWeiter>
</div>
<div class="md:justify-self-end"><Hilfe /></div>
</div>
<ButtonWeiterHilfe {spaeterWeitermachen}
bind:ausweis
bind:images
bind:user
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
>
</ButtonWeiterHilfe>
</form>
<RawNotificationWrapper>

4
src/style/formular.css
View File

@@ -1,10 +1,10 @@
#formular-box{@apply bg-white;}
.formular-boxen{@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg}
.formular-boxen{@apply w-full ml-[2px] ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg}
.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] ml-[2px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
.formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] pl-1 justify-self-start
md:[font-size:_clamp(20px,1.25vw,36px)]

4
src/style/global.css
View File

@@ -44,7 +44,7 @@ body{
.button {
@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
@apply w-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
}
@@ -69,7 +69,7 @@ input:disabled, input:read-only, select:disabled {
/*ARTICLE*/
article {
@apply w-full relative bg-white px-0 py-0;
@apply w-full relative bg-white px-0 py-0 z-0;
hr {@apply mb-4 mt-4;}