feat: no video :c but looks great :3

Author: prplwtf

apps/frontend/src/components/ui/marketing/sections/Hero.vue

@@ -1,28 +1,34 @@
 <template>
   <div
     :class="props?.class"
-    class="grid grid-cols-2 rounded-3xl border border-neutral-700 bg-neutral-950"
+    class="grid grid-cols-2 overflow-hidden rounded-3xl border border-neutral-700 bg-neutral-950"
   >
-    <div class="space-y-3 self-center p-16">
-      <Icon name="memory:anvil" mode="svg" :size="48" />
-      <h1>A solid platform for Pterodactyl® mods</h1>
-      <span class="opacity-75">
-        Pterodactyl modifications, addons and themes have suffered for ages.
-        Blueprint brings change, allowing Pterodactyl and it's modding industry
-        to reach new heights.
-      </span>
+    <div class="grid grid-rows-2">
+      <div class="space-y-3 self-center border-b border-neutral-700 p-16">
+        <Icon name="memory:anvil" mode="svg" :size="48" />
+        <h1>A solid platform for Pterodactyl® mods</h1>
+        <span class="opacity-75">
+          Pterodactyl modifications, addons and themes have suffered for ages.
+          Blueprint brings change, allowing Pterodactyl and it's modding
+          industry to reach new heights.
+        </span>
+      </div>
+      <div class="space-y-3 self-center p-16">
+        <Icon name="memory:heart" mode="svg" :size="48" />
+        <h1>Engineered for people, not profit</h1>
+        <span class="opacity-75">
+          Blueprint is fisically sponsored by a 501(c)(3) nonprofit foundation.
+          We're funded by donations, corporate sponsors and affiliate revenue.
+        </span>
+      </div>
     </div>
     <div class="border-s border-neutral-700">
-      <video
-        width="1280"
-        height="720"
-        class="rounded-e-3xl"
-        autoplay
-        muted
-        loop
-      >
-        <source src="/img/pterodactyl.mp4" type="video/mp4" />
-      </video>
+      <NuxtImg
+        src="/img/pterodactyl.jpeg"
+        :width="1280"
+        :height="1024"
+        class="aspect-video h-full w-full object-cover"
+      />
     </div>
   </div>
 </template>

apps/frontend/src/components/ui/marketing/sections/Marquee.vue

@@ -1,15 +1,17 @@
 <template>
   <div :class="props?.class" class="marquee h-32">
-    <NuxtMarquee :autoFill="true" :pauseOnHover="true" :speed="50">
+    <NuxtMarquee :autoFill="true" :pauseOnHover="true" :speed="35">
       <div
         v-for="(item, index) in items"
         :key="`item-${index}`"
         class="mx-4 inline h-[128px] w-[256px]"
       >
         <NuxtLink :to="`/extensions/${item.identifier}`">
-          <div class="transition-transform hover:scale-95">
+          <div
+            class="overflow-hidden rounded-2xl transition-transform hover:scale-95"
+          >
             <div
-              class="absolute h-[128px] w-[256px] bg-neutral-950/50 opacity-0 backdrop-blur-none transition-all hover:opacity-100"
+              class="absolute h-[128px] w-[256px] bg-neutral-950/50 opacity-0 transition-all hover:opacity-100"
             >
               <Icon
                 name="memory:arrow-up-right-box"
@@ -23,7 +25,6 @@
               :height="128"
               :width="256"
               :alt="item.name"
-              class="rounded-2xl"
             />
           </div>
         </NuxtLink>