feat: Enhance dashboard with stats cards and task filtering

- Added stats cards to display active, completed, overdue, and due-today tasks on the dashboard.
- Implemented search functionality to filter tasks in real-time based on user input.
- Introduced quick-pick date buttons for easier task date selection.
- Updated task rendering logic to handle empty states for task lists.
- Improved overall user interface with new CSS styles for stat cards and buttons.

chore: Update environment variables and backend error handling

- Fixed formatting in the .env file for consistency.
- Enhanced error handling in the backend API for better debugging.

feat: Revamp frontend pages with new features and pricing sections

- Redesigned the index.html page to include a hero section and feature highlights.
- Created a new features page with dynamic loading of features from JSON.
- Implemented a pricing page that loads plans from JSON and highlights the featured plan.
- Added support and FAQ sections with dynamic content loading and contact form functionality.
- Introduced JSON files for FAQs, features, and pricing to allow easy updates without code changes.

frontend/js/pricing.js

@@ -0,0 +1,67 @@
+/**
+ * pricing.js
+ *
+ * Powers the Pricing page.
+ *
+ * Features:
+ *   - Loads the three plan definitions from `./data/pricing.json`
+ *     asynchronously via fetch().
+ *   - Dynamically renders one card per plan, highlighting the
+ *     "featured" plan with a coloured border and a "Most popular"
+ *     badge.
+ *   - Shows a graceful error message if the JSON file cannot be
+ *     loaded.
+ *
+ * Keeping plan data in a separate JSON file means marketing copy and
+ * prices can be updated without touching the page markup.
+ */
+
+const pricingContainer = document.getElementById('pricingContainer');
+
+async function loadPricing() {
+  try {
+    const response = await fetch('./data/pricing.json');
+    if (!response.ok) {
+      throw new Error(`Failed to load pricing: ${response.status}`);
+    }
+    const data = await response.json();
+    renderPlans(data.plans);
+  } catch (error) {
+    console.error('Error:', error);
+    pricingContainer.innerHTML = `<p class="text-white text-center">Unable to load pricing. Please try again later.</p>`;
+  }
+}
+
+function renderPlans(plans) {
+  pricingContainer.innerHTML = '';
+  plans.forEach(plan => {
+    const col = document.createElement('div');
+    col.className = 'col-12 col-md-4 mb-4';
+
+    const featuresHtml = plan.features
+      .map(f => `<li class="mb-2"><img src="./images/Tick.svg" alt="" width="18" class="me-2">${f}</li>`)
+      .join('');
+
+    const highlight = plan.featured ? 'pinkBorder' : '';
+    const badge = plan.featured
+      ? '<span class="badge bg-primary mb-2">Most popular</span>'
+      : '';
+
+    col.innerHTML = `
+      <div class="rounded shadow bg-translucent p-4 h-100 d-flex flex-column ${highlight}">
+        ${badge}
+        <h3 class="text-white">${plan.name}</h3>
+        <p class="text-white-50">${plan.tagline}</p>
+        <div class="mb-3">
+          <span class="display-4 text-white">$${plan.price}</span>
+          <span class="text-white-50 ms-2">${plan.period}</span>
+        </div>
+        <ul class="list-unstyled text-white flex-grow-1">${featuresHtml}</ul>
+        <a href="${plan.href}" class="btn btn-primary mt-3">${plan.cta}</a>
+      </div>
+    `;
+    pricingContainer.appendChild(col);
+  });
+}
+
+window.addEventListener('DOMContentLoaded', loadPricing);