updated front page layout

resources/js/components/SMArticleCard.vue

@@ -0,0 +1,79 @@
+<template>
+    <router-link
+        :to="{ name: 'article', params: { slug: props.article.slug } }"
+        class="article-card">
+        <div
+            class="thumbnail"
+            :style="{
+                backgroundImage: `url(${mediaGetVariantUrl(
+                    props.article.hero,
+                    'medium'
+                )})`,
+            }"></div>
+        <div class="info">
+            {{ props.article.user.display_name }} -
+            {{ computedDate(props.article.publish_at) }}
+        </div>
+        <h3 class="title">{{ props.article.title }}</h3>
+        <p class="content">
+            {{ excerpt(props.article.content) }}
+        </p>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import { Article } from "../helpers/api.types";
+import { SMDate } from "../helpers/datetime";
+import { mediaGetVariantUrl } from "../helpers/media";
+import { excerpt } from "../helpers/string";
+
+const props = defineProps({
+    article: {
+        type: Object as () => Article,
+        required: true,
+    },
+});
+
+const computedDate = (date) => {
+    return new SMDate(date, { format: "yMd" }).format("d MMMM yyyy");
+};
+</script>
+
+<style lang="scss">
+a.article-card {
+    text-decoration: none;
+    color: var(--card-color-text);
+    margin-bottom: 48px;
+
+    &:hover {
+        filter: none;
+
+        .thumbnail {
+            filter: brightness(115%);
+        }
+    }
+
+    .thumbnail {
+        aspect-ratio: 16 / 9;
+        border-radius: 7px;
+        background-position: center;
+        background-size: cover;
+        background-color: var(--card-color);
+        box-shadow: var(--base-shadow);
+        margin-bottom: 24px;
+    }
+
+    .info {
+        font-size: 80%;
+    }
+
+    .title {
+        margin: 16px 0;
+        word-break: break-word;
+    }
+
+    .content {
+        font-size: 90%;
+    }
+}
+</style>

resources/js/components/SMEventCard.vue

