Wip/new to nl 2

Gemfile

@@ -76,6 +76,8 @@ group :development do
   gem 'bundler-audit', require: false
   # Facilitate I18n translation management
   gem 'i18n_generators'
+
+  gem 'easy_translate'
   # Listen for file system changes
   gem 'listen', '>= 3.0.5', '< 3.10'
   # Rack mini profiler for performance profiling

Gemfile.lock

@@ -33,6 +33,7 @@ PATH
       font-awesome-sass (~> 6.5)
       friendly_id (>= 5.2, < 5.6)
       friendly_id-mobility (~> 1.0.4)
+      groupdate
       i18n-timezones
       image_processing (~> 1.2)
       importmap-rails (~> 2.0)
@@ -257,6 +258,9 @@ GEM
     dry-core (1.0.1)
       concurrent-ruby (~> 1.0)
       zeitwerk (~> 2.6)
+    easy_translate (0.5.1)
+      thread
+      thread_safe
     elasticsearch (7.17.11)
       elasticsearch-api (= 7.17.11)
       elasticsearch-transport (= 7.17.11)
@@ -319,6 +323,8 @@ GEM
     google-protobuf (4.28.2-x86_64-linux)
       bigdecimal
       rake (>= 13)
+    groupdate (6.4.0)
+      activesupport (>= 6.1)
     hashie (5.0.0)
     highline (3.1.0)
       reline
@@ -635,6 +641,7 @@ GEM
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     thor (1.3.2)
+    thread (0.2.2)
     thread_safe (0.3.6)
     tilt (2.4.0)
     timeout (0.4.1)
@@ -702,6 +709,7 @@ DEPENDENCIES
   coveralls_reborn
   database_cleaner
   database_cleaner-active_record
+  easy_translate
   factory_bot_rails
   faker
   fog-aws

app/assets/stylesheets/better_together/application.scss

@@ -10,40 +10,51 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
- *= require_tree .
  *= require_self
  */
 
- @import 'bootstrap';
- @import 'font-awesome';
+@import 'theme';
 
- /* Default text color for light mode */
- .text-opposite-theme {
-  color: #333; /* dark text on light background */
+// Import Bootstrap and Font Awesome
+
+@import 'bootstrap';
+@import 'font-awesome';
+@import 'actiontext';
+@import 'contact_details';
+@import 'content_blocks';
+@import 'conversations';
+@import 'forms';
+@import 'metrics';
+@import 'navigation';
+@import 'notifications';
+@import 'profiles';
+@import 'share';
+@import 'trix-extensions/richtext';
+
+// Styles that use the variables
+.text-opposite-theme {
+  color: $text-opposite-theme-color; /* Use the defined variable */
 }
 
-/* When the user's system preference is dark mode, adjust text color */
 @media (prefers-color-scheme: dark) {
   .text-opposite-theme {
-    color: #f8f9fa; /* light text on dark background */
+    color: $dark-text-color;
   }
 }
 
-/* Similarly, if the background is meant to be dark, you can set text to be light and vice versa */
-/* Default background color for light mode with dark text */
 .background-opposite-theme {
-  background-color: #fff;
-  color: #333;
+  background-color: $background-opposite-theme-color;
+  color: $text-opposite-theme-color;
 }
 
-/* When the user's system preference is dark mode, adjust background and text color */
 @media (prefers-color-scheme: dark) {
   .background-opposite-theme {
-    background-color: #212529;
-    color: #f8f9fa;
+    background-color: $dark-background-color;
+    color: $dark-text-color;
   }
 }
 
+
 .highlight-translation-missing span.translation_missing {
   background: #e1b1ed;
 }
@@ -56,3 +67,13 @@
 #flash_messages {
   position: relative;
 }
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* Ensure the wrapper takes full height */
+}
+
+.content {
+  flex: 1; /* Allow the main content to grow and take up remaining space */
+}

app/assets/stylesheets/better_together/contact_details.scss

@@ -0,0 +1,55 @@
+@import 'theme';
+
+.contact-detail-item {
+  margin-bottom: 15px;
+  .icon {
+    margin-right: 10px;
+    // color: $info; // Bootstrap primary color
+  }
+  .content {
+    strong {
+      font-size: 1.1rem;
+    }
+  }
+}
+
+.centered-contact-details {
+
+  h4 {
+    text-align: center;
+  }
+
+  .contact-details > .row {
+    justify-content: center;
+  }
+
+  // Center the social media links
+  .contactable-social-media-links {
+    display: flex;
+    justify-content: center;
+  }
+
+  // Center text within the content div
+  .content {
+    text-align: center;
+
+    // Adjust badges
+    .badge {
+      margin-left: 0.25rem;
+    }
+  }
+
+  // Center the contact detail items
+  .contact-detail-item {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem; // Optional: Add spacing between items
+
+    // Adjust inner elements if necessary
+    .d-flex {
+      justify-content: center;
+    }
+
+  }
+}
+

app/assets/stylesheets/better_together/content_blocks.scss

