Initial commit

frontend/src/lib/components/pagebuilder/blocks/Step.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import MedialibImage from "../../widgets/MedialibImage.svelte"
+
+    export let item: {
+        image: string
+        title: string
+        descriptions: string[]
+    }
+    export let i: number
+    export let isMobile: boolean
+</script>
+
+<li>
+    <div class="image-wrapper">
+        <MedialibImage id="{item.image}" />
+        <h3>
+            {i + 1}
+        </h3>
+    </div>
+    <div class="content">
+        <div class="title-row">
+            <h4>
+                {item.title}
+            </h4>
+
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="{isMobile ? 58 : 72}"
+                height="{isMobile ? 58 : 72}"
+                viewBox="0 0 {isMobile ? 58 : 72} {isMobile ? 58 : 72}"
+                fill="none"
+            >
+                <path
+                    d="M0 {isMobile ? 58 : 72}V0L{isMobile ? 58 : 72} {isMobile ? 58 : 72}H0Z"
+                    fill="#EB5757"></path>
+            </svg>
+        </div>
+        <div class="descriptions">
+            <ul>
+                {#each item.descriptions as description}
+                    <li>
+                        {description}
+                    </li>
+                {/each}
+            </ul>
+        </div>
+    </div>
+</li>