Website Redesign: Professional Playful Look & Feel

.bundle/config

@@ -0,0 +1,2 @@
+---
+BUNDLE_PATH: "vendor/bundle"

_data/style.yml

@@ -1,10 +1,13 @@
 #Color Customization
-highlight: "#fbc02d"
-#white: "#FF0000"
-#black: "#000"
+highlight: "#f1c232"
+bumble_yellow: "#f1c232"
+bumble_grey_dark: "#5e5e5e"
+bumble_grey_light: "#999999"
+white: "#ffffff"
+black: "#242424"
 
 #Image Customization
-header-image: "/assets/img/header-bg.webp"
+# header-image: "/assets/img/header-bg.webp"
 accceu-image: "/assets/img/accceu-header.webp"
 fast-image: "/assets/img/fast-header.webp"
 nvc-image: "/assets/img/nvc-header.webp"

_i18n/de.yml

@@ -5,21 +5,24 @@ pages:
     title: Startseite
     header:
       title: Willkommen bei den bumbleflies
-      text: WIR LIEBEN OPEN SPACE!
-      button: Schreib uns
+      text: Innovative Wege der Zusammenarbeit und Bildung
+      button: Kontakt aufnehmen
     gallery:
       title: Leistungen
-      text: So unterstützen wir dich
+      text: Innovative Wege für Kollaboration und Bildung
       items:
-        effective_collaboration:
-          title: Effektive Kollaboration
-          desc: Wir helfen dir, deine Meetings und Workshops effektiv, interaktiv und kollaborativ zu gestalten. Du wirst überrascht sein, wie viel Energie das bei deinen Mitarbeiter:innen freisetzt.
-        big_room:
-          title: Online Big-Room-Meetings
-          desc: Wir organisieren für dich dein nächstes Big-Room-Meeting (z.B. PI-Planning) für alle deine Teams. Egal ob 20, 200 oder mehr Personen. Wir sorgen für den produktiven Rahmen, damit ihr euch auf die Inhalte konzentrieren könnt.
-        online_events:
-          title: Online Events
-          desc: Wir organisieren für dich ein Event, bei dem Teambuilding, Austausch und Spaß im Vordergrund stehen. Ihr habt euch lange nicht mehr gesehen und sucht den Kontakt zu den Kollegen? Dann ist das genau das richtige.
+        app_development:
+          title: App-Entwicklung
+          desc: Wir entwickeln maßgeschneiderte Apps, die Zusammenarbeit und Lernen in deinem Unternehmen auf das nächste Level heben.
+        lego_minecraft:
+          title: Lego & Minecraft Education
+          desc: Spielerisch lernen und komplexe Probleme lösen – wir nutzen Lego und Minecraft für innovative Bildungsformate.
+        workshops:
+          title: Workshops
+          desc: Interaktive und effektive Workshops, die Energie freisetzen und echte Ergebnisse liefern.
+        openspace_coaching:
+          title: Open Space Coaching
+          desc: Wir begleiten dich und dein Team dabei, die Kraft von Open Space für eure Transformation zu nutzen.
   retreats:
     title: Retreats
     bumbleretreat:
@@ -568,11 +571,11 @@ pages:
     title: Über uns
     text: Wir sind bumbleflies
     body: |
-      Wir sind Chris, nochmal Chris und Sebastian, die bumbleflies. Unser Name ist eine Anspielung auf die beiden Erscheinungen des Open Space: die Hummeln, die für das Verbreiten von Ideen stehen, und die Schmetterlinge, die für das Schöne und Unerwartete stehen. Als Teil des Organisationsteams der Open Space Scrum München Veranstaltung haben wir viel Erfahrung und sind dazu bereit, diese weiterzugeben.
+      Wir sind Christian Dähn, Christoph Kämpfe und Sebastian Keller – die bumbleflies. Unser Name ist eine Anspielung auf die beiden Erscheinungen des Open Space: die Hummeln (bumblebees), die für das Verbreiten von Ideen stehen, und die Schmetterlinge (butterflies), die für das Schöne und Unerwartete stehen.
 
-      Mit der bumbleflies UG bieten wir Organisationen Unterstützung beim Einsatz des Open Space Formats an. Wir glauben, dass Open Space ein mächtiges Werkzeug für die Zusammenarbeit und den Wissensaustausch ist und wollen gemeinsam mit Euch die Idee voranbringen. Deshalb bieten wir nicht nur die Organisation von Open Spaces an, sondern auch Schulungen und Workshops, um Unternehmen und Organisationen bei der Implementierung von Open Space zu unterstützen.
+      Wir begleiten Organisationen auf neuen Wegen der Zusammenarbeit und Bildung. Von der Entwicklung maßgeschneiderter Apps über innovative Bildungsformate mit Lego und Minecraft bis hin zu professioneller Workshop-Moderation und Open Space Coaching – wir bringen frischen Wind in eure Projekte.
 
