großer Umbau Teil 1

assets/scss/sections/hero.scss

@@ -1,16 +1,22 @@
 .section.hero {
+  .col-12 {padding-top: 3rem;}
   .hero-image {
-    // @media (min-width: 1400px) {
+    @media (min-width: 1400px) {
-    //   img {
+       img {
-    //     max-width: 125%;
+         max-width: 125%;
-    //     float: right;
+         float: right;
-    //   }
+       }
-    // }
+     }
   }
   .hero-title {
     strong {
       color: $danger;
     }
   }
-  background: red;
+  background: url(/images/cover-image.jpg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  p.text-xl-start {background-color: #ffffff90; padding: 10px;}
+  a.btn {background-color: #ffffff90;}
+  a.btn:hover {background-color: $primary}
 } 

assets/scss/sections/vorteile.scss

@@ -0,0 +1,6 @@
+.section.vorteile {
+  .card.bg-vorteil {
+    background-color: $light;
+  }
+  background-color: $primary;
+}

assets/scss/shared/_bootstrap.scss

@@ -9,7 +9,7 @@ $font-family-base: "Inter", sans-serif;
 
 $primary: #aa69b5;
 $secondary: #5d2169;
-$danger: #FF87ff;
+$danger: #5d2169;
 $light: #faefdd;
 
 // scss-docs-start import-stack

assets/scss/shared/_header.scss

@@ -1,8 +1,18 @@
 .navbar {
+   position: fixed;
+   z-index: 100;
+   width: 100%;
+   background-color: $light;
+   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23E4CBA1' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%2398886B'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
+   /* background by SVGBackgrounds.com */
   .navbar-brand {
     img {
       width: auto;
       max-height: calc(1.4rem + .6vw);
     }
+
   }
 }
+a.nav-link.text-primary {
+   background-color: $light;
+}

assets/scss/shared/shared.scss

@@ -12,6 +12,7 @@
 @import "../sections/services";
 @import "../sections/testimonials";
 @import "../sections/cta";
+@import "../sections/vorteile";
 
 @import "../sections/blog-list";
 @import "../sections/blog-single";

layouts/index.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
   {{ with .Site.Data.home.hero }}{{ partial "sections/hero.html" . }}{{ end }}
+  {{ with .Site.Data.home.vorteile }}{{ partial "sections/vorteile.html" . }}{{ end }}
   {{ with .Site.Data.home.brands }}{{ partial "sections/brands.html" . }}{{ end }}
   {{ with .Site.Data.home.portfolio }}{{ partial "sections/portfolio.html" . }}{{ end }}
   {{ with .Site.Data.home.services }}{{ partial "sections/services.html" . }}{{ end }}

layouts/partials/sections/hero.html

@@ -3,10 +3,10 @@
   <div class="container">
     <div class="row flex-column flex-xl-row-reverse">
       <div class="col-12 col-xl-6  d-flex flex-column justify-content-center hero-image">
-        {{ partial "utilities/image-fluid" "images/hero-image.png" }}
+        {{ partial "utilities/image-fluid" "/images/ve_logo_notext.png" }}
       </div>
       <div class="col-12 col-xl-6 d-flex flex-column justify-content-center">
-        {{ with .content.title }}
+        <a name="hero">{{ with .content.title }}
           <h3 class="hero-title fw-bold display-1 text-primary text-center text-xl-start pb-4">{{ . | markdownify }}</h3>
         {{ end }}
         {{ with .content.text }}
@@ -17,7 +17,7 @@
             <a class="btn btn-primary text-light px-4 my-1" href="{{ .url }}">{{ .label }}</a>
           {{ end }}
           {{ with .content.buttonSecondary }}
-            <a class="btn btn-outline-primary px-4 my-1 ms-xl-4" href="{{ .url }}">{{ .label }}<span class="ms-2">{{ partial "icons/arrow-right.html" }}</span></a>
+            <a class="btn btn-outline-primary px-4 my-1 ms-xl-4" href="{{ .url }}">{{ .label }}<span class="ms-2"></span></a>
           {{ end }}
         </div>
       </div>

layouts/partials/sections/portfolio.html

@@ -1,3 +1,4 @@
+{{ if .enabled }}
 <section class="section portfolio">
   <div class="container">
     {{ range .content }}
@@ -9,13 +10,13 @@
       </div>
       <div class="col-12 col-xl-6 d-flex flex-column justify-content-center">
         {{ with .pretitle }}
-          <p class="text-danger fw-semibold mb-2">{{ . }}</p>
+          <p class="text-danger fw-semibold mb-2">{{ . | markdownify }}</p>
         {{ end }}
         {{ with .title }}
-          <h3 class="fs-1 fw-bold text-primary pb-3">{{ . }}</h3>
+          <h3 class="fs-1 fw-bold text-primary pb-3">{{ . | markdownify }}</h3>
         {{ end }}
         {{ with .text }}
-          <p class="text-black-61 pb-3">{{ . }}</p>
+          <p class="text-black-61 pb-3">{{ . | markdownify }}</p>
         {{ end }}
         <div class="">
           {{ range .buttons }}
@@ -27,3 +28,4 @@
     {{ end }}
   </div>
 </section>
+{{ end }}

layouts/partials/sections/services.html

@@ -1,3 +1,4 @@
+{{ if .enabled }}
 <section class="section services py-5">
   <div class="container">
     <div class="row justify-content-center pb-5">
@@ -26,3 +27,4 @@
     </div>
   </div>
 </section>
+{{ end }}

layouts/partials/sections/testimonials.html

@@ -1,3 +1,4 @@
+{{ if .enabled }}
 <section class="section testimonials py-5">
   <div class="container">
     <div class="row pb-5">
@@ -46,3 +47,4 @@
     </div>
   </div>
 </section>
+{{ end }}

layouts/partials/sections/vorteile.html

@@ -0,0 +1,30 @@
+{{ if .enabled }}
+<section class="section vorteile py-5">
+  <div class="container">
+    <div class="row justify-content-center pb-5">
+      <div class="col-12 col-xl-6">
+        {{ with .content.title }}
+          <h3 class="fs-1 fw-bold text-center text-white pb-3">{{ . }}</h3>
+        {{ end }}
+        {{ with .content.text }}
+          <p class="text-white text-center pb-3">{{ . | markdownify }}</p>
+        {{ end }}
+      </div>
+    </div>
+    <div class="row g-5">
+      {{ range .content.cards }}
+        <div class="col-12 col-xl-4">
+          <div class="card bg-vorteil border-0 border-radius-34 p-4">
+            {{ with .image }}{{ partial "utilities/image-fluid.html" . }}{{ end }}
+            <div class="card-body text-center">
+              {{ with .title }}<h4 class="card-title text-center text-primary pb-4">{{ . }}</h4>{{ end }}
+              {{ with .text }}<p class="card-text text-black-61 pb-4">{{ . | markdownify }}</p>{{ end }}
+              {{ with .button }}<a class="btn btn-outline-primary px-4" href="{{ .url }}">{{ .label }}</a>{{ end }}
+            </div>
+          </div>
+        </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+{{ end }}

layouts/partials/shared/header.html

@@ -1,8 +1,8 @@
-<nav class="navbar navbar-expand-xl navbar-light bg-light py-4">
+<nav class="navbar navbar-expand-xl navbar-light py-4">
   <div class="container">
     <a class="navbar-brand d-flex align-items-center" href="{{ .Site.BaseURL }}">
-      {{ partial "utilities/image.html" "images/logo.png" }}
+      <span class="text-logo">{{ .Site.Title }}</span>
-      <span class="fs-3 fw-semibold text-uppercase text-primary">{{ .Site.Title }}</span>
+	  <img src="images/ve_logo.svg" heigth="86px">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>

layouts/partials/utilities/card-img-top.html

@@ -1,3 +1,8 @@
 {{ with resources.Get . }}
+  {{ if eq .MediaType.SubType "svg" }}
+  <img class="" src="{{ .Permalink }}" alt="{{ .Title }}">
+  {{ else }}
   <img class="" src="{{ .Permalink }}" alt="{{ .Title }}" width="{{ .Width }}" height="{{ .Height }}">
+  {{ end }}
+  
 {{ end }}