@@ -0,0 +1,309 @@
+<template>
+    <router-link
+        class="event-card"
+        :to="{ name: 'event', params: { id: props.event.id } }">
+        <div
+            class="thumbnail"
+            :style="{
+                backgroundImage: `url('${mediaGetVariantUrl(
+                    props.event.hero,
+                    'medium'
+                )}')`,
+            }">
+            <div :class="['banner', computedBanner(props.event)['type']]">
+                {{ computedBanner(props.event)["banner"] }}
+            </div>
+            <div class="date">
+                <div class="day">
+                    {{ formatDateDay(props.event.start_at) }}
+                </div>
+                <div class="month">
+                    {{ formatDateMonth(props.event.start_at) }}
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <h3 class="title">{{ props.event.title }}</h3>
+            <SMRow class="date" no-responsive>
+                <ion-icon name="calendar-outline" class="icon" />
+                <div class="text">{{ computedDate(props.event) }}</div>
+            </SMRow>
+            <SMRow class="location" no-responsive>
+                <ion-icon name="location-outline" class="icon" />
+                <div class="text">
+                    {{ computedLocation(props.event) }}
+                </div>
+            </SMRow>
+            <SMRow class="ages" no-responsive>
+                <ion-icon name="body-outline" class="icon" />
+                <div class="text">
+                    {{ computedAges(props.event.ages) }}
+                </div>
+            </SMRow>
+            <SMRow class="price" no-responsive>
+                <div class="icon">$</div>
+                <div class="text">
+                    {{ computedPrice(props.event.price) }}
+                </div>
+            </SMRow>
+        </div>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import { Event } from "../helpers/api.types";
+import { SMDate } from "../helpers/datetime";
+import { mediaGetVariantUrl } from "../helpers/media";
+
+const props = defineProps({
+    event: {
+        type: Object as () => Event,
+        required: true,
+    },
+});
+
+/**
+ * Return a human readable Date string.
+ *
+ * @param {Event} event The event to convert.
+ * @returns The converted string.
+ */
+const computedDate = (event: Event) => {
+    let str = "";
+
+    if (event.start_at.length > 0) {
+        if (
+            event.end_at.length > 0 &&
+            event.start_at.substring(0, event.start_at.indexOf(" ")) !=
+                event.end_at.substring(0, event.end_at.indexOf(" "))
+        ) {
+            str = new SMDate(event.start_at, { format: "yMd" }).format(
+                "dd/MM/yyyy"
+            );
+            if (event.end_at.length > 0) {
+                str =
+                    str +
+                    " - " +
+                    new SMDate(event.end_at, { format: "yMd" }).format(
+                        "dd/MM/yyyy"
+                    );
+            }
+        } else {
+            str = new SMDate(event.start_at, { format: "yMd" }).format(
+                "dd/MM/yyyy @ h:mm aa"
+            );
+        }
+    }
+
+    return str;
+};
+
+/**
+ * Return a the event starting month day number.
+ *
+ * @param {string} date The date to format.
+ * @returns The converted string.
+ */
+const formatDateDay = (date: string) => {
+    return new SMDate(date, { format: "yMd" }).format("dd");
+};
+
+/**
+ * Return a the event starting month name.
+ *
+ * @param {string} date The date to format.
+ * @returns The converted string.
+ */
+const formatDateMonth = (date: string) => {
+    return new SMDate(date, { format: "yMd" }).format("MMM");
+};
+
+/**
+ * Return a human readable Location string.
+ *
+ * @param {Event} event The event to convert.
+ * @returns The converted string.
+ */
+const computedLocation = (event: Event): string => {
+    if (event.location == "online") {
+        return "Online";
+    }
+
+    return event.address;
+};
+
+/**
+ * Return a human readable Ages string.
+ *
+ * @param {string} ages The string to convert.
+ * @returns The converted string.
+ */
+const computedAges = (ages: string): string => {
+    const trimmed = ages.trim();
+    const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/;
+
+    if (trimmed.length === 0) {
+        return "All ages";
+    }
+
+    if (regex.test(trimmed)) {
+        return `Ages ${trimmed}`;
+    }
+
+    return ages;
+};
+
+/**
+ * Return a human readable Price string.
+ *
+ * @param {string} price The string to convert.
+ * @returns The converted string.
+ */
+const computedPrice = (price: string): string => {
+    const trimmed = parseInt(price.trim());
+    if (isNaN(trimmed) || trimmed == 0) {
+        return "Free";
+    }
+
+    return trimmed.toString();
+};
+
+type EventBanner = {
+    banner: string;
+    type: string;
+};
+
+const computedBanner = (event: Event): EventBanner => {
+    const parsedEndAt = new SMDate(event.end_at, {
+        format: "yyyy-MM-dd HH:mm:ss",
+        utc: true,
+    });
+
+    if (
+        (parsedEndAt.isBefore(new SMDate("now")) &&
+            (event.status == "open" || event.status == "soon")) ||
+        event.status == "closed"
+    ) {
+        return {
+            banner: "closed",
+            type: "expired",
+        };
+    } else if (event.status == "open") {
+        return {
+            banner: "open",
+            type: "success",
+        };
+    } else if (event.status == "cancelled") {
+        return {
+            banner: "cancelled",
+            type: "danger",
+        };
+    }
+
+    return {
+        banner: "Open Soon",
+        type: "warning",
+    };
+};
+</script>
+
+<style lang="scss">
+a.event-card {
+    background-color: var(--base-color-light);
+    box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    text-decoration: none;
+    color: var(--base-color-text);
+    position: relative;
+    overflow: hidden;
+
+    .thumbnail {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border-radius: 8px 8px 0 0;
+
+        .banner {
+            position: absolute;
+            background-color: var(--banner-green-color);
+            font-size: 70%;
+            font-weight: 700;
+            color: var(--banner-green-color-text);
+            padding: 6px 18px;
+            text-align: center;
+            top: 10px;
+            right: 10px;
+            text-transform: uppercase;
+
+            &.expired {
+                background-color: var(--banner-purple-color);
+                color: var(--banner-purple-color-text);
+            }
+
+            &.danger {
+                background-color: var(--banner-red-color);
+                color: var(--banner-red-color-text);
+            }
+
+            &.warning {
+                background-color: var(--banner-yellow-color);
+                color: var(--banner-yellow-color-text);
+            }
+        }
+
+        .date {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background-color: var(--base-color);
+            box-shadow: var(--base-shadow);
+            padding: 8px 12px;
+            text-align: center;
+            border-radius: 2px;
+
+            .day {
+                font-weight: 700;
+                padding: 1px;
+            }
+
+            .month {
+                font-size: 65%;
+                text-transform: uppercase;
+            }
+        }
+    }
+
+    .content {
+        padding: 16px;
+    }
+
+    .title {
+        margin: 0 0 16px 0;
+        font-size: 100%;
+        word-break: break-all;
+    }
+
+    .row {
+        display: flex;
+        margin-bottom: 8px;
+        font-size: 80%;
+
+        .icon {
+            width: 20px;
+            text-align: center;
+            margin-right: 8px;
+        }
+    }
+
+    &:hover {
+        cursor: pointer;
+        filter: none;
+
+        .image {
+            filter: brightness(115%);
+        }
+    }
+}
+</style>

