Merge pull request #109 from clubcapra/107-update-sponsors

add new sponsors with  new tiers

src/components/SponsorCarouselComponent.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import emblaCarouselVue from 'embla-carousel-vue';
 import AutoPlay from 'embla-carousel-autoplay';
-import { goldPartners, silverPartners } from '@clubcapra/data/partners';
+import {
+  principalPartners,
+  platinumPartners,
+  goldPartners,
+  silverPartners,
+} from '@clubcapra/data/partners';
 
 const [emblaRef] = emblaCarouselVue({}, [AutoPlay({ delay: 5000 })]);
 </script>
@@ -11,7 +16,12 @@ const [emblaRef] = emblaCarouselVue({}, [AutoPlay({ delay: 5000 })]);
     <div ref="emblaRef" class="relative overflow-hidden">
       <div class="embla__container">
         <div
-          v-for="(sponsor, index) in [...goldPartners, ...silverPartners]"
+          v-for="(sponsor, index) in [
+            ...principalPartners,
+            ...platinumPartners,
+            ...goldPartners,
+            ...silverPartners,
+          ]"
           :key="index"
           class="embla__slide"
         >

src/data/partners.ts

@@ -5,76 +5,161 @@ import EtsTypoGrise from '@clubcapra/assets/media/partners/Logo_ETS_TypoGrise_D_
 import aeets from '@clubcapra/assets/media/partners/aeets.svg';
 import altium from '@clubcapra/assets/media/partners/altium.svg';
 import automatech from '@clubcapra/assets/media/partners/automatech.png';
-import goLabo from '@clubcapra/assets/media/partners/go-labo.png';
 import mtt from '@clubcapra/assets/media/partners/mtt.png';
 import stelpro from '@clubcapra/assets/media/partners/stelpro.png';
 import opnor from '@clubcapra/assets/media/partners/opnor.png';
-import hako from '@clubcapra/assets/media/partners/hako.png';
+import hakko from '@clubcapra/assets/media/partners/hakko.png';
 import monday from '@clubcapra/assets/media/partners/monday.png';
 import odrive from '@clubcapra/assets/media/partners/odrive.png';
+import premierTech from '@clubcapra/assets/media/partners/premier-tech.jpg';
+import schunk from '@clubcapra/assets/media/partners/schunk.png';
+import jaBombardier from '@clubcapra/assets/media/partners/JABombardier.png';
+import systemex from '@clubcapra/assets/media/partners/Systemex.png';
+import anodisationQuebec from '@clubcapra/assets/media/partners/anodisation-quebec.png';
+import prolab from '@clubcapra/assets/media/partners/prolab.png';
+import pcbWay from '@clubcapra/assets/media/partners/pcbWay.png';
+import pretATable from '@clubcapra/assets/media/partners/pret-a-table.avif';
+import aluminerieAlouette from '@clubcapra/assets/media/partners/aluminerie-alouette.png';
+import beonyx from '@clubcapra/assets/media/partners/beonyx.svg';
+import rei from '@clubcapra/assets/media/partners/rei.png';
+import usinageLR from '@clubcapra/assets/media/partners/usinage_LR.svg';
 
 interface Partner {
   name: string;
   img: string;
+  url: string;
 }
 
