domma-js 0.32.0 → 0.33.0

package/templates/kickstart/frontend/pages/docs/index.html

@@ -50,8 +50,8 @@
 <section class="hero hero-center bg-dark bg-ambient-rotate-glow" style="min-height: 40vh; padding: 3rem 2rem;">
   <div class="hero-content">
     <span data-icon="book" data-icon-size="72" class="mb-3" style="color: var(--dm-white-t85);"></span>
-    <h1 class="display-2 mb-3" style="color: var(--dm-white);">Documentation</h1>
-    <p class="lead" style="color: var(--dm-white-t85); max-width: 700px;">
+    <h1 class="text-4xl font-bold mb-3" style="color: var(--dm-white);">Documentation</h1>
+    <p class="text-lg" style="color: var(--dm-white-t85); max-width: 700px;">
       Everything you need to know to build with {{projectName}}
     </p>
   </div>
@@ -59,12 +59,12 @@
 
 <!-- Documentation Layout -->
 <div class="container-fluid py-6">
-  <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
+  <div class="grid grid-cols-1 grid-cols-4 gap-4">
     <!-- Sidebar Navigation -->
     <aside>
       <div class="docs-sidebar">
-        <h2 class="h5 mb-3">Documentation</h2>
-        <nav class="nav flex-column">
+        <h2 class="text-lg font-bold mb-3">Documentation</h2>
+        <nav class="flex flex-col">
           <a href="#getting-started" class="nav-link active">Getting Started</a>
           <a href="#installation" class="nav-link">Installation</a>
           <a href="#configuration" class="nav-link">Configuration</a>
@@ -77,41 +77,41 @@
     </aside>
 
     <!-- Main Content -->
-    <main class="lg:col-span-3">
+    <main class="col-span-3">
       <!-- Getting Started -->
       <section id="getting-started" class="mb-8">
-        <h1 class="display-4 mb-4">Getting Started</h1>
-        <p class="lead">
+        <h1 class="text-3xl font-bold mb-4">Getting Started</h1>
+        <p class="text-lg">
           Welcome to {{projectName}}! This guide will help you get up and running quickly.
         </p>
       </section>
 
       <!-- Installation -->
       <section id="installation" class="mb-8">
-        <h2 class="h3 mb-4">Installation</h2>
+        <h2 class="text-2xl font-bold mb-4">Installation</h2>
 
         <div id="install-tabs" class="tabs mb-4">
-          <ul class="tabs-nav">
-            <li><a href="#npm-tab" class="active">npm</a></li>
-            <li><a href="#yarn-tab">Yarn</a></li>
-            <li><a href="#cdn-tab">CDN</a></li>
+          <ul class="tab-list">
+            <li class="tab-item active">npm</li>
+            <li class="tab-item">Yarn</li>
+            <li class="tab-item">CDN</li>
           </ul>
 
-          <div class="tabs-content">
+          <div class="tab-content">
             <!-- npm Tab -->
-            <div id="npm-tab" class="tabs-pane active">
+            <div id="npm-tab" class="tab-panel active">
               <p>Install via npm:</p>
               <pre><code class="language-bash">npm install domma-js</code></pre>
             </div>
 
             <!-- Yarn Tab -->
-            <div id="yarn-tab" class="tabs-pane">
+            <div id="yarn-tab" class="tab-panel">
               <p>Install via Yarn:</p>
               <pre><code class="language-bash">yarn add domma-js</code></pre>
             </div>
 
             <!-- CDN Tab -->
-            <div id="cdn-tab" class="tabs-pane">
+            <div id="cdn-tab" class="tab-panel">
               <p>Include from CDN:</p>
               <pre><code class="language-html">&lt;link rel="stylesheet" href="https://unpkg.com/domma-js/dist/domma.css"&gt;
 &lt;script src="https://unpkg.com/domma-js/dist/domma.min.js"&gt;&lt;/script&gt;</code></pre>
@@ -122,7 +122,7 @@
 
       <!-- Configuration -->
       <section id="configuration" class="mb-8">
-        <h2 class="h3 mb-4">Configuration</h2>
+        <h2 class="text-2xl font-bold mb-4">Configuration</h2>
         <p>
           Configure your project using the <code>domma.config.json</code> file:
         </p>