resources/js/components/SMHero.vue

@@ -5,33 +5,28 @@
             <div class="hero-background" :style="heroStyles"></div>
             <SMContainer class="align-items-start">
                 <div class="hero-content">
-                    <h1>{{ heroTitle }}</h1>
+                    <h1>{{ props.title }}</h1>
-                    <p>{{ heroExcerpt }}</p>
+                    <p>{{ props.excerpt }}</p>
                     <div class="hero-buttons">
                         <SMButton
                             v-if="loaded"
                             type="primary"
-                            :to="{
+                            :to="props.to"
-                                name: 'article',
+                            :label="props.more" />
-                                params: { slug: heroSlug },
-                            }"
-                            label="Read More" />
                     </div>
                 </div>
             </SMContainer>
             <div class="hero-caption">
-                <router-link
+                <router-link v-if="loaded" :to="props.to">{{
-                    v-if="loaded"
+                    props.imageTitle
-                    :to="{ name: 'article', params: { slug: heroSlug } }"
+                }}</router-link>
-                    >{{ heroImageTitle }}</router-link
-                >
             </div>
         </template>
     </section>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { api, getApiResultData } from "../helpers/api";
 import { ArticleCollection } from "../helpers/api.types";
 import { mediaGetVariantUrl } from "../helpers/media";
@@ -39,12 +34,35 @@ import { excerpt } from "../helpers/string";
 import SMButton from "./SMButton.vue";
 import SMLoading from "./SMLoading.vue";
 
+const props = defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    excerpt: {
+        type: String,
+        required: true,
+    },
+    imageUrl: {
+        type: String,
+        required: true,
+    },
+    imageTitle: {
+        type: String,
+        required: true,
+    },
+    to: {
+        type: Object,
+        required: true,
+    },
+    more: {
+        type: String,
+        default: "Read More",
+        required: false,
+    },
+});
+
 const loaded = ref(false);
