Improve main page

src/components/MainBanner.vue

@@ -24,7 +24,7 @@ const socials = [
 </script>
 
 <template>
-  <div class="w-container lg:mt-32 my-16">
+  <div class="w-container my-16">
     <div class="max-w-2xl space-y-8">
       <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
         Software engineer and mathematics lover

src/components/MainPhotos.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <section class="flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
+  <section class="flex justify-center gap-5 overflow-hidden py-4 sm:gap-8 mb-16">
     <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl -rotate-2">
       <NuxtImg class="w-full h-full" src="/img/nature2.jpg" alt="Nature" placeholder />
     </div>

src/components/MainSection.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  icon: string
-  title: string
-}>()
-
-const appConfig = useAppConfig()
-function getColor() {
-  return `text-${appConfig.ui.primary}-500`
-}
-</script>
-
-<template>
-  <div class="p-4 border border-zinc-100 dark:border-zinc-300/10 rounded-xl flex flex-col justify-between">
-    <div :class="getColor()" class="flex items-center gap-2">
-      <UIcon :name="icon" class="text-2xl" />
-      <h1>{{ title }}</h1>
-    </div>
-    <div class="text-subtitle mt-2 mb-4 text-sm">
-      <slot />
-    </div>
-    <slot name="footer" />
-  </div>
-</template>
-
-<style>
-
-</style>

src/pages/index.vue

@@ -2,9 +2,6 @@
 useHead({
   title: 'Arthur Danjou • Software Engineer and Maths Lover',
 })
-
-const { data: latestArticle, pending } = await useLatestPost()
-const format = (date: string) => useDateFormat(date, 'D MMMM YYYY').value.replaceAll('"', '')
 </script>
 
 <template>
@@ -12,100 +9,5 @@ const format = (date: string) => useDateFormat(date, 'D MMMM YYYY').value.replac
     <Announcement />
     <MainBanner />
     <MainPhotos />
-    <div class="w-container my-16 flex flex-col md:flex-row gap-8 justify-between md:gap-32">
-      <div class="md:w-1/2 space-y-8">
-        <MainSection icon="i-ph-person-arms-spread-bold" title="Discover more about me">
-          <p>
-            I'm a software engineer interested in AI, cloud and emerging technologies. I have a strong mathematical background and a passion for learning and sharing knowledge.
-          </p>
-          <template #footer>
-            <UButton
-              label="Move to the about page"
-              icon="i-ph-arrow-up-right-bold"
-              trailing
-              block
-              variant="soft"
-              to="/about"
-            />
-          </template>
-        </MainSection>
-        <MainSection v-if="pending || !latestArticle" icon="i-ph-pencil-line-bold" title="Read my latest article">
-          <p>
-            The content is loading
-          </p>
-          <template #footer>
-            <UButton
-              label="Loading content"
-              trailing
-              block
-              loading
-            />
-          </template>
-        </MainSection>
-        <MainSection v-else icon="i-ph-pencil-line-bold" :title="latestArticle?.title">
-          <div>
-            <h3>{{ latestArticle.description }}</h3>
-            <div class="text-xs italic">
-              {{ format(latestArticle.publishedAt) }} — {{ latestArticle.readingMins }} min.
-            </div>
-          </div>
-          <template #footer>
-            <UButton
-              label="Read my latest article"
-              icon="i-ph-arrow-up-right-bold"
-              trailing
-              block
-              variant="soft"
-              :to="`writing/${latestArticle.slug}`"
-            />
-          </template>
-        </MainSection>
-        <MainSection icon="i-ph-users-bold" title="The curated list of talents">
-          <p>
-            My talents page highlights inspiring web talents I've discovered through research and work experience, including creative designers, talented web developers, and open-source contributors.
-          </p>
-          <template #footer>
-            <UButton
-              label="Move on"
-              icon="i-ph-arrow-up-right-bold"
-              trailing
-              block
-              variant="soft"
-              to="/talents"
-            />
-          </template>
-        </MainSection>
-      </div>
-      <div class="md:w-1/2 gap-8 flex flex-col">
-        <MainSection icon="i-ph-tree-evergreen-bold" title="My environment">
-          <p>
-            My uses page provides insights into the software, hardware, and favorite tech stack I use for software development, gaming, work, and learning. It's a comprehensive list of my preferred tools and resources.
-          </p>
-          <template #footer>
-            <UButton
-              label="Explore my setup"
-              icon="i-ph-arrow-up-right-bold"
-              trailing
-              block
-              variant="soft"
-              to="/uses"
-            />
-          </template>
-        </MainSection>
-        <MainSection icon="i-ph-book-bookmark-bold" title="My bookmarks">
-          Bookmarks
-          <template #footer>
-            <UButton
-              label="Move on"
-              icon="i-ph-arrow-up-right-bold"
-              trailing
-              block
-              variant="soft"
-              to="/bookmarks"
-            />
-          </template>
-        </MainSection>
-      </div>
-    </div>
   </section>
 </template>