style(website): fix height; clean up code

packages/website/src/pages/Home.tsx

@@ -1,5 +1,3 @@
-import Footer from '../components/Footer'
-import Header from '../components/Header'
 import FeaturesSection from './home/FeaturesSection'
 import HeroSection from './home/HeroSection'
 import OneMoreThingSection from './home/OneMoreThingSection'
@@ -7,17 +5,11 @@ import ScenariosSection from './home/ScenariosSection'
 
 export default function HomePage() {
 	return (
-		<div className="min-h-screen bg-linear-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800">
-			<Header />
-
-			<main id="main-content">
-				<HeroSection />
-				<FeaturesSection />
-				<ScenariosSection />
-				<OneMoreThingSection />
-			</main>
-
-			<Footer />
-		</div>
+		<>
+			<HeroSection />
+			<FeaturesSection />
+			<ScenariosSection />
+			<OneMoreThingSection />
+		</>
 	)
 }

packages/website/src/pages/home/HomeContent.tsx

@@ -1,15 +0,0 @@
-import FeaturesSection from './FeaturesSection'
-import HeroSection from './HeroSection'
-import OneMoreThingSection from './OneMoreThingSection'
-import ScenariosSection from './ScenariosSection'
-
-export default function HomeContent() {
-	return (
-		<>
-			<HeroSection />
-			<FeaturesSection />
-			<ScenariosSection />
-			<OneMoreThingSection />
-		</>
-	)
-}

packages/website/src/router.tsx

@@ -3,8 +3,8 @@ import { Route, Switch, useLocation } from 'wouter'
 
 import Footer from './components/Footer'
 import Header from './components/Header'
+import HomePage from './pages/Home'
 import DocsPages from './pages/docs/index'
-import HomeContent from './pages/home/HomeContent'
 
 function ScrollToTop() {
 	const [pathname] = useLocation()
@@ -16,7 +16,7 @@ function ScrollToTop() {
 
 export default function Router() {
 	return (
-		<>
+		<div className="flex min-h-screen flex-col">
 			<Header />
 			<Suspense>
 				<ScrollToTop />
@@ -24,20 +24,20 @@ export default function Router() {
 					<Route path="/">
 						<main
 							id="main-content"
-							className="min-h-screen bg-linear-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800"
+							className="flex-1 bg-linear-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800"
 						>
-							<HomeContent />
+							<HomePage />
 						</main>
 					</Route>
 
 					<Route path="/docs" nest>
-						<div className="min-h-screen bg-white dark:bg-gray-900">
+						<div className="flex-1 bg-white dark:bg-gray-900">
 							<DocsPages />
 						</div>
 					</Route>
 
 					<Route>
-						<div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
+						<div className="flex-1 bg-white dark:bg-gray-900 flex items-center justify-center">
 							<div className="text-center">
 								<h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">404</h1>
 								<p className="text-xl text-gray-600 dark:text-gray-300">Page not found</p>
@@ -47,6 +47,6 @@ export default function Router() {
 				</Switch>
 			</Suspense>
 			<Footer />
-		</>
+		</div>
 	)
 }