feat(homepage): various improvements

KeziahMoselle · Apr 16, 2024 · 23d6238 · 23d6238
1 parent 2e2d49b
commit 23d6238
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 21 deletions.
diff --git a/frontend/src/components/molecules/CardImage.vue b/frontend/src/components/molecules/CardImage.vue
@@ -10,12 +10,12 @@ defineProps<{
 <template>
   <article class="flex flex-col items-center gap-2 bg-secondary border border-primary p-3 md:p-7">
     <header class="relative overflow-hidden">
-      <img src="/horizontal-image-background.png" alt="" />
+      <img class="w-full h-auto" src="/horizontal-image-background.png" alt="" />
       <img loading="lazy" class="absolute top-0 left-1/2 transform -translate-x-1/2 p-4 h-full object-contain"
         :src="src" :alt="alt" />
     </header>
 
-    <div class="mt-2 w-[428px] mx-auto">
+    <div class="mt-2">
       <h2 class="type-h2 mb-2">{{ title }}</h2>
       <slot>
         {{ text }}

diff --git a/frontend/src/components/molecules/PreregisterInput.vue b/frontend/src/components/molecules/PreregisterInput.vue
@@ -13,11 +13,11 @@ async function preregister(e) {
 
 <template>
   <form @submit.prevent="preregister" class="flex items-center">
-    <div class="flex-1 relative">
+    <div class="flex flex-col items-center gap-4 flex-1 relative">
       <input name="email" type="email" placeholder="Your best email address"
         class="w-full pl-8 pr-8 py-4 bg-white text-black border border-ring placeholder:italic md:text-xl leading-6 transition focus:invalid:border-destructive focus:border-primary focus:outline-none lg:pr-36"
         required />
-      <button class="button absolute right-2 top-2">Notify me</button>
+      <button class="button  sm:absolute sm:right-2 sm:top-2">Notify me</button>
     </div>
   </form>
 </template>
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
@@ -1,7 +1,7 @@
 ---
 import type { Media } from '@payload-types'
 import '@/styles/globals.scss'
-import { SEO } from "astro-seo";
+import { SEO } from 'astro-seo'
 import { Toaster } from 'vue-sonner'
 import { Menu } from 'lucide-vue-next'
 import GameSelect from '@/components/molecules/GameSelect.vue'
@@ -30,21 +30,21 @@ const { user } = Astro.locals
       openGraph={{
         basic: {
           title: title,
-          type: "image",
-          image: "https://cdn.soulsborne.build/og/banner.jpg",
-        }
+          type: 'image',
+          image: 'https://cdn.soulsborne.build/og/banner.jpg',
+        },
       }}
       twitter={{
-        creator: "@KeziahMoselle"
+        creator: '@KeziahMoselle',
       }}
       extend={{
-        link: [{ rel: "icon", href: "/favicon.ico" }],
+        link: [{ rel: 'icon', href: '/favicon.ico' }],
         meta: [
           {
-            name: "twitter:image",
-            content: "https://cdn.soulsborne.build/og/banner.jpg",
+            name: 'twitter:image',
+            content: 'https://cdn.soulsborne.build/og/banner.jpg',
           },
-          { name: "twitter:title", content: `${title} | soulsborne.build` },
+          { name: 'twitter:title', content: `${title} | soulsborne.build` },
         ],
       }}
     />
@@ -140,7 +140,9 @@ const { user } = Astro.locals
     </main>
 
     <footer>
-      <div class="text-center text-white text-opacity-70 px-4 mb-4 mt-24 max-w-md mx-auto">
+      <div
+        class="text-sm text-center text-white text-opacity-70 px-4 mb-4 mt-24 max-w-xl mx-auto"
+      >
         <p>
           Soulsborne.build is not affiliated with or endorsed by BANDAI NAMCO,
           FROMSOFTWARE, Inc.

diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
@@ -179,19 +179,31 @@ const CORE_MEMBERS = [
     <h2 class="type-h2 text-center mb-16">Major features upcoming</h2>
 
     <div class="grid gap-5 lg:grid-cols-3">
-      <CardImage title="Builder" src="/builder.png" alt="">
+      <CardImage
+        title="Builder"
+        src="/builder.png"
+        alt="The builder that allows users to create builds"
+      >
         Lorem ipsum dolor sit amet consectetur. Elit cras libero quam sociis.
         Egestas cursus condimentum dui aliquet convallis eget. Libero orci
         tincidunt quis nibh at in rhoncus elementum. In amet placerat luctus
         cras sem.
       </CardImage>
-      <CardImage title="Fashion souls" src="" alt="">
+      <CardImage
+        title="Fashion souls"
+        src=""
+        alt="Preview of a created fashion"
+      >
         Lorem ipsum dolor sit amet consectetur. Elit cras libero quam sociis.
         Egestas cursus condimentum dui aliquet convallis eget. Libero orci
         tincidunt quis nibh at in rhoncus elementum. In amet placerat luctus
         cras sem.
       </CardImage>
-      <CardImage title="Lore tree graph" src="/lore-graph-tree.png" alt="Lore tree graph">
+      <CardImage
+        title="Lore tree graph"
+        src="/lore-graph-tree.png"
+        alt="Lore tree graph"
+      >
         Lorem ipsum dolor sit amet consectetur. Elit cras libero quam sociis.
         Egestas cursus condimentum dui aliquet convallis eget. Libero orci
         tincidunt quis nibh at in rhoncus elementum. In amet placerat luctus
@@ -205,7 +217,7 @@ const CORE_MEMBERS = [
     class="relative grid gap-y-8 px-4 py-16 my-20 lg:px-28 lg:py-32 lg:my-40 lg:grid-cols-2"
   >
     <img
-      class="absolute inset-0 h-full object-cover object-top"
+      class="absolute inset-0 h-full w-full object-cover object-top"
       src="/hero/malenia.jpg"
       alt="Malenia vs Radhan during the intro cinematic"
     />
@@ -216,7 +228,9 @@ const CORE_MEMBERS = [
 
     <div class="flex flex-col justify-center">
       <PreregisterInput client:visible />
-      <p class="drop-shadow-md text-base mt-2">We will only send you 1 email at release time.</p>
+      <p class="text-center sm:text-left drop-shadow-md text-base mt-2">
+        We will only send you 1 email at release time.
+      </p>
     </div>
   </section>
 
@@ -261,7 +275,7 @@ const CORE_MEMBERS = [
   <!-- Members & Contributors -->
   <section class="container">
     <div
-      class="bg-secondary border border-primary px-4 py-4 flex flex-col gap-y-8 lg:px-28 lg:py-8"
+      class="bg-secondary border border-primary px-4 pt-4 pb-12 flex flex-col gap-y-8 lg:px-28 lg:py-8"
     >
       <h2 class="type-h2 text-center mt-4 mb-8">Core members</h2>
 
@@ -311,7 +325,7 @@ const CORE_MEMBERS = [
   <!-- Contributing -->
   <section class="container">
     <div
-      class="relative bg-secondary border border-primary px-4 py-4 lg:px-28 lg:py-8 my-14"
+      class="relative bg-secondary border border-primary px-4 pt-4 pb-12 lg:px-28 lg:py-8 my-14"
     >
       <h2 class="type-h2 text-center mt-4 mb-8">Join the project</h2>
       <img