[#45] Adds Page Hero block

vigetlabs · Dec 18, 2024 · 13ffaad · 13ffaad
1 parent 6dd0030
commit 13ffaad
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 7 deletions.
diff --git a/config/project/entryTypes/pageHero--27f19bae-64f8-47b8-9fc9-7552e11e2656.yaml b/config/project/entryTypes/pageHero--27f19bae-64f8-47b8-9fc9-7552e11e2656.yaml
@@ -0,0 +1,83 @@
+color: null
+fieldLayouts:
+  4fea0032-240b-4dbe-b1b6-a467326f5323:
+    tabs:
+      -
+        elementCondition: null
+        elements:
+          -
+            autocapitalize: true
+            autocomplete: false
+            autocorrect: true
+            class: null
+            dateAdded: '2024-10-01T13:27:07+00:00'
+            disabled: false
+            elementCondition: null
+            id: null
+            includeInCards: false
+            inputType: null
+            instructions: null
+            label: null
+            max: null
+            min: null
+            name: null
+            orientation: null
+            placeholder: null
+            providesThumbs: false
+            readonly: false
+            requirable: false
+            size: null
+            step: null
+            tip: null
+            title: null
+            type: craft\fieldlayoutelements\entries\EntryTitleField
+            uid: 77b77d44-0b65-428f-ba8f-f078760a3ff8
+            userCondition: null
+            warning: null
+            width: 100
+          -
+            dateAdded: '2024-10-01T13:31:02+00:00'
+            elementCondition: null
+            fieldUid: c52a9170-652b-4d92-a226-69894b1822ed # Rich Text: Simple
+            handle: null
+            includeInCards: false
+            instructions: null
+            label: Description
+            providesThumbs: false
+            required: false
+            tip: null
+            type: craft\fieldlayoutelements\CustomField
+            uid: dcf0db81-9675-40bc-ae62-5f69274da598
+            userCondition: null
+            warning: null
+            width: 100
+          -
+            dateAdded: '2024-10-01T13:31:02+00:00'
+            elementCondition: null
+            fieldUid: 570fb481-ad97-46db-8bad-f7b0fd90e831 # Image
+            handle: null
+            includeInCards: false
+            instructions: null
+            label: null
+            providesThumbs: false
+            required: false
+            tip: null
+            type: craft\fieldlayoutelements\CustomField
+            uid: 252b484d-2307-4e74-b167-a3c63074ae10
+            userCondition: null
+            warning: null
+            width: 100
+        name: Content
+        uid: 232fbbf7-98ae-45f0-992d-e4597db12aad
+        userCondition: null
+handle: pageHero
+hasTitleField: true
+icon: subtitles
+name: 'Page Hero'
+showSlugField: false
+showStatusField: true
+slugTranslationKeyFormat: null
+slugTranslationMethod: site
+titleFormat: ''
+titleTranslationKeyFormat: null
+titleTranslationMethod: site
diff --git a/config/project/fields/pageBlocks--7bd21dd3-6b12-4163-8432-030ea6a3f8d3.yaml b/config/project/fields/pageBlocks--7bd21dd3-6b12-4163-8432-030ea6a3f8d3.yaml
@@ -10,6 +10,7 @@ settings:
     - 7ced3e9d-9b54-47f6-8103-e5c3a4fbaf9c # Card Grid
     - 3bcf7ddb-71e7-4115-868c-815b3611b34c # Text With Media
     - 534ccdd8-7abd-4300-a102-71885b21c126 # Call To Action
+    - 27f19bae-64f8-47b8-9fc9-7552e11e2656 # Page Hero
   includeTableView: false
   maxEntries: null
   minEntries: null

diff --git a/config/project/project.yaml b/config/project/project.yaml
@@ -1,4 +1,4 @@
-dateModified: 1727788818
+dateModified: 1727789465
 email:
   fromEmail: $SYSTEM_EMAIL_FROM
   fromName: 'Viget Craft Starter'
@@ -29,6 +29,7 @@ meta:
     7ced3e9d-9b54-47f6-8103-e5c3a4fbaf9c: 'Card Grid' # Card Grid
     7d418368-91eb-4c64-8f5b-94c62cd62359: 'Image Card' # Image Card
     0011a64a-91b6-4aa3-98e6-be048394a2cf: Icon # Icon
+    27f19bae-64f8-47b8-9fc9-7552e11e2656: 'Page Hero' # Page Hero
     35b563a0-4662-40b9-b885-a8450a2868d9: 'Viget Craft Starter' # Viget Craft Starter
     55cc26b6-8b49-47de-bbe7-5908da6f4545: 'Video Url' # Video Url
     69fe4c18-21c9-4a3d-8fce-9988d3f741e4: Link # Link

diff --git a/templates/_blocks/_pageHero.twig b/templates/_blocks/_pageHero.twig
@@ -0,0 +1,8 @@
+{# @var \craft\elements\Entry|null block #}
+{% set block = block ?? null %}
+
+{{ include('_components/page-hero.twig', {
+  image: block.image.eagerly().one(),
+  title: block.title,
+  description: block.richTextSimple,
+}) }}
diff --git a/templates/_blocks/_richText.twig b/templates/_blocks/_richText.twig
@@ -1,6 +1,6 @@
 {# @var \craft\elements\Entry block #}
 {% set block = block ?? null %}
 
-<div class="max-w-content px-16 mx-auto">
+<div class="max-w-content px-16 mx-auto sm:px-32">
   {{ block.richText }}
 </div>
diff --git a/templates/_components/call-to-action.twig b/templates/_components/call-to-action.twig
@@ -13,8 +13,8 @@
 {# @var boolean|null newWindow #}
 {% set newWindow = newWindow ?? null %}
 
-<div class="bg-neutral-100 py-48">
-  <div class="flex flex-col items-center gap-24 max-w-content px-16 mx-auto ">
+<div class="bg-neutral-200 py-48">
+  <div class="flex flex-col items-center gap-24 max-w-content px-16 mx-auto sm:px-32">
     {% if title %}
       <h2 class="text-xl">{{ title }}</h2>
     {% endif %}

diff --git a/templates/_components/page-hero.twig b/templates/_components/page-hero.twig
@@ -0,0 +1,32 @@
+{# @var string|null title #}
+{% set title = title ?? null %}
+
+{# @var string|null description #}
+{% set description = description ?? null %}
+
+{# @var \craft\elements\Asset|null image #}
+{% set image = image ?? null %}
+
+<div class="bg-neutral-100 py-48">
+  <div class="max-w-content px-16 mx-auto grid items-center gap-24 sm:grid-cols-2 sm:px-32 lg:gap-48 lg:grid-cols-5">
+    <div class="flex flex-col gap-24 max-w-[640px] lg:col-span-3">
+      {% if title %}
+        <h1 class="text-xl font-semibold">{{ title }}</h1>
+      {% endif %}
+
+      {% if description %}
+        <div>{{ description }}</div>
+      {% endif %}
+    </div>
+
+    {{ image ? include('_components/image.twig', {
+      class: 'lg:col-span-2',
+      image,
+      ratio: 4/3,
+      sizes: {
+        default: '100vw',
+        sm: '50vw',
+      }
+    }) }}
+  </div>
+</div>
diff --git a/templates/_elements/home.twig b/templates/_elements/home.twig
@@ -1,8 +1,6 @@
 {% extends '_layouts/base.twig' %}
 
 {% block content %}
-  <h1 class="text-xl">Home</h1>
-
   {{ include("_blocks/index.twig", {
     blocks: entry.pageBlocks,
   }) }}
@@ -12,5 +10,4 @@
       block,
     }) }}
   {% endfor %}
-
 {% endblock %}
diff --git a/templates/parts-kit/page-hero/default.twig b/templates/parts-kit/page-hero/default.twig
@@ -0,0 +1,9 @@
+{% extends 'viget-parts-kit/layout.twig' %}
+
+{% block main %}
+  {{ include('_components/page-hero.twig', {
+    image: craft.assets.one(),
+    title: 'Lorem ipsum dolor sit amet',
+    description: 'Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.',
+  }) }}
+{% endblock %}