feat-add an independent page for sponsors

i18n/about/sponsor.i18n.js

@@ -0,0 +1,18 @@
+import { genI18nMessages } from '~/utils/i18n.utils'
+
+export default genI18nMessages({
+    'en-us': {
+        title: 'Sponsor',
+        og: {
+            title: 'Sponsor',
+            description: 'Sponsor of PyCon APAC 2023',
+        },
+    },
+    'zh-hant': {
+        title: '贊助夥伴',
+        og: {
+            title: '贊助夥伴',
+            description: 'PyCon APAC 2023 贊助夥伴',
+        },
+    },
+})

layouts/ccip.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="default-layout">
+        <div class="default-layout__body">
+            <Nuxt />
+            <core-footer />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {},
+    data() {
+        return {}
+    },
+    head() {
+        return {}
+    },
+}
+</script>
+
+<style>
+html {
+    @apply bg-black-900 font-sans text-primary-100;
+    font-size: 20px;
+    word-spacing: 1px;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.default-layout__body {
+    display: grid;
+    grid-template-columns: 100%;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
+
+.page-enter-active,
+.page-leave-active {
+    transition: 0.3s;
+}
+.page-enter,
+.page-leave-to {
+    opacity: 0;
+}
+</style>

pages/about/sponsor.vue

@@ -0,0 +1,97 @@
+<template>
+    <i18n-page-wrapper>
+        <core-h1 :title="$t('title')"></core-h1>
+        <div>
+            <div
+                v-if="showIndexSponsorSection"
+                id="sponsor"
+                class="lg:w-full; pt-12 lg:mx-auto"
+            >
+                <sponsor-card-collection
+                    v-for="(leveledSponsors, i) in sponsorsData"
+                    :key="`index_sponsor_level_${i}`"
+                    v-slot="slotProps"
+                    :level-name="leveledSponsors.level_name"
+                >
+                    <sponsor-card
+                        v-for="(sponsor, j) in leveledSponsors.sponsors"
+                        :key="`index_sponsor_level_${i}_sponsor_${j}`"
+                        :class="slotProps.className"
+                        :sponsor-name="sponsor.name_en_us"
+                        :logo-url="sponsor.logo_url"
+                        :tag="getAttributeByLocale(sponsor, 'subtitle')"
+                        @click.native="showModal(sponsor)"
+                    >
+                    </sponsor-card>
+                </sponsor-card-collection>
+            </div>
+        </div>
+        <transition name="fade">
+            <modal
+                v-if="isOpened"
+                v-model="isOpened"
+                :img-urls="selectedSponsor.logo_url"
+                :img-bg="true"
+                :name="getAttributeByLocale(selectedSponsor, 'name')"
+                :intro="getAttributeByLocale(selectedSponsor, 'intro')"
+                :website-url="selectedSponsor.website_url"
+            />
+        </transition>
+    </i18n-page-wrapper>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
+import CoreH1 from '@/components/core/titles/H1'
+import i18n from '@/i18n/about/sponsor.i18n'
+import SponsorCard from '@/components/sponsors/SponsorCard'
+import SponsorCardCollection from '@/components/sponsors/SponsorCardCollection'
+
+export default {
+    layout(context) {
+        const ccip = context.query.ccip // to determine if it's opass mobile app
+        return ccip ? 'ccip' : 'default'
+    },
+    i18n,
+    name: 'PageSponsor',
+    components: {
+        I18nPageWrapper,
+        CoreH1,
+        SponsorCard,
+        SponsorCardCollection,
+    },
+    data() {
+        return {
+            isOpened: false,
+            selectedSponsor: {},
+        }
+    },
+    computed: {
+        ...mapState(['sponsorsData']),
+        isBulleted() {
+            if (process.client) {
+                const width = window.innerWidth
+                if (width < 768) {
+                    return false
+                }
+            }
+            return true
+        },
+        showIndexSponsorSection() {
+            return this.$store.state.configs.showIndexSponsorSection
+        },
+    },
+    created() {
+        this.$store.dispatch('$getSponsorsData')
+    },
+    methods: {
+        showModal(sponsor) {
+            this.isOpened = true
+            this.selectedSponsor = sponsor
+        },
+    },
+}
+</script>
+
+<style lang="postcss" scoped></style>