117 add temporary recrutment section (#118)

* remove commented old design

* add event

Author: patates-cipsi418

src/assets/media/join/pizza.png

@@ -320,6 +320,10 @@ const rawMessages: Record<string, Record<Lang, string>> = {
     en: 'Our next competition',
     fr: 'Notre prochaine compétition',
   },
+  our_next_event: {
+    en: 'Our next event',
+    fr: 'Notre prochain événement',
+  },
   faq: {
     en: 'FAQ',
     fr: 'FAQ',
@@ -396,6 +400,34 @@ const rawMessages: Record<string, Record<Lang, string>> = {
     en: 'Our next competition (ENRICH 2025) will be held at the Zwentendorf nuclear power plant in Austria. We will be competing against teams from around the world to demonstrate the capabilities of our robots in a real-world emergency scenario.',
     fr: "Notre prochaine compétition (ENRICH 2025) se tiendra à la centrale nucléaire de Zwentendorf en Autriche. Nous affronterons des équipes du monde entier pour démontrer les capacités de nos robots dans un scénario d'urgence réel.",
   },
+  i_will_be_there: {
+    en: 'Regester',
+    fr: "M'inscrire",
+  },
+  information_evening_title: {
+    en: 'Information Evening',
+    fr: 'Soirée d’information',
+  },
+  information_evening_content: {
+    en: 'We will present our club and our various projects for each department. This session is intended for all students wanting to learn more about our club, regardless of their field of study or level of experience.',
+    fr: "Nous allons présenter notre club et nos divers projets pour chaque département. Cette séance est destiné à tous les étudiants voulant en apprendre plus sur notre club, peu importe leur domaine d'étude ou leur degré d'expérience.",
+  },
+  treat_pizza: {
+    en: "and we'll treat you with pizza!",
+    fr: "et on t'offre la pizza!",
+  },
+  meet_us: {
+    en: 'Come meet us on',
+    fr: 'Viens nous rencontrer le',
+  },
+  at_time: {
+    en: 'at',
+    fr: 'à',
+  },
+  at_location: {
+    en: 'at',
+    fr: 'au',
+  },
   custom_robot_title: {
     en: 'Custom Robot',
     fr: 'Robot sur mesure',

src/plugins/i18n.ts

@@ -14,14 +14,26 @@ import newArm from '@clubcapra/assets/media/join/new_arm.jpg';
 import nuclearPlant from '@clubcapra/assets/media/join/nuclear_plant.jpg';
 import pcbWorking from '@clubcapra/assets/media/join/pcb_working.jpg';
 import poseDetection from '@clubcapra/assets/media/join/pose_detection.mp4';
+import pizza from '@clubcapra/assets/media/join/pizza.png';
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 const route = useRoute();
 
 const selectedTab = ref('MEC');
 
+const nextPizzaParty = new Date('2024-09-26:17:00:00 gmt-0400');
+const nextPizzaPartyLink = 'https://forms.office.com/r/UjRvbafzMg';
+const nextPizzaPartyLocation = 'D-3014';
+
+const dateStr = ref('');
+const timeStr = ref('');
+
+updateDateTimeStr();
+
 watch(() => route.hash, scrollToId);
 
+watch(() => locale.value, updateDateTimeStr);
+
 onMounted(() => {
   scrollToId();
 });
@@ -39,6 +51,21 @@ function scrollToId() {
     document.getElementById(id)?.scrollIntoView({ behavior: 'instant' });
   }
 }
+
+/**
+ * Update the date and time strings based on the locale
+ */
+function updateDateTimeStr() {
+  dateStr.value = nextPizzaParty.toLocaleDateString(locale.value, {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+  timeStr.value = nextPizzaParty.toLocaleTimeString(locale.value, {
+    hour: 'numeric',
+  });
+}
 </script>
 
 <template>
@@ -309,105 +336,38 @@ function scrollToId() {
     </DescriptiveContentComponent>
   </section>
 
-  <!-- <section id="MEC" class="container mx-auto px-4 pt-10">
-    <h2 class="text-5xl md:text-6xl font-bold font-sans text-center pt-10">
-      <a href="#MEC">{{ t('team_mechanical') }}</a>
-    </h2>
-    <DescriptiveContentComponent :image-right="false">
-      <template #title>
-        {{ $t('custom_robot_title') }}
-      </template>
-      <template #content1>
-        {{ $t('custom_robot_content') }}
-      </template>
-      <template #image>
-        <img
-          :src="customDesign"
-          alt="custom design"
-          class="rounded-lg w-full"
-        />
-      </template>
-    </DescriptiveContentComponent>
-    <DescriptiveContentComponent :image-right="true">
-      <template #title>
-        {{ $t('robot_optimisation_title') }}
-      </template>
-      <template #content1>
-        {{ $t('robot_optimisation_content') }}
-      </template>
-      <template #image>
-        <img :src="newArm" alt="new robotic arm" class="rounded-lg w-full" />
-      </template>
-    </DescriptiveContentComponent>
-  </section>
-
-  <section id="ELE" class="container mx-auto px-4 pt-10">
+  <section
+    v-if="nextPizzaParty > new Date()"
+    id="PIZZA"
+    class="container mx-auto px-4 pt-10"
+  >
     <h2 class="text-5xl md:text-6xl font-bold font-sans text-center pt-10">
-      <a href="#ELE">{{ t('team_electrical') }}</a>
+      <a href="#PIZZA">{{ t('our_next_event') }}</a>
     </h2>
-    <DescriptiveContentComponent :image-right="false">
+    <DescriptiveContentComponent
+      :image-right="false"
+      :button="$t('i_will_be_there')"
+      :link="nextPizzaPartyLink"
+    >
       <template #title>
-        {{ $t('pcb_design_title') }}
+        {{ $t('information_evening_title') }}
       </template>
       <template #content1>
-        {{ $t('pcb_design_content') }}
-      </template>
-      <template #image>
-        <img :src="pcbWorking" alt="PCB design" class="rounded-lg w-full" />
-      </template>
-    </DescriptiveContentComponent>
-    <DescriptiveContentComponent :image-right="true">
-      <template #title>
-        {{ $t('electrical_stack_title') }}
+        <b>
+          {{ $t('meet_us') }} {{ dateStr }} {{ $t('at_time') }} {{ timeStr }}
+          {{ $t('at_location') }} {{ nextPizzaPartyLocation }}
+          {{ $t('treat_pizza') }}
+        </b>
       </template>
-      <template #content1>
-        {{ $t('electrical_stack_content') }}
+      <template #content2>
+        {{ $t('information_evening_content') }}
       </template>
       <template #image>
-        <img
-          :src="eleWorking"
-          alt="eletrical team working"
-          class="rounded-lg w-full"
-        />
+        <img :src="pizza" alt="pizza" class="animate-spin-slow w-full" />
       </template>
     </DescriptiveContentComponent>
   </section>
 
-  <section id="LOG" class="container mx-auto px-4 pt-10">
-    <h2 class="text-5xl md:text-6xl font-bold font-sans text-center pt-10">
-      <a href="#LOG">{{ t('team_software') }}</a>
-    </h2>
-    <DescriptiveContentComponent :image-right="false">
-      <template #title>
-        {{ $t('ai_title') }}
-      </template>
-      <template #content1>
-        {{ $t('ai_content') }}
-      </template>
-      <template #image>
-        <video
-          :src="poseDetection"
-          alt="AI pose detection"
-          class="rounded-lg w-full"
-          loop
-          autoplay
-          muted
-        />
-      </template>
-    </DescriptiveContentComponent>
-    <DescriptiveContentComponent :image-right="true">
-      <template #title>
-        {{ $t('mapping_title') }}
-      </template>
-      <template #content1>
-        {{ $t('mapping_content') }}
-      </template>
-      <template #image>
-        <img :src="mapping" alt="mapping" class="rounded-lg w-full" />
-      </template>
-    </DescriptiveContentComponent>
-  </section> -->
-
   <section class="container px-4 mx-auto pb-20 flex flex-col items-center">
     <a
       class="bg-black hover:border-primary-50 border-2 border-black transition-colors text-white font-medium text-lg py-2 mt-10 px-4 rounded-lg w-fit"

src/views/JoinView.vue

@@ -19,6 +19,9 @@ export default {
         },
       },
     },
+    animation: {
+      'spin-slow': 'spin 60s linear infinite',
+    },
   },
   plugins: [tailwindAnimated],
 };