Upgrade nuxt & nuxt-ui to latest

components/home/been-working-with.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5" as="section">
+  <UContainer class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="section">
     <div class="text-sm text-gray-500">Been working with</div>
     <PreviousRole
       company="Lateralus Ventures"

components/home/connect.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5" as="section">
+  <UContainer class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="section">
     <div class="text-sm text-gray-500">Let's connect</div>
 
     <div class="flex gap-4 overflow-x-auto">

components/home/introduction.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col md:gap-12 gap-5" as="header">
+  <UContainer class="flex flex-col md:gap-12 gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="header">
     <div class="flex items-center justify-between">
       <nuxt-img
         placeholder
@@ -7,7 +7,7 @@
         src="mariosant.webp"
         width="64"
         height="64"
-        class="w-16 h-16 rounded-full border dark:border-gray-800 dark:bg-slate-300"
+        class="w-16 h-16 rounded-full border border-gray-200 dark:border-gray-800 dark:bg-slate-300"
       />
 
       <div class="flex gap-3 items-center justify-end">

components/home/personal-projects.vue

@@ -1,5 +1,5 @@
 <template>
-    <UContainer class="flex flex-col gap-5" as="section">
+    <UContainer class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="section">
         <div class="text-sm text-gray-500">Personal projects</div>
 
         <div class="grid grid-cols-1 gap-5 md:grid-cols-3">

components/home/recent-posts.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="flex flex-col gap-5" as="section">
+  <UContainer class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl" as="section">
     <ULink
       class="text-sm text-gray-500 flex flex-row gap-1 items-center group"
       to="/articles"