feat(frontend): add unified header and footer to public pages

Implemented consistent navigation across all public-facing pages with a
reusable layout system. Created PublicLayout component that wraps pages
with a header containing the logo and a footer with navigation links.

Changes:
- Created PublicHeader component with logo linking to homepage
- Created PublicFooter component with Product, Account, and Support sections
- Created PublicLayout wrapper component using flex layout
- Updated all public pages to use PublicLayout:
  - LoginPage, RegisterPage, ForgotPasswordPage, ResetPasswordPage
  - VerifyEmailPage, ContactPage, AboutUsPage, HowItWorksPage
  - NotFoundPage
- Fixed gradient background pages to use min-h-full for proper height
- Fixed content pages to avoid min-h-screen conflicts with flex-grow
- Updated About Us content

frontend/src/pages/HowItWorksPage.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
-import Layout from '../components/layout/Layout';
+import PublicLayout from '../components/layout/PublicLayout';
 
 export default function HowItWorksPage() {
   const [content, setContent] = useState('');
@@ -29,32 +29,32 @@ export default function HowItWorksPage() {
 
   if (loading) {
     return (
-      <Layout>
-        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <PublicLayout>
+        <div className="bg-gray-50 flex items-center justify-center py-12">
           <div className="text-center">
             <div className="w-12 h-12 border-4 border-primary-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
             <p className="text-gray-600">Loading...</p>
           </div>
         </div>
-      </Layout>
+      </PublicLayout>
     );
   }
 
   if (error) {
     return (
-      <Layout>
-        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <PublicLayout>
+        <div className="bg-gray-50 flex items-center justify-center py-12">
           <div className="text-center">
             <p className="text-red-600">{error}</p>
           </div>
         </div>
-      </Layout>
+      </PublicLayout>
     );
   }
 
   return (
-    <Layout>
-      <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <PublicLayout>
+      <div className="bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
         <div className="max-w-4xl mx-auto">
           <article className="bg-white rounded-lg shadow-sm p-8 md:p-12 prose prose-lg max-w-none">
             <ReactMarkdown
@@ -86,6 +86,6 @@ export default function HowItWorksPage() {
           </article>
         </div>
       </div>
-    </Layout>
+    </PublicLayout>
   );
 }