@@ -141,23 +141,23 @@
 }</code></pre>
 
         <div class="alert alert-info mt-4">
-          <span data-icon="info" class="me-2"></span>
+          <span data-icon="info" class="mr-2"></span>
           <strong>Tip:</strong> You can override any configuration value programmatically using JavaScript.
         </div>
       </section>
 
       <!-- Components -->
       <section id="components" class="mb-8">
-        <h2 class="h3 mb-4">Components</h2>
+        <h2 class="text-2xl font-bold mb-4">Components</h2>
         <p>
           Domma includes 19+ UI components out of the box. Here are some examples:
         </p>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
+        <div class="grid grid-cols-1 grid-cols-2 gap-4 mt-3">
           <div class="card shadow-md">
             <div class="card-body">
-              <h3 class="h5 mb-2">Buttons</h3>
-              <div class="d-flex flex-wrap gap-2">
+              <h3 class="text-lg font-bold mb-2">Buttons</h3>
+              <div class="flex flex-wrap gap-2">
                 <button class="btn btn-primary">Primary</button>
                 <button class="btn btn-secondary">Secondary</button>
                 <button class="btn btn-success">Success</button>
@@ -168,8 +168,8 @@
 
           <div class="card shadow-md">
             <div class="card-body">
-              <h3 class="h5 mb-2">Badges</h3>
-              <div class="d-flex flex-wrap gap-2">
+              <h3 class="text-lg font-bold mb-2">Badges</h3>
+              <div class="flex flex-wrap gap-2">
                 <span class="badge badge-primary">Primary</span>
                 <span class="badge badge-success">Success</span>
                 <span class="badge badge-warning">Warning</span>
@@ -182,7 +182,7 @@
 
       <!-- Theming -->
       <section id="theming" class="mb-8">
-        <h2 class="h3 mb-4">Theming</h2>
+        <h2 class="text-2xl font-bold mb-4">Theming</h2>
         <p>
           Customize your theme by overriding CSS variables:
         </p>
@@ -201,11 +201,11 @@
 
       <!-- API Reference -->
       <section id="api" class="mb-8">
-        <h2 class="h3 mb-4">API Reference</h2>
+        <h2 class="text-2xl font-bold mb-4">API Reference</h2>
 
         <div class="card mb-4">
           <div class="card-body">
-            <h3 class="h5 mb-3">Domma ($ alias)</h3>
+            <h3 class="text-lg font-bold mb-3">Domma ($ alias)</h3>
             <p class="text-secondary mb-3">jQuery-compatible DOM manipulation</p>
             <pre><code class="language-javascript">$('#element').addClass('active');
 $('.items').each((el) => console.log(el));</code></pre>
@@ -214,7 +214,7 @@ $('.items').each((el) => console.log(el));</code></pre>
 
         <div class="card mb-4">
           <div class="card-body">
-            <h3 class="h5 mb-3">Domma.utils (_ alias)</h3>
+            <h3 class="text-lg font-bold mb-3">Domma.utils (_ alias)</h3>
             <p class="text-secondary mb-3">Lodash-compatible utilities</p>
             <pre><code class="language-javascript">_.chunk([1, 2, 3, 4], 2);  // [[1, 2], [3, 4]]
 _.debounce(fn, 300);</code></pre>
@@ -223,7 +223,7 @@ _.debounce(fn, 300);</code></pre>
 
         <div class="card">
           <div class="card-body">
-            <h3 class="h5 mb-3">Domma.theme</h3>
+            <h3 class="text-lg font-bold mb-3">Domma.theme</h3>
             <p class="text-secondary mb-3">Theme management</p>
             <pre><code class="language-javascript">Domma.theme.init({ theme: 'ocean-dark' });
 Domma.theme.get();  // 'ocean-dark'</code></pre>
@@ -233,46 +233,37 @@ Domma.theme.get();  // 'ocean-dark'</code></pre>
 
       <!-- FAQ -->
       <section id="faq" class="mb-8">
-        <h2 class="h3 mb-4">Frequently Asked Questions</h2>
+        <h2 class="text-2xl font-bold mb-4">Frequently Asked Questions</h2>
 
         <div class="accordion" id="docs-faq">
           <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
