Shiny pricing page

components/ui/header.tsx

@@ -108,9 +108,11 @@ 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>
                 </div>
               )}

components/ui/pricing-toggle.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Switch } from '@headlessui/react';
+import { useTheme } from '@/lib/theme-context';
+
+interface PricingToggleProps {
+  isYearly: boolean;
+  onToggle: () => void;
+}
+
+const PricingToggle: React.FC<PricingToggleProps> = ({ isYearly, onToggle }) => {
+  const { theme } = useTheme();
+
+  const thumbColor = theme === 'dark' ? 'bg-white' : 'bg-gray-900';
+  const trackColor = theme === 'dark' ? 'bg-gray-700' : 'bg-gray-200';
+  const activeTrackColor = theme === 'dark' ? 'bg-indigo-600' : 'bg-indigo-500';
+
+  return (
+    <div className="flex items-center justify-center mt-12 space-x-4">
+      <span className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        Monthly
+      </span>
+      <div className="relative inline-flex items-center">
+        <Switch
+          checked={isYearly}
+          onChange={onToggle}
+          className={`relative inline-flex items-center h-6 rounded-full w-16 transition-colors duration-200 ease-in-out ${
+            isYearly ? activeTrackColor : trackColor
+          }`}
+        >
+          <span
+            className={`inline-block w-7 h-5 transform rounded-full shadow transition-transform duration-200 ease-in-out ${
+              isYearly ? 'translate-x-8' : 'translate-x-0'
+            } ${thumbColor}`}
+          />
+        </Switch>
+      </div>
+      <span className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        Yearly
+      </span>
+    </div>
+  );
+};
+
+export default PricingToggle;