@@ -22,3 +22,91 @@
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for focus */
   border-color: #adb5bd; /* Darken the border on hover */
 }
+
+.content-block.content_hero {
+  position: relative;
+  padding: 100px 0; /* Adjust padding for spacing */
+  overflow: hidden; /* Ensure content doesn't overflow */
+  height: calc(100vh - 56px);
+
+  .hero-background {
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    z-index: 0; /* Set background behind overlay */
+    justify-content: center; /* Centers content horizontally */
+    align-items: center;     /* Centers content vertically */
+
+    .hero-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1; /* Set overlay above background */
+    }
+
+    .hero-content {
+      position: relative;
+      z-index: 2; /* Ensure content is above overlay */
+      max-width: 80%; /* Adjust as needed */
+      margin: 0 auto;
+      text-align: center; /* Center text by default */
+      height: 100%;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      > * {
+        margin: 3vh auto;
+      }
+
+      .hero-heading {
+        font-size: 3em; /* Make the heading more prominent */
+      }
+
+      .hero-paragraph {
+        font-size: 1.2em;
+      }
+
+      .hero-cta {
+        padding: 12px 24px;
+        font-size: 1.2em;
+      }
+    }
+  }
+}
+
+.trix-content,
+.content_rich_text {
+  /* Remove text decoration for tel: and mailto: links */
+  a[href^="tel:"],
+  a[href^="mailto:"] {
+    text-decoration: none;
+
+    &::before {
+      font-family: "Font Awesome 6 Free";
+      font-weight: 900; /* Solid icons */
+      margin-right: 5px;
+      color: var(--primary);
+      text-decoration: none;
+      display: inline-block;
+    }
+  }
+
+  /* Prepend phone icon to the anchor when it's not inside an li */
+  a[href^="tel:"]:not(:has(i))::before {
+    content: "\f095"; /* Font Awesome unicode for phone icon */
+  }
+
+  /* Prepend envelope icon to the anchor when it's not inside an li */
+  a[href^="mailto:"]:not(:has(i))::before {
+    content: "\f0e0"; /* Font Awesome unicode for envelope icon */
+  }
+}

app/assets/stylesheets/better_together/forms.scss

@@ -1,29 +1,98 @@
+@import "theme";
 
-/* Style for invalid fields */
-input:invalid {
-  border-color: #e3342f; /* Red border for invalid fields */
-  background-color: #fce8e6; /* Light red background */
-  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
+.required-indicator {
+  color: $danger;
+  font-weight: bold;
 }
 
-// /* Style for valid fields */
-// input:valid {
-//   border-color: #38c172; /* Green border for valid fields */
-//   background-color: #e9f7ef; /* Light green background */
-// }
+.hidden-field {
+  opacity: 0;
+  height: 0;
+  margin: 0; /* Remove margin when hidden */
+  overflow: hidden; /* Ensure the element is fully collapsed */
+  transform: translateY(-10px); /* Optional upward movement */
+  pointer-events: none; /* Prevent interaction when hidden */
+  transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease;
+}
+
+.visible-field {
+  opacity: 1;
+  height: auto;
+  margin: initial; /* Reset margin when visible */
+  transform: translateY(0);
+  pointer-events: auto;
+  transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease;
+}
 
-/* Error message styling */
-input:invalid:focus {
+/* General slider track styling */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: $slider-track-height;
+  background: $slider-track-color;
+  border-radius: 5px;
   outline: none;
-  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
 }
 
-input:invalid::placeholder {
-  color: #e3342f; /* Red placeholder text for invalid input */
+/* WebKit browsers (Chrome, Safari) */
+input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: $slider-track-height;
+  background: $slider-track-color;
+  border-radius: 5px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: $slider-thumb-size;
+  height: $slider-thumb-size;
+  background: $slider-thumb-color;
+  border: $slider-thumb-border-size solid $slider-thumb-border-color;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Firefox */
+input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: $slider-track-height;
+  background: $slider-track-color;
+  border-radius: 5px;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: $slider-thumb-size;
+  height: $slider-thumb-size;
+  background: $slider-thumb-color;
+  border: $slider-thumb-border-size solid $slider-thumb-border-color;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* IE / Edge */
+input[type="range"]::-ms-track {
+  width: 100%;
+  height: $slider-track-height;
+  background: transparent; /* Remove default background */
+  border-color: transparent;
+  color: transparent;
+}
+
+input[type="range"]::-ms-fill-lower {
+  background: $slider-track-color;
+}
+
+input[type="range"]::-ms-fill-upper {
+  background: $slider-track-color;
 }
 
-// /* Additional focus state for screen readers */
-// input:focus {
-//   outline: 2px solid #0056b3; /* Blue outline when focused */
-//   outline-offset: 2px;
-// }
+input[type="range"]::-ms-thumb {
+  width: $slider-thumb-size;
+  height: $slider-thumb-size;
+  background: $slider-thumb-color;
+  border: $slider-thumb-border-size solid $slider-thumb-border-color;
+  border-radius: 50%;
+  cursor: pointer;
+}