-                Is Domma production-ready?
-              </button>
-            </h3>
-            <div id="faq1" class="accordion-collapse collapse show">
-              <div class="accordion-body">
-                Yes! Domma is actively maintained and used in production applications.
-              </div>
+            <div class="accordion-header">
+              <span>Is Domma production-ready?</span>
+              <span class="accordion-icon">&#9660;</span>
             </div>
+            <div class="accordion-body"><div class="accordion-content">
+                Yes! Domma is actively maintained and used in production applications.
+              </div></div>
           </div>
 
           <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
-                What browsers are supported?
-              </button>
-            </h3>
-            <div id="faq2" class="accordion-collapse collapse">
-              <div class="accordion-body">
-                Domma supports all modern browsers (Chrome, Firefox, Safari, Edge). IE11 is not supported.
-              </div>
+            <div class="accordion-header">
+              <span>What browsers are supported?</span>
+              <span class="accordion-icon">&#9660;</span>
             </div>
+            <div class="accordion-body"><div class="accordion-content">
+                Domma supports all modern browsers (Chrome, Firefox, Safari, Edge). IE11 is not supported.
+              </div></div>
           </div>
 
           <div class="accordion-item">
-            <h3 class="accordion-header">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
-                Can I use Domma with React/Vue/Angular?
-              </button>
-            </h3>
-            <div id="faq3" class="accordion-collapse collapse">
-              <div class="accordion-body">
-                Yes! While Domma works standalone, you can integrate it with any framework for utilities and theming.
-              </div>
+            <div class="accordion-header">
+              <span>Can I use Domma with React/Vue/Angular?</span>
+              <span class="accordion-icon">&#9660;</span>
             </div>
+            <div class="accordion-body"><div class="accordion-content">
+                Yes! While Domma works standalone, you can integrate it with any framework for utilities and theming.
+              </div></div>
           </div>
         </div>
       </section>

package/templates/kickstart/frontend/pages/index.html

@@ -21,16 +21,16 @@
 <!-- Hero Section -->
 <section class="hero hero-center bg-dark bg-ambient-rotate-glow" style="min-height: 50vh; padding: 4rem 2rem;">
   <div class="hero-content">
-    <h1 class="display-1 mb-4" style="color: var(--dm-white);">Welcome to {{projectName}}</h1>
-    <p class="lead mb-6" style="color: var(--dm-white-t85); max-width: 700px;">
+    <h1 class="text-4xl font-bold mb-4" style="color: var(--dm-white);">Welcome to {{projectName}}</h1>
+    <p class="text-lg mb-6" style="color: var(--dm-white-t85); max-width: 700px;">
       A modern web project powered by Domma - the lightweight JavaScript framework
       with zero dependencies and powerful features.
     </p>
-    <div class="d-flex justify-content-center gap-3">
+    <div class="flex justify-center gap-3">
       <a href="docs/" class="btn btn-lg btn-primary">
         <span data-icon="book" data-icon-size="20"></span> Get Started
       </a>
-      <a href="https://dommajs.org" class="btn btn-lg btn-outline-light" target="_blank">
+      <a href="https://dommajs.org" class="btn btn-lg btn-outline" target="_blank">
         <span data-icon="external-link" data-icon-size="20"></span> View Docs
       </a>
     </div>
@@ -46,7 +46,7 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="zap" data-icon-size="48" class="text-warning mb-3"></span>
-        <h3 class="h5 mb-3">Lightning Fast</h3>
+        <h3 class="text-lg font-bold mb-3">Lightning Fast</h3>
         <p class="text-secondary mb-0">
           Zero dependencies and optimised for performance.
           Get up and running in minutes.
@@ -58,7 +58,7 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="layers" data-icon-size="48" class="text-primary mb-3"></span>
-        <h3 class="h5 mb-3">Feature Complete</h3>
+        <h3 class="text-lg font-bold mb-3">Feature Complete</h3>
         <p class="text-secondary mb-0">
           DOM manipulation, utilities, reactive models, UI components,
           and more in one package.
@@ -70,7 +70,7 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="palette" data-icon-size="48" class="text-info mb-3"></span>
-        <h3 class="h5 mb-3">Beautiful Themes</h3>
+        <h3 class="text-lg font-bold mb-3">Beautiful Themes</h3>
         <p class="text-secondary mb-0">
           16+ built-in themes with light/dark variants.
           Fully customisable with CSS variables.
