feat(content): add How It Works page with markdown support

- Create HowItWorksPage component with markdown rendering
- Add how-it-works.md with Lorem Ipsum placeholder content
- Add /how-it-works route in App.jsx
- Add How It Works link to homepage footer (Product section)

frontend/src/App.jsx

@@ -22,6 +22,7 @@ import ActivityLogsPage from './pages/admin/ActivityLogsPage';
 import ContactMessagesPage from './pages/admin/ContactMessagesPage';
 import ContactPage from './pages/ContactPage';
 import AboutUsPage from './pages/AboutUsPage';
+import HowItWorksPage from './pages/HowItWorksPage';
 import NotFoundPage from './pages/NotFoundPage';
 import VerificationBanner from './components/common/VerificationBanner';
 import InstallPWA from './components/pwa/InstallPWA';
@@ -232,6 +233,9 @@ function App() {
           {/* About Us Page - Public route */}
           <Route path="/about-us" element={<AboutUsPage />} />
 
+          {/* How It Works Page - Public route */}
+          <Route path="/how-it-works" element={<HowItWorksPage />} />
+
           {/* Public Profile - /u/username format (no auth required) */}
           <Route path="/u/:username" element={<PublicProfilePage />} />
 

frontend/src/pages/HomePage.jsx

@@ -263,6 +263,11 @@ const HomePage = () => {
             <div>
               <h3 className="text-white font-semibold mb-4">Product</h3>
               <ul className="space-y-2 text-sm">
+                <li>
+                  <Link to="/how-it-works" className="hover:text-primary-400 transition">
+                    How It Works
+                  </Link>
+                </li>
                 <li>
                   <Link to="/events" className="hover:text-primary-400 transition">
                     Events

frontend/src/pages/HowItWorksPage.jsx

@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import Layout from '../components/layout/Layout';
+
+export default function HowItWorksPage() {
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    // Fetch markdown content
+    fetch('/content/how-it-works.md')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Failed to load content');
+        }
+        return response.text();
+      })
+      .then(text => {
+        setContent(text);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error('Error loading how-it-works content:', err);
+        setError('Failed to load page content');
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <Layout>
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+          <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>
+    );
+  }
+
+  if (error) {
+    return (
+      <Layout>
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-red-600">{error}</p>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="min-h-screen 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
+              components={{
+                // Customize link rendering to use React Router for internal links
+                a: ({ node, href, children, ...props }) => {
+                  const isInternal = href && href.startsWith('/');
+                  if (isInternal) {
+                    return (
+                      <a href={href} {...props}>
+                        {children}
+                      </a>
+                    );
+                  }
+                  return (
+                    <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+                      {children}
+                    </a>
+                  );
+                },
+                // Ensure images are responsive
+                img: ({ node, ...props }) => (
+                  <img className="rounded-lg shadow-md" {...props} alt={props.alt || ''} />
+                ),
+              }}
+            >
+              {content}
+            </ReactMarkdown>
+          </article>
+        </div>
+      </div>
+    </Layout>
+  );
+}