Working on main page

src/components/MainBanner.vue

@@ -24,7 +24,7 @@ const socials = [
 </script>
 
 <template>
-  <div class="w-container lg:my-32 mt-16">
+  <div class="w-container lg:mt-32 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,10 +3,7 @@
 </script>
 
 <template>
-  <div class="flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
-    <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/nature.jpg" alt="Nature" placeholder />
-    </div>
+  <section class="flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
     <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>
@@ -19,5 +16,5 @@
     <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/nature5.jpg" alt="Nature" placeholder />
     </div>
-  </div>
+  </section>
 </template>

src/components/MainSection.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+defineProps<{
+  icon: string
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="p-4 border border-zinc-100 dark:border-zinc-300/10 rounded-xl flex flex-col justify-between">
+    <div class="flex items-center gap-2">
+      <UIcon :name="icon" class="text-subtitle text-lg" />
+      <h1>{{ title }}</h1>
+    </div>
+    <div class="text-subtitle mt-2 mb-4">
+      <slot />
+    </div>
+    <slot name="footer" />
+  </div>
+</template>
+
+<style>
+
+</style>