smoothschedule/legacy_reference/frontend/src/layouts/MarketingLayout.tsx

import React, { useState, useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from '../components/marketing/Navbar';
import Footer from '../components/marketing/Footer';
import { useScrollToTop } from '../hooks/useScrollToTop';

const MarketingLayout: React.FC = () => {
  useScrollToTop();

  const [darkMode, setDarkMode] = useState(() => {
    // Check for saved preference or system preference
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('darkMode');
      if (saved !== null) {
        return JSON.parse(saved);
      }
      return window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
    return false;
  });

  useEffect(() => {
    document.documentElement.classList.toggle('dark', darkMode);
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
  }, [darkMode]);

  const toggleTheme = () => setDarkMode((prev: boolean) => !prev);

  return (
    <div className="min-h-screen flex flex-col bg-white dark:bg-gray-900 transition-colors duration-200">
      <Navbar darkMode={darkMode} toggleTheme={toggleTheme} />

      {/* Main Content - with padding for fixed navbar */}
      <main className="flex-1 pt-16 lg:pt-20">
        <Outlet />
      </main>

      <Footer />
    </div>
  );
};

export default MarketingLayout;