Homepage and menu design improvements

.gitignore

@@ -8,3 +8,4 @@ vite.config.ts.*
 test-results
 playwright-report
 attached_assets
+.env

client/src/App.tsx

@@ -194,14 +194,14 @@ function Router() {
 
 function App() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultTheme="light">
       <QueryClientProvider client={queryClient}>
         <DemoProvider>
-          <TooltipProvider>
-            <Toaster />
-            <ScrollToTop />
-            <Router />
-          </TooltipProvider>
+            <TooltipProvider>
+              <Toaster />
+              <ScrollToTop />
+              <Router />
+            </TooltipProvider>
         </DemoProvider>
       </QueryClientProvider>
     </ThemeProvider>

client/src/components/figma/ImageWithFallback.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false)
+
+  const handleError = () => {
+    setDidError(true)
+  }
+
+  const { src, alt, style, className, ...rest } = props
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  )
+}

client/src/components/layout/AppLayout.tsx

@@ -0,0 +1,21 @@
+// This component wraps all pages with the home page's exact header and sidebar
+import { useLocation } from "wouter";
+import Home from "@/pages/home";
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+export function AppLayout({ children }: AppLayoutProps) {
+  const [location] = useLocation();
+  const isHomePage = location === "/";
+
+  // If it's the home page, just render it directly (it has its own layout)
+  if (isHomePage) {
+    return <>{children}</>;
+  }
+
+  // For all other pages, wrap them with the home page structure
+  // but replace the content area with the actual tool page
+  return <Home isToolPage={true}>{children}</Home>;
+}