Change the "Account Settings Panel - Minimalist Style" Section to a more modern style. Maintain Minimalist approach. - Follow Up Deployment

index.html

@@ -288,52 +288,40 @@
             </div>
         </section>
 
-        <!-- Account Settings Panel - Minimalist Style -->
+        <!-- Modern Minimalist Account Settings Panel -->
         <section class="mb-8">
             <h2 class="text-xl font-medium mb-4 text-gray-300">Account Settings</h2>
-            <div class="grid grid-cols-1 gap-2">
-                <div class="flex items-center p-4 hover:bg-gray-800/50 rounded-lg transition-all cursor-pointer">
-                    <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mr-4">
-                        <i class="fas fa-user-edit text-gray-400"></i>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div class="glass-card p-4 hover:bg-gray-800/30 transition-all cursor-pointer group">
+                    <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 mx-auto group-hover:from-orange-500 group-hover:to-amber-600 transition-all">
+                        <i class="fas fa-user-edit text-lg text-gray-300 group-hover:text-white"></i>
                     </div>
-                    <div class="flex-1">
-                        <h3 class="font-medium">Edit Profile</h3>
-                        <p class="text-sm text-gray-500">Update personal details</p>
-                    </div>
-                    <i class="fas fa-chevron-right text-gray-500"></i>
+                    <h3 class="font-medium text-center group-hover:text-orange-400 transition-all">Edit Profile</h3>
+                    <p class="text-xs text-gray-500 mt-1 text-center group-hover:text-gray-300 transition-all">Update details</p>
                 </div>
                 
-                <div class="flex items-center p-4 hover:bg-gray-800/50 rounded-lg transition-all cursor-pointer">
-                    <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mr-4">
-                        <i class="fas fa-history text-gray-400"></i>
-                    </div>
-                    <div class="flex-1">
-                        <h3 class="font-medium">Transaction History</h3>
-                        <p class="text-sm text-gray-500">View all transactions</p>
+                <div class="glass-card p-4 hover:bg-gray-800/30 transition-all cursor-pointer group">
+                    <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 mx-auto group-hover:from-orange-500 group-hover:to-amber-600 transition-all">
+                        <i class="fas fa-history text-lg text-gray-300 group-hover:text-white"></i>
                     </div>
-                    <i class="fas fa-chevron-right text-gray-500"></i>
+                    <h3 class="font-medium text-center group-hover:text-orange-400 transition-all">Transactions</h3>
+                    <p class="text-xs text-gray-500 mt-1 text-center group-hover:text-gray-300 transition-all">View history</p>
                 </div>
                 
-                <div class="flex items-center p-4 hover:bg-gray-800/50 rounded-lg transition-all cursor-pointer">
-                    <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mr-4">
-                        <i class="fas fa-shield-alt text-gray-400"></i>
+                <div class="glass-card p-4 hover:bg-gray-800/30 transition-all cursor-pointer group">
+                    <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 mx-auto group-hover:from-orange-500 group-hover:to-amber-600 transition-all">
+                        <i class="fas fa-shield-alt text-lg text-gray-300 group-hover:text-white"></i>
                     </div>
-                    <div class="flex-1">
-                        <h3 class="font-medium">Security</h3>
-                        <p class="text-sm text-gray-500">Password & 2FA settings</p>
-                    </div>
-                    <i class="fas fa-chevron-right text-gray-500"></i>
+                    <h3 class="font-medium text-center group-hover:text-orange-400 transition-all">Security</h3>
+                    <p class="text-xs text-gray-500 mt-1 text-center group-hover:text-gray-300 transition-all">Password & 2FA</p>
                 </div>
                 
-                <div class="flex items-center p-4 hover:bg-gray-800/50 rounded-lg transition-all cursor-pointer">
-                    <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center mr-4">
-                        <i class="fas fa-credit-card text-gray-400"></i>
-                    </div>
-                    <div class="flex-1">
-                        <h3 class="font-medium">Payment Methods</h3>
-                        <p class="text-sm text-gray-500">Manage payment options</p>
+                <div class="glass-card p-4 hover:bg-gray-800/30 transition-all cursor-pointer group">
+                    <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 mx-auto group-hover:from-orange-500 group-hover:to-amber-600 transition-all">
+                        <i class="fas fa-credit-card text-lg text-gray-300 group-hover:text-white"></i>
                     </div>
-                    <i class="fas fa-chevron-right text-gray-500"></i>
+                    <h3 class="font-medium text-center group-hover:text-orange-400 transition-all">Payments</h3>
+                    <p class="text-xs text-gray-500 mt-1 text-center group-hover:text-gray-300 transition-all">Manage methods</p>
                 </div>
             </div>
         </section>

prompts.txt

@@ -7,4 +7,6 @@ Create a Player Profile Page UI for a sweepstakes casino platform. The page shou
 Change the "Stat Summary Panels" to a more modern style
 Move the "Account Settings" section to under the Hero Banner
 Change the "Modern Stat Summary Panel" style to a different design with horizontal bars
-Change the "Account Settings Panel" section to a modern and minimalist style.
+Change the "Account Settings Panel" section to a modern and minimalist style.
+Change the "Account Settings Panel - Minimalist Style" display orientation to horizontal
+Change the "Account Settings Panel - Minimalist Style" Section  to a more modern style. Maintain Minimalist approach.