transparent button and hero bg option

Author: Nikos Katsikanis

css/button-badge.css

@@ -36,6 +36,15 @@ button,
       background-color: var(--minor-text);
     }
   }
+  &.transparent {
+    background-color: transparent;
+    color: var(--default-text);
+    border: 1px solid var(--default-text);
+    &:hover {
+      color: var(--primary-color);
+      background-color: var(--default-text);
+    }
+  }
 
   &.destructive {
     background-color: var(--destructive-color);

js/components/fullscreen-hero.js

@@ -1,14 +1,15 @@
 export default (hostComponent) => {
-    // Extract data attributes
-    const imageUrl = hostComponent.getAttribute('data-image-url') || 'https://picsum.photos/1600/900';
-    const overlayColor = hostComponent.getAttribute('data-overlay-color') || 'rgba(0, 0, 0, 0.5)';
-    const header = hostComponent.getAttribute('data-header') || 'Welcome';
-    const text = hostComponent.getAttribute('data-text') || 'Your default hero text here.';
-    const buttonText = hostComponent.getAttribute('data-button-text') || 'Learn More';
-    const buttonLink = hostComponent.getAttribute('data-button-link') || '#';
+  // Extract data attributes
+  const imageUrl = hostComponent.getAttribute('data-image-url') || 'https://picsum.photos/1600/900';
+  const overlayColor = hostComponent.getAttribute('data-overlay-color') || 'rgba(0, 0, 0, 0.5)';
+  const header = hostComponent.getAttribute('data-header') || 'Welcome';
+  const text = hostComponent.getAttribute('data-text') || 'Your default hero text here.';
+  const buttonText = hostComponent.getAttribute('data-button-text') || 'Learn More';
+  const buttonLink = hostComponent.getAttribute('data-button-link') || '#';
+  const parallax = hostComponent.getAttribute('data-parallax') !== 'false'; // Default to true
 
-    // Inject HTML
-    hostComponent.innerHTML = `
+  // Inject HTML
+  hostComponent.innerHTML = `
     <style>
       .hero-container {
         position: relative;
@@ -17,7 +18,7 @@ export default (hostComponent) => {
         background-image: url('${imageUrl}');
         background-size: cover;
         background-position: center;
-        background-attachment: fixed;
+        background-attachment: ${parallax ? 'fixed' : 'scroll'};
       }
       .hero-overlay {
         position: absolute;
@@ -44,27 +45,15 @@ export default (hostComponent) => {
         font-size: 1.125rem;
         margin-bottom: 1.5rem;
       }
-      .hero-button {
-        display: inline-block;
-        padding: 0.75rem 1.5rem;
-        border: 2px solid white;
-        color: white;
-        text-decoration: none;
-        font-weight: bold;
-        border-radius: 5px;
-        transition: background-color 0.3s, color 0.3s;
-      }
-      .hero-button:hover {
-        background-color: white;
-        color: #1a202c;
-      }
+    
+     
     </style>
     <div class="hero-container">
       <div class="hero-overlay"></div>
       <div class="hero-content">
         <h1 class="hero-header">${header}</h1>
         <p class="hero-text">${text}</p>
-        <a href="${buttonLink}" class="hero-button">${buttonText}</a>
+        <a href="${buttonLink}" class="button transparent squarify">${buttonText}</a>
       </div>
     </div>
   `;

js/components/nav.js

@@ -67,13 +67,13 @@ export default (hostComponent) => {
 
       /* Non-header-bar-mode specific styles */
       nav:not(.header-bar-mode) {
-        @media (max-width: 399px) {
+        @media (max-width: 499px) {
           .text {
             display: none;
           }
         }
 
-        @media (min-width: 400px) {
+        @media (min-width: 500px) {
           .icon {
             display: none;
           }

js/components/toggle-switch.js

@@ -1,4 +1,4 @@
-// Stored in /components/toggle-switch.js
+// js/components/toggle-switch.js
 
 export default (hostComponent) => {
   const render = () => {

js/routes/form.js

@@ -7,7 +7,7 @@ export default (hostComponent) => {
   <h1>Form</h1>
 <form class="centered">
  <h2>Centered class form</h2>
-
+<span data-component="toggle-switch"></span>
   <div>
     <label for="name">Name</label>
     <input type="text" id="name" name="name">

js/routes/heros.js

@@ -4,10 +4,11 @@ export default (hostComponent) => {
     <div data-component="fullscreen-hero"
          data-image-url="https://picsum.photos/1600/900"
          data-overlay-color="rgba(0, 0, 0, 0.5)"
-         data-header="Herzlich willkommen"
-         data-text="Mit unserer umfassenden Kenntnis des aktuellen Markts..."
-         data-button-text="Mehr dazu"
-         data-button-link="/kontakt">
+         data-header="This is a fullscreen-hero"
+         data-text="Some text you want to right here"
+         data-button-text="Add your link url here"
+         data-button-link="#"
+         >
     </div>
 
     <div data-component="narrow-hero"