feat: refactor about me section layout in index.blade.php

- Reorganized the structure of the "About Me" section for improved responsiveness and readability.
- Adjusted classes for better alignment and spacing.
- Moved the title and description to enhance visual hierarchy.

resources/views/public/index.blade.php

@@ -72,18 +72,8 @@ class="Creations relative hidden xl:grid grow w-full aspect-[885/622]"/>
         <div class="w-full h-24 bg-gradient-to-b from-neutral-200 to-light"></div>
         <div class="container mx-auto px-4 flex flex-col justify-start items-center gap-2.5">
             <div class="flex flex-col justify-start items-start w-full gap-16">
-                <div class="flex flex-col justify-start items-start max-w-6xl">
-                    <div class="text-2xl font-bold">{{ __('home.about_me') }}</div>
-                    <h2 class="text-5xl xl:text-6xl font-normal">
-                        @if(!$aboutMeSection->isEmpty())
-                            {{ $aboutMeSection->first()->attractDescTransKey->getTranslation() }}
-                        @else
-                            Lorem ipsum dolor sit amet,
-                        @endif
-                    </h2>
-                </div>
-                <div class="flex flex-col xl:flex-row justify-start items-center w-full gap-4 xl:gap-0">
-                    <div class="flex shrink-0 basis-1/2 justify-center items-center p-4 xl:p-0 gap-2.5">
+                <div class="flex flex-col xl:flex-row justify-start w-full gap-8 xl:gap-16">
+                    <div class="flex shrink-0 justify-center items-center p-4 xl:p-0 gap-2.5">
                         <div class="overflow-hidden w-full xl:w-[25rem] aspect-square rounded-2xl shadow-[-.5rem_.5rem_0px_0px_rgba(0,0,0,1.00)] shadow-pink-normal">
                             @if(!$aboutMeSection->isEmpty())
                                 <img class="w-full h-full object-cover"
@@ -96,7 +86,16 @@ class="Creations relative hidden xl:grid grow w-full aspect-[885/622]"/>
                             @endif
                         </div>
                     </div>
-                    <div class="flex flex-col shrink-0 basis-1/2 py-2.5 justify-center items-start gap-4">
+                    <div class="flex flex-col py-2.5 items-start gap-4">
+                        <div class="text-2xl font-bold">{{ __('home.about_me') }}</div>
+                        <h2 class="text-5xl xl:text-6xl font-normal mb-8">
+                            @if(!$aboutMeSection->isEmpty())
+                                {{ $aboutMeSection->first()->attractDescTransKey->getTranslation() }}
+                            @else
+                                Lorem ipsum dolor sit amet,
+                            @endif
+                        </h2>
+
                         <x-markdown class="flex flex-col gap-3 text-muted text-xl xl:text-3xl font-normal">
                             @if(!$aboutMeSection->isEmpty())
                                 {{ $aboutMeSection->first()->contentTransKey->getTranslation() }}