Merge pull request #643 from dwh-outsite/mixup-tweaks

Mixup tweaks
dwh-outsite · Jan 4, 2025 · 265afc3 · 265afc3
2 parents 98c27c9 + 0cb9eba
commit 265afc3
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 88 deletions.
diff --git a/dwhdelft.nl/components/PhotoCard.vue b/dwhdelft.nl/components/PhotoCard.vue
@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  image: { type: Object, required: true },
+})
+</script>
+
+<template>
+  <div class="rounded-xl overflow-hidden shadow-lg group">
+    <div class="w-full h-80 overflow-hidden mx-auto relative">
+      <div
+        class="absolute z-50 top-0 left-0 p-6 uppercase font-bold tracking-wider text-2xl text-white [text-shadow:0_2px_4px_rgba(0,0,0,0.45)]"
+      >
+        {{ title }}
+      </div>
+      <img :src="image" class="object-cover h-full w-full" />
+      <div class="absolute top-0 left-0 w-full h-2/3 bg-gradient-to-b from-black/50 group-hover:from-black/30" />
+      <div
+        class="absolute bottom-0 left-0 flex flex-col justify-end w-full h-2/3 bg-gradient-to-t from-black/95 group-hover:from-black/80 p-6"
+      >
+        <p class="text-white text-lg leading-snug">
+          {{ description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/dwhdelft.nl/components/pages/home/BulletPoints.vue b/dwhdelft.nl/components/pages/home/BulletPoints.vue
@@ -38,24 +38,14 @@ const requireImage = (name) => image(`bullet_${name}`)
 
 <template>
   <ElementsContainer>
-    <div class="grid md:grid-cols-2 gap-6">
-      <div v-for="point in t('bullet_points')" :key="point.title" class="flex-1 rounded-xl overflow-hidden shadow-lg">
-        <div class="w-full h-80 overflow-hidden mx-auto relative">
-          <div
-            class="absolute z-50 top-0 left-0 p-6 uppercase font-bold tracking-wider text-2xl text-white [text-shadow:0_2px_4px_rgba(0,0,0,0.45)]"
-          >
-            {{ point.title }}
-          </div>
-          <img :src="requireImage(point.image)" class="object-cover h-full w-full" />
-          <div
-            class="absolute bottom-0 left-0 flex flex-col justify-end w-full h-full md:h-2/3 bg-gradient-to-t from-gray-900 p-6"
-          >
-            <p class="text-white text-lg leading-snug">
-              {{ point.description }}
-            </p>
-          </div>
-        </div>
-      </div>
+    <div class="grid xl:grid-cols-2 gap-6">
+      <PhotoCard
+        v-for="point in t('bullet_points')"
+        :key="point.title"
+        :title="point.title"
+        :description="point.description"
+        :image="requireImage(point.image)"
+      />
     </div>
   </ElementsContainer>
 </template>
diff --git a/dwhdelft.nl/components/pages/mixup/LinkedEvents.vue b/dwhdelft.nl/components/pages/mixup/LinkedEvents.vue
@@ -1,14 +1,16 @@
 <i18n lang="yaml">
 en:
-  events: Our UPcoming events
+  events: '**UPcoming** MIXUP nights'
 nl:
-  events: Onze UPkomende evenementen
+  events: 'UPkomende **MIXUP** avonden'
 </i18n>
 
 <script setup>
 const { t } = useT()
 import GSheetReader from 'g-sheets-api'
 
+const emit = defineEmits(['ready'])
+
 const { image: imageIcons } = useDynamicImages(
   import.meta.glob('~/assets/images/photos/mixup/icons/*', { eager: true })
 )
@@ -31,36 +33,46 @@ onMounted(() => {
     events.value = filteredResults
       .map((row) => ({
         date: new Date(`${row[`Date`].split('-').reverse().join('/')}  23:59`),
+        startTime: row[`Start Time`],
         eventName: row[`Event name`],
         icon: imageIcons(row[`Icon`]) || imageIcons('bar'),
       }))
       .filter((event) => !isNaN(event.date) && event.date.getTime() > new Date().getTime())
       .slice(0, 5)
+
+    emit('ready')
   })
 })
 </script>
 
 <template>
