Prepare dark theme, add pricing page

components/ui/header.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 import Link from "next/link"
 import { useState, useEffect } from "react"
 import { usePathname } from "next/navigation"
+import dynamic from 'next/dynamic'
 
 interface HeaderProps {
   className?: string
@@ -25,7 +26,11 @@ const leftNavigation = [
 const rightNavigation = [
   { name: 'Sign-up', href: '/sign-up', current: false, requiresAuth: false },
   { name: 'Login', href: '/login', current: false, requiresAuth: false },
-]
+];
+
+const ThemeToggle = dynamic(() => import('./theme-toggle').then(mod => mod.default), {
+  ssr: false,
+});
 
 export function Header({ className, isLoggedIn = false, isAdmin = false }: HeaderProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -103,6 +108,9 @@ export function Header({ className, isLoggedIn = false, isAdmin = false }: Heade
                         </Link>
                       ))}
                     </div>
+                    <div className="rounded-md px-3 py-2 text-sm font-medium transition-colors text-gray-300 hover:bg-gray-700 hover:text-white">
+                      <ThemeToggle />
+                    </div>
                   </div>
                 </div>
               )}
@@ -206,7 +214,7 @@ export function Header({ className, isLoggedIn = false, isAdmin = false }: Heade
             })}
           </div>
           {isLoggedIn && (
-          <div className="border-t border-gray-700 pb-3 pt-4">
+            <div className="border-t border-gray-700 pb-3 pt-4">
               <div>
                 <div className="flex items-center px-5">
                   <div className="flex-shrink-0">
@@ -243,7 +251,7 @@ export function Header({ className, isLoggedIn = false, isAdmin = false }: Heade
                   </Link>
                 </div>
               </div>
-          </div>
+            </div>
           )}
 
         </div>

components/ui/theme-toggle.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTheme } from '@/lib/theme-context';
+import { Sun, Moon } from 'lucide-react';
+
+const ThemeToggle: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2"
+      aria-label={theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+    >
+      {theme === 'dark' ? (
+        <Sun className="h-3 w-3" />
+      ) : (
+        <Moon className="h-3 w-3" />
+      )}
+    </button>
+  );
+};
+
+export default ThemeToggle;