-let heroTitle = ref("");
-let heroExcerpt = ref("");
-let heroImageUrl = ref("");
-let heroImageTitle = "";
-let heroSlug = ref("");
 const translateY = ref(0);
 const heroStyles = ref({
     backgroundImage: "none",
@@ -60,6 +78,18 @@ watch(translateY, () => {
     heroStyles.value.transform = `translateY(${translateY.value}px)`;
 });
 
+const updateImageUrl = (url: string) => {
+    heroStyles.value.backgroundImage = `linear-gradient(to right, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)),url('${url}')`;
+    loaded.value = true;
+};
+
+watch(
+    () => props.imageUrl,
+    () => {
+        updateImageUrl(props.imageUrl);
+    }
+);
+
 onMounted(() => {
     window.addEventListener("scroll", handleScroll);
 });
@@ -68,44 +98,9 @@ onBeforeUnmount(() => {
     window.removeEventListener("scroll", handleScroll);
 });
 
-const handleLoad = async () => {
+if (props.imageUrl && props.imageUrl !== "") {
-    try {
+    updateImageUrl(props.imageUrl);
-        let articlesResult = await api.get({
+}
-            url: "/articles",
-            params: {
-                limit: 3,
-            },
-        });
-
-        const articlesData =
-            getApiResultData<ArticleCollection>(articlesResult);
-
-        if (articlesData && articlesData.articles) {
-            const randomIndex = Math.floor(
-                Math.random() * articlesData.articles.length
-            );
-            heroTitle.value = articlesData.articles[randomIndex].title;
-            heroExcerpt.value = excerpt(
-                articlesData.articles[randomIndex].content,
-                200
-            );
-            heroImageUrl.value = mediaGetVariantUrl(
-                articlesData.articles[randomIndex].hero,
-                "large"
-            );
-            heroImageTitle = articlesData.articles[randomIndex].hero.title;
-            heroSlug.value = articlesData.articles[randomIndex].slug;
-
-            heroStyles.value.backgroundImage = `linear-gradient(to right, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)),url('${heroImageUrl.value}')`;
-
-            loaded.value = true;
-        }
-    } catch {
-        // empty
-    }
-};
-
-handleLoad();
 </script>
 
 <style lang="scss">

resources/js/views/Blog.vue

@@ -24,28 +24,10 @@
                 :total="articlesTotal"
                 :per-page="articlesPerPage" />
             <div class="articles">
-                <router-link
+                <SMArticleCard
-                    :to="{ name: 'article', params: { slug: article.slug } }"
+                    v-for="(article, index) in articles"
-                    class="article-card"
+                    :key="index"
-                    v-for="(article, idx) in articles"
+                    :article="article" />
-                    :key="idx">
-                    <div
-                        class="thumbnail"
-                        :style="{
-                            backgroundImage: `url(${mediaGetVariantUrl(
-                                article.hero,
-                                'medium'
-                            )})`,
-                        }"></div>
-                    <div class="info">
-                        {{ article.user.display_name }} -
-                        {{ computedDate(article.publish_at) }}
-                    </div>
-                    <h3 class="title">{{ article.title }}</h3>
-                    <p class="content">
-                        {{ excerpt(article.content) }}
-                    </p>
-                </router-link>
             </div>
         </template>
     </SMContainer>
@@ -57,13 +39,12 @@ import SMPagination from "../components/SMPagination.vue";
 import { api } from "../helpers/api";
 import { Article, ArticleCollection } from "../helpers/api.types";
 import { SMDate } from "../helpers/datetime";
-import { mediaGetVariantUrl } from "../helpers/media";
 import SMMastHead from "../components/SMMastHead.vue";
 import SMInput from "../components/SMInput.vue";
 import SMButton from "../components/SMButton.vue";
-import { excerpt } from "../helpers/string";
 import SMLoading from "../components/SMLoading.vue";
 import SMNoItems from "../components/SMNoItems.vue";
+import SMArticleCard from "../components/SMArticleCard.vue";
 
 const message = ref("");
 const pageLoading = ref(true);
@@ -127,10 +108,6 @@ const handleLoad = () => {
         });
 };
 
-const computedDate = (date) => {
-    return new SMDate(date, { format: "yMd" }).format("d MMMM yyyy");
-};
-
 watch(
     () => articlesPage.value,
     () => {
@@ -147,43 +124,6 @@ handleLoad();
         display: grid;
         grid-template-columns: 1fr;
         gap: 30px;
-
-        .article-card {
-            text-decoration: none;
-            color: var(--card-color-text);
-            margin-bottom: 48px;
-
-            &:hover {
-                filter: none;
-
-                .thumbnail {
-                    filter: brightness(115%);
-                }
-            }
-
-            .thumbnail {
-                aspect-ratio: 16 / 9;
-                border-radius: 7px;
-                background-position: center;
-                background-size: cover;
-                background-color: var(--card-color);
-                box-shadow: var(--base-shadow);
-                margin-bottom: 24px;
-            }
-
-            .info {
-                font-size: 80%;
-            }
-
-            .title {
-                margin: 16px 0;
-                word-break: break-word;
-            }
-
-            .content {
-                font-size: 90%;
-            }
-        }
     }
 }
 

resources/js/views/Home.vue

@@ -1,5 +1,11 @@
 <template>
-    <SMHero class="hero-offset" />
+    <SMHero
+        class="hero-offset"
+        :title="heroTitle"
+        :excerpt="heroExcerpt"
+        :image-url="heroImageUrl"
+        :image-title="heroImageTitle"
+        :to="heroTo" />
 
     <SMContainer class="about align-items-center">
         <template #inner>
@@ -23,11 +29,25 @@
             </p>
         </template>
     </SMContainer>
+    <SMContainer class="upcoming align-items-center">
+        <h2>Upcoming Workshops</h2>
+        <div class="events">
+            <SMEventCard
+                v-for="event in events"
+                :event="event"
+                :key="event.id" />
+        </div>
+    </SMContainer>
     <SMContainer class="workshops align-items-center">
         <template #inner>
             <SMRow>