@@ -82,7 +82,7 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="code" data-icon-size="48" class="text-success mb-3"></span>
-        <h3 class="h5 mb-3">Developer Friendly</h3>
+        <h3 class="text-lg font-bold mb-3">Developer Friendly</h3>
         <p class="text-secondary mb-0">
           jQuery-like syntax, Lodash utilities, and comprehensive
           TypeScript definitions.
@@ -94,7 +94,7 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="smartphone" data-icon-size="48" class="text-danger mb-3"></span>
-        <h3 class="h5 mb-3">Fully Responsive</h3>
+        <h3 class="text-lg font-bold mb-3">Fully Responsive</h3>
         <p class="text-secondary mb-0">
           Bootstrap-compatible grid system with CSS Grid utilities.
           Mobile-first design.
@@ -106,7 +106,7 @@
     <div class="card card-hover shadow-lg">
       <div class="card-body text-center p-5">
         <span data-icon="settings" data-icon-size="48" class="text-secondary mb-3"></span>
-        <h3 class="h5 mb-3">JSON Configured</h3>
+        <h3 class="text-lg font-bold mb-3">JSON Configured</h3>
         <p class="text-secondary mb-0">
           Single config file drives navbar, footer, theme, and features.
           No complex setup needed.
@@ -117,18 +117,18 @@
 </section>
 
 <!-- Call to Action -->
-<section class="bg-surface py-8">
+<section class="bg-white py-8">
   <div class="container text-center">
     <h2 class="mb-4">Ready to Get Started?</h2>
-    <p class="lead mb-6">
+    <p class="text-lg mb-6">
       Check out the documentation to learn more about what Domma can do.
     </p>
-    <div class="d-flex justify-content-center gap-3">
+    <div class="flex justify-center gap-3">
       <a href="docs/" class="btn btn-lg btn-primary">
         <span data-icon="book" data-icon-size="20"></span>
         Read the Docs
       </a>
-      <a href="https://dommajs.org" class="btn btn-lg btn-outline-primary" target="_blank">
+      <a href="https://dommajs.org" class="btn btn-lg btn-outline" target="_blank">
         <span data-icon="external-link" data-icon-size="20"></span>
         Explore DommaJS
       </a>

package/templates/kickstart/frontend/pages/privacy/index.html

@@ -20,41 +20,41 @@
 
 <!-- Page Header -->
 <section class="container py-6">
-  <h1 class="display-2 mb-3">Privacy Policy</h1>
-  <p class="lead text-secondary">
+  <h1 class="text-4xl font-bold mb-3">Privacy Policy</h1>
+  <p class="text-lg text-secondary">
     Last updated: <time datetime="{{year}}-01-01">January {{year}}</time>
   </p>
 </section>
 
 <!-- Privacy Content -->
 <section class="container py-4">
-  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+  <div class="grid grid-cols-1 grid-cols-4 gap-6">
     <!-- Table of Contents -->
     <aside>
       <div class="card sticky" style="top: 80px;">
         <div class="card-body">
-          <h2 class="h5 mb-3">Contents</h2>
-          <nav class="nav flex-column">
-            <a href="#introduction" class="nav-link">Introduction</a>
-            <a href="#information-collection" class="nav-link">Information We Collect</a>
-            <a href="#information-use" class="nav-link">How We Use Information</a>
-            <a href="#information-sharing" class="nav-link">Information Sharing</a>
-            <a href="#data-security" class="nav-link">Data Security</a>
-            <a href="#your-rights" class="nav-link">Your Rights</a>
-            <a href="#cookies" class="nav-link">Cookies</a>
-            <a href="#children" class="nav-link">Children's Privacy</a>
-            <a href="#changes" class="nav-link">Policy Changes</a>
-            <a href="#contact" class="nav-link">Contact Us</a>
+          <h2 class="text-lg font-bold mb-3">Contents</h2>
+          <nav class="list-group list-group-flush">
+            <a href="#introduction" class="list-group-item list-group-item-action">Introduction</a>
+            <a href="#information-collection" class="list-group-item list-group-item-action">Information We Collect</a>
+            <a href="#information-use" class="list-group-item list-group-item-action">How We Use Information</a>
+            <a href="#information-sharing" class="list-group-item list-group-item-action">Information Sharing</a>
+            <a href="#data-security" class="list-group-item list-group-item-action">Data Security</a>
+            <a href="#your-rights" class="list-group-item list-group-item-action">Your Rights</a>
+            <a href="#cookies" class="list-group-item list-group-item-action">Cookies</a>
+            <a href="#children" class="list-group-item list-group-item-action">Children's Privacy</a>
+            <a href="#changes" class="list-group-item list-group-item-action">Policy Changes</a>
+            <a href="#contact" class="list-group-item list-group-item-action">Contact Us</a>
           </nav>
         </div>
       </div>
     </aside>
 
     <!-- Main Content -->
