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>