-  <div v-if="events && events.length > 0" class="bg-gray-800 text-white">
+  <section
+    v-if="events && events.length > 0"
+    class="bg-gray-900 py-12 md:pt-0 text-gray-200 bg-gradient-to-b from-gray-900 to-brand-500/10"
+  >
     <ElementsContainer>
-      <h1 class="text-center font-medium text-5xl">
-        {{ t('events') }}
+      <h1 class="text-center font-medium text-5xl mb-6">
+        <Markdown :content="t('events')" />
       </h1>
-      <div class="flex flex-wrap justify-center text-center">
+      <div class="flex flex-wrap justify-center md:text-center gap-4">
         <div
           v-for="(event, index) in events"
           :key="index"
-          class="w-48 p-4 m-4 bg-brand-900 rounded-lg shadow-lg space-y-2"
+          class="w-full md:w-48 p-4 bg-brand-900 rounded-lg shadow-lg flex flex-row-reverse md:flex-col"
         >
-          <div>{{ event.date.getDate() }} {{ $t(`month.${event.date.getMonth()}`) }}</div>
-          <div class="text-xl font-bold">
-            {{ event.eventName }}
+          <div class="flex-1">
+            <div class="text-gray-300 uppercase tracking-wide">
+              {{ event.date.getDate() }} {{ $t(`month.${event.date.getMonth()}`)?.slice(0, 3) }} - {{ event.startTime }}
+            </div>
+            <div class="text-xl font-bold md:mb-4">
+              {{ event.eventName }}
+            </div>
           </div>
-          <div class="flex justify-center">
+          <div class="flex justify-center items-center min-w-16 mr-2 md:mr-0">
             <img :src="event.icon" alt="Event Icon" class="h-12" />
           </div>
         </div>
       </div>
     </ElementsContainer>
-  </div>
+  </section>
 </template>
diff --git a/dwhdelft.nl/pages/mixup.vue b/dwhdelft.nl/pages/mixup.vue
@@ -1,7 +1,6 @@
 <i18n lang="yaml">
 en:
   title: MIXUP
-  events: Our UPcoming events
   intro:
     - MIXUP is thé queer nightlife experience of Delft. We open our doors every Saturday at 22:00 and almost
       every week we are more than just a bar. Drag performances of the HAUS of 4D, the city’s best karaoke,
@@ -16,7 +15,7 @@ en:
     time: Every Saturday starting at {0}
   membership_button: Sign up now for DWH
   barbuddy_button: Find a buddy
-  instagram: Our Events and UPdates
+  instagram: MIXUP **Events** and **UPdates**
   bulletPoints:
     - title: Dance Nights
       description: We have drinks together each week and will often have a DJ to get the dance floor moving!
@@ -31,7 +30,7 @@ en:
       description: Karaoke, tastings, vinyl night or a talent show, there is a lot to do on a night at MIXUP.
       image: events-silentdisco
   highlights:
-    title: Our Highlights
+    title: Our **Highlights**
     events:
       - title: MIXUP Origin
         description: The first ever party under the MIXUP branding was MIXUP Origin, the opening party! Miss Abby OMG gave a wonderful performance and people were living!
@@ -42,22 +41,21 @@ en:
 
 nl:
   title: MIXUP
-  events: Onze UPkomende evenementen
   intro:
     - MIXUP is dé queer uitgaansavond van Delft. Iedere zaterdagavond zijn we vanaf 22:00 open en bijna
       elke week zijn we meer dan alleen een bar. Drag performances van HAUS of 4D, de beste karaoke van de stad,
       heerlijke proeverijen, MIXUP Alternative met bands, dansavonden met hitjes van nu of juist je favoriete
       klassiekers, een hitsig Halloween en andere themafeesten, Eurovisie watch parties en meer! En als we dan toch
       eens gewoon een bar zijn, is het heel gezellig bijkletsen en misschien een dansje wagen.
     - MIXUP wordt volledig mogelijk gemaakt door een team enthousiaste vrijwilligers van DWH. Ben je enthousiast geworden en wil je
-      bijdragen aan en onderdeel worden van een fantastische community? Wordt dan lid.
+      bijdragen aan en onderdeel worden van een fantastische community? Word dan lid.
     - Bang om alleen te komen? We kunnen je aan een barbuddy koppelen om te leren kennen, die je ook aan anderen kan voorstellen!
   invite:
     announcement: 'Kom gerust langs op onze baravond:'
     time: Elke zaterdag vanaf {0}
   membership_button: Schrijf je nu in bij DWH
   barbuddy_button: Vind een buddy