-    <main class="lg:col-span-3">
+    <main class="col-span-3">
       <!-- Introduction -->
       <section id="introduction" class="mb-6">
-        <h2 class="h3 mb-4">Introduction</h2>
+        <h2 class="text-2xl font-bold mb-4">Introduction</h2>
         <p>
           Welcome to {{projectName}}. We respect your privacy and are committed to protecting your personal data.
           This privacy policy will inform you about how we look after your personal data when you visit our website
@@ -64,9 +64,9 @@
 
       <!-- Information Collection -->
       <section id="information-collection" class="mb-6">
-        <h2 class="h3 mb-4">Information We Collect</h2>
+        <h2 class="text-2xl font-bold mb-4">Information We Collect</h2>
 
-        <h3 class="h5 mb-3">Personal Information</h3>
+        <h3 class="text-lg font-bold mb-3">Personal Information</h3>
         <p class="mb-3">We may collect the following types of personal information:</p>
         <ul class="mb-4">
           <li><strong>Identity Data:</strong> First name, last name, username or similar identifier</li>
@@ -76,7 +76,7 @@
           <li><strong>Marketing Data:</strong> Your preferences in receiving marketing from us and your communication preferences</li>
         </ul>
 
-        <h3 class="h5 mb-3">Automatically Collected Information</h3>
+        <h3 class="text-lg font-bold mb-3">Automatically Collected Information</h3>
         <p>
           When you visit our website, we automatically collect certain information about your device, including
           information about your web browser, IP address, time zone, and some of the cookies that are installed on your device.
@@ -85,7 +85,7 @@
 
       <!-- Information Use -->
       <section id="information-use" class="mb-6">
-        <h2 class="h3 mb-4">How We Use Your Information</h2>
+        <h2 class="text-2xl font-bold mb-4">How We Use Your Information</h2>
         <p class="mb-3">We use your personal information for the following purposes:</p>
         <ul>
           <li>To provide, operate, and maintain our website and services</li>
@@ -101,10 +101,10 @@
 
       <!-- Information Sharing -->
       <section id="information-sharing" class="mb-6">
-        <h2 class="h3 mb-4">Information Sharing and Disclosure</h2>
+        <h2 class="text-2xl font-bold mb-4">Information Sharing and Disclosure</h2>
 
         <div class="alert alert-info mb-4">
-          <span data-icon="info" class="me-2"></span>
+          <span data-icon="info" class="mr-2"></span>
           <strong>Important:</strong> We do not sell, trade, or rent your personal information to third parties.
         </div>
 
@@ -118,7 +118,7 @@
 
       <!-- Data Security -->
       <section id="data-security" class="mb-6">
-        <h2 class="h3 mb-4">Data Security</h2>
+        <h2 class="text-2xl font-bold mb-4">Data Security</h2>
         <p class="mb-3">
           We have implemented appropriate security measures to prevent your personal data from being accidentally lost,
           used, accessed, altered, or disclosed in an unauthorised manner.
@@ -131,14 +131,14 @@
 
       <!-- Your Rights -->
       <section id="your-rights" class="mb-6">
-        <h2 class="h3 mb-4">Your Rights</h2>
+        <h2 class="text-2xl font-bold mb-4">Your Rights</h2>
         <p class="mb-3">Under data protection laws, you have the following rights:</p>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 grid-cols-2 gap-4">
           <div class="card">
             <div class="card-body">
