Files
online-energieausweis/src/components/design/header/AusweisHeader_partner.astro
Jens Cornelsen 912970923f Text Partner
2025-04-04 12:28:28 +02:00

114 lines
4.4 KiB
Plaintext

---
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
const { tabHover1 } = Astro.props;
const { tabHover2 } = Astro.props;
const { tabHover3 } = Astro.props;
const { tabHover4 } = Astro.props;
const { tabHover5 } = Astro.props;
const { tabHover6 } = Astro.props;
const { tabHover7 } = Astro.props;
const { params, url } = Astro;
const partner = params.partner;
const url1 = new URL(Astro.request.url);
const urlPath = url1.pathname;
const isVA = urlPath.includes("verbrauchsausweis-wohngebaeude");
const isVAG = urlPath.includes("verbrauchsausweis-gewerbe");
const isBA = urlPath.includes("bedarfsausweis-wohngebaeude");
const isBAG = urlPath.includes("bedarfsausweis-gewerbe-anfragen");
const isGGW = urlPath.includes("geg-nachweis-wohnen-anfragen");
const isGGG = urlPath.includes("geg-nachweis-gewerbe-anfragen");
const isWEA = urlPath.includes("welcher-ausweis");
const isWelt = urlPath.includes("immowelt");
const isNET = urlPath.includes("immonet");
---
<header id="header" class="w-full bg-white h-[81px] sm:pl-8">
<div class="grid grid-cols-[min-content_1fr] items-center">
<div class="w-[150px] h-[80px]">
<div class="w-full h-full grid grid-col-1 justify-items-center items-center">
<img class={isNET ? "w-[149px]" : isWelt ? "w-[109px]" : "w-[109px]"} src={`/images/partner/${partner}/${partner}.svg`} alt={partner} />
</div>
</div>
<div>
<ul class="navlist">
<li><a href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/`}><button class={tabHover1}>Verbrauchsausweis</button></a></li>
<li><a href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-gewerbe/`}><button class={tabHover2}>Verbrauchsausweis Gewerbe</button></a></li>
<li><a href={`/${partner}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/`}><button class={tabHover3}>Bedarfsausweis</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/`}><button class={tabHover4}>Bedarfsausweis Gewerbe</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/geg-nachweis-wohnen-anfragen/`}><button class={tabHover5}>GEG Nachweis Wohngebäude</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/geg-nachweis-gewerbe-anfragen/`}><button class={tabHover6}>GEG Nachweis Gewerbe</button></a></li>
<li><a href={`/${partner}/welcher-ausweis/${partner}`}><button class={tabHover7}>Welcher Ausweis</button></a></li>
</ul>
</div>
</div>
</header>
<div id="titel" class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover px-24 py-20"
style={`background-image: url('/images/partner/${partner}/hero-energieausweis.jpg');
background-repeat:no-repeat; background-position:right;`}>
{isVA ? <div>Hier komfortabel und einfach online den <b>Verbrauchsausweis Wohngebäude</b> bestellen</div> : ""}
{isVAG ? <div>Hier komfortabel und einfach online den <b>Verbrauchsausweis Gewerbe</b> bestellen</div> : ""}
{isBA ? <div>Hier komfortabel und einfach online den <b>Bedarfsausweis Wohngebäude</b> bestellen</div> : ""}
{isBAG ? <div>Hier komfortabel und einfach online den <b>Bedarfsausweis Gewerbe</b> anfragen</div> : ""}
{isGGW ? <div>Hier komfortabel und einfach online den <b>GEG Nachweis Wohngebäude</b> anfragen</div> : ""}
{isGGG ? <div>Hier komfortabel und einfach online den <b>GEG Nachweis Gewerbe</b> anfragen</div> : ""}
{isWEA ? <div>Hier komfortabel und einfach online den richtigen Ausweis finden</div> : ""}
</div>
<style lang="postcss">
@font-face {
font-family: "immo Sans";
src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
font-style: normal;
font-weight: 400;
}
#titel{
font-family: "immo Sans";
font-weight:400;
div{@apply w-fit bg-white/75 py-6 px-16 rounded-lg ring-2 ring-black/15 text-[1.45rem];box-shadow:8px 8px 16px rgba(0,0,0,0.5);}
}
.header-button {
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
}
.navlist {
@apply flex flex-wrap flex-col sm:flex-row pl-[1.75rem] sm:pl-[1.75rem];
}
.navlist li {
@apply pr-0 sm:pr-[6px] pb-1 sm:pb-0;
}
.navlist li button{@apply text-[0.75rem] md:text-[1rem] text-[#646464] sm:p-2 text-left
hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
font-family: "immo Sans";
font-weight:400;}
.glow{@apply rounded-[1rem] bg-[rgba(50,50,50,0.1)];}
</style>