add mixup logo, move barnight to elementscontainer

dwhdelft.nl/pages/mixup.vue

@@ -85,6 +85,8 @@ nl:
 <script setup>
 const { t, tt } = useT()
 
+import MIXUPLogo from '#shared/assets/images/mixup_logo.svg'
+
 const { data: openingHours } = await useAsyncData(() => queryContent('opening_hours').findOne())
 const barOpeningHours = openingHours.value.events.find((event) => event.day.en === 'Saturday')
 
@@ -114,40 +116,51 @@ const instagramChannelsMixup = [
         <div class="flex-1 px-4 lg:pr-32">
           <div class="space-y-12">
             <ElementsParagraphedText :paragraphs="t('intro')" class="md:text-xl md:leading-relaxed space-y-4" />
-            <p
-              v-if="barOpeningHours.announcement"
-              class="mt-3 mb-4 text-brand-500"
-              v-text="tt(barOpeningHours.announcement)"
-            />
-            <PagesHomeInvite
-              class="my-8 md:my-4"
-              :announcement="t('invite.announcement')"
-              :time="t('invite.time', [barOpeningHours.start_time])"
-            />
-            <div class="flex flex-1 space-x-4">
+            <div class="flex flex-1 space-x-16">
               <div>
-                <a href="https://my.dwhdelft.nl/signup">
-                  <ElementsSecondaryButton class="!text-brand-450" arrow>
-                    {{ t('membership_button') }}
-                  </ElementsSecondaryButton>
-                </a>
+                <div class="flex flex-1 space-x-8 space-y-16 md:space-y-8 lg:space-y-6">
+                  <div>
+                    <p
+                      v-if="barOpeningHours.announcement"
+                      class="mt-3 mb-4 text-brand-500"
+                      v-text="tt(barOpeningHours.announcement)"
+                    />
+                    <PagesHomeInvite
+                      class="my-8 md:my-4"
+                      :announcement="t('invite.announcement')"
+                      :time="t('invite.time', [barOpeningHours.start_time])"
+                    />
+                  </div>
+                  <div>
+                    <MIXUPLogo class="h-20" />
+                  </div>
+                </div>
+                <div class="flex flex-1 space-x-4">
+                  <div>
+                    <a href="https://my.dwhdelft.nl/signup">
+                      <ElementsSecondaryButton class="!text-brand-450" arrow>
+                        {{ t('membership_button') }}
+                      </ElementsSecondaryButton>
+                    </a>
+                  </div>
+                  <div>
+                    <nuxt-link :to="localePath('barbuddy')">
+                      <ElementsPrimaryButton class="!text-brand-50" arrow>
+                        {{ t('barbuddy_button') }}
+                      </ElementsPrimaryButton>
+                    </nuxt-link>
+                  </div>
+                </div>
               </div>
-              <div>
-                <nuxt-link :to="localePath('barbuddy')">
-                  <ElementsPrimaryButton class="!text-brand-50" arrow>
-                    {{ t('barbuddy_button') }}
-                  </ElementsPrimaryButton>
-                </nuxt-link>
+              <div class="hidden 2xl:block">
+                <div>
+                  <img src="~/assets/images/photos/mixup/barnight.png" class="w-64" />
+                </div>
               </div>
             </div>
           </div>
         </div>
       </ElementsContainer>
-      <div class="hidden lg:block">
-        <div>
-          <img src="~/assets/images/photos/mixup/barnight.png" class="w-96" />
-        </div>
-      </div>
     </section>
 
     <section class="bg-highlights bg-cover bg-center py-10">