-              <h3 class="h6 mb-2">
-                <span data-icon="user" class="me-2"></span>Right to Access
+              <h3 class="text-base font-bold mb-2">
+                <span data-icon="user" class="mr-2"></span>Right to Access
               </h3>
               <p class="text-secondary mb-0">Request copies of your personal data</p>
             </div>
@@ -146,8 +146,8 @@
 
           <div class="card">
             <div class="card-body">
-              <h3 class="h6 mb-2">
-                <span data-icon="edit" class="me-2"></span>Right to Rectification
+              <h3 class="text-base font-bold mb-2">
+                <span data-icon="edit" class="mr-2"></span>Right to Rectification
               </h3>
               <p class="text-secondary mb-0">Request correction of inaccurate data</p>
             </div>
@@ -155,8 +155,8 @@
 
           <div class="card">
             <div class="card-body">
-              <h3 class="h6 mb-2">
-                <span data-icon="trash" class="me-2"></span>Right to Erasure
+              <h3 class="text-base font-bold mb-2">
+                <span data-icon="trash" class="mr-2"></span>Right to Erasure
               </h3>
               <p class="text-secondary mb-0">Request deletion of your personal data</p>
             </div>
@@ -164,8 +164,8 @@
 
           <div class="card">
             <div class="card-body">
-              <h3 class="h6 mb-2">
-                <span data-icon="shield" class="me-2"></span>Right to Restrict
+              <h3 class="text-base font-bold mb-2">
+                <span data-icon="shield" class="mr-2"></span>Right to Restrict
               </h3>
               <p class="text-secondary mb-0">Request restriction of processing</p>
             </div>
@@ -173,8 +173,8 @@
 
           <div class="card">
             <div class="card-body">
-              <h3 class="h6 mb-2">
-                <span data-icon="download" class="me-2"></span>Right to Data Portability
+              <h3 class="text-base font-bold mb-2">
+                <span data-icon="download" class="mr-2"></span>Right to Data Portability
               </h3>
               <p class="text-secondary mb-0">Request transfer of your data</p>
             </div>
@@ -182,8 +182,8 @@
 
           <div class="card">
             <div class="card-body">
-              <h3 class="h6 mb-2">
-                <span data-icon="x-circle" class="me-2"></span>Right to Object
+              <h3 class="text-base font-bold mb-2">
+                <span data-icon="x-circle" class="mr-2"></span>Right to Object
               </h3>
               <p class="text-secondary mb-0">Object to processing of your data</p>
             </div>
@@ -197,7 +197,7 @@
 
       <!-- Cookies -->
       <section id="cookies" class="mb-6">
-        <h2 class="h3 mb-4">Cookies and Tracking Technologies</h2>
+        <h2 class="text-2xl font-bold mb-4">Cookies and Tracking Technologies</h2>
         <p class="mb-3">
           We use cookies and similar tracking technologies to track activity on our website and hold certain information.
           Cookies are files with a small amount of data which may include an anonymous unique identifier.
@@ -214,7 +214,7 @@
 
       <!-- Children's Privacy -->
       <section id="children" class="mb-6">
-        <h2 class="h3 mb-4">Children's Privacy</h2>
+        <h2 class="text-2xl font-bold mb-4">Children's Privacy</h2>
         <p>
           Our website is not intended for children under the age of 13. We do not knowingly collect personal information
           from children under 13. If you are a parent or guardian and you are aware that your child has provided us with
@@ -224,7 +224,7 @@
 
       <!-- Changes to Policy -->
       <section id="changes" class="mb-6">
-        <h2 class="h3 mb-4">Changes to This Privacy Policy</h2>
+        <h2 class="text-2xl font-bold mb-4">Changes to This Privacy Policy</h2>
         <p>
           We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new
           Privacy Policy on this page and updating the "Last updated" date at the top of this policy.
@@ -237,12 +237,12 @@
 
       <!-- Contact -->
       <section id="contact" class="mb-6">
-        <h2 class="h3 mb-4">Contact Us</h2>
+        <h2 class="text-2xl font-bold mb-4">Contact Us</h2>
         <p class="mb-4">
           If you have any questions about this Privacy Policy, please contact us:
         </p>
 
-        <div class="card bg-surface">
+        <div class="card bg-white">
           <div class="card-body">
             <dl class="mb-0">
               <dt class="mb-2">Email</dt>