templates/blog/about_page.html

@@ -1,14 +1,40 @@
 {% extends 'base.html' %}
 {% load wagtailimages_tags wagtailcore_tags %}
+{% block title %}{{ page.title }} | No Hype AI{% endblock %}
 {% block content %}
-<h1>{{ page.title }}</h1>
-<p>{{ page.mission_statement }}</p>
-{{ page.body|richtext }}
-{% if page.featured_author %}
-  <h2>{{ page.featured_author.name }}</h2>
-  <p>{{ page.featured_author.bio }}</p>
-  {% if page.featured_author.avatar %}
-    {% image page.featured_author.avatar fill-200x200 %}
+
+<!-- Page Header -->
+<div class="py-8 md:py-12 border-b border-zinc-200 dark:border-zinc-800 mb-12">
+  <h1 class="font-display font-black text-4xl md:text-6xl mb-4">{{ page.title }}</h1>
+  {% if page.mission_statement %}
+    <p class="text-xl md:text-2xl text-zinc-600 dark:text-zinc-400 font-medium max-w-2xl">{{ page.mission_statement }}</p>
   {% endif %}
-{% endif %}
+</div>
+
+<!-- Body -->
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
+  <div class="lg:col-span-8 prose prose-lg dark:prose-invert max-w-none
+    prose-headings:font-display prose-headings:font-bold
+    prose-a:text-brand-cyan hover:prose-a:text-brand-pink prose-a:transition-colors prose-a:no-underline hover:prose-a:underline">
+    {{ page.body|richtext }}
+  </div>
+
+  {% if page.featured_author %}
+  <aside class="lg:col-span-4">
+    <div class="bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-6 relative overflow-hidden">
+      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-cyan to-brand-pink"></div>
+      {% if page.featured_author.avatar %}
+        <div class="w-20 h-20 mb-4 overflow-hidden border border-zinc-200 dark:border-zinc-800">
+          {% image page.featured_author.avatar fill-80x80 class="w-full h-full object-cover" %}
+        </div>
+      {% else %}
+        <div class="w-20 h-20 mb-4 bg-gradient-to-tr from-brand-cyan to-brand-pink"></div>
+      {% endif %}
+      <h2 class="font-display font-bold text-xl mb-1">{{ page.featured_author.name }}</h2>
+      {% if page.featured_author.role %}<p class="font-mono text-xs text-zinc-500 mb-3">{{ page.featured_author.role }}</p>{% endif %}
+      {% if page.featured_author.bio %}<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ page.featured_author.bio }}</p>{% endif %}
+    </div>
+  </aside>
+  {% endif %}
+</div>
 {% endblock %}

templates/blog/article_page.html

@@ -91,7 +91,7 @@
       <div class="bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark p-6 border border-transparent dark:border-zinc-700 shadow-solid-dark dark:shadow-solid-light">
         <h3 class="font-display font-bold text-xl mb-2">Subscribe for Updates</h3>
         <p class="text-sm opacity-80 mb-4">Get our latest articles and coding benchmarks delivered to your inbox every week.</p>
-        {% include 'components/newsletter_form.html' with source='article' label='Never miss a post' %}
+        {% include 'components/newsletter_form.html' with source='article' label='Subscribe' %}
       </div>
 
     </div>

templates/components/nav.html

@@ -25,15 +25,46 @@
       </form>
     </div>
 
-    <!-- Theme Toggle -->
+    <!-- Theme Toggle + Hamburger -->
     <div class="flex items-center gap-4">
       <button type="button" data-theme-toggle class="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors" aria-label="Toggle theme">
         <svg class="w-5 h-5 hidden dark:block text-yellow-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" /></svg>
         <svg class="w-5 h-5 block dark:hidden text-zinc-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /></svg>
       </button>
-      <button class="md:hidden p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded transition-colors" aria-label="Open menu">
+      <button type="button" data-mobile-menu-toggle class="md:hidden p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded transition-colors" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
         <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
       </button>
     </div>
   </div>
+
+  <!-- Mobile Menu -->
+  <div id="mobile-menu" class="md:hidden hidden border-t border-zinc-200 dark:border-zinc-800 bg-brand-light/95 dark:bg-brand-dark/95 backdrop-blur-md">
+    <div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-4">
+      <a href="/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Home</a>
+      <a href="/articles/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Articles</a>
+      <a href="/about/" class="font-medium py-2 hover:text-brand-pink transition-colors">About</a>
+      <form method="post" action="/newsletter/subscribe/" data-newsletter-form class="space-y-2 pt-2 border-t border-zinc-200 dark:border-zinc-800" id="mobile-newsletter">
+        {% csrf_token %}
+        <input type="hidden" name="source" value="nav-mobile" />
+        <input type="email" name="email" required placeholder="dev@example.com"
+          class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-brand-dark dark:text-brand-light font-mono text-sm focus:outline-none focus:border-brand-pink transition-colors" />
+        <input type="text" name="honeypot" style="display:none" />
+        <button type="submit" class="w-full px-4 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold transition-colors">Subscribe</button>
+        <p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
+      </form>
+    </div>
+  </div>
 </nav>
+
+<script nonce="{{ request.csp_nonce|default:'' }}">
+(function(){
+  var btn = document.querySelector('[data-mobile-menu-toggle]');
+  var menu = document.getElementById('mobile-menu');
+  if (btn && menu) {
+    btn.addEventListener('click', function(){
+      var open = menu.classList.toggle('hidden');
+      btn.setAttribute('aria-expanded', String(!open));
+    });
+  }
+})();
+</script>

templates/legal/legal_page.html

@@ -1,7 +1,18 @@
 {% extends 'base.html' %}
 {% load wagtailcore_tags %}
+{% block title %}{{ page.title }} | No Hype AI{% endblock %}
 {% block content %}
-<h1>{{ page.title }}</h1>
-<p>Last updated: {{ page.last_updated|date:'F Y' }}</p>
-{{ page.body|richtext }}
+
+<!-- Page Header -->
+<div class="py-8 md:py-12 border-b border-zinc-200 dark:border-zinc-800 mb-12">
+  <h1 class="font-display font-black text-4xl md:text-5xl mb-3">{{ page.title }}</h1>
+  <p class="font-mono text-sm text-zinc-500">Last updated: {{ page.last_updated|date:'F Y' }}</p>
+</div>
+
+<!-- Body -->
+<div class="max-w-3xl prose prose-lg dark:prose-invert
+  prose-headings:font-display prose-headings:font-bold
+  prose-a:text-brand-cyan hover:prose-a:text-brand-pink prose-a:transition-colors prose-a:no-underline hover:prose-a:underline">
+  {{ page.body|richtext }}
+</div>
 {% endblock %}