Merge pull request #9 from IBCornelsen/UMBE

Struktur & Navigation

.vscode/settings.json

@@ -8,9 +8,10 @@
 	"css.lint.unknownAtRules": "ignore",
 	"scss.lint.unknownAtRules": "ignore",
 	"less.lint.unknownAtRules": "ignore"
-}
+
 	"workbench.colorCustomizations": {
 		"minimap.background": "#00000000",
 		"scrollbar.shadow": "#00000000"
-	}
+	},
+	
 }

package.json

@@ -44,6 +44,7 @@
     "i18next-http-backend": "^2.6.2",
     "js-cookie": "^3.0.5",
     "js-interpolate": "^1.0.1",
+    "postcss-nested": "^7.0.2",
     "katex": "^0.16.11",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",
@@ -64,6 +65,7 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/fontkit": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
+    "autoprefixer": "^10.4.20",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -73,6 +75,9 @@
     "daisyui": "^4.12.14",
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",
+    "postcss": "^8.4.49",
+    "postcss-import": "^16.1.0",
+    "postcss-nesting": "^13.0.1",
     "prettier": "^2.8.8",
     "typescript": "^4.9.5"
   }

postcss.config.js

@@ -0,0 +1,11 @@
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': 'postcss-nesting',
+    tailwindcss: {},
+    'postcss-preset-env': {
+      features: { 'nesting-rules': false },
+    },
+  }
+}

src/components/UMBE_banner-saeule.svelte

@@ -1,28 +1,133 @@
-<div class="grid grid-cols-[1fr,1fr,1fr,1fr] gap-4" >
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
 
-    <div class="grid">
+<div id="saeulen">
-        <div>
+
-            <img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
+    <div class="saeule">
-            <div class="h-[200px] bg-primary rounded-md mb-1"></div>
+        <div class="blue-top">
+            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
+            <div class="name">Verbrauchsausweis<br>Wohngebäude</div> 
         </div>   
-    </div>
+        <div class="orange">
-    <div class="grid">
+            <div class="ab">ab:</div>
-        <div>
+            <div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
-            <img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
+            <div class="mwst">inkl. 19% MwSt.</div>
-            <div class="h-[200px] bg-primary rounded-md mb-1"></div>
         </div>
-    </div>
+        <div class="white">
-    <div class="grid">
+            <div class="services">Unsere Leistungen: </div>
-        <div>
+			<div class="services">Prüfung durch Dipl.Ing.</div>
-            <img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
+			<div class="services">Vorschau als PDF</div>
-            <div class="h-[200px] bg-primary rounded-md mb-1"></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>
+        <div class="blue-bottom">
-    <div class="grid">
+            <div class="cta">jetzt sofort Energieausweis<br>online erstellen</div> 
-        <div>
-            <img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
-            <div class="h-[200px] bg-primary rounded-md mb-1"></div>
         </div>
     </div>
 
-</div>
+    <div class="saeule">
+        <div class="blue-top">
+            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
+            <div class="name">Verbrauchsausweis<br>Gewerbe</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>
+        <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 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>
+
+<style lang="scss">
+
+#saeulen{@apply grid grid-cols-[1fr,1fr,1fr,1fr] gap-4;
+.saeule{@apply grid;
+img{@apply w-full justify-self-center mb-1}
+.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
+.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-secondary/10}
+.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}
+}
+
+}
+
+
+</style>

src/pages/UMBE_test.astro

@@ -4,7 +4,7 @@ import BannerPrice from "#components/UMBE_banner-saeule.svelte";
 
 ---
 
-<Layout title="Energieausweis online erstellen - Online Energieausweis" client:load>
+<Layout title="Energieausweis online erstellen - Online Energieausweis">
 	<h1>Energieausweis online erstellen</h1>
 	
 	<BannerPrice client:load />

src/style/UMBE_global.css

@@ -37,6 +37,14 @@
 	font-family: "Antique Olive Compact bold";
 }
 
+.promo1{
+	font-weight: 700;
+	box-sizing: border-box;
+	font-family: "Antique Olive Compact bold";
+	text-shadow: 2px 2px 8px #222;
+
+}
+
 body{
 	@apply /*bg-[url('/images/pattern.png')] bg-repeat bg-fixed */ max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
 }
@@ -112,7 +120,7 @@ li 		{@apply 	text-sm  bg-white flex
 					xl:text-lg}
 
 li a	{@apply 	w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white bg-secondary
-					lg:px-4 py-3 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary		
+					lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary		
 	   				xl:text-lg}
 
 li:not(:first-child)	{@apply		!border-gray-200 !border-t-[1px]}

tailwind.config.cjs

@@ -128,8 +128,9 @@ module.exports = {
 		'5xl': '4.210rem',
 	},
 	fontFamily: {
-		heading: 'Abel',
+		heading: 'Heron',
-		body: 'Abel',
+		body: 'Heron',
+
 	},
 	fontWeight: {
 		normal: '400',