-  instagram: Onze evenementen en UPdates
+  instagram: MIXUP **Events** en **UPdates**
   bulletPoints:
     - title: Dansavonden
       description: Elke week komen we samen voor drankjes, vaak is er zelfs een DJ om die voetjes op te bewegen!
@@ -72,7 +70,7 @@ nl:
       description: Karaoke, proeverijen, vinyl nachten of een talentenshow, er is veel te beleven op een MIXUP avond.
       image: events-silentdisco
   highlights:
-    title: Onze Hoogtepunten
+    title: Onze **Hoogtepunten**
     events:
       - title: MIXUP Oorsprong
         description: Het allereerste feestje onder de MIXUP banner was MIXUP Origin’s, het openingsfeest! Miss Abby OMG gaf ons een prachtig optreden, het feest was aan!
@@ -99,26 +97,27 @@ const instagramChannelsMixup = [
     instagram: 'mixupdelft',
   },
 ]
+
+const linkedEventsReady = ref(false)
 </script>
 
 <template>
   <div class="mixup-colors">
-    <LayoutSmallHeader triangleClass="border-gray-800">
+    <LayoutSmallHeader :triangleClass="linkedEventsReady ? 'border-gray-900' : 'border-black'">
       {{ t('title') }}
     </LayoutSmallHeader>
 
-    <section>
-      <PagesMixupLinkedEvents />
-    </section>
+    <PagesMixupLinkedEvents @ready="linkedEventsReady = true" />
 
     <section class="bg-brand-900 text-white text-lg mx-auto pt-12 pb-24 md:flex">
       <ElementsContainer>
-        <div class="flex flex-1 px-4 lg:pr-32 space-x-16 lg:space-y-24">
+        <div class="flex px-4 lg:pr-32 space-x-16 lg:space-y-24">
           <div class="space-y-4">
+            <MIXUPLogo class="block md:hidden mx-auto mb-8 h-20" />
             <ElementsParagraphedText :paragraphs="t('intro')" class="md:text-xl md:leading-relaxed space-y-4" />
-            <div>
-              <div class="flex flex-1 flex-wrap justify-center items-center gap-4">
-                <div>
+            <div class="space-y-2">
+              <div class="flex flex-wrap justify-center items-center gap-4">
+                <div class="w-full max-w-md md:w-auto">
                   <p
                     v-if="barOpeningHours.announcement"
                     class="mt-3 mb-4 text-brand-500"
