217 lines
8.3 KiB
TypeScript
217 lines
8.3 KiB
TypeScript
import { Metadata } from 'next';
|
|
import { Container } from '@/components/ui/Container';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Card, CardHeader, CardBody, CardFooter } from '@/components/ui/Card';
|
|
import { Grid, GridItem } from '@/components/ui/Grid';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Layout Example | KLZ Cables',
|
|
description: 'Example page demonstrating the new layout components',
|
|
};
|
|
|
|
export default function ExamplePage() {
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16 rounded-xl">
|
|
<Container maxWidth="4xl" padding="lg" className="text-center">
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
|
Layout Components Demo
|
|
</h1>
|
|
<p className="text-xl text-blue-100 mb-6">
|
|
Showcasing the new Header, Footer, Layout, and MobileMenu components
|
|
</p>
|
|
<div className="flex gap-3 justify-center flex-wrap">
|
|
<Button variant="primary" size="lg">
|
|
Primary Action
|
|
</Button>
|
|
<Button variant="outline" size="lg">
|
|
Secondary Action
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Feature Cards */}
|
|
<section>
|
|
<Container maxWidth="6xl" padding="md">
|
|
<h2 className="text-3xl font-bold mb-6 text-center">Key Features</h2>
|
|
<Grid cols={3} gap="lg">
|
|
<GridItem>
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Badge variant="primary">New</Badge>
|
|
<h3 className="text-xl font-semibold">Responsive Header</h3>
|
|
</div>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<p className="text-gray-600">
|
|
Sticky header with mobile hamburger menu, locale switcher, and contact CTA.
|
|
Fully responsive with smooth animations.
|
|
</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<Button variant="ghost" size="sm">Learn More</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</GridItem>
|
|
|
|
<GridItem>
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Badge variant="secondary">Updated</Badge>
|
|
<h3 className="text-xl font-semibold">Smart Footer</h3>
|
|
</div>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<p className="text-gray-600">
|
|
4-column responsive layout with company info, quick links,
|
|
product categories, and contact details.
|
|
</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<Button variant="ghost" size="sm">View Details</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</GridItem>
|
|
|
|
<GridItem>
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Badge variant="success">Enhanced</Badge>
|
|
<h3 className="text-xl font-semibold">Mobile Menu</h3>
|
|
</div>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<p className="text-gray-600">
|
|
Slide-out drawer with smooth animations, full navigation,
|
|
language switcher, and contact information.
|
|
</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<Button variant="ghost" size="sm">Try It</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</GridItem>
|
|
</Grid>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Component Showcase */}
|
|
<section className="bg-gray-50 py-12">
|
|
<Container maxWidth="6xl" padding="md">
|
|
<h2 className="text-3xl font-bold mb-6 text-center">UI Components</h2>
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<h3 className="text-xl font-semibold">Buttons</h3>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button variant="primary">Primary</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="outline">Outline</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 mt-3">
|
|
<Button variant="primary" size="sm">Small</Button>
|
|
<Button variant="primary" size="md">Medium</Button>
|
|
<Button variant="primary" size="lg">Large</Button>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<h3 className="text-xl font-semibold">Badges</h3>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge variant="primary">Primary</Badge>
|
|
<Badge variant="secondary">Secondary</Badge>
|
|
<Badge variant="success">Success</Badge>
|
|
<Badge variant="warning">Warning</Badge>
|
|
<Badge variant="error">Error</Badge>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<h3 className="text-xl font-semibold">Container & Grid</h3>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<p className="text-gray-600 mb-4">
|
|
The Container component provides responsive max-width and padding,
|
|
while Grid offers flexible column layouts.
|
|
</p>
|
|
<Grid cols={4} gap="md">
|
|
<div className="bg-blue-100 p-4 rounded text-center">1</div>
|
|
<div className="bg-blue-100 p-4 rounded text-center">2</div>
|
|
<div className="bg-blue-100 p-4 rounded text-center">3</div>
|
|
<div className="bg-blue-100 p-4 rounded text-center">4</div>
|
|
</Grid>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Integration Example */}
|
|
<section>
|
|
<Container maxWidth="6xl" padding="md">
|
|
<h2 className="text-3xl font-bold mb-6 text-center">Integration Example</h2>
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<h3 className="text-xl font-semibold">How to Use in Your Pages</h3>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
|
|
<code>{`// app/[locale]/my-page/page.tsx
|
|
import { Metadata } from 'next';
|
|
import { Container } from '@/components/ui/Container';
|
|
import { Layout } from '@/components/layout/Layout';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'My Page | KLZ Cables',
|
|
description: 'My custom page description',
|
|
};
|
|
|
|
export default function MyPage({ params: { locale } }: { params: { locale: string } }) {
|
|
return (
|
|
<Layout locale={locale} siteName="KLZ Cables">
|
|
<Container maxWidth="6xl" padding="md">
|
|
<h1>My Page Content</h1>
|
|
{/* Your content here */}
|
|
</Container>
|
|
</Layout>
|
|
);
|
|
}`}</code>
|
|
</pre>
|
|
</CardBody>
|
|
</Card>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Breadcrumb Demo */}
|
|
<section className="bg-gray-50 py-8">
|
|
<Container maxWidth="6xl" padding="md">
|
|
<h2 className="text-2xl font-bold mb-4">Breadcrumb Support</h2>
|
|
<p className="text-gray-600 mb-4">
|
|
The Layout component supports optional breadcrumbs. Check the URL bar
|
|
and try navigating to see the breadcrumb in action.
|
|
</p>
|
|
<a href="/en/example/subpage">
|
|
<Button>Go to Example Subpage (with Breadcrumb)</Button>
|
|
</a>
|
|
</Container>
|
|
</section>
|
|
</div>
|
|
);
|
|
} |