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

sauelen und header

Browse Source
This commit is contained in:
Robert Jagtiani
2024-12-01 16:05:40 +01:00
parent 72738ff422
commit 9d0e64a548
7 changed files with 143 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/components/design/content/banner-saeule.svelte
View File

@@ -2,6 +2,8 @@
import { PRICES } from "#lib/constants";
</script>
<div class="mt-12 m-auto w-[90%] relative">
<div id="saeulen">
<div class="saeule">
@@ -9,23 +11,29 @@
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
<div class="name">Verbrauchsausweis<br>Wohngebäude</div>
</div>
<div class="white box">
<div class="variante">einfach</div>
<div class="services"><div>Einfache Berechnung anhand von 3 Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als&nbsp;18&nbsp;Monate&nbsp;sein.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder Verkauf Ihres&nbsp;Immobilienobjektes.</div><div class="check">✔</div></div>
<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978 gebaut mit weniger&nbsp;als&nbsp;5&nbsp;Wohnungen.</div><div class="check-no">✘</div></div>
<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet. Starke Abweichungen durch&nbsp;individuelles&nbsp;Heizverhalten.</div><div class="check-no">✘</div></div>
<div class="services"><div>Wird nicht immer bei den Banken für die Kreditunterlagen&nbsp;akzeptiert.</div><div class="check-no">✘</div></div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
<div class="price">
ab <b> {PRICES.VerbrauchsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
<div class="cta">jetzt online erstellen</div>
</div>
<div class="blue-bottom">
<div class="cta">zur Produktübersicht</div>
</div>
</div>
@@ -34,99 +42,75 @@
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
</div>
<div class="white box">
<div class="variante">fundiert</div>
<div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad&nbsp;der&nbsp;Heizung.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung&nbsp;und&nbsp;Neubau.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und&nbsp;unsanierte&nbsp;Objekte.</div><div class="check">✔</div></div>
<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen&nbsp;werden.</div><div class="check">✔</div></div>
<div class="services"><div>Objektive Berechnung die für die Kreditunterlagen besser&nbsp;geeignet&nbsp;ist.</div><div class="check">✔</div></div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
<div class="price">
ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
<div class="cta">jetzt online erstellen</div>
</div>
<div class="blue-bottom">
<div class="cta">zur Produktübersicht</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
<div class="name">Bedarfsausweis<br>Wohngebäude</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
<div class="name">Bedarfsausweis<br>Gewerbe</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
</div>
</div>
<style lang="scss">
#saeulen{@apply grid grid-cols-[1fr] gap-4
lg:grid-cols-[1fr,1fr,1fr]
xl:grid-cols-[1fr,1fr,1fr,1fr];
.saeule{@apply grid;
img{@apply w-full justify-self-center mb-1 min-h-[50px] }
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
#saeulen{@apply
grid grid-cols-[1fr] gap-y-3 gap-x-6
lg:grid-cols-2
xl:grid-cols-2;
.saeule{@apply grid grid-rows-subgrid row-span-10;
img{@apply justify-self-center mb-1 w-[50%] }
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
.name{@apply w-full}
.name{font-size: clamp(15px, 2vh, 18px)}
.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
.ab{@apply leading-[1]}
.mwst{@apply leading-[auto]}
.price{font-size: clamp(15px, 5vh, 50px)}
.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]}
.white{@apply border-x-[1px] border-gray-500 text-center text-black p-4}
.services{@apply py-2}
.services:first-child{@apply font-bold}
.services:nth-child(even){@apply bg-white}
.services:not(:last-child){@apply border-b-[1px] border-gray-300}
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
.name{font-size: clamp(15px, 3vh, 18px)}
.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
.variante{@apply w-fit text-black justify-self-end mr-4}
.variante{font-size: clamp(15px, 4vh, 24px)}
.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.check{@apply self-center font-bold text-green-700}
.check-no{@apply self-center font-bold text-red-700}
.orange{@apply bg-primary text-white text-center rounded-md p-4 relative shadow-saeule ring-primary ring-1}
.price{font-size: clamp(15px, 3vh, 28px)}
.blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-4 shadow-saeule ring-secondary ring-1}
}
}

73
src/components/design/header/Header.astro
View File

@@ -7,17 +7,17 @@ import Login from "#sidebarCards/card-login.svelte";
<div class="max-w-[1920px] w-full grid relative bg-white
sm:grid-cols-[0px_1fr_minmax(450px,450px)] sm:pl-6 sm:pr-3 sm:py-2
md:grid-cols-[0px_1fr_minmax(450px,450px)] md:pl-6 md:pr-3 md:py-2
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
lg:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
<!---
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
<h2 class="text-secondary font-normal absolute
top-1 right-2 text-[1.1rem]
@@ -37,21 +37,39 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
Energieausweise nach aktuellem GEG
</h2> -->
<div></div>
<div class="self-center justify-self-start
sm:justify-self-start
md:justify-self-start
lg:justify-self-center
xl:justify-self-center
2xl:justify-self-center">
<a href="/index_1">
<img class="w-[73px]"
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
</a>
<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[auto_auto] gap-6 pt-[0px]">
<div class="self-start justify-self-start">
<a href="/index_1">
<img class="w-full max-w-[75px]"
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
</a>
</div>
<div class="self-stretch justify-self-start">
<div class="text-secondary
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 class="text-primary
lg:[font-size:_clamp(15px,3vw,20px)]
lg:leading-[2rem]
xl:[font-size:_clamp(15px,3vw,24px)]
xl:leading-[0.5rem] pl-[1px]">
Energieausweise nach aktuellem GEG</div>
</div>
</div>
<div class="w-[450px]">
<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
<Login client:load />
</div>
@@ -60,20 +78,9 @@ xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py
<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>
lg:h-[12px] xl:h-[12px]"></div>
<div class="px-2 flex flex-row w-full justify-end items-center bg-secondary
lg:h-[0px] xl:h-[0px]"></div>
</div>
</header>

11
src/components/design/sidebars/cards/card-login.svelte
View File

@@ -23,10 +23,8 @@
</script>
<div
id="card-login"
class="box card bg-white px-2 py-2
lg:block lg:ring-2 lg:ring-secondary/50"
>
id="card-login">
<div>
@@ -58,7 +56,10 @@
</div>
{/if}
<div class="w-full text-center self-center">
</div>
<div class="grid grid-cols-[3fr_2fr] gap-2">
<div class="w-full text-left self-center">
<a
class="justify-self-start text-sm font-bold no-underline hover:text-primary"
href="/auth/signup">Registrieren</a

2
src/lib/constants.ts
View File

@@ -10,7 +10,7 @@ export const API_UID_COOKIE_NAME = "uid";
export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
// per E-Mail , inkl.Beratung, offline
BedarfsausweisWohnen: [135, 145, 290],
VerbrauchsausweisWohnen: [45, 55, 180],
VerbrauchsausweisWohnen: [55, 55, 180],
VerbrauchsausweisGewerbe: [85, 95, 360],
BedarfsausweisGewerbe: [300, 0, 0]
};

2
src/pages/index.astro
View File

@@ -5,7 +5,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
---
<Layout title="Energieausweis online erstellen - Online Energieausweis">
<h1>Energieausweis online erstellen</h1>
<h1>Unsere Ausweise im Detail:</h1>
<BannerPrice client:load />
</Layout>