Skip to content

Commit

Permalink
117 add temporary recrutment section (#118)
Browse files Browse the repository at this point in the history 
* remove commented old design

* add event
  • Loading branch information
@patates-cipsi418
patates-cipsi418 authored Sep 17, 2024
1 parent a9b15b7 commit 2a04f42
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 88 deletions.
Binary file added src/assets/media/join/pizza.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions src/plugins/i18n.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
136 changes: 48 additions & 88 deletions src/views/JoinView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand All @@ -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>
Expand Down Expand Up @@ -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"
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export default {
},
},
},
animation: {
'spin-slow': 'spin 60s linear infinite',
},
},
plugins: [tailwindAnimated],
};

0 comments on commit 2a04f42

Please sign in to comment.