adilallo
110 lines
3.8 KiB
JavaScript
110 lines
3.8 KiB
JavaScript
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>
|
|
),
|
|
};
|