@@ -130,25 +129,19 @@ const instagramChannelsMixup = [
                     :time="t('invite.time', [barOpeningHours.start_time])"
                   />
                 </div>
-                <div>
-                  <MIXUPLogo class="h-20" />
-                </div>
+                <MIXUPLogo class="hidden md:block h-20" />
               </div>
-              <div class="flex flex-1 flex-wrap justify-center items-center space-x-4 mt-2">
-                <div class="m-2">
-                  <a href="https://my.dwhdelft.nl/signup">
-                    <ElementsSecondaryButton class="!text-brand-450" arrow>
-                      {{ t('membership_button') }}
-                    </ElementsSecondaryButton>
-                  </a>
-                </div>
-                <div class="m-2">
-                  <nuxt-link :to="localePath('barbuddy')">
-                    <ElementsPrimaryButton class="!text-brand-50" arrow>
-                      {{ t('barbuddy_button') }}
-                    </ElementsPrimaryButton>
-                  </nuxt-link>
-                </div>
+              <div class="md:flex flex-wrap justify-center items-center md:space-x-4 space-y-4 md:space-y-0">
+                <a href="https://my.dwhdelft.nl/signup" class="block">
+                  <ElementsSecondaryButton class="!text-brand-450" arrow>
+                    {{ t('membership_button') }}
+                  </ElementsSecondaryButton>
+                </a>
+                <nuxt-link :to="localePath('barbuddy')" class="block">
+                  <ElementsPrimaryButton class="!text-brand-50" arrow>
+                    {{ t('barbuddy_button') }}
+                  </ElementsPrimaryButton>
+                </nuxt-link>
               </div>
             </div>
           </div>
@@ -161,40 +154,42 @@ const instagramChannelsMixup = [
       </ElementsContainer>
     </section>
 
-    <section class="bg-highlights bg-cover bg-center py-10">
-      <BulletPoints :bulletPoints="t('bulletPoints')" :image="imageOverviews" :descriptionColor="'text-brand-900'" />
+    <section class="relative bg-black">
+      <div class="absolute w-full h-full bg-highlights bg-cover bg-center blur-sm scale-120" />
+      <BulletPoints
+        :bulletPoints="t('bulletPoints')"
+        :image="imageOverviews"
+        cardClass="!bg-gray-800/80 backdrop-blur-xl"
+        descriptionClass="text-gray-200"
+        class="py-12"
+      />
     </section>
 
-    <section class="bg-brand-900 pb-12">
+    <section class="bg-brand-900 pb-12 bg-gradient-to-r from-brand-900 via-brand-500/20 to-brand-900">
       <ElementsContainer>
         <div class="mx-auto pt-12 pb-8">
-          <h1 class="text-center text-white font-medium text-5xl mb-6 leading-tight" v-html="t('highlights.title')" />
+          <h1 class="text-center text-white font-medium text-5xl mb-6 leading-tight">
+            <Markdown :content="t('highlights.title')" />
+          </h1>
         </div>
-        <div class="grid grid-cols-[1fr_minmax(0,1280px)_1fr]">
-          <div
-            v-for="(event, index) in t('highlights.events')"
-            :key="event.name"
-            class="rounded-2xl md:rounded-full mb-6 bg-white p-4 md:flex items-center space-y-2 md:space-y-0 md:space-x-4 shadow-xl space-y-6 max-w-5xl col-start-2"
-            :class="index % 2 !== 0 ? 'ml-auto' : ''"
-          >
-            <div class="rounded-full h-32 w-32 bg-white overflow-hidden">
-              <img :src="imageOverviews(event.image)" class="object-cover h-full" />
-            </div>
-            <div class="flex-1 md:pr-8">
-              <div class="flex space-x-2 items-baseline">
-                <h3 class="text-xl text-brand-450 font-semibold" v-text="event.title" />
-              </div>
-              <p class="text-brand-900 text-lg" v-html="event.description" />
-            </div>
-          </div>
+        <div class="grid xl:grid-cols-2 gap-6">
+          <PhotoCard
+            v-for="event in t('highlights.events')"
+            :key="event.title"
+            :title="event.title"
+            :description="event.description"
+            :image="imageOverviews(event.image)"
+          />
         </div>
       </ElementsContainer>
     </section>
 
     <LayoutStraightSection contentBackgroundClass="!bg-brand-450" contentClass="md:py-12">
       <PagesHomeInstagramChannels class="xl:w-2/3 mx-auto" :brands="instagramChannelsMixup">
         <template #title>
-          <h1 class="text-center text-white font-medium text-5xl mb-6 leading-tight" v-html="t('instagram')" />
+          <h1 class="text-center text-white font-medium text-5xl mb-6 leading-tight">
+            <Markdown :content="t('instagram')" />
+          </h1>
         </template>
       </PagesHomeInstagramChannels>
     </LayoutStraightSection>

diff --git a/shared/components/BulletPoints.vue b/shared/components/BulletPoints.vue
@@ -2,20 +2,21 @@
 defineProps({
   bulletPoints: { type: Array, required: true },
   image: { type: Function, required: true },
-  descriptionColor: { type: String, default: 'text-gray-600' },
+  cardClass: { type: String, default: '' },
+  descriptionClass: { type: String, default: 'text-gray-600' },
 })
 </script>
 
 <template>
   <ElementsContainer>
     <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
-      <ElementsActionCard v-for="point in bulletPoints" :key="point.title" :title="point.title">
+      <ElementsActionCard v-for="point in bulletPoints" :key="point.title" :title="point.title" :class="cardClass">
         <template #header>
           <div class="w-full h-40 overflow-hidden mx-auto">
             <img :src="image(point.image)" class="object-cover w-full h-full" />
           </div>
         </template>
-        <p :class="descriptionColor" class="-mt-3 text-lg leading-snug" v-text="point.description" />
+        <p :class="descriptionClass" class="-mt-3 text-lg leading-snug" v-text="point.description" />
       </ElementsActionCard>
     </div>
   </ElementsContainer>