Refactor navigation components for improved layout and functionality

- Updated UserMenu.vue to enhance button styling and spacing for a more modern look.
- Simplified CartFAB.vue to always show the cart button when items are present, regardless of the route.
- Adjusted AppHeader.vue for better alignment of elements.
- Enhanced AreaTabs.vue to enable the educator tab and improve badge styling.
- Refined BottomNav.vue to handle cart visibility and navigation more effectively.

These changes aim to enhance user navigation and overall experience within the application.

app/pages/educator/index.vue

@@ -51,7 +51,7 @@ const getDiscount = (category: string): number | undefined => {
 
 <template>
   <NuxtLayout name="default">
-    <div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
+    <div class="min-h-screen px-4 py-12 md:px-6 lg:px-8">
       <!-- Page Header -->
       <div class="mx-auto mb-12 max-w-container-wide text-center">
         <h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">
@@ -85,17 +85,10 @@ const getDiscount = (category: string): number | undefined => {
       <!-- Products Grid -->
       <div v-else-if="products && products.length > 0" class="mx-auto max-w-container-wide">
         <ProductGrid :columns="3">
-          <ProductCard
-            v-for="product in products"
-            :key="product.id"
-            image="/img/makerspace-jk-2025.jpg"
-            :title="product.name"
-            :description="product.description"
-            :price="Number(product.price)"
-            :badge="getBadge(product.category)"
-            :discount-percentage="getDiscount(product.category)"
-            :product-id="product.id"
-          />
+          <ProductCard v-for="product in products" :key="product.id" image="/img/makerspace-jk-2025.jpg"
+            :title="product.name" :description="product.description" :price="Number(product.price)"
+            :badge="getBadge(product.category)" :discount-percentage="getDiscount(product.category)"
+            :product-id="product.id" />
         </ProductGrid>
       </div>
 

app/pages/experimenta/index.vue

@@ -51,7 +51,7 @@ const getDiscount = (category: string): number | undefined => {
 
 <template>
   <NuxtLayout name="default">
-    <div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
+    <div class="min-h-screen px-4 py-12 md:px-6 lg:px-8">
       <!-- Page Header -->
       <div class="mx-auto mb-12 max-w-container-wide text-center">
         <h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">

app/pages/products/[id].vue

@@ -97,7 +97,7 @@ const handleAddToCart = async () => {
 
 <template>
   <NuxtLayout name="default">
-    <div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
+    <div class="min-h-screen px-4 py-12 md:px-6 lg:px-8">
       <!-- Back Button -->
       <div class="mx-auto mb-8 max-w-container-narrow">
         <NuxtLink to="/products"

app/pages/products/index.vue

@@ -52,7 +52,7 @@ const getDiscount = (category: string): number | undefined => {
 
 <template>
   <NuxtLayout name="default">
-    <div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
+    <div class="min-h-screen px-4 py-12 md:px-6 lg:px-8">
       <!-- Page Header -->
       <div class="mx-auto mb-12 max-w-container-wide text-center">
         <h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">
@@ -86,17 +86,10 @@ const getDiscount = (category: string): number | undefined => {
       <!-- Products Grid -->
       <div v-else-if="products && products.length > 0" class="mx-auto max-w-container-wide">
         <ProductGrid :columns="3">
-          <ProductCard
-            v-for="product in products"
-            :key="product.id"
-            image="/img/makerspace-jk-2025.jpg"
-            :title="product.name"
-            :description="product.description"
-            :price="Number(product.price)"
-            :badge="getBadge(product.category)"
-            :discount-percentage="getDiscount(product.category)"
-            :product-id="product.id"
-          />
+          <ProductCard v-for="product in products" :key="product.id" image="/img/makerspace-jk-2025.jpg"
+            :title="product.name" :description="product.description" :price="Number(product.price)"
+            :badge="getBadge(product.category)" :discount-percentage="getDiscount(product.category)"
+            :product-id="product.id" />
         </ProductGrid>
       </div>