juli25

assets/scss/_common.scss

@@ -677,18 +677,20 @@ span.cloaked-e-mail:before {
 }
 /* copy from here */
 .scrolldown {
-  --color: white;
   --sizeX: 30px;
   --sizeY: 50px;
   position: relative;
   width: var(--sizeX);
   height: var(--sizeY);
-  margin-left: calc(50% - var(--sizeX) / 2); /* Korrigiert für Zentrierung */
+  margin-left: calc(50% - var(--sizeX) / 2);
   margin-top: 100px;
-  border: calc(var(--sizeX) / 10) solid var(--color);
+  border: calc(var(--sizeX) / 10) solid currentColor;
   border-radius: 50px;
   box-sizing: border-box;
   margin-bottom: 16px;
+  
+  color: white; /* Anfangsfarbe */
+  transition: color 0.3s;
 }
 
 .scrolldown::before {
@@ -699,13 +701,17 @@ span.cloaked-e-mail:before {
   width: 6px;
   height: 6px;
   margin-left: -3px;
-  background-color: var(--color);
+  background-color: currentColor;
   border-radius: 100%;
   animation: scrolldown-anim 2s infinite;
   box-sizing: border-box;
   box-shadow: 0px -5px 3px 1px #ffffff66;
 }
 
+.scrolldown:hover {
+  color: #F5A623; /* Neue Farbe beim Hover */
+}
+
 @keyframes scrolldown-anim {
   0% {
     opacity: 0;
@@ -739,15 +745,20 @@ span.cloaked-e-mail:before {
 .chevrondown {
   margin-top: -6px;
   position: relative;
-  border: solid var(--color);
+  border: solid currentColor;
   border-width: 0 3px 3px 0;
   display: inline-block;
-  padding: 0; /* Stellt sicher, dass kein zusätzliches Padding hinzugefügt wird */
   width: 10px;
   height: 10px;
   transform: rotate(45deg);
+
 }
 
+.chevrondown:hover {
+  color: #F5A623;
+}
+
+
 .chevrondown:nth-child(odd) {
   animation: pulse 500ms ease infinite alternate;
 }
@@ -756,6 +767,16 @@ span.cloaked-e-mail:before {
   animation: pulse 500ms ease infinite alternate 250ms;
 }
 
+
+.scrolldown {
+  color: rgb(0, 0, 0);
+  transition: color 0.3s;
+}
+
+.scrolldown:hover {
+  color: #F5A623;
+}
+
 @keyframes pulse {
   from {
     opacity: 0;

assets/scss/style.scss

@@ -186,3 +186,78 @@ html {
   }
 }
 
+.custom-container {
+  max-width: 1800px; /* oder was du möchtest */
+  margin: 0 auto;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #ffffff;
+    margin: 0;
+    padding: 20px;
+}
+
+.services-title {
+    margin-top: 50px;
+    color: #046e6e;
+}
+
+.services-description {
+    color: black;
+    margin-bottom: 50px;
+}
+
+/* Standard-Desktop-Layout */
+.services-section {
+    background-color: #f1f1f1; /* Hintergrundfarbe der Sektion auf Schwarz setzen */
+    padding: 40px 0; /* Padding für die Sektion */
+    width: 100%; /* Volle Breite */
+    box-sizing: border-box; /* Padding in der Breite berücksichtigen */
+}
+
+.services-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* Drei Spalten für Desktop */
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto; /* Zentriert das Raster */
+    padding: 0 20px; /* Optional: Padding für kleinere Bildschirme */
+}
+
+.service-card {
+    background-color: #f1f1f1; /* Hintergrundfarbe der Boxen auf Schwarz setzen */
+    color: white; /* Textfarbe auf Weiß setzen für bessere Lesbarkeit */
+    
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.service-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 15px;
+}
+
+.service-card-title {
+    color: black; /* Titel-Textfarbe auf Weiß setzen */
+    margin-bottom: 10px;
+}
+
+.service-card-description {
+    color: black; /* Hellgraue Farbe für den Beschreibungstext */
+    font-size: 14px;
+}
+
+/* Anpassungen für Mobilgeräte */
+@media (max-width: 768px) {
+    .services-grid {
+        grid-template-columns: 1fr; /* Eine Spalte für Mobilgeräte */
+    }
+}

assets/scss/templates/_navigation.scss

@@ -20,7 +20,7 @@
       padding-bottom: 5px;
 
       a {
-        color: #7b7b7b;
+        color: $black;
         padding: 10px 15px;
 
         font : {
@@ -32,7 +32,7 @@
 
         &:hover,
         &:focus {
-          color: $black;
+          color: #f5a623;
           background: transparent;
         }
       }

assets/scss/templates/_service.scss

@@ -1,6 +1,6 @@
 .service {
   text-align: center;
-  padding: 90px 0;
+  padding: 30px 0;
 
   @include tablet {
     padding-top: 20px;
@@ -8,7 +8,7 @@
   }
 
   .service-item {
-    padding-bottom: 30px;
+    padding-bottom: 10px;
 
     i {
       font-size: 50px;

config/_default/menus.de.toml

@@ -2,20 +2,16 @@
 
 # main menu
 
-[[main]]
-name = "Home"
-url = "/"
-weight = 1
 
 [[main]]
 name = "Leistungen"
 url = "service/"
-weight = 2
+weight = 1
 identifier = "service"
 
 [[main]]
-name = "Energiekonzepte & Digitale Lösungen"
-url = "service/energiekonzepte/"
+name = "Planung"
+url = "service/planung/"
 weight = 1
 parent = "service"
 
@@ -26,28 +22,38 @@ weight = 2
 parent = "service"
 
 [[main]]
-name = "E-Mobilität"
-url = "service/emobilitaet/"
+name = "Consulting"
+url = "service/consulting/"
 weight = 3
 parent = "service"
 
+
+
 [[main]]
-name = "Photovoltaik & Speicherlösungen"
+name = "Fokusthemen"
+url = "fokusthemen/"
+weight = 2
+identifier = "fokusthemen"
+
+[[main]]
+name = "Photovoltaik"
 url = "service/photovoltaik/"
-weight = 4
-parent = "service"
+weight = 1
+parent = "fokusthemen"
 
 [[main]]
-name = "Digitale Lösungen & IKT"
-url = "service/dig_loes_ikt/"
-weight = 5
-parent = "service"
+name = "Energiespeicher"
+url = "service/energierspeicher/"
+weight = 2
+parent = "fokusthemen"
 
 [[main]]
-name = "Elektrotechnik"
-url = "service/elektrotechnik/"
-weight = 6
-parent = "service"
+name = "E-Mobilität"
+url = "service/emobilität/"
+weight = 3
+parent = "fokusthemen"
+
+
 
 [[main]]
 name = "Über AMPERION"
@@ -59,6 +65,11 @@ name = "Kontakt"
 url = "contact/"
 weight = 4
 
+[[main]]
+name = "Karriere"
+url = "contact/"
+weight = 5
+
 
 
 # footer menu

config/_default/menus.en.toml

@@ -2,30 +2,80 @@
 
 # main menu
 
+
 [[main]]
 name = "Services"
-url = "contact/"
+url = "service/"
 weight = 1
+identifier = "service"
+
+[[main]]
+name = "Planning"
+url = "service/planung/"
+weight = 1
+parent = "service"
+
+[[main]]
+name = "Project Management"
+url = "service/projektmanagement/"
+weight = 2
+parent = "service"
+
+[[main]]
+name = "Consulting"
+url = "service/consulting/"
+weight = 3
+parent = "service"
+
+
+
+[[main]]
+name = "Focus Topics"
+url = "fokusthemen/"
+weight = 2
+identifier = "fokusthemen"
+
+[[main]]
+name = "Photovoltaic"
+url = "service/photovoltaik/"
+weight = 1
+parent = "fokusthemen"
+
+[[main]]
+name = "Energy storage"
+url = "service/energierspeicher/"
+weight = 2
+parent = "fokusthemen"
+
+[[main]]
+name = "E-mobility"
+url = "service/emobilität/"
+weight = 3
+parent = "fokusthemen"
+
+
+
+[[main]]
+name = "About AMPERION"
+url = "about/"
+weight = 3
 
 [[main]]
 name = "Contact"
 url = "contact/"
-weight = 2
-
-[[main]]
-name = "About AMPERION"
-url = "contact/"
-weight = 3
-
-[[main]]
-name = "Carreer"
-url = "contact/"
 weight = 4
 
+[[main]]
+name = "Career"
+url = "contact/"
+weight = 5
+
+
+
 # footer menu
 [[footer]]
 name = "Services"
-url = "contact/"
+url = "service/"
 weight = 1
 
 [[footer]]
@@ -35,20 +85,20 @@ weight = 2
 
 [[footer]]
 name = "About AMPERION"
-url = "contact/"
+url = "about/"
 weight = 3
 
 [[footer]]
-name = "Carreer"
-url = "contact/"
+name = "Impressum"
+url = "impressum/"
 weight = 4
 
-[[footer]]
-name = "Imprint"
-url = "service/"
-weight = 5
-
 [[footer]]
 name = "GTC"
 url = "agb/"
-weight = 6
+weight = 5
+
+[[footer]]
+name = "Data protection"
+url = "datenschutz/"
+weight = 6

config/_default/params.toml

@@ -32,11 +32,11 @@ custom_script= ""
 
 
 [contact.form]
-enable = false
+enable = true
 # Whether to use [Netlify Forms](https://docs.netlify.com/forms/setup/)
 use_netlify = false
 # Whether to use recaptch v3 in form
-use_recaptcha = false
+use_recaptcha = true
 # Form action
 ## Fill in your Form ID URL for Formspree.io, e.g. `https://formspree.io/f/{form_id}`
 ## Ignored if `use_netlify = true` (custom [success page](https://docs.netlify.com/forms/setup/#success-messages) is already included) 

content/german/_index.md

@@ -23,7 +23,7 @@ banner:
 about:
   enable: true
   title: "ÜBER AMPERION"
-  description: "Know-How ist unser Werkzeug. Präzision ist unser Anspruch. Flexibilität ist unser Vorteil."
+  description: "Technik mit Verantwortung. Planung mit Weitblick."
   content: "<h5> AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich. </h5> <p> Wir haben uns darauf spezialisiert, Green-Tech-Projekte so zu gestalten, dass sie in der Praxis halten, was sie am Papier versprechen. Ob für Unternehmen, Gemeinden oder private Auftraggeber:innen. </p> <p> Wir bringen Struktur in komplexe Anforderungen, klären Schnittstellen und denken wirtschaftlich wie technisch voraus. Von der ersten Idee bis zur Umsetzung begleiten wir Energieprojekte mit Weitblick, Präzision und Umsetzungsstärke. Netzanschluss, Einreichung, Wirtschaftlichkeit, Normen, Schnittstellen und alles, was später entscheidend wird, berücksichtigen wir von Anfang an. </p> <p> Dabei verbinden wir klassische Ingenieursdisziplin mit systemischem Denken, technischer Planung, Koordination, digitale Lösungen und Erfahrung aus realen Projekten. </p> <p> AMPERION arbeitet unabhängig, strukturiert und mit dem Anspruch, Verantwortung zu übernehmen, damit Energieprojekte gelingen.</p>"
   image: "images/ingenieurbuero.webp"
 
@@ -63,7 +63,7 @@ service:
 #########c################### call to action ###########################
 cta:
   enable: true
-  bg_image: "images/amperionteam1.webp"
+  bg_image: "images/module_reflection_2.webp"
   title: "Jetzt kostenlos Projektanfrage stellen <br> +43 677 620 90 426"
   content: ""
   button:

content/german/focustopic.md

@@ -0,0 +1,120 @@
+---
+title: "Fokusthemen"
+description: ""
+bg_image: "images/module_reflection_2.webp"
+layout: "service"
+draft: false
+
+########################### about service #############################
+about:
+  enable : true
+  title : "Als führendes Ingenieurbüro bieten wir eine breite Palette von Dienstleistungen an, die darauf abzielen, die Effizienz, Nachhaltigkeit und Rentabilität Ihrer Energieinfrastruktur zu verbessern."
+  
+  
+
+
+########################## featured service ############################
+
+
+featured_service:
+  enable: true
+  service_item:
+
+
+
+    - name: "Consulting"
+      icon: "fas fa-cogs"
+      color : "service1"
+      content: "Unser Expertenteam bietet umfassende Beratungsdienstleistungen, die auf Ihre individuellen Bedürfnisse zugeschnitten sind. Von der strategischen Planung bis zur praktischen Umsetzung stehen wir Ihnen mit unserer Erfahrung und unserem Fachwissen zur Seite, um optimale Lösungen für Ihre Herausforderungen zu entwickeln."
+      image: "images/services/consulting.png"
+
+
+
+    # featured service item loop
+    - name : "Anlagenkonzepte"
+      icon : "fas fa-leaf"
+      color : "service2"
+      content : "Mit unserem maßgeschneiderten Ansatz entwickeln wir Anlagenkonzepte, die optimal auf Ihre individuellen Anforderungen und die örtlichen Gegebenheiten zugeschnitten sind. Von der ersten Idee bis zur Umsetzung stehen wir Ihnen mit unserer Fachkompetenz zur Seite."
+      image: "images/services/anlagenkonzept.png"
+
+    # featured service item loop
+    - name : "Ertragssimulationen"
+      icon : "fas fa-lightbulb"
+      color : "service3"
+      content : "Mit unseren präzisen Ertragssimulationen bieten wir Ihnen verlässliche Prognosen über die Wirtschaftlichkeit Ihrer Projekte. Unsere Analysen berücksichtigen alle relevanten Faktoren, sodass Sie fundierte Entscheidungen treffen und Ihre Investitionen optimal planen können."
+      image: "images/services/anlagensimulation.png"
+
+    # featured service item loop
+    - name : "Einreichplanungen"
+      icon : "fas fa-lightbulb"
+      color : "service4"
+      content : "Wir unterstützen Sie bei der Erstellung umfassender Einreichplanungen für die behördliche Anlagengenehmigung. Unsere Experten kennen die rechtlichen Anforderungen und sorgen dafür, dass Ihr Projekt reibungslos genehmigt wird."
+      image: "images/services/einreichplanung.png"
+
+
+    # featured service item loop
+    - name : "Ausführungsplanung"
+      icon : "fas fa-flask"
+      color : "service5"
+      content : "Mit unserer präzisen Ausführungsplanung stellen wir sicher, dass Ihr Projekt effizient umgesetzt wird. Wir erstellen detaillierte Pläne, die alle technischen Anforderungen erfüllen und die Grundlage für eine erfolgreiche Umsetzung bilden."
+      image: "images/services/ausführungsplanung.png"
+
+    # featured service item loop
+    - name : "Projektbetreuung"
+      icon : "fas fa-leaf"
+      color : "service6"
+      content : "Unsere umfassende Projektbetreuung gewährleistet, dass Ihr Vorhaben von der Planung bis zur Fertigstellung reibungslos verläuft. Wir koordinieren alle Beteiligten und sorgen dafür, dass Zeitpläne und Budgets eingehalten werden, sodass Ihr Projekt erfolgreich abgeschlossen wird."
+      image: "images/services/projektbetreuung.png"
+
+    # featured service item loop
+    - name : "Behördenwege"
+      icon : "fas fa-lightbulb"
+      color : "service7"
+      content : "Wir begleiten Sie durch alle behördlichen Prozesse und stellen sicher, dass alle notwendigen Genehmigungen rechtzeitig eingeholt werden. Unsere Experten kennen die gesetzlichen Vorgaben und sorgen dafür, dass Ihr Projekt ohne Verzögerungen vorankommt."
+      image: "images/services/behördenwege.png"
+
+    # featured service item loop
+    - name : "Energiekonzepte"
+      icon : "fas fa-lightbulb"
+      color : "service8"
+      content : "Unsere Energiekonzepte zielen darauf ab, die optimale Nutzung erneuerbarer Energien zu ermöglichen und gleichzeitig den Energieverbrauch zu optimieren. Wir entwickeln ganzheitliche Strategien, die sowohl ökologische als auch wirtschaftliche Vorteile bieten."
+      image: "images/services/energiekonzepte.png"
+
+############################# Service ###############################
+service:
+  enable : true
+  title : "Unsere Fokusthemen für die Energiewende"
+  description : "Sektorenübergreifend. Innovativ. Erneuerbar."
+  service_item:
+    # service item loop
+    - picture: "images/services_main/photovoltaik.webp"
+      name: Photovoltaik
+      link: "/service/photovoltaik"
+    
+    # service item loop
+    - picture: "images/services_main/energiespeicher.webp"
+      name: Energiespeicher
+      link: "/service/energiespeicher" 
+ 
+    # service item loop
+    - picture: "images/services_main/e-mobilitaet.webp"
+      name: E-Mobilität
+      link: "/service/elektromobilitaet"
+
+
+
+    # service item loop
+    #- icon: "images/einreichplanung.svg"
+    #  name: Behördenwege
+    #  content: "Wir unterstützen Sie bei allen behördlichen Prozessen und sorgen dafür, dass Ihre Projekte reibungslos und ohne Verzögerungen vorankommen. Vertrauen Sie auf unsere #Erfahrung und Expertise."
+
+    # service item loop
+    #- icon: "images/energiekonzepte.svg"
+    #  name: Energiekonzepte
+    #  content: "Wir erstellen innovative Energiekonzepte, die sowohl ökologisch als auch ökonomisch nachhaltig sind. Profitieren Sie von unseren zukunftsweisenden Lösungen für Ihre #Energieprojekte."
+
+############################# call to action #################################
+cta:
+  enable : true
+  # call to action content comes from "_index.md"
+---

content/german/service.md

@@ -83,38 +83,24 @@ featured_service:
 ############################# Service ###############################
 service:
   enable : true
-  title : "UNSERE SERVICES"
-  description : "Wir entwickeln Energielösungen für die Zukunft"
+  title : "UNSERE LEISTUNGEN IM ÜBERBLICK"
+  description : "Technisch fundiert. Unabhängig. Zukunftsorientiert."
   service_item:
     # service item loop
-    - picture: "images/services_main/energiekonzepte.webp"
-      name: Energiekonzepte
+    - picture: "images/services_main/planung.webp"
+      name: Planung
       link: "/service/energiekonzepte"
     
     # service item loop
-    - picture: "images/services_main/projektmanagement.webp"
+    - picture: "images/services_main/projektmanagment.webp"
       name: Projektmanagement
       link: "/service/projektmanagement" 
  
     # service item loop
-    - picture: "images/services_main/elektromobilitaet.webp"
-      name: Elektromobilität
+    - picture: "images/services_main/consulting.webp"
+      name: Consulting
       link: "/service/elektromobilitaet"
 
-    # service item loop
-    - picture: "images/services_main/photovoltaik.webp"
-      name: Photovoltaik
-      link: "/service/photovoltaik"
-
-    # service item loop
-    - picture: "images/services_main/dig_loes_ikt.webp"
-      name: Digitale Lösungen & IKT
-      link: "/service/dig_loes_ikt"
-
-    # service item loop
-    - picture: "images/services_main/elektrotechnik.webp"
-      name: Elektrotechnik
-      link: "/service/elektrotechnik"
 
     # service item loop
     #- icon: "images/einreichplanung.svg"

content/german/why-amperion.md

@@ -1,48 +1,67 @@
 ---
-title: "WARUM AMPERION ?"
-subtitle: "Ihr Projekt in besten Händen <br> Technik trifft Verantwortung"
+title: "Leistungen"
+description: "Beschreibung der angebotenen Dienstleistungen"
+bg_image: "images/module_reflection_2.webp"
+layout: "service"
+draft: false
 
-params:
-  # Linke Spalte: drei Blöcke
-  left_blocks:
-    - icon: "/icons/file-badge.svg"
-      heading: "Erfahrung"
-      content: |
-        Technische Planungskompetenz  
-        Jahrelange Erfahrung in der Elektroplanung, Photovoltaiksystemen und Energieoptimierung...
+########################### About Service #############################
+about:
+  enable: true
+  title: "Als führendes Ingenieurbüro bieten wir eine breite Palette von Dienstleistungen an, die darauf abzielen, die Effizienz, Nachhaltigkeit und Rentabilität Ihrer Energieinfrastruktur zu verbessern."
 
-    - icon: "/icons/plug-zap.svg"
-      heading: "Energielösungen"
-      content: |
-        Photovoltaik & Eigenverbrauchsoptimierung  
-        Wir konzipieren PV-Anlagen mit Fokus auf Eigenverbrauch, Batteriespeicher und Netzintegration...
+########################## Featured Service ############################
+featured_service:
+  enable: true
+  service_item:
+    - name: "Technische Planungskompetenz"
+      image: "icons/file-badge.svg"
 
-    - icon: "/icons/circuit-board.svg"
-      heading: "Elektroplanung"
-      content: |
-        Normgerechte Auslegung & Systemintegration  
-        Ob Elektroinstallation, Ladeinfrastruktur oder Steuerungstechnik...
+      content: "Langjährige Erfahrung mit komplexer Energieplanung – normgerecht, effizient & zukunftssicher."
 
-  # Mitte: Logo
-  middle_image: "/images/amperion_logo_color.webp"
+    - name: "Intelligente Energiesysteme"
+      image: "icons/plug-zap.svg"
 
-  # Rechte Spalte: drei Blöcke
-  right_blocks:
-    - icon: "/icons/hard-hat.svg"
-      heading: "Umsetzung"
-      content: |
-        Begleitung & Schnittstellenkoordination  
-        Als Partner auf Bauherrenseite koordinieren wir technische Dienstleister...
+      content: "Von PV bis Speicher und Lastmanagement – für maximale Eigenversorgung und Netzverträglichkeit."
 
-    - icon: "/icons/network.svg"
-      heading: "Systemdenken"
-      content: |
-        Ganzheitlicher Ansatz & Zukunftssicherheit  
-        Wir verbinden Planung, Technik und Energiefluss zu einem vernetzten System...
+    - name: "Persönliche Betreuung"
+      image: "icons/headset.svg"
 
-    - icon: "/icons/headset.svg"
-      heading: "Support"
-      content: |
-        Persönliche Betreuung & direkter Draht  
-        Feste Ansprechpartner, schnelle Reaktionszeiten und individuelle Betreuung...
----
+      content: "Kurze Wege, schnelle Antworten, direkte Ansprechpartner – auch nach Projektabschluss."
+
+    - name: " Reibungslose Projektabwicklung"
+      image: "icons/hard-hat.svg"
+
+      content: "Wir übernehmen die technische Koordination – von Einreichung bis Ausschreibung."
+
+    - name: " Vernetzte Energiezukunft"
+      image: "icons/network.svg"
+
+      content: "Wir denken Energie ganzheitlich – modular, digital und wachstumsfähig geplant."
+
+    - name: "Präzise Systemplanung"
+      image: "icons/circuit-board.svg"
+
+      content: "Alle Komponenten exakt aufeinander abgestimmt – wirtschaftlich und regelkonform."
+
+############################# Service ###############################
+service:
+  title: "Darum AMPERION"
+  description: "Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme."
+  service_item:
+    - picture: "images/services_main/energiekonzepte.webp"
+      name: "Energiekonzepte"
+      link: "/service/energiekonzepte"
+
+    - picture: "images/services_main/projektmanagement.webp"
+      name: "Projektmanagement"
+      link: "/service/projektmanagement"
+
+    - picture: "images/services_main/elektromobilitaet.webp"
+      name: "Elektromobilität"
+      link: "/service/elektromobilitaet"
+
+############################# Call to Action #################################
+cta:
+  enable: true
+---

layouts/_default/about.html

@@ -5,9 +5,9 @@
 {{ with .Params.about }}
 {{ if .enable }}
 <section class="about section">
-  <div class="container">
+  <div class="custom-container">
     <div class="row align-items-center">
-      <div class="col-md-3 text-right">
+      <div class="col-md-4">
         <div class="person-info">
           {{ with .left_person }}
           {{ with .name }}<h3>{{ . | markdownify }}</h3>{{ end }}
@@ -15,13 +15,13 @@
           {{ end }}
         </div>
       </div>
-      <div class="col-md-6 text-center">
+      <div class="col-md-4">
         <div class="about-img">
           <img src="{{ .image | relURL }}" alt="Standard Image">
           <img src="{{ .hover_image | relURL }}" alt="Hover Image" class="hover-img">
         </div>
       </div>
-      <div class="col-md-3 text-left">
+      <div class="col-md-4">
         <div class="person-info">
           {{ with .right_person }}
           {{ with .name }}<h3>{{ . | markdownify }}</h3>{{ end }}

layouts/_default/contact.html

@@ -4,31 +4,72 @@
 
 <section class="contact-form">
   <div class="container">
-
-  
-    <div class="contact-box row justify-content-center">
+    {{ with site.Params.contact.form }}{{ if .enable -}}
+    <div class="row">
+      <form method="POST" {{ if .use_netlify }}name="{{ printf "contact_%s" $.Language.Lang }}" action="{{ "/message_sent" | relLangURL }}" netlify netlify-honeypot="nhp"{{ else }}name="contact" action="{{ .action | safeURL }}"{{ end }}>
+        <div class="col-md-6 col-sm-12">
+          <div class="block">
+            <div class="form-group">
+              <label for="name" hidden>{{ i18n "contact_form_name" }}</label>
+              <input id="name" name="name" type="text" class="form-control" placeholder="{{ i18n "contact_form_name" }}" required>
+            </div>
+            <div class="form-group">
+              <label for="email" hidden>{{ i18n "contact_form_email" }}</label>
+              <input id="email" name="email" type="email" autocomplete="email" class="form-control" placeholder="{{ i18n "contact_form_email" }}" required>
+            </div>
+            <div class="form-group">
+              <label for="subject" hidden>{{ i18n "contact_form_subject" }}</label>
+              <input id="subject" name="subject" type="text" class="form-control" placeholder="{{ i18n "contact_form_subject" }}" required>
+            </div>
+            {{ if .use_netlify -}}
+            <div class="form-group-h">
+              <input name="nhp" type="text" class="form-control" placeholder="Are you made of flesh and bone?">
+            </div>
+            {{- end }}
+            {{ if .use_recaptcha -}}
+            <div class="form-group-h">
+              <input type="hidden" id="captchaResponse" name="g-recaptcha-response">
+            </div>
+            {{- end }}
+          </div>
+        </div>
+        <div class="col-md-6 col-sm-12">
+          <div class="block">
+            <div class="form-group-2">
+              <label for="message" hidden>{{ i18n "contact_form_message" }}</label>
+              <textarea id="message" name="message" class="form-control" rows="4" placeholder="{{ i18n "contact_form_message" }}" required></textarea>
+            </div>
+            <button class="btn btn-default" type="submit">{{ i18n "submit" }}</button>
+          </div>
+        </div>
+      </form>
+    </div>
+    {{- end }}{{ end }}
+    <div class="contact-box row">
       {{ with site.Params.contact -}}
-      <div class="col-md-4 col-sm-12">
-        <div class="block text-left">
+      <div class="col-md-6 col-sm-12">
+        <div class="block">
           <h2>{{ i18n "address_title" }}</h2>
           <ul class="address-block">
             {{ $add_address_descriptors := .address_descriptors }}
             {{ with site.Params.location }}<li><i class="fas fa-map-marker-alt"></i>{{ if $add_address_descriptors }}{{ i18n "location" | printf "%s: " }}{{ end }}<div>{{ . | markdownify }}</div></li>{{ end }}
             {{ with site.Params.email }}<li><i class="fas fa-envelope"></i>{{ if $add_address_descriptors }}{{ i18n "email" | printf "%s: " }}{{ end }}{{ partial "cloak_email" . }}</li>{{ end }}
-            {{ with site.Params.phone }}<li><i class="fas fa-tty"></i>{{ if $add_address_descriptors }}{{ i18n "phone" | printf "%s: " }}{{ end }}<div>{{ . | markdownify }}</div></li>{{ end }}
+            {{ with site.Params.phone }}<li><i class="fas fa-tty"></i>{{ if $add_address_descriptors }}{{ i18n "phone" | printf "%s: " }}{{ end }}{{ . }}</li>{{ end }}
+          </ul>
+          <ul class="social-icons">
+            {{ range site.Params.social -}}
+            <li><a href="{{ .link | safeURL }}"><i class="{{ .icon }}"></i></a></li>
+            {{- end }}
           </ul>
         </div>
       </div>
-      <div class="col-md-4 col-sm-12">
-        <div class="block text-center">
-          <h2>{{ i18n "social_media" }}</h2>
-          <ul class="social-icons">
-            {{ range site.Params.social -}}
-            <li><a href="{{ .link | safeURL }}" target="_blank" rel="noopener noreferrer" class="social-icon">
-              <img src="{{ .image | relURL }}" alt="{{ .title }}" style="height: 40px;">
-            </a></li>
-            {{- end }}
-          </ul>
+      {{- end }}
+      {{ if site.Params.gmap.enable -}}
+      <div class="col-md-6 col-sm-12">
+        <div class="block">
+          <div class="google-map">
+            <div class="map" id="map" data-latitude="{{ site.Params.gmap.map_latitude }}" data-longitude="{{ site.Params.gmap.map_longitude }}" data-marker="{{ site.Params.gmap.map_marker | relURL }}" data-marker-name="{{ site.Title }}"></div>
+          </div>
         </div>
       </div>
       {{- end }}
@@ -36,9 +77,4 @@
   </div>
 </section>
 
-<!-- Call to action -->
-{{ if .Params.cta.enable }}
-{{ partial "cta.html" . }}
-{{ end }}
-<!-- /Call to action -->
 {{ end }}

layouts/index.html

@@ -29,6 +29,8 @@
             </div>
           </div>
 
+
+
           <!-- Titel / Content / Button -->
           <div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box; overflow-wrap: break-word;">
             {{ with .title }}
@@ -62,38 +64,59 @@
 
 
 <script>
-  document.addEventListener("scroll", function() {
+  document.addEventListener('DOMContentLoaded', function() {
     var scrolldown = document.querySelector('.scrolldown');
-    if (window.scrollY > 100) {  // Adjust this value based on when you want to hide the icon
-      scrolldown.classList.add('hide');
-    } else {
-      scrolldown.classList.remove('hide');
-    }
+    scrolldown.addEventListener('click', function() {
+      const serviceSection = document.getElementById('service');
+      const offset = 100; // Der Offset in Pixeln
+
+      // Berechne die Position, zu der gescrollt werden soll
+      const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
+
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth' // Sanftes Scrollen
+      });
+    });
+
+    window.addEventListener("scroll", function() {
+      if (window.scrollY > 100) {
+        scrolldown.classList.add('hide');
+      } else {
+        scrolldown.classList.remove('hide');
+      }
+    });
   });
 </script>
 
+<div style="height: 200px;"></div>
+
 <!-- whyamperion -->
 {{ if .Params.whyamperion.enable }}
 {{ partial "whyamperion.html" . }}
 {{ end }}
 <!-- /whyamperion -->
 
+
+
+
+
 <!-- service -->
 {{ with site.GetPage "/service" }}
 {{ with .Params.service }}
 <section id="service" class="service">
   <!-- container-fluid + my-container => um beides kombinieren zu können -->
   <div class="container-fluid my-container">
-
     <!-- Block mit Titel und Beschreibung -->
-    <div class="service-header">
+    <div class="services-title">
       {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
+    </div>
+    <div class="services-description">
       {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
     </div>
-
     <!-- CSS-Grid/Flexbox-Bereich mit den Bildern -->
     <div class="service-grid">
-      {{ range first 9 .service_item }}
+      {{ range first 3 .service_item }} <!-- Hier nur die ersten 3 Elemente nehmen -->
       <div class="service-item-fixed">
         <div class="zoom-wrap">
           <a href="{{ .link | relURL }}">
@@ -107,83 +130,77 @@
       </div>
       {{ end }}
     </div><!-- /service-grid -->
-
   </div><!-- /container-fluid.my-container -->
 </section>
 {{ end }}
 {{ end }}
 <!-- /service -->
-<div style="height: 100px;"></div>
-<!-- why-amperion -->
-{{ with site.GetPage "/why-amperion" }}
-<section id="why-amperion" class="why-amperion">
-  <div class="my-container">
-    <!-- Überschriften (zentriert) -->
-    <div class="section-title1 text-center">
-      {{ with .Params.icon }}
-        <img src="{{ . | relURL }}" alt="Icon" class="title-icon1">
-      {{ end }}
-      {{ with .Title }}
-        <h2 class="why-title1">{{ . | markdownify }}</h2>
+
+<!-- service -->
+{{ with site.GetPage "/focustopic" }} <!-- Hier den Pfad zur service2.md anpassen -->
+{{ with .Params.service }}
+<section id="service" class="service">
+  <div class="container-fluid my-container">
+    <div class="services-title">
+      {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
+    </div>
+    <div class="services-description">
+      {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
+    </div>
+    <div class="service-grid">
+      {{ range first 3 .service_item }}
+      <div class="service-item-fixed">
+        <div class="zoom-wrap">
+          <a href="{{ .link | relURL }}">
+            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
+            <div class="overlay-text">
+              {{ .name }}
+            </div>
+            <div class="overlay"></div>
+          </a>
+        </div>
+      </div>
       {{ end }}
     </div>
-
-    {{ with .Params.subtitle }}
-      <h3 class="why-subtitle text-center">{{ . | markdownify }}</h3>
-    {{ end }}
-
-<div style="height: 50px;"></div>
-
-
-    <div class="row align-items-center">
-      <!-- Linke Spalte: drei Themen-Blocks -->
-      <div class="col-md-4">
-        {{ range .Params.left_blocks }}
-          <div class="why-block text-right">
-
-        <div class="row icon-heading">
-          <div class="col-md-10">
-           <h4 class="text-right">{{ .heading | markdownify }}</h4>
-          </div>
-          <div class="col-md-2">
-           <img src="{{ .icon | relURL }}" alt="{{ .heading }}" class="why-icon1">
-          </div>
-        </div>
-            <p>{{ .content | markdownify }}</p>
-          </div>
-        {{ end }}
-      </div>
-
-      <!-- Mittlere Spalte: Logo -->
-      <div class="col-md-4 text-center">
-        <img src="{{ .Params.middle_image | relURL }}" alt="Amperion Logo" class="why-logo">
-      </div>
-
-      <!-- Rechte Spalte: drei Themen-Blocks -->
-      <div class="col-md-4 text-left">
-        {{ range .Params.right_blocks }}
-          <div class="why-block text-left">
-
-             <div class="row icon-heading">
-              <div class="col-md-2">
-               <img src="{{ .icon | relURL }}" alt="{{ .heading }}" class="why-icon1">
-              </div>
-              <div class="col-md-10">
-               <h4 class="text-left">{{ .heading | markdownify }}</h4>
-              </div>
-             </div>
-            <p>{{ .content | markdownify }}</p>
-          </div>
-        {{ end }}
-      </div>
-    </div> <!-- /row -->
-  </div> <!-- /my-container -->
+  </div>
 </section>
 {{ end }}
-<!-- /why-amperion -->
+{{ end }}
+<!-- /service -->
 
 <div style="height: 100px;"></div>
 
+<!-- Include the new services section -->
+
+{{ with site.GetPage "/why-amperion" }}
+<section class="services-section">
+  <h2 class="services-title">{{ .Params.service.title | default "OUR SERVICES" }}</h2>
+  <h3 class="services-description">{{ .Params.service.description | default "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts." | markdownify }}</h3>
+  <div class="services-grid">
+    {{ range first 6 .Params.featured_service.service_item }}
+    <div class="service-card">
+      <img src="{{ .image | relURL }}" alt="{{ .name }}" class="service-icon">
+      <h3 class="service-card-title">{{ .name }}</h3>
+      <p class="service-card-description"><strong>{{ .content1 | markdownify }}</strong> {{ .content | markdownify }}</p>
+    </div>
+    {{ end }}
+  </div>
+</section>
+{{ end }}
+
+
+
+<div style="height: 100px;"></div>
+
+
+
+{{ if .Params.contact.enable }}
+{{ partial "cta.html" . }}
+{{ end }}
+
+
+
+
 <!-- about -->
 {{ with .Params.about }}
 {{ if .enable }}
@@ -191,10 +208,13 @@
   <div class="my-container">
     <div class="row">
       <div class="col-12 text-center">
-        <div class="section-title">
+        <div class="services-title">
           {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
+        </div>
+        <div class="services-description">
           {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
         </div>
+
         <div style="height: 20px;"></div>
       </div>
     </div>
@@ -296,9 +316,4 @@
 </script>
 
 
-
-
-
-
-
 {{ end }}

layouts/partials/serviceneu.html

@@ -0,0 +1,47 @@
+{{ define "main" }}
+
+{{ partial "page-title.html" . }}
+
+{{ with .Params.about }}
+{{ if .enable }}
+<section class="service-about section">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
+        {{ with .content }}<div class="mt-30">{{ . | $.Page.RenderString (dict "display" "block") }}</div>{{ end }}
+      </div>
+      {{ with .image -}}
+      <div class="col-md-6">
+        <img class="img-responsive" src="{{ . | relURL }}">
+      </div>
+      {{- end }}
+    </div>
+  </div>
+</section>
+{{ end }}
+{{ end }}
+
+{{ with .Params.featured_service }}
+{{ if .enable }}
+<section class="service-arrow">
+  <div class="container-fluid">
+    <div class="row">
+      {{ range .service_item }}
+      <div class="col-md-4 bg-primary bg-{{ .color }} no-float">
+        <div class="block">
+          <i class="{{ .icon }}"></i>
+          {{ with .name }}<h3>{{ . | markdownify }}</h3>{{ end }}
+          {{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
+        </div>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+{{ end }}
+{{ end }}
+
+
+
+{{ end }}

resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content

@@ -525,19 +525,20 @@ span.cloaked-e-mail:before {
 
 /* copy from here */
 .scrolldown {
-  --color: white;
   --sizeX: 30px;
   --sizeY: 50px;
   position: relative;
   width: var(--sizeX);
   height: var(--sizeY);
   margin-left: calc(50% - var(--sizeX) / 2);
-  /* Korrigiert für Zentrierung */
   margin-top: 100px;
-  border: calc(var(--sizeX) / 10) solid var(--color);
+  border: calc(var(--sizeX) / 10) solid currentColor;
   border-radius: 50px;
   box-sizing: border-box;
-  margin-bottom: 16px; }
+  margin-bottom: 16px;
+  color: white;
+  /* Anfangsfarbe */
+  transition: color 0.3s; }
 
 .scrolldown::before {
   content: "";
@@ -547,12 +548,16 @@ span.cloaked-e-mail:before {
   width: 6px;
   height: 6px;
   margin-left: -3px;
-  background-color: var(--color);
+  background-color: currentColor;
   border-radius: 100%;
   animation: scrolldown-anim 2s infinite;
   box-sizing: border-box;
   box-shadow: 0px -5px 3px 1px #ffffff66; }
 
+.scrolldown:hover {
+  color: #F5A623;
+  /* Neue Farbe beim Hover */ }
+
 @keyframes scrolldown-anim {
   0% {
     opacity: 0;
@@ -581,21 +586,29 @@ span.cloaked-e-mail:before {
 .chevrondown {
   margin-top: -6px;
   position: relative;
-  border: solid var(--color);
+  border: solid currentColor;
   border-width: 0 3px 3px 0;
   display: inline-block;
-  padding: 0;
-  /* Stellt sicher, dass kein zusätzliches Padding hinzugefügt wird */
   width: 10px;
   height: 10px;
   transform: rotate(45deg); }
 
+.chevrondown:hover {
+  color: #F5A623; }
+
 .chevrondown:nth-child(odd) {
   animation: pulse 500ms ease infinite alternate; }
 
 .chevrondown:nth-child(even) {
   animation: pulse 500ms ease infinite alternate 250ms; }
 
+.scrolldown {
+  color: black;
+  transition: color 0.3s; }
+
+.scrolldown:hover {
+  color: #F5A623; }
+
 @keyframes pulse {
   from {
     opacity: 0; }
@@ -720,13 +733,13 @@ header .navbar-default .navbar-nav li a:hover {
       padding-top: 5px;
       padding-bottom: 5px; }
       .navigation .navbar .navbar-nav a {
-        color: #7b7b7b;
+        color: #000000;
         padding: 10px 15px;
         font-weight: 500;
         font-size: 14px;
         text-transform: uppercase; }
         .navigation .navbar .navbar-nav a:hover, .navigation .navbar .navbar-nav a:focus {
-          color: #000000;
+          color: #f5a623;
           background: transparent; }
       .navigation .navbar .navbar-nav a.current {
         color: #000000;
@@ -917,13 +930,13 @@ header .navbar-default .navbar-nav li a:hover {
 
 .service {
   text-align: center;
-  padding: 90px 0; }
+  padding: 30px 0; }
   @media (max-width: 768px) {
     .service {
       padding-top: 20px;
       padding-bottom: 20px; } }
   .service .service-item {
-    padding-bottom: 30px; }
+    padding-bottom: 10px; }
     .service .service-item i {
       font-size: 50px;
       color: #185b63; }
@@ -2884,3 +2897,78 @@ html {
     flex: 0 0 auto;
     width: 100%;
     margin-bottom: 20px; } }
+
+.custom-container {
+  max-width: 1800px;
+  /* oder was du möchtest */
+  margin: 0 auto;
+  padding-left: 30px;
+  padding-right: 30px; }
+
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background-color: #ffffff;
+  margin: 0;
+  padding: 20px; }
+
+.services-title {
+  margin-top: 50px;
+  color: #046e6e; }
+
+.services-description {
+  color: black;
+  margin-bottom: 50px; }
+
+/* Standard-Desktop-Layout */
+.services-section {
+  background-color: #f1f1f1;
+  /* Hintergrundfarbe der Sektion auf Schwarz setzen */
+  padding: 40px 0;
+  /* Padding für die Sektion */
+  width: 100%;
+  /* Volle Breite */
+  box-sizing: border-box;
+  /* Padding in der Breite berücksichtigen */ }
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* Drei Spalten für Desktop */
+  gap: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  /* Zentriert das Raster */
+  padding: 0 20px;
+  /* Optional: Padding für kleinere Bildschirme */ }
+
+.service-card {
+  background-color: #f1f1f1;
+  /* Hintergrundfarbe der Boxen auf Schwarz setzen */
+  color: white;
+  /* Textfarbe auf Weiß setzen für bessere Lesbarkeit */
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
+  padding: 20px;
+  box-sizing: border-box; }
+
+.service-icon {
+  width: 60px;
+  height: 60px;
+  margin-bottom: 15px; }
+
+.service-card-title {
+  color: black;
+  /* Titel-Textfarbe auf Weiß setzen */
+  margin-bottom: 10px; }
+
+.service-card-description {
+  color: black;
+  /* Hellgraue Farbe für den Beschreibungstext */
+  font-size: 14px; }
+
+/* Anpassungen für Mobilgeräte */
+@media (max-width: 768px) {
+  .services-grid {
+    grid-template-columns: 1fr;
+    /* Eine Spalte für Mobilgeräte */ } }

static/icons/circuit-board.svg

@@ -1 +1,68 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circuit-board-icon lucide-circuit-board"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M11 9h4a2 2 0 0 0 2-2V3"/><circle cx="9" cy="9" r="2"/><path d="M7 21v-4a2 2 0 0 1 2-2h4"/><circle cx="15" cy="15" r="2"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="lucide lucide-circuit-board-icon lucide-circuit-board"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="circuit-board.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="48.333333"
+     inkscape:cx="11.989655"
+     inkscape:cy="12"
+     inkscape:window-width="2363"
+     inkscape:window-height="1104"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <rect
+     width="18"
+     height="18"
+     x="3"
+     y="3"
+     rx="2"
+     id="rect1"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M11 9h4a2 2 0 0 0 2-2V3"
+     id="path1"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <circle
+     cx="9"
+     cy="9"
+     r="2"
+     id="circle1"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M7 21v-4a2 2 0 0 1 2-2h4"
+     id="path2"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <circle
+     cx="15"
+     cy="15"
+     r="2"
+     id="circle2"
+     style="stroke:#f5a623;stroke-opacity:1" />
+</svg>

static/icons/file-badge.svg

@@ -1 +1,56 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-badge-icon lucide-file-badge"><path d="M12 22h6a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/><path d="M7 16.5 8 22l-3-1-3 1 1-5.5"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="lucide lucide-file-badge-icon lucide-file-badge"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="file-badge.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="48.333333"
+     inkscape:cx="11.989655"
+     inkscape:cy="12"
+     inkscape:window-width="3440"
+     inkscape:window-height="1368"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M12 22h6a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3"
+     id="path1"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M14 2v4a2 2 0 0 0 2 2h4"
+     id="path2"
+     style="fill:none;fill-opacity:1;stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+     id="path3"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M7 16.5 8 22l-3-1-3 1 1-5.5"
+     id="path4"
+     style="stroke:#f5a623;stroke-opacity:1" />
+</svg>

static/icons/hard-hat.svg

@@ -1 +1,60 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hard-hat-icon lucide-hard-hat"><path d="M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5"/><path d="M14 6a6 6 0 0 1 6 6v3"/><path d="M4 15v-3a6 6 0 0 1 6-6"/><rect x="2" y="15" width="20" height="4" rx="1"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="lucide lucide-hard-hat-icon lucide-hard-hat"
+   version="1.1"
+   id="svg3"
+   sodipodi:docname="hard-hat.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="48.333333"
+     inkscape:cx="11.989655"
+     inkscape:cy="12"
+     inkscape:window-width="3440"
+     inkscape:window-height="1368"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3" />
+  <path
+     d="M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5"
+     id="path1"
+     style="stroke:#f5a623;stroke-opacity:1;fill:none;fill-opacity:1" />
+  <path
+     d="M14 6a6 6 0 0 1 6 6v3"
+     id="path2"
+     style="stroke:#f5a623;stroke-opacity:1;fill:none;fill-opacity:1" />
+  <path
+     d="M4 15v-3a6 6 0 0 1 6-6"
+     id="path3"
+     style="stroke:#f5a623;stroke-opacity:1;fill:none;fill-opacity:1" />
+  <rect
+     x="2"
+     y="15"
+     width="20"
+     height="4"
+     rx="1"
+     id="rect3"
+     style="stroke:#f5a623;stroke-opacity:1;fill:none;fill-opacity:1" />
+</svg>

static/icons/headset.svg

@@ -1 +1,48 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-headset-icon lucide-headset"><path d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z"/><path d="M21 16v2a4 4 0 0 1-4 4h-5"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="lucide lucide-headset-icon lucide-headset"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="headset.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="48.333333"
+     inkscape:cx="11.989655"
+     inkscape:cy="11.42069"
+     inkscape:window-width="3440"
+     inkscape:window-height="1368"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <path
+     d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z"
+     id="path1"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M21 16v2a4 4 0 0 1-4 4h-5"
+     id="path2"
+     style="stroke:#f5a623;stroke-opacity:1" />
+</svg>

static/icons/network.svg

@@ -1 +1,72 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-network-icon lucide-network"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="lucide lucide-network-icon lucide-network"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="network.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="48.333333"
+     inkscape:cx="11.989655"
+     inkscape:cy="12"
+     inkscape:window-width="3440"
+     inkscape:window-height="1368"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <rect
+     x="16"
+     y="16"
+     width="6"
+     height="6"
+     rx="1"
+     id="rect1"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <rect
+     x="2"
+     y="16"
+     width="6"
+     height="6"
+     rx="1"
+     id="rect2"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <rect
+     x="9"
+     y="2"
+     width="6"
+     height="6"
+     rx="1"
+     id="rect3"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"
+     id="path3"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M12 12V8"
+     id="path4"
+     style="stroke:#f5a623;stroke-opacity:1" />
+</svg>

static/icons/plug-zap.svg

@@ -1 +1,61 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug-zap-icon lucide-plug-zap"><path d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"/><path d="m2 22 3-3"/><path d="M7.5 13.5 10 11"/><path d="M10.5 16.5 13 14"/><path d="m18 3-4 4h6l-4 4"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="lucide lucide-plug-zap-icon lucide-plug-zap"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="plug-zap.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs5" />
+  <sodipodi:namedview
+     id="namedview5"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="48.333333"
+     inkscape:cx="11.989655"
+     inkscape:cy="12"
+     inkscape:window-width="3440"
+     inkscape:window-height="1368"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5" />
+  <path
+     d="m 6.3,20.3 c 0.9379277,0.94119 2.4620723,0.94119 3.4,0 L 10.841379,19.158621 12,18 6,12 3.7,14.3 c -0.9411901,0.937928 -0.9411901,2.462072 0,3.4 z"
+     id="path1"
+     sodipodi:nodetypes="cccccccc"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="m2 22 3-3"
+     id="path2"
+     style="stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M7.5 13.5 10 11"
+     id="path3"
+     style="fill:#e5310e;fill-opacity:1;fill-rule:nonzero;stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="M10.5 16.5 13 14"
+     id="path4"
+     style="fill:#e5310e;fill-opacity:1;stroke:#f5a623;stroke-opacity:1" />
+  <path
+     d="m18 3-4 4h6l-4 4"
+     id="path5"
+     style="fill:none;stroke:#f5a623;stroke-opacity:1" />
+</svg>