saving works

backend/core/static/css/base.css

@@ -0,0 +1,21 @@
+    html {
+      scroll-behavior: smooth;
+    }
+    a {
+        text-decoration: none;
+    }
+    .accordion-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease-out;
+      padding-top: 0; /* Ensures this is the initial state for vertical padding */
+      padding-bottom: 0; /* Ensures this is the initial state for vertical padding */
+    }
+    .accordion-item.active .accordion-content {
+      max-height: 3000px; /* Increased max-height for potentially long content */
+      padding-top: 1rem; /* Applied when active */
+      padding-bottom: 1.5rem; /* Applied when active */
+    }
+    .accordion-item.active .accordion-chevron {
+      transform: rotate(180deg);
+    }

backend/core/static/css/main.css

@@ -1,7 +1,26 @@
-body {
-  font-family: "Darker Grotesque", sans-serif;
+/* Custom styles */
+html {
+  scroll-behavior: smooth;
 }
 
-:root {
-  --bs-body-font-size: 1.5rem;
+a {
+  text-decoration: none;
+}
+
+.accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.accordion-item.active .accordion-content {
+  max-height: 3000px;
+  padding-top: 1rem;
+  padding-bottom: 1.5rem;
+}
+
+.accordion-item.active .accordion-chevron {
+  transform: rotate(180deg);
 }

backend/core/static/js/app.js

@@ -0,0 +1,99 @@
+  document.addEventListener('DOMContentLoaded', function () {
+    // Mobile menu toggle
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    const hamburgerIcon = document.getElementById('hamburger-icon');
+    const xIcon = document.getElementById('x-icon');
+
+    if (mobileMenuButton && mobileMenu && hamburgerIcon && xIcon) {
+      mobileMenuButton.addEventListener('click', function () {
+        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
+        mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
+        mobileMenu.classList.toggle('hidden');
+        hamburgerIcon.classList.toggle('hidden');
+        xIcon.classList.toggle('hidden');
+      });
+    }
+
+    // Accordion toggle for multiple containers
+    const accordionContainers = document.querySelectorAll('.accordion-container');
+    accordionContainers.forEach(container => {
+      const accordionItems = container.querySelectorAll('.accordion-item');
+      accordionItems.forEach(item => {
+        const trigger = item.querySelector('.accordion-trigger');
+        if (trigger) {
+          trigger.addEventListener('click', function () {
+            // Option 1: Close other open items in the same container
+            // accordionItems.forEach(otherItem => {
+            //   if (otherItem !== item && otherItem.classList.contains('active')) {
+            //     otherItem.classList.remove('active');
+            //     otherItem.querySelector('.accordion-trigger').setAttribute('aria-expanded', 'false');
+            //   }
+            // });
+
+            // Option 2: Allow multiple items to be open (current behavior based on CSS)
+            const isItemOpen = item.classList.toggle('active');
+            trigger.setAttribute('aria-expanded', isItemOpen);
+          });
+        }
+      });
+    });
+    
+    // Smooth scroll for nav links (desktop, mobile, and footer)
+    document.querySelectorAll('.nav-link-desktop, .nav-link-mobile, .nav-link-footer').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            const href = this.getAttribute('href');
+            if (href && href.startsWith('#')) {
+                e.preventDefault();
+                const targetId = href.substring(1);
+                const targetElement = document.getElementById(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({ behavior: 'smooth' });
+                    // Close mobile menu if a mobile link is clicked
+                    if (this.classList.contains('nav-link-mobile') && mobileMenu && !mobileMenu.classList.contains('hidden')) {
+                        mobileMenuButton.click();
+                    }
+                }
+            } else if (href === '/') { // Handle clicks on the "Home" link which might just be "/"
+                e.preventDefault();
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+                 if (this.classList.contains('nav-link-mobile') && mobileMenu && !mobileMenu.classList.contains('hidden')) {
+                    mobileMenuButton.click(); // Close mobile menu
+                }
+            }
+        });
+    });
+
+    // Set current year in footer
+    const yearSpan = document.getElementById('currentYear');
+    if (yearSpan) {
+      yearSpan.textContent = new Date().getFullYear();
+    }
+    
+    // Auto-update insight dates (simplified to current month/year for static demo)
+    const currentMonthYear = new Date().toLocaleString('default', { month: 'long', year: 'numeric' });
+    document.querySelectorAll('#insights .text-sm.text-gray-500.mb-3').forEach(el => {
+        if (el.textContent.includes('•')) {
+            const parts = el.textContent.split('•');
+            if (parts.length > 1) {
+                el.textContent = parts[0].trim() + ' • ' + currentMonthYear;
+            }
+        }
+    });
+
+  });
+
+    tailwind.config = {
+    theme: {
+    extend: {
+        colors: {
+        primary: '#0E3B43',
+        secondary: '#F0F9FF', 
+        accent: '#FBBF24', 
+        'light-accent': '#FEF3C7',
+        'dark-text': '#1F2937', 
+        'light-text': '#F9FAFB',
+        },
+    }
+    }
+}