Feature : Added Hero module

locales/en.default.json

@@ -231,7 +231,12 @@
     "sections": {
       "frontpage_title": "Frontpage Collection",
       "featured_title": "Featured Collections",
-      "news_title": "Related articles"
+      "news_title": "Related articles",
+      "hero": {
+        "title_l1": "Maple Never",
+        "title_l2": "Tasted So Good",
+        "text": "We blend this bourbon with natural smoked maple flavors for a unique, smoky sweetness. Full bodied, inviting maple notes that lift to smoke and are complemented with rich vanilla caramel. Smoked hickory and maple wood, with hints of earthy gains."
+      }
     },
     "onboarding": {
       "modal_title": "Almost there...",

modules/featured-post/featured-post.css

@@ -1 +1,65 @@
-.featured-post {}
+.featured-container {
+    height: 700px;
+    background-color: var(--mongoose);
+}
+
+.featured-content {
+    flex-direction: column;
+    background-color: var(--white);
+    width: 90%;
+    left: 50%;
+    bottom: 10vw;
+    transform: translate(-50%, 0);
+}
+
+.featured-image-container,
+.featured-meta-container {
+    width: 100%;
+}
+
+.featured-meta {
+    max-width: 80%;
+}
+
+.featured-meta-container {
+    max-height: var(--xxs);
+}
+
+.featured-image-container img {
+    max-height: var(--xs);
+    height: 400px;
+    object-fit: cover;
+    margin-bottom: -7.5px;
+}
+
+@media (--xs) {
+    .featured-container {
+        height: 500px;
+    }
+}
+
+@media (--ml) {
+    .featured-meta-container img {
+        height: auto !important;
+    }
+    .featured-image-container,
+    .featured-meta-container {
+        width: 50%;
+    }
+    .featured-content {
+        bottom: 10vw;
+        flex-direction: row !important;
+    }
+    .featured-container {
+        height: 400px;
+    }
+}
+@media (--l) {
+    .featured-container {
+        height: 300px;
+    }
+
+    .featured-content {
+        bottom: 8vw;
+    }
+}

modules/hero/hero.css

@@ -1 +1,65 @@
-.hero {}
+.banner {
+    flex-direction: column;
+    background-image: url('/assets/hero-image.jpg');
+    background-size: cover;
+}
+
+.tagline-container {
+    justify-content: center;
+}
+
+.slogan {
+    justify-content: center;
+    text-align: center;
+    padding: 10px;
+    width: var(--xxs);
+}
+.slogan_container {
+    flex-direction: column;
+}
+.title {
+    font-size: 3.2em;
+}
+
+.product-image {
+    width: 50%;
+    max-width: 350px;
+}
+
+@media (--ml) {
+    .product-image-container {
+        width: 50%;
+    }
+    .product-image {
+        max-width: 350px;
+    }
+    .slogan {
+        padding-left: 0;
+        padding: 0;
+        margin-top: -100px;
+        text-align: left !important;
+    }
+    .tagline-container {
+        justify-content: end;
+        width: 50%;
+    }
+    .banner {
+        flex-direction: row;
+    }
+    .slogan_container {
+        width: 90%;
+        flex-direction: row;
+    }
+}
+
+@media (--l) {
+    .title {
+        font-size: 3.7em;
+    }
+
+    .slogan {
+        width: auto;
+        margin-top: -150px;
+        padding-left: 27%;
+    }
+}

snippets/featured-post.liquid

@@ -0,0 +1,28 @@
+<div class="featured-container full-w rel">
+    <div class="featured-content f abs aic jcc align-c">
+        {% capture srcset %}
+        {{ article.image | img_url: '360x334', crop: 'center' }} 360w,
+        {{ article.image | img_url: '540x501', crop: 'center' }} 540w
+        {{ article.image | img_url: '720x668', crop: 'center' }} 720w,
+        {{ article.image | img_url: '900x835', crop: 'center' }} 900w
+        {% endcapture %}
+        <div class="featured-image-container full-w">
+            <img class="w-full"
+                src="{{ article.image | img_url: '300x278', crop: 'center' }}"
+                srcset="{{ srcset }}"
+                sizes="auto"
+                width="100%"
+                alt="{{ article.title }}"
+            >
+        </div>
+        <div class="featured-meta-container f jcc">
+            <div class="featured-meta pt1 pb1">
+                <div class="featurd-post__icon">{% include 'post-icon' %}</div>
+                <time class="featurd-post__date" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: '%B %d' }}</time>
+                <h1 class="featurd-post__title h1"><a href="{{ article.url }}">{{ article.title }}</a></h1>
+                <p>{{article.content}}</p>
+                {% include 'read-more' %}
+            </div>
+        </div>
+    </div>
+</div>

snippets/header.liquid

@@ -20,7 +20,7 @@
     <div class="nav__logo mongoose">Logo</div>
 
     <div class="nav__links">
-      {% include 'social-links' %}
+      {% include 'share' %}
     </div>
   </div>
 </header>

snippets/hero.liquid

@@ -0,0 +1,13 @@
+<div class="banner rel fill-w f jcc">
+    <div class="f slogan_container">
+        <div class="tagline-container f jcc aic jce">
+            <div class="slogan">
+                <h1 class="title white bold">{{'homepage.sections.hero.title_l1' | t}} <br> {{'homepage.sections.hero.title_l2' | t}}</h1>
+                <p class="white">{{'homepage.sections.hero.text' | t}}</p>
+            </div>
+        </div>
+        <div class="product-image-container pt2 f jcc">
+            <img class="product-image" src="{{ 'KnobCreek.png' | asset_url }}" alt="{{ shop.name }}"/>
+        </div>
+    </div>
+</div>

snippets/vite-tag.liquid

@@ -4,7 +4,7 @@
 {% endcomment %}
 {% assign path = vite-tag | replace: 'react/', '../../preact-compat/' | replace: 'react-dom/', '../../preact-compat/' | replace: '~/', '../' | replace: '@/', '../' | replace: '@modules/', '../../modules/' | replace: '~modules/', '../../modules/' %}
 {% if path == "/frontend/entrypoints/main.css" or path == "main.css" %}
-  {{ 'main.9581e0a5.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
+  {{ 'main.95ff6fc7.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
 {% elsif path == "/frontend/entrypoints/main.js" or path == "main.js" %}
   <script src="{{ 'main.46ec7334.js' | asset_url | split: '?' | first }}" type="module" crossorigin="anonymous"></script>
 {% endif %}