Add new styles for home and landing pages

- Created home.css with comprehensive styles for the home page layout, including typography, buttons, and responsive design adjustments.
- Created landing.css to style the landing page, focusing on typography, layout, and responsive behavior for various screen sizes.

src/App.tsx

@@ -3,10 +3,37 @@ import { AuthControls } from "./components/AuthControls";
 import { Home } from "./pages/Home";
 import { About } from "./pages/About";
 import { Settings } from "./pages/Settings";
+import { DesignSystem } from "./pages/DesignSystem";
+import { AuthProvider, useAuth } from "./components/AuthProvider";
+import { Landing } from "./pages/Landing";
+import { Button } from "./components/design-system/primitives";
 
 export function App() {
+  const { pathname } = useLocation();
+  if (pathname === "/design-system" || pathname === "/design-system/") return <DesignSystem />;
+  return <AuthProvider><AppRoutes /></AuthProvider>;
+}
+
+function AppRoutes() {
   const navigate = useNavigate();
   const { pathname } = useLocation();
+  const { user, loading, accountError, retry } = useAuth();
+
+  if (pathname === "/") {
+    if (loading || accountError) return (
+      <div className="ds-root landing-root">
+        <main className="landing-account-state">
+          <a className="ds-wordmark" href="/">minabot.</a>
+          {loading ? <p role="status">Loading your account…</p> : <>
+            <p role="alert">{accountError}</p>
+            <Button variant="secondary" onClick={retry}>Try again</Button>
+          </>}
+        </main>
+      </div>
+    );
+    if (!user) return <Landing />;
+    return <Home />;
+  }
 
   return (
     <>
@@ -14,6 +41,7 @@ export function App() {
         <button type="button" disabled={pathname === "/"} onClick={() => navigate("/")}>Home</button>{" "}
         <button type="button" disabled={pathname === "/about"} onClick={() => navigate("/about")}>About</button>{" "}
         <button type="button" disabled={pathname === "/settings"} onClick={() => navigate("/settings")}>Settings</button>
+        {" "}<button type="button" onClick={() => navigate("/design-system")}>Design system</button>
       </nav>
       <AuthControls />
       <main>