migration wip
This commit is contained in:
@@ -5,6 +5,10 @@ import { SEO } from '@/components/SEO';
|
||||
import { processHTML } from '@/lib/html-compat';
|
||||
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
|
||||
import Link from 'next/link';
|
||||
import { ResponsiveSection, ResponsiveWrapper, ResponsiveGrid } from '@/components/layout/ResponsiveWrapper';
|
||||
import { FeaturedImage } from '@/components/content/FeaturedImage';
|
||||
import { Container } from '@/components/ui/Container';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
@@ -87,87 +91,139 @@ export default async function Page({ params }: PageProps) {
|
||||
|
||||
{/* Hero Section with Featured Image */}
|
||||
{featuredImage && (
|
||||
<div className="relative h-64 md:h-96 bg-gray-200">
|
||||
<img
|
||||
<ResponsiveWrapper className="relative bg-gray-200" padding="none">
|
||||
<FeaturedImage
|
||||
src={featuredImage.localPath}
|
||||
alt={page.title}
|
||||
className="w-full h-full object-cover"
|
||||
size="full"
|
||||
aspectRatio="16:9"
|
||||
priority={true}
|
||||
className="opacity-90"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-40"></div>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-center">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-white drop-shadow-lg">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white drop-shadow-lg px-4">
|
||||
{page.title}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</ResponsiveWrapper>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<ResponsiveSection padding="responsive" maxWidth="4xl">
|
||||
{!featuredImage && (
|
||||
<div className="max-w-4xl mx-auto mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
<ResponsiveWrapper stackOnMobile={true} centerOnMobile={true} className="mb-8">
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
||||
{page.title}
|
||||
</h1>
|
||||
{page.excerptHtml && (
|
||||
<div
|
||||
className="text-xl text-gray-600 leading-relaxed"
|
||||
<div
|
||||
className="text-lg sm:text-xl text-gray-600 leading-relaxed"
|
||||
dangerouslySetInnerHTML={{ __html: processHTML(page.excerptHtml) }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</ResponsiveWrapper>
|
||||
)}
|
||||
|
||||
{processedContent && (
|
||||
<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-sm p-8">
|
||||
<div
|
||||
<ResponsiveWrapper className="bg-white rounded-lg shadow-sm p-6 sm:p-8" container={true} maxWidth="full">
|
||||
<div
|
||||
className="prose prose-lg max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: processedContent }}
|
||||
/>
|
||||
</div>
|
||||
</ResponsiveWrapper>
|
||||
)}
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="max-w-4xl mx-auto mt-12">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<Link
|
||||
<ResponsiveWrapper className="mt-12" container={true} maxWidth="full">
|
||||
<ResponsiveGrid
|
||||
columns={{ mobile: 1, tablet: 2, desktop: 4 }}
|
||||
gap="responsive"
|
||||
stackMobile={true}
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}/blog`}
|
||||
className="p-4 bg-blue-50 hover:bg-blue-100 rounded-lg text-center transition-colors"
|
||||
className="p-4 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 rounded-lg text-center transition-colors touch-target-md"
|
||||
>
|
||||
<div className="font-semibold text-blue-900">Blog</div>
|
||||
<div className="text-sm text-blue-700">Read our latest posts</div>
|
||||
<div className="font-semibold text-blue-900 text-lg">Blog</div>
|
||||
<div className="text-sm text-blue-700 mt-1">Read our latest posts</div>
|
||||
</Link>
|
||||
<Link
|
||||
<Link
|
||||
href={`/${locale}/products`}
|
||||
className="p-4 bg-green-50 hover:bg-green-100 rounded-lg text-center transition-colors"
|
||||
className="p-4 bg-green-50 hover:bg-green-100 active:bg-green-200 rounded-lg text-center transition-colors touch-target-md"
|
||||
>
|
||||
<div className="font-semibold text-green-900">Products</div>
|
||||
<div className="text-sm text-green-700">Browse our catalog</div>
|
||||
<div className="font-semibold text-green-900 text-lg">Products</div>
|
||||
<div className="text-sm text-green-700 mt-1">Browse our catalog</div>
|
||||
</Link>
|
||||
<Link
|
||||
<Link
|
||||
href={`/${locale}/contact`}
|
||||
className="p-4 bg-orange-50 hover:bg-orange-100 rounded-lg text-center transition-colors"
|
||||
className="p-4 bg-orange-50 hover:bg-orange-100 active:bg-orange-200 rounded-lg text-center transition-colors touch-target-md"
|
||||
>
|
||||
<div className="font-semibold text-orange-900">Contact</div>
|
||||
<div className="text-sm text-orange-700">Get in touch</div>
|
||||
<div className="font-semibold text-orange-900 text-lg">Contact</div>
|
||||
<div className="text-sm text-orange-700 mt-1">Get in touch</div>
|
||||
</Link>
|
||||
<Link
|
||||
<Link
|
||||
href={`/${locale}/blog`}
|
||||
className="p-4 bg-purple-50 hover:bg-purple-100 rounded-lg text-center transition-colors"
|
||||
className="p-4 bg-purple-50 hover:bg-purple-100 active:bg-purple-200 rounded-lg text-center transition-colors touch-target-md"
|
||||
>
|
||||
<div className="font-semibold text-purple-900">News</div>
|
||||
<div className="text-sm text-purple-700">Latest updates</div>
|
||||
<div className="font-semibold text-purple-900 text-lg">News</div>
|
||||
<div className="text-sm text-purple-700 mt-1">Latest updates</div>
|
||||
</Link>
|
||||
</ResponsiveGrid>
|
||||
</ResponsiveWrapper>
|
||||
</ResponsiveSection>
|
||||
|
||||
{/* Tailwind CSS Test Section */}
|
||||
<ResponsiveSection padding="responsive" className="bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
<Container maxWidth="6xl" centered={true} padding="none">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Tailwind CSS Test</h2>
|
||||
<p className="text-lg text-gray-600">If you can see styled components below, Tailwind CSS is working correctly!</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div className="flex flex-wrap gap-4 justify-center items-center">
|
||||
<Button variant="primary" size="lg">
|
||||
Primary Button
|
||||
</Button>
|
||||
<Button variant="secondary" size="lg">
|
||||
Secondary Button
|
||||
</Button>
|
||||
<Button variant="outline" size="lg">
|
||||
Outline Button
|
||||
</Button>
|
||||
<Button variant="ghost" size="lg">
|
||||
Ghost Button
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md border-2 border-blue-200">
|
||||
<h3 className="text-xl font-bold text-blue-900 mb-2">Card 1</h3>
|
||||
<p className="text-gray-600">This card uses Tailwind shadow, rounded, and border utilities.</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg border-2 border-green-200">
|
||||
<h3 className="text-xl font-bold text-green-900 mb-2">Card 2</h3>
|
||||
<p className="text-gray-600">Different shadow intensity and border color.</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-xl shadow-xl border-2 border-purple-200">
|
||||
<h3 className="text-xl font-bold text-purple-900 mb-2">Card 3</h3>
|
||||
<p className="text-gray-600">Rounded-xl and shadow-xl for emphasis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800">
|
||||
<p className="font-bold">Success!</p>
|
||||
<p>If you see this styled alert box with proper colors, spacing, and borders, Tailwind CSS is processing correctly.</p>
|
||||
</div>
|
||||
</Container>
|
||||
</ResponsiveSection>
|
||||
|
||||
{/* Locale Switcher */}
|
||||
<div className="bg-gray-50 py-8">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<ResponsiveSection padding="responsive" className="bg-gray-50">
|
||||
<Container maxWidth="6xl" centered={true} padding="none">
|
||||
<LocaleSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</ResponsiveSection>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user