-export const goldPartners: Partner[] = [
+export const principalPartners: Partner[] = [];
+
+export const platinumPartners: Partner[] = [
   {
     name: 'ETS',
     img: EtsTypoGrise,
+    url: 'https://www.etsmtl.ca',
   },
   {
-    name: 'HalfSerious',
-    img: hsLogoCouleur,
+    name: 'AEETS',
+    img: aeets,
+    url: 'https://www.aeets.com',
   },
   {
-    name: 'Automatech',
-    img: automatech,
+    name: 'Usinage LR',
+    img: usinageLR,
+    url: 'https://www.facebook.com/usinageLRinc',
+  },
+];
+
+export const goldPartners: Partner[] = [
+  {
+    name: 'HalfSerious',
+    img: hsLogoCouleur,
+    url: 'https://www.halfserious.com',
   },
   {
     name: 'IXIASOFT',
     img: ixiasoftMadcapLogoRgbC,
+    url: 'https://www.ixiasoft.com',
+  },
+  {
+    name: 'Premier Tech',
+    img: premierTech,
+    url: 'https://www.premiertech.com',
+  },
+  {
+    name: 'SCHUNK',
+    img: schunk,
+    url: 'https://www.schunk.com',
+  },
+  {
+    name: 'Fondation J. Armand Bombardier',
+    img: jaBombardier,
+    url: 'https://www.fondationbombardier.ca',
   },
 ];
 
 export const silverPartners: Partner[] = [
   {
-    name: 'AEETS',
-    img: aeets,
+    name: 'Automatech Robotik',
+    img: automatech,
+    url: 'https://www.automatechrobotik.com',
   },
   {
     name: 'Altium',
     img: altium,
+    url: 'https://www.altium.com',
   },
   {
     name: 'Stelpro',
     img: stelpro,
+    url: 'https://www.stelpro.com',
   },
   {
-    name: 'OPNOR',
+    name: 'Opnor',
     img: opnor,
+    url: 'https://www.opnor.ca',
+  },
+  {
+    name: 'HAKKO',
+    img: hakko,
+    url: 'https://www.hakko.com',
   },
   {
-    name: 'Hako',
-    img: hako,
+    name: 'ODrive',
+    img: odrive,
+    url: 'https://www.odriverobotics.com',
+  },
+  {
+    name: 'Anodisation Québec',
+    img: anodisationQuebec,
+    url: 'https://www.anodisationquebec.com',
+  },
+  {
+    name: 'Systemex',
+    img: systemex,
+    url: 'https://www.systemex.com',
   },
 ];
 
 export const bronzePartners: Partner[] = [
   {
     name: 'MTT',
     img: mtt,
+    url: 'https://www.mtt136.com',
   },
   {
-    name: 'Go Labo',
-    img: goLabo,
+    name: 'monday.com',
+    img: monday,
+    url: 'https://www.monday.com',
   },
   {
-    name: 'Monday',
-    img: monday,
+    name: 'REI',
+    img: rei,
+    url: 'https://www.reseauei.com',
   },
   {
-    name: 'ODrive',
-    img: odrive,
+    name: 'Beonyx',
+    img: beonyx,
+    url: 'https://www.beonyx.ca',
+  },
+  {
+    name: 'Aluminerie Alouette',
+    img: aluminerieAlouette,
+    url: 'https://www.alouette.com',
+  },
+  {
+    name: 'Prêt à Table',
+    img: pretATable,
+    url: 'https://www.pretatable.ca',
+  },
+  {
+    name: 'PCBWay',
+    img: pcbWay,
+    url: 'https://www.pcbway.com',
+  },
+  {
+    name: 'Prolab',
+    img: prolab,
+    url: 'https://www.prolab-technologies.com',
   },
 ];

src/plugins/i18n.ts

@@ -258,6 +258,14 @@ const rawMessages: Record<string, Record<Lang, string>> = {
     en: 'Partners',
     fr: 'Partenaires',
   },
+  partner_principal: {
+    en: 'Principal Partners',
+    fr: 'Partenaires Principal',
+  },
+  partner_platinum: {
+    en: 'Platinum Partners',
+    fr: 'Partenaires Platine',
+  },
   partner_gold: {
     en: 'Gold Partners',
     fr: 'Partenaires Or',

src/views/PartnersView.vue

@@ -1,49 +1,61 @@
 <script setup lang="ts">
 import {
+  principalPartners,
+  platinumPartners,
   goldPartners,
   silverPartners,
   bronzePartners,
 } from '@clubcapra/data/partners';
+
+const partnersTiers = [
+  {
+    title: 'partner_principal',
+    partners: principalPartners,
+    class: 'md:w-5/12',
+  },
+  {
+    title: 'partner_platinum',
+    partners: platinumPartners,
+    class: 'md:w-5/12',
+  },
+  {
+    title: 'partner_gold',
+    partners: goldPartners,
+    class: 'md:w-4/12 w-2/3',
+  },
+  {
+    title: 'partner_silver',
+    partners: silverPartners,
+    class: 'md:w-3/12 w-1/2',
+  },
+  {
+    title: 'partner_bronze',
+    partners: bronzePartners,
+    class: 'md:w-2/12 w-1/3',
+  },
+];
 </script>
 
 <template>
   <section class="container px-4 mx-auto pt-20">
-    <div class="pt-10">
-      <h2 class="font-bold font-sans text-4xl md:text-5xl text-center">
-        {{ $t('partner_gold') }}
-      </h2>
-      <div
-        class="flex flex-col md:flex-row md:flex-wrap items-center justify-center py-5 gap-4"
-      >
-        <template v-for="(partner, key) in goldPartners" :key="key">
-          <img :src="partner.img" :alt="partner.name" class="md:w-1/3" />
-        </template>
-      </div>
-    </div>
-
-    <div class="pt-10">
-      <h2 class="font-bold font-sans text-4xl md:text-5xl text-center">
-        {{ $t('partner_silver') }}
-      </h2>
-      <div
-        class="flex flex-col md:flex-row md:flex-wrap items-center justify-center py-5 gap-4"
-      >
-        <template v-for="(partner, key) in silverPartners" :key="key">
-          <img :src="partner.img" :alt="partner.name" class="md:w-1/4 w-3/4" />
-        </template>
-      </div>
-    </div>
-    <div class="pt-10 pb-20">
-      <h2 class="font-bold font-sans text-4xl md:text-5xl text-center">
-        {{ $t('partner_bronze') }}
-      </h2>
-      <div
-        class="flex flex-col md:flex-row md:flex-wrap items-center justify-center py-5 gap-4"
-      >
-        <template v-for="(partner, key) in bronzePartners" :key="key">
-          <img :src="partner.img" :alt="partner.name" class="md:w-1/5 w-1/3" />
-        </template>
+    <template v-for="(tier, tierKey) in partnersTiers" :key="tierKey">
+      <div v-if="tier.partners.length" class="pt-10">
+        <h2 class="font-bold font-sans text-4xl md:text-5xl text-center">
+          {{ $t(tier.title) }}
+        </h2>
+        <div
+          class="flex flex-col md:flex-row md:flex-wrap items-center justify-center py-5 gap-4"
+        >
+          <template
+            v-for="(partner, partnerKey) in tier.partners"
+            :key="partnerKey"
+          >
+            <a :class="tier.class" :href="partner.url" target="_blank">
+              <img :src="partner.img" :alt="partner.name" />
+            </a>
+          </template>
+        </div>
       </div>
-    </div>
+    </template>
   </section>
 </template>