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>