-      Wir sind überzeugt, dass jeder von der offenen und partizipativen Arbeitsweise profitieren kann, die Open Space ermöglicht, und wir freuen uns darauf, unsere Leidenschaft für Open Space und eine offene, kollaborative Arbeitskultur mit Euch zu teilen."
+      Wir sind überzeugt, dass jeder von einer offenen, partizipativen und spielerischen Arbeitsweise profitieren kann. Wir freuen uns darauf, unsere Leidenschaft für innovative Kollaboration mit euch zu teilen.
   stayintheloop:
     title: Informiert bleiben
   team:

_i18n/en.yml

@@ -3,21 +3,24 @@ pages:
     title: Home
     header:
       title: Welcome to the bumbleflies
-      text: WE LOVE OPEN SPACE!
-      button: Contact us
+      text: Innovative ways of collaboration and education
+      button: Get in touch
     gallery:
       title: Services
-      text: This is how we support you
+      text: Innovative ways for collaboration and education
       items:
-        effective_collaboration:
-          title: Effective Collaboration
-          desc: We help you make your meetings and workshops effective, interactive, and collaborative. You'll be surprised at how much energy this unleashes in your employees.
-        big_room:
-          title: Online Big-Room-Meetings
-          desc: We organize your next big room meeting (e.g., PI Planning) for all your teams, whether it's 20, 200, or more people. We provide the productive framework, so you can focus on the content.
-        online_events:
-          title: Online Events
-          desc: We organize an event for you where team building, exchange, and fun are the focus. Haven't seen each other for a year and looking for contact with colleagues? Then this is exactly the right thing.
+        app_development:
+          title: App Development
+          desc: We develop custom apps that take collaboration and learning in your company to the next level.
+        lego_minecraft:
+          title: Lego & Minecraft Education
+          desc: Learn through play and solve complex problems – we use Lego and Minecraft for innovative educational formats.
+        workshops:
+          title: Workshops
+          desc: Interactive and effective workshops that unleash energy and deliver real results.
+        openspace_coaching:
+          title: Open Space Coaching
+          desc: We accompany you and your team in utilizing the power of Open Space for your transformation.
   retreats:
     title: Retreats
     bumbleretreat:
@@ -577,11 +580,11 @@ pages:
     title: About us
     text: We are bumbleflies
     body: |
-      We are Chris, Chris again, and Sebastian, the bumbleflies. Our name is a nod to the two phenomena of Open Space: the bumblebees, representing the spread of ideas, and the butterflies, symbolizing the beautiful and unexpected. As part of the organizing team for the Open Space Scrum Munich event, we have gathered extensive experience and are ready to pass on this knowledge.
+      We are Christian Dähn, Christoph Kämpfe, and Sebastian Keller – the bumbleflies. Our name is a nod to the two phenomena of Open Space: the bumblebees, representing the spread of ideas, and the butterflies, symbolizing the beautiful and unexpected.
 
-      With bumbleflies UG, we offer organizations support in the implementation of the Open Space format. We believe that Open Space is a powerful tool for collaboration and knowledge exchange and want to advance the idea together with you. That's why we not only offer the organization of Open Spaces, but also training and workshops to assist companies and organizations in implementing Open Space.
+      We guide organizations on new paths of collaboration and education. From developing custom apps and innovative educational formats with Lego and Minecraft to professional workshop facilitation and Open Space coaching – we bring fresh energy to your projects.
 
-      We are convinced that everyone can benefit from the open and participatory working method that Open Space enables, and we look forward to sharing our passion for Open Space and an open, collaborative work culture with you.
+      We are convinced that everyone can benefit from an open, participatory, and playful way of working. We look forward to sharing our passion for innovative collaboration with you.
   stayintheloop:
     title: Stay in the loop
   team:

_includes/head.html

@@ -33,6 +33,10 @@
 
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
     <!-- preload styles -->
     {% for style in site.data.style.sheets %}
     <link rel="preload" type="text/css" href="{{ site.baseurl_root }}/assets/css/{{ style.name }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

_includes/navheader.html

@@ -2,11 +2,7 @@
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
     <div class="container">
         <a class="navbar-brand js-scroll-trigger" href="{{ site.baseurl }}/#">
-            {%- if site.logo -%}
-            <img height="{{ site.logo.height | default: 52 }}" src="{{ site.logo.path }}"/>
-            {%- else -%}
-            {{ site.title }}
-            {%- endif -%}
+            <span class="logo-b">b</span><span class="logo-umble">umble</span><span class="logo-flies">flies</span>
         </a>
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                 data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"

_pages/index.md

@@ -47,25 +47,24 @@ gallery:
   text: pages.home.gallery.text
   section: services
   list:
-    - title: pages.home.gallery.items.effective_collaboration.title
-      desc: pages.home.gallery.items.effective_collaboration.desc
+    - title: pages.home.gallery.items.app_development.title
+      desc: pages.home.gallery.items.app_development.desc
       image: 
