refactor: update page background colors to base-100 and reorder tools page sections

Author: IrvanFza

src/pages/compare.astro

@@ -62,7 +62,7 @@ const planData = allPlans.map(plan => ({
     </section>
 
     <!-- Comparison Matrix -->
-    <section class="py-8 bg-base-200">
+    <section class="py-8 bg-base-100">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <ComparisonMatrix client:load plans={planData} />
       </div>

src/pages/models/[slug].astro

@@ -34,7 +34,7 @@ const formatContextWindow = (tokens: number): string => {
 >
   <Navbar />
 
-  <main class="min-h-screen bg-base-200">
+  <main class="min-h-screen bg-base-100">
     <!-- Breadcrumbs -->
     <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
       <nav aria-label="Breadcrumb">

src/pages/models/index.astro

@@ -40,7 +40,7 @@ const providers = [...new Set(allModels.map(m => m.data.provider))].sort();
     </section>
 
     <!-- Filters & Grid -->
-    <section class="py-8 bg-base-200">
+    <section class="py-8 bg-base-100">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
           <p class="text-sm text-base-content/60">

src/pages/plans/[slug].astro

@@ -132,7 +132,7 @@ const getUptimeColor = (pct?: number) => {
 
   <Navbar />
 
-  <main class="min-h-screen bg-base-200">
+  <main class="min-h-screen bg-base-100">
     <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
       <nav aria-label="Breadcrumb">
         <ol class="flex items-center gap-2 text-sm">

src/pages/plans/index.astro

@@ -66,7 +66,7 @@ const planDataForFilter = allPlans.map(plan => ({
     </section>
 
     <!-- Filter Bar + Plan Grid -->
-    <section class="py-8 bg-base-200">
+    <section class="py-8 bg-base-100">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <!-- FilterBar React Island -->
         <div class="mb-6">

src/pages/tools/index.astro

@@ -37,15 +37,8 @@ const sortedTools = [...allTools].sort((a, b) => a.data.name.localeCompare(b.dat
       </div>
     </section>
 
-    <!-- Compatibility Matrix -->
-    <section class="py-8">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <CompatibilityMatrix />
-      </div>
-    </section>
-
     <!-- Grid -->
-    <section class="py-8 bg-base-200">
+    <section class="py-8 bg-base-100">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex items-center justify-between mb-6">
           <div>
@@ -68,6 +61,13 @@ const sortedTools = [...allTools].sort((a, b) => a.data.name.localeCompare(b.dat
         </div>
       </div>
     </section>
+
+    <!-- Compatibility Matrix -->
+    <section class="py-8">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <CompatibilityMatrix />
+      </div>
+    </section>
   </main>
 
   <Footer />