Storybook created

stories/Layout.stories.js

@@ -0,0 +1,109 @@
+import Header from "../app/components/Header";
+import HomeHeader from "../app/components/HomeHeader";
+import Footer from "../app/components/Footer";
+
+export default {
+  title: "Layout/Complete Pages",
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export const RegularPage = {
+  render: () => (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-1 p-8">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-3xl font-bold mb-6">Regular Page Layout</h1>
+          <p className="text-gray-600 mb-4">
+            This demonstrates a typical page layout using the regular Header
+            component.
+          </p>
+          <div className="space-y-6">
+            <div className="p-6 bg-gray-100 rounded-lg">
+              <h2 className="text-xl font-semibold mb-3">Content Section 1</h2>
+              <p>This is where example page content would go.</p>
+            </div>
+            <div className="p-6 bg-gray-100 rounded-lg">
+              <h2 className="text-xl font-semibold mb-3">Content Section 2</h2>
+              <p>Additional content sections can be added here.</p>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  ),
+};
+
+export const HomePage = {
+  render: () => (
+    <div className="min-h-screen flex flex-col">
+      <HomeHeader />
+      <main className="flex-1 bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900">
+        <div className="flex items-center justify-center min-h-[calc(100vh-88px)]">
+          <div className="text-center text-white max-w-4xl mx-auto px-8">
+            <h1 className="text-5xl font-bold mb-6">
+              Welcome to CommunityRule
+            </h1>
+            <p className="text-xl opacity-90 mb-8">
+              This demonstrates the home page layout using the special
+              HomeHeader component with a dark gradient background.
+            </p>
+            <div className="grid md:grid-cols-2 gap-8 mt-12">
+              <div className="p-6 bg-white/10 rounded-lg backdrop-blur-sm">
+                <h2 className="text-2xl font-semibold mb-3">Feature 1</h2>
+                <p>Description of the first main feature.</p>
+              </div>
+              <div className="p-6 bg-white/10 rounded-lg backdrop-blur-sm">
+                <h2 className="text-2xl font-semibold mb-3">Feature 2</h2>
+                <p>Description of the second main feature.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  ),
+};
+
+export const ComponentComparison = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">
+          Header vs HomeHeader Comparison
+        </h2>
+        <div className="grid md:grid-cols-2 gap-8">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Regular Header</h3>
+            <div className="border rounded-lg overflow-hidden">
+              <Header />
+              <div className="p-4 bg-gray-50">
+                <p className="text-sm text-gray-600">
+                  Used throughout the app with solid background and standard
+                  navigation.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Home Header</h3>
+            <div className="border rounded-lg overflow-hidden bg-gradient-to-br from-blue-900 to-purple-900">
+              <HomeHeader />
+              <div className="p-4 bg-white/10">
+                <p className="text-sm text-white">
+                  Special header for home page with transparent background and
+                  HeaderTab styling.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};