-                <SMColumn class="align-items-center flex-basis-55">
+                <SMColumn
-                    <h2>Build skills while having a great time</h2>
+                    ><h2>Build skills while having a great time</h2></SMColumn
+                >
+            </SMRow>
+            <SMRow class="align-items-stretch">
+                <SMColumn
+                    class="align-items-center justify-content-center flex-basis-55">
                     <p>
                         Our online and in-person workshops are filled with
                         engaging and exciting activities that kids will love.
@@ -45,6 +65,15 @@
             </SMRow>
         </template>
     </SMContainer>
+    <SMContainer class="latest-articles align-items-center">
+        <h2>Latest Posts</h2>
+        <div class="articles">
+            <SMArticleCard
+                v-for="(article, index) in articles"
+                :key="index"
+                :article="article" />
+        </div>
+    </SMContainer>
     <SMContainer full class="minecraft">
         <SMContainer>
             <h2>Play Minecraft with us</h2>
@@ -110,8 +139,101 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import SMButton from "../components/SMButton.vue";
 import SMHero from "../components/SMHero.vue";
+import { api, getApiResultData } from "../helpers/api";
+import { ArticleCollection, EventCollection } from "../helpers/api.types";
+import { excerpt } from "../helpers/string";
+import { mediaGetVariantUrl } from "../helpers/media";
+import { SMDate } from "../helpers/datetime";
+import SMEventCard from "../components/SMEventCard.vue";
+import SMArticleCard from "../components/SMArticleCard.vue";
+
+const articles = ref([]);
+const events = ref([]);
+
+const heroTitle = ref("");
+const heroExcerpt = ref("");
+const heroImageUrl = ref("");
+const heroImageTitle = ref("");
+const heroTo = ref({});
+
+const computedDate = (date) => {
+    return new SMDate(date, { format: "yMd" }).format("d MMMM yyyy");
+};
+
+const handleLoad = async () => {
+    try {
+        await Promise.all([
+            api
+                .get({
+                    url: "/articles",
+                    params: {
+                        limit: 5,
+                    },
+                })
+                .then((articlesResult) => {
+                    const articlesData =
+                        getApiResultData<ArticleCollection>(articlesResult);
+
+                    if (articlesData && articlesData.articles) {
+                        const randomIndex = 1;
+                        // Math.floor(
+                        //     Math.random() * articlesData.articles.length
+                        // );
+
+                        heroTitle.value =
+                            articlesData.articles[randomIndex].title;
+                        heroExcerpt.value = excerpt(
+                            articlesData.articles[randomIndex].content,
+                            200
+                        );
+                        heroImageUrl.value = mediaGetVariantUrl(
+                            articlesData.articles[randomIndex].hero,
+                            "large"
+                        );
+                        heroImageTitle.value =
+                            articlesData.articles[randomIndex].hero.title;
+                        heroTo.value = {
+                            name: "article",
+                            params: {
+                                slug: articlesData.articles[randomIndex].slug,
+                            },
+                        };
+
+                        articles.value = articlesData.articles.filter(
+                            (article, index) => index !== randomIndex
+                        );
+                    }
+                }),
+            api
+                .get({
+                    url: "/events",
+                    params: {
+                        limit: 4,
+                        status: "open,soon",
+                        sort: "start_at",
+                        start_at:
+                            ">" +
+                            new SMDate("now").format("yyyy-MM-dd hh:mm:ss"),
+                    },
+                })
+                .then((eventsResult) => {
+                    const eventsData =
+                        getApiResultData<EventCollection>(eventsResult);
+
+                    if (eventsData && eventsData.events) {
+                        events.value = eventsData.events;
+                    }
+                }),
+        ]);
+    } catch {
+        // Handle error
+    }
+};
+
+handleLoad();
 </script>
 
 <style lang="scss">
@@ -139,13 +261,35 @@ import SMHero from "../components/SMHero.vue";
         }
     }
 
+    .upcoming,
+    .latest-articles {
+        h2 {
+            font-size: 250%;
+            margin-bottom: #{calc(var(--header-font-size-2))};
+        }
+
+        .events,
+        .articles {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 30px;
+            width: 100%;
+            max-width: 1200px;
+        }
+    }
+
     .workshops .container-inner {
-        margin: 64px 24px;
+        margin: 64px 32px 32px;
+        padding: 0 90px 64px 90px;
+        background-color: var(--accent-3-color);
+        color: var(--accent-3-color-text);
+        border-radius: 24px;
         max-width: 960px;
 
         h2 {
             font-size: 300%;
             text-align: center;
+            color: var(--accent-3-color-text);
         }
 
         p {
@@ -299,4 +443,35 @@ import SMHero from "../components/SMHero.vue";
         }
     }
 }
