Add "More DWH" section to the Out-site

dwhdelft.nl/app.vue

@@ -9,18 +9,10 @@
   </NuxtLayout>
 </template>
 
-<style>
-:root {
-  --color-brand-50: 253 242 248;
-  --color-brand-100: 250 245 255;
-  --color-brand-200: 233 216 253;
-  --color-brand-300: 214 188 250;
-  --color-brand-400: 183 148 244;
-  --color-brand-450: 159 122 234;
-  --color-brand-500: 159 122 234;
-  --color-brand-600: 128 90 213;
-  --color-brand-700: 107 70 193;
-  --color-brand-800: 85 60 154;
-  --color-brand-900: 68 51 122;
-}
-</style>
+<script setup>
+useHead({
+  bodyAttrs: {
+    class: 'dwh-colors',
+  },
+})
+</script>

dwhdelft.nl/components/pages/andersblad/FileCards.vue

@@ -26,13 +26,13 @@ const goToFile = (file) => {
       :key="file.id"
       :title="file.name"
       :content="file.publishDate"
-      class="cursor-pointer group hover:bg-brand-100 transition-colors"
       titleClass="text-xl"
       contentClass="px-4 pt-6 pb-3"
+      clickable
       @click="goToFile(file)"
     >
       <template #header>
-        <img :src="file.thumbnailLink" class="w-full h-full object-cover group-hover:opacity-80 transition-opacity" />
+        <img :src="file.thumbnailLink" class="w-full h-full object-cover" />
       </template>
       <p class="text-gray-600 text-base -mt-4">{{ file.publishDate }}</p>
     </ElementsActionCard>

outsite.nl/app.vue

@@ -10,19 +10,10 @@
   </NuxtLayout>
 </template>
 
-<style>
-:root {
-  --color-brand-50: 252 242 248;
-  --color-brand-100: 255 228 244;
-  --color-brand-200: 255 154 216;
-  --color-brand-300: 249 168 212;
-  --color-brand-350: 249 168 212;
-  --color-brand-400: 252 102 194;
-  --color-brand-450: 252 102 194;
-  --color-brand-500: 236 72 153;
-  --color-brand-600: 219 39 119;
-  --color-brand-700: 190 24 93;
-  --color-brand-800: 157 23 77;
-  --color-brand-900: 131 24 67;
-}
-</style>
+<script setup>
+useHead({
+  bodyAttrs: {
+    class: 'outsite-colors',
+  },
+})
+</script>

outsite.nl/components/layout/footer/JoinWhatsapp.vue

@@ -35,7 +35,7 @@ const form = useReMemberForm('whatsapp', {
           <WhatsAppLogo class="fill-current text-green-400 h-32 md:h-20 lg:h-12 mr-4" />
 
           <div v-if="!showForm">
-            <Markdown :content="t('description')" />
+            <Markdown :content="t('description')" class="-mb-4" />
           </div>
 
           <template v-if="showForm">

outsite.nl/components/pages/home/MoreDWH.vue

@@ -0,0 +1,105 @@
+<i18n lang="yaml">
+en:
+  description: |
+    Outsite is the youth department of DWH, the LGBT+ association of Delft and surroundings.
+    Besides Outsite, DWH also organizes activities for all ages.
+    Think of bar nights, education, parties, eating groups and much more.
+    For youth under 18, DWH organizes Jong&Out meetings.
+  more: Check the DWH website
+  activities:
+    - title: Jong&Out
+      description: |
+        Jong&Out is the LGBT+ youth organization for youth up to 18 years old. Every month
+        we organize a meeting in Delft.
+      link: https://jongenoutdelft.nl
+      image: jongenout
+    - title: MIXUP
+      description: |
+        MIXUP is the queer bar night of Delft. Meet new people, come dance at one of our
+        parties and join one of our many events!
+      link: https://mixupdelft.nl
+      image: mixup
+    - title: Education
+      description: |
+        DWH gives education about sexual diversity and gender identity at schools and
+        other organizations.
+      link: https://dwhdelft.nl/education
+      image: education
+    - title: EatingOUT
+      description: |
+        On Mondays we gather around the dinner table to enjoy a delicious meal cooked by one of our
+        members, sometimes with an activity afterwards.
+      link: https://dwhdelft.nl/book
+      image: eatingout
+nl:
+  description: |
+    Outsite is het jongerenonderdeel van DWH, de LHBT+ vereniging van Delft en omstreken.
+    Naast Outsite organiseert DWH ook activiteiten voor alle leeftijden.
+    Denk aan baravonden, voorlichtingen, feesten, eetgroepen en nog veel meer.
+    Voor jongeren onder de 18 jaar organiseert DWH Jong&Out meetings.
+  more: Check de DWH website
+  activities:
+    - title: Jong&Out
+      description: |
+        Jong&Out is de LHBT+ jongerenorganisatie voor jongeren tot en met 18 jaar. Elke maand
+        organiseren we een meeting in Delft.
+      link: https://jongenoutdelft.nl
+      image: jongenout
+    - title: MIXUP
+      description: |
+        MIXUP is dé queer baravond van Delft. Ontmoet nieuwe mensen, kom dansen bij een van onze
+        feesten en doe mee met een van onze vele events!
+      link: https://mixupdelft.nl
+      image: mixup
+    - title: Voorlichting
+      description: |
+        DWH geeft voorlichtingen over seksuele diversiteit en genderidentiteit op scholen en
+        bij andere organisaties.
+      link: https://dwhdelft.nl/education
+      image: education
+    - title: EatingOUT
+      description: |
+        Elke maandagavond zitten we gezellig rond de eettafel om van een maaltijd te genieten, bereid door
+        één van onze leden, met soms een activiteit achteraf.
+      link: https://dwhdelft.nl/book
+      image: eatingout
+</i18n>
+
+<script setup>
+import DWHLogo from '#shared/assets/images/dwh_logo.svg'
+
+const { t } = useT()
+
+const goToLink = (link) => {
+  window.open(link, '_blank')
+}
+
+const { image: requireImage } = useDynamicImages(import.meta.glob('~/assets/images/photos/more-dwh/*', { eager: true }))
+</script>
+
+<template>
+  <div class="md:flex md:space-x-16 space-y-6 md:space-y-0 -mb-8 md:mb-0">
+    <div class="md:w-1/3 md:py-12 text-center md:text-left">
+      <DWHLogo class="h-24 fill-current text-white mb-4 md:mb-10 mx-auto md:mx-0" />
+      <p class="text-white text-xl mb-4 md:mb-12">{{ t('description') }}</p>
+      <a href="https://dwhdelft.nl" class="block mx-auto">
+        <ElementsSecondaryButton class="mx-auto md:mx-0" arrow>{{ t('more') }}</ElementsSecondaryButton>
+      </a>
+    </div>
+    <div class="flex-1 grid md:grid-cols-2 gap-6">
+      <ElementsActionCard
+        v-for="activity in t('activities')"
+        :key="activity.title"
+        :title="activity.title"
+        headerClass="h-40"
+        clickable
+        @click="goToLink(activity.link)"
+      >
+        <template #header>
+          <img :src="requireImage(activity.image)" class="w-full h-full object-cover" />
+        </template>
+        <p class="-mt-3 text-gray-600 text-lg leading-snug">{{ activity.description }}</p>
+      </ElementsActionCard>
+    </div>
+  </div>
+</template>

outsite.nl/pages/index.vue

@@ -127,7 +127,7 @@ const instagramChannels = [
   </section>
 
   <LayoutEmulatedSkewedSection :bottom="false" contentClass="bg-gray-200" triangleClass="border-gray-200">
-    <ElementsContainer class="pt-48 md:pt-8 pb-16">
+    <ElementsContainer class="pt-48 md:pt-8 pb-8">
       <PagesHomeInstagramChannels class="xl:w-2/3 mx-auto" :brands="instagramChannels">
         <template #title>
           <h1 class="tracking-wide font-semibold uppercase text-2xl pt-6 mb-10 text-center">
@@ -137,4 +137,10 @@ const instagramChannels = [
       </PagesHomeInstagramChannels>
     </ElementsContainer>
   </LayoutEmulatedSkewedSection>
+
+  <LayoutStraightSection class="dwh-colors">
+    <ElementsContainer class="pb-8">
+      <PagesHomeMoreDWH />
+    </ElementsContainer>
+  </LayoutStraightSection>
 </template>

shared/assets/css/main.css

@@ -8,3 +8,32 @@ html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 16px;
 }
+
+.dwh-colors {
+  --color-brand-50: 253 242 248;
+  --color-brand-100: 250 245 255;
+  --color-brand-200: 233 216 253;
+  --color-brand-300: 214 188 250;
+  --color-brand-400: 183 148 244;
+  --color-brand-450: 159 122 234;
+  --color-brand-500: 159 122 234;
+  --color-brand-600: 128 90 213;
+  --color-brand-700: 107 70 193;
+  --color-brand-800: 85 60 154;
+  --color-brand-900: 68 51 122;
+}
+
+.outsite-colors {
+  --color-brand-50: 252 242 248;
+  --color-brand-100: 255 228 244;
+  --color-brand-200: 255 154 216;
+  --color-brand-300: 249 168 212;
+  --color-brand-350: 249 168 212;
+  --color-brand-400: 252 102 194;
+  --color-brand-450: 252 102 194;
+  --color-brand-500: 236 72 153;
+  --color-brand-600: 219 39 119;
+  --color-brand-700: 190 24 93;
+  --color-brand-800: 157 23 77;
+  --color-brand-900: 131 24 67;
+}

shared/components/elements/ActionCard.vue

@@ -5,25 +5,31 @@ const props = defineProps({
   headerClass: { type: String, default: '' },
   headerPosition: { type: String, default: 'top' },
   contentClass: { type: String, default: '' },
+  clickable: { type: Boolean, default: false },
 })
 
 const containerClass = {
   'flex-col': props.headerPosition === 'top',
   'flex-col md:flex-row': props.headerPosition === 'left',
   'flex-col md:flex-row-reverse': props.headerPosition === 'right',
+  'cursor-pointer group hover:bg-brand-100 transition-colors': props.clickable,
 }
 
 const positionBasedHeaderClass = {
   '-mb-3': props.headerPosition === 'top',
   '-mb-3 md:mb-0': props.headerPosition === 'left' || props.headerPosition === 'right',
 }
 
+const clickableHeaderClass = {
+  'group-hover:opacity-80 transition-opacity': props.clickable,
+}
+
 const slots = useSlots()
 </script>
 
 <template>
   <div class="bg-white rounded-xl shadow-md overflow-hidden flex" :class="containerClass">
-    <div v-if="slots.header" :class="[positionBasedHeaderClass, headerClass]">
+    <div v-if="slots.header" :class="[positionBasedHeaderClass, headerClass, clickableHeaderClass]">
       <slot name="header" />
     </div>
     <div class="flex-1 flex flex-col p-6 text-lg text-gray-700" :class="contentClass">