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/features.js

@@ -0,0 +1,48 @@
+/**
+ * features.js
+ *
+ * Powers the Features page.
+ *
+ * Features:
+ *   - Loads the feature list from `./data/features.json` via fetch().
+ *   - Dynamically renders each feature as a Bootstrap card (icon,
+ *     title, description) inside the #featuresContainer grid.
+ *   - Shows an error message if the JSON file cannot be loaded.
+ *
+ * The feature list lives in JSON so that marketing can add, remove
+ * or reorder features without the page template changing.
+ */
+
+const featuresContainer = document.getElementById('featuresContainer');
+
+async function loadFeatures() {
+  try {
+    const response = await fetch('./data/features.json');
+    if (!response.ok) {
+      throw new Error(`Failed to load features: ${response.status}`);
+    }
+    const data = await response.json();
+    renderFeatures(data.features);
+  } catch (error) {
+    console.error('Error:', error);
+    featuresContainer.innerHTML = `<p class="text-white text-center">Unable to load features.</p>`;
+  }
+}
+
+function renderFeatures(features) {
+  featuresContainer.innerHTML = '';
+  features.forEach(f => {
+    const col = document.createElement('div');
+    col.className = 'col-12 col-md-6 col-lg-4 mb-4';
+    col.innerHTML = `
+      <div class="rounded shadow bg-translucent p-4 h-100 text-white">
+        <img src="${f.icon}" alt="" height="48" width="auto" class="mb-3">
+        <h3 class="h5">${f.title}</h3>
+        <p class="text-white-50 mb-0">${f.description}</p>
+      </div>
+    `;
+    featuresContainer.appendChild(col);
+  });
+}
+
+window.addEventListener('DOMContentLoaded', loadFeatures);