+
+@media only screen and (min-width: 512px) {
+    .page-home {
+        .upcoming,
+        .latest-articles {
+            .events,
+            .articles {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 832px) {
+    .page-home {
+        .upcoming,
+        .latest-articles {
+            .events,
+            .articles {
+                grid-template-columns: 1fr 1fr 1fr;
+
+                .event-card,
+                .article-card {
+                    &:nth-child(4) {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
 </style>

resources/js/views/Workshops.vue

@@ -1,5 +1,5 @@
 <template>
-    <SMPage :error="pageError">
+    <SMPage :page-error="pageError">
         <SMMastHead title="Workshops" />
         <SMContainer class="flex-grow-1">
             <SMToolbar class="align-items-start">
@@ -31,57 +31,10 @@
                 v-else-if="events.length == 0"
                 text="No Workshops Found" />
             <div v-else class="events">
-                <router-link
+                <SMEventCard
-                    class="event-card"
                     v-for="event in events"
-                    :key="event.id"
+                    :event="event"
-                    :to="{ name: 'event', params: { id: event.id } }">
+                    :key="event.id" />
-                    <div
-                        class="thumbnail"
-                        :style="{
-                            backgroundImage: `url('${mediaGetVariantUrl(
-                                event.hero,
-                                'medium'
-                            )}')`,
-                        }">
-                        <div :class="['banner', event['bannerType']]">
-                            {{ event["banner"] }}
-                        </div>
-                        <div class="date">
-                            <div class="day">
-                                {{ formatDateDay(event.start_at) }}
-                            </div>
-                            <div class="month">
-                                {{ formatDateMonth(event.start_at) }}
-                            </div>
-                        </div>
-                    </div>
-                    <div class="content">
-                        <h3 class="title">{{ event.title }}</h3>
-                        <SMRow class="date" no-responsive>
-                            <ion-icon name="calendar-outline" class="icon" />
-                            <div class="text">{{ computedDate(event) }}</div>
-                        </SMRow>
-                        <SMRow class="location" no-responsive>
-                            <ion-icon name="location-outline" class="icon" />
-                            <div class="text">
-                                {{ computedLocation(event) }}
-                            </div>
-                        </SMRow>
-                        <SMRow class="ages" no-responsive>
-                            <ion-icon name="body-outline" class="icon" />
-                            <div class="text">
-                                {{ computedAges(event.ages) }}
-                            </div>
-                        </SMRow>
-                        <SMRow class="price" no-responsive>
-                            <div class="icon">$</div>
-                            <div class="text">
-                                {{ computedPrice(event.price) }}
-                            </div>
-                        </SMRow>
-                    </div>
-                </router-link>
             </div>
         </SMContainer>
     </SMPage>
@@ -96,11 +49,11 @@ import SMPage from "../components/SMPage.vue";
 import { api } from "../helpers/api";
 import { Event, EventCollection } from "../helpers/api.types";
 import { SMDate } from "../helpers/datetime";
-import { mediaGetVariantUrl } from "../helpers/media";
 import SMMastHead from "../components/SMMastHead.vue";
 import SMContainer from "../components/SMContainer.vue";
 import SMNoItems from "../components/SMNoItems.vue";
 import SMLoading from "../components/SMLoading.vue";
+import SMEventCard from "../components/SMEventCard.vue";
 
 const pageLoading = ref(true);
 let events: Event[] = reactive([]);
@@ -261,112 +214,6 @@ const handleFilter = async () => {
     handleLoad();
 };
 
-/**
- * Return a human readable Date string.
- *
- * @param {Event} event The event to convert.
- * @returns The converted string.
- */
-const computedDate = (event: Event) => {
-    let str = "";
-
-    if (event.start_at.length > 0) {
-        if (
-            event.end_at.length > 0 &&
-            event.start_at.substring(0, event.start_at.indexOf(" ")) !=
-                event.end_at.substring(0, event.end_at.indexOf(" "))
-        ) {
-            str = new SMDate(event.start_at, { format: "yMd" }).format(
-                "dd/MM/yyyy"
-            );
-            if (event.end_at.length > 0) {
-                str =
-                    str +
-                    " - " +
-                    new SMDate(event.end_at, { format: "yMd" }).format(
-                        "dd/MM/yyyy"
-                    );
-            }
-        } else {
-            str = new SMDate(event.start_at, { format: "yMd" }).format(
-                "dd/MM/yyyy @ h:mm aa"
-            );
-        }
-    }
-
-    return str;
-};
-
-/**
- * Return a the event starting month day number.
- *
- * @param {string} date The date to format.
- * @returns The converted string.
- */
-const formatDateDay = (date: string) => {
-    return new SMDate(date, { format: "yMd" }).format("dd");
-};
-
-/**
- * Return a the event starting month name.
- *
- * @param {string} date The date to format.
- * @returns The converted string.
- */
-const formatDateMonth = (date: string) => {
-    return new SMDate(date, { format: "yMd" }).format("MMM");
-};
-
-/**
- * Return a human readable Location string.
- *
- * @param {Event} event The event to convert.
- * @returns The converted string.
- */
-const computedLocation = (event: Event): string => {
-    if (event.location == "online") {
-        return "Online";
-    }
-
-    return event.address;
-};
-
-/**
- * Return a human readable Ages string.
- *
- * @param {string} ages The string to convert.
- * @returns The converted string.
- */
-const computedAges = (ages: string): string => {
-    const trimmed = ages.trim();
-    const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/;
-
-    if (trimmed.length === 0) {
-        return "All ages";
-    }
-
-    if (regex.test(trimmed)) {
-        return `Ages ${trimmed}`;
-    }
-
-    return ages;
-};
-
-/**
- * Return a human readable Price string.
- *
- * @param {string} price The string to convert.
- * @returns The converted string.
- */
-const computedPrice = (price: string): string => {
-    const trimmed = parseInt(price.trim());
-    if (isNaN(trimmed) || trimmed == 0) {
-        return "Free";
-    }
-
-    return trimmed.toString();
-};
-
 watch(
     () => postsPage.value,
     () => {
@@ -384,105 +231,6 @@ handleLoad();
         grid-template-columns: 1fr;
         gap: 30px;
         width: 100%;
-
-        .event-card {
-            background-color: var(--base-color-light);
-            box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.25);
-            border-radius: 8px;
-            text-decoration: none;
-            color: var(--base-color-text);
-            position: relative;
-            overflow: hidden;
-
-            .thumbnail {
-                width: 100%;
-                aspect-ratio: 16 / 9;
-                background-position: center;
-                background-repeat: no-repeat;
-                background-size: cover;
-                border-radius: 8px 8px 0 0;
-
-                .banner {
-                    position: absolute;
-                    background-color: var(--banner-green-color);
-                    font-size: 70%;
-                    font-weight: 700;
-                    color: var(--banner-green-color-text);
-                    padding: 6px 18px;
-                    text-align: center;
-                    top: 10px;
-                    right: 10px;
-                    text-transform: uppercase;
-
-                    &.expired {
-                        background-color: var(--banner-purple-color);
-                        color: var(--banner-purple-color-text);
-                    }
-
-                    &.danger {
-                        background-color: var(--banner-red-color);
-                        color: var(--banner-red-color-text);
-                    }
-
-                    &.warning {
-                        background-color: var(--banner-yellow-color);
-                        color: var(--banner-yellow-color-text);
-                    }
-                }
-
-                .date {
-                    position: absolute;
-                    top: 10px;
-                    left: 10px;
-                    background-color: var(--base-color);
-                    box-shadow: var(--base-shadow);
-                    padding: 8px 12px;
-                    text-align: center;
-                    border-radius: 2px;
-
-                    .day {
-                        font-weight: 700;
-                        padding: 1px;
-                    }
-
-                    .month {
-                        font-size: 65%;
-                        text-transform: uppercase;
-                    }
-                }
-            }
-
-            .content {
-                padding: 16px;
-            }
-
-            .title {
-                margin: 0 0 16px 0;
-                font-size: 100%;
-                word-break: break-all;
-            }
-
-            .row {
-                display: flex;
-                margin-bottom: 8px;
-                font-size: 80%;
-
-                .icon {
-                    width: 20px;
-                    text-align: center;
-                    margin-right: 8px;
-                }
-            }
-
-            &:hover {
-                cursor: pointer;
-                filter: none;
-
-                .image {
-                    filter: brightness(115%);
-                }
-            }
-        }
     }
 }