New landing page (#834)

* New landing page

* Edit gradient

* User + Creator sections, some css cleanup

* Most stuff

* Finish page (mostly)

* Compress images

* Moar compression

* Fix mobile zoom + adjust wording

* add utm stuff to subscribe link

* Fix border overlay

* Remove redundant CSS class

* Fix most issues (?)

* Add notifs showcase

* Spacing changes, update copy, fix lag

* add and

* Update spacing

* save work

* Update mobile support

* Update discovery copy

* Light theme

* Adjust logo banner on various screen sizes

* Add launcher links

* Oxipng

* Switch to cdn links for images

* Add animation

* Fix animation

* fix tags

Co-authored-by: Emma Cypress Pointer-Null <emmaffle@modrinth.com>

components/ui/Avatar.vue

@@ -5,6 +5,7 @@
     :class="`avatar size-${size} ${circle ? 'circle' : ''}`"
     :src="src"
     :alt="alt"
+    :loading="loading"
   />
   <svg
     v-else
@@ -51,6 +52,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    loading: {
+      type: String,
+      default: 'eager',
+    },
   },
   mounted() {
     if (this.$refs.img && this.$refs.img.naturalWidth) {

components/ui/ProjectCard.vue

@@ -9,7 +9,7 @@
       tabindex="-1"
       :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`"
     >
-      <Avatar :src="iconUrl" :alt="name" size="md" />
+      <Avatar :src="iconUrl" :alt="name" size="md" loading="lazy" />
     </nuxt-link>
     <nuxt-link
       class="gallery"
@@ -547,4 +547,30 @@ export default {
   align-items: flex-end;
   flex-grow: 1;
 }
+
+.small-mode {
+  @media screen and (min-width: 750px) {
+    grid-template:
+      'icon title'
+      'icon description'
+      'icon tags'
+      'stats stats' !important;
+    grid-template-columns: min-content auto !important;
+    grid-template-rows: min-content 1fr min-content min-content !important;
+
+    .tags {
+      margin-top: var(--spacing-card-xs) !important;
+    }
+
+    .stats {
+      flex-direction: row;
+      column-gap: var(--spacing-card-md) !important;
+      margin-top: var(--spacing-card-xs) !important;
+
+      .stat-label {
+        display: none !important;
+      }
+    }
+  }
+}
 </style>