Feature/hero-module

assets/manifest.json

@@ -52,8 +52,12 @@
   "_preact.4b3dbaf5.js": {
     "file": "preact.4b3dbaf5.js"
   },
+  "assets\/hero.jpg": {
+    "file": "hero.57885bfa.jpg",
+    "src": "assets\/hero.jpg"
+  },
   "frontend\/entrypoints\/main.css": {
-    "file": "main.9581e0a5.css",
+    "file": "main.c3707dad.css",
     "isEntry": true,
     "src": "frontend\/entrypoints\/main.css"
   },

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,37 @@
-.featured-post {}
+.featured-post__container {
+    @media(--ml) {
+        height: 400px !important;
+    }
+    height: 700px;
+    background-color: var(--mongoose);
+    .featured-post {
+        @media(--ml) {
+            flex-direction: row !important;
+        }
+        flex-direction: column;
+        background-color: var(--white);
+        .featured-post__image-container, .featured-post____meta-container {
+            @media(--ml) {
+                width: 50%;
+            }
+            width: 100%;
+            .featured-post____meta {
+                max-width: 80%;
+            }
+            max-height: var(--xs);
+            img {
+                max-height: var(--xs);
+                @media(--ml) {
+                    height: auto !important;
+                }
+                height: 400px;
+                object-fit: cover;
+                margin-bottom: -7.5px;
+            }
+        }
+        width: 80%;
+        left: 50%;
+        bottom: 100px;
+        transform: translate(-50%, 0);
+    }
+}

modules/hero/hero.css

@@ -1 +1,37 @@
-.hero {}
+.hero {
+    flex-direction: column;
+    @media (--ml) {
+        flex-direction: row;
+    }
+    background-image: url('/assets/hero.jpg');
+    background-size: cover;
+    .hero__tagline-container {
+        @media (--ml) {
+            width: 50%;
+        }
+        padding: 15px;
+        .hero__tagline {
+            @media (--ml) {
+                margin-top: -300px;
+                text-align: left !important;
+            }
+            justify-content: center;
+            text-align: center;
+            width: var(--xxs);
+            .hero__title {
+                font-size: 3.5em;
+            }
+        }
+    }
+    .hero__bottle-image-container {
+        @media (--ml) {
+            width: 50%;
+        }
+        .hero__bottle-image {
+            @media (--ml) {
+                max-width: 400px;
+            }
+            width: 60%;
+        };
+    }
+}

snippets/featured-post.liquid

@@ -0,0 +1,28 @@
+<div class="featured-post__container full-w rel">
+    <div class="featured-post 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-post__image-container full-w">
+            <img class="featured-post__image w-full"
+                src="{{ article.image | img_url: '300x278', crop: 'center' }}"
+                srcset="{{ srcset }}"
+                sizes="auto"
+                width="100%"
+                alt="{{ article.title }}"
+            >
+        </div>
+        <div class="featured-post____meta-container f jcc">
+            <div class="featured-post____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/hero.liquid

@@ -0,0 +1,11 @@
+<div class="hero rel fill-w f">
+    <div class="hero__tagline-container f jcc aic">
+        <div class="hero__tagline">
+            <h1 class="hero__title white bold">{{'homepage.sections.hero.title_l1' | t}} <br> {{'homepage.sections.hero.title_l2' | t}}</h1>
+            <p class="hero__text white">{{'homepage.sections.hero.text' | t}}</p>
+        </div>
+    </div>
+    <div class="hero__bottle-image-container pt2 f jcc">
+        <img class="hero__bottle-image" src="{{ 'KnobCreek.png' | asset_url }}" alt="{{ shop.name }}"/>
+    </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.c3707dad.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 %}