From 23d6238afd3822bd5c4067c66eff40f99104ec55 Mon Sep 17 00:00:00 2001
From: Keziah <contact@keziahmoselle.fr>
Date: Tue, 16 Apr 2024 19:47:49 +0200
Subject: [PATCH] feat(homepage): various improvements

---
 .../src/components/molecules/CardImage.vue    |  4 +--
 .../components/molecules/PreregisterInput.vue |  4 +--
 frontend/src/layouts/Layout.astro             | 22 ++++++++-------
 frontend/src/pages/index.astro                | 28 ++++++++++++++-----
 4 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/molecules/CardImage.vue b/frontend/src/components/molecules/CardImage.vue
index d5ddeed..436fa02 100644
--- 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
index 2562841..2e548b0 100644
--- 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
index 12aecc4..c7b1a63 100644
--- 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
index e52da91..2f19123 100644
--- 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