-        url: /assets/img/services/bumblespace_effective-workshop.webp
+        url: /assets/img/bumblefly-blue.png
         copyright: bumbleflies UG
-        width: 300
-        height: 270
-    - title: pages.home.gallery.items.big_room.title
-      desc: pages.home.gallery.items.big_room.desc
+    - title: pages.home.gallery.items.lego_minecraft.title
+      desc: pages.home.gallery.items.lego_minecraft.desc
       image: 
-        url: /assets/img/services/bumblespace_pi-planning.webp
+        url: /assets/img/bumblefly-blue.png
         copyright: bumbleflies UG
-        width: 300
-        height: 270
-    - title: pages.home.gallery.items.online_events.title
-      desc: pages.home.gallery.items.online_events.desc
+    - title: pages.home.gallery.items.workshops.title
+      desc: pages.home.gallery.items.workshops.desc
       image: 
-        url: /assets/img/services/bumblespace_online-events.webp
+        url: /assets/img/bumblefly-blue.png
+        copyright: bumbleflies UG
+    - title: pages.home.gallery.items.openspace_coaching.title
+      desc: pages.home.gallery.items.openspace_coaching.desc
+      image:
+        url: /assets/img/bumblefly-blue.png
         copyright: bumbleflies UG
-        width: 300
-        height: 270
 ---

_sass/_header_images.scss

@@ -1,16 +1,28 @@
 // Custom Images
 
 header.masthead {
+  background-color: $bumble-yellow; // Default fallback to yellow
+  color: $black;
+  background-image: none !important; // Force no background image for the new look
+
+  .intro-text .intro-lead-in, .intro-text .intro-heading {
+    color: $black;
+  }
+
   &.default-image {
-    background-image: url("#{$header-image}");
+    background-color: $bumble-yellow;
   }
+
   &.accceu-image {
-    background-image: url("#{$accceu-image}");
+    background-color: $bumble-grey-dark;
+    .intro-text .intro-lead-in, .intro-text .intro-heading {
+      color: $white;
+    }
   }
   &.fast-image {
-    background-image: url("#{$fast-image}");
+    background-color: $bumble-yellow;
   }
   &.nvc-image {
-    background-image: url("#{$nvc-image}");
+    background-color: $bumble-grey-light;
   }
-}
+}

_sass/base/_mixins.scss

@@ -1,25 +1,25 @@
 // Font Mixins
 /* second heading */
 @mixin serif-font {
-  font-family: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Fraunces", "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 /* #mainNav .navbar-brand */
 @mixin script-font {
-  font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Fraunces", "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 /* default */
 @mixin body-font {
-  font-family: /*'Roboto Slab',*/ -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 /* main font */
 @mixin heading-font {
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Fraunces", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }

_sass/base/_page.scss

@@ -0,0 +1,91 @@
+// Global styling for this template
+body {
+  overflow-x: hidden;
+  @include body-font;
+  color: $black;
+  background-color: $white;
+}
+
+p {
+  line-height: 1.8;
+  margin-bottom: 1.5rem;
+}
+
+a {
+  color: $bumble-grey-dark;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+  transition: all 0.2s ease;
+  &:hover {
+    color: $primary;
+    text-decoration-color: $primary;
+  }
+}
+
+.text-primary {
+  color: $primary !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 800;
+  @include heading-font;
+  letter-spacing: -0.02em;
+}
+
+.page-section {
+  padding: 120px 0;
+  h2.section-heading {
+    font-size: 3.5rem;
+    margin-top: 0;
+    margin-bottom: 2rem;
+    text-transform: none !important; // Fraunces looks better in mixed case
+  }
+  h3.section-subheading {
+    font-size: 1.25rem;
+    font-weight: 400;
+    font-style: normal;
+    margin-bottom: 4rem;
+    text-transform: none;
+    @include body-font;
+    color: $bumble-grey-dark;
+  }
+}
+@media (min-width: 768px) {
+  section {
+    padding: 160px 0;
+  }
+}
+
+// Highlight color customization
+::-moz-selection {
+  background: $primary;
+  text-shadow: none;
+}
+
+// Clients section
+#customer {
+  padding: 60px 0;
+  background-color: $gray-100;
+  img {
+    max-height: 40px;
+    width: auto;
+    filter: grayscale(100%);
+    opacity: 0.6;
+    transition: all 0.3s ease;
+    &:hover {
+      filter: grayscale(0%);
+      opacity: 1;
+    }
+  }
+}
+
+::selection {
+  background: $primary;
+  text-shadow: none;
+}

_sass/base/_variables.scss

@@ -0,0 +1,20 @@
+// Bumbleflies Color Palette
+$bumble-yellow: #f1c232 !default;
+$bumble-grey-dark: #5e5e5e !default;
+$bumble-grey-light: #999999 !default;
+
+// Theme overrides
+$primary: $bumble-yellow !default;
+$black: #242424 !default;
+$white: #ffffff !default;
+
+// Bootstrap grey scale fallbacks
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;