mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

migration wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-29 18:18:48 +01:00
parent 292975299d
commit f86785bfb0
182 changed files with 30131 additions and 9321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
app/[locale]/example/page.tsx Normal file
View File

@@ -0,0 +1,217 @@
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>
);
}