Update profile pages design

resources/views/profile/playlists.blade.php

@@ -1,14 +1,24 @@
-<x-app-layout>
-    @include('partials.background')
-    <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row">
-        <div class="flex flex-col md:flex-row">
-            @include('profile.partials.sidebar')
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-                <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-                    @include('profile.partials.user-playlists')
-                </div>
-            </div>
-            @include('modals.create-playlist')
+<x-profile-layout>
+    <div class="space-y-5">
+        {{-- Header --}}
+        <div class="flex items-center justify-between">
+            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
+                <i class="fa-solid fa-rectangle-list text-rose-500"></i>
+                {{ __('nav.playlists') }}
+            </h2>
+            <button
+                data-te-toggle="modal"
+                data-te-target="#modalCreatePlaylist"
+                class="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-sm shadow-rose-600/20 hover:bg-rose-700 transition-colors">
+                <i class="fa-solid fa-plus text-xs"></i>
+                New Playlist
+            </button>
         </div>
+
+        {{-- Content --}}
+        @include('profile.partials.user-playlists')
+
+        {{-- Modal --}}
+        @include('modals.create-playlist')
     </div>
-</x-app-layout>
+</x-profile-layout>