feat: phase 1 - i18n core infrastructure with EN/DE/FR locales

- Add middleware.ts for locale detection (URL path, cookie, Accept-Language)
- Update routing.ts to include en, de, fr locales
- Update layout.tsx with NextIntlClientProvider and dynamic lang attribute
- Create EN/DE/FR homepages, product listings, product details, about, and contact pages
- Serbian remains at root URL (/products, /about, /contact)
- English at /en/*, German at /de/*, French at /fr/*
This commit is contained in:
Unchained
2026-03-23 18:11:08 +02:00
parent ace1ac104e
commit f72f32fe60
18 changed files with 1495 additions and 198 deletions

View File

@@ -9,27 +9,31 @@ export const metadata = {
description: "Browse our collection of premium natural oils for hair and skin care.",
};
export default async function ProductsPage() {
const products = await getProducts("EN");
export default async function EnglishProductsPage() {
const products = await getProducts("UK");
return (
<>
<Header />
<main className="min-h-screen bg-white">
{/* Page Header */}
<div className="pt-[104px]">
<div className="pt-[72px] lg:pt-[72px]">
<div className="border-b border-[#e5e5e5]">
<div className="container py-8 md:py-12">
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
<div>
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-2 block">Our Collection</span>
<h1 className="text-3xl md:text-4xl font-medium">All Products</h1>
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-2 block">
Our Collection
</span>
<h1 className="text-3xl md:text-4xl font-medium">
All Products
</h1>
</div>
{/* Sort Dropdown */}
<div className="flex items-center gap-3">
<span className="text-sm text-[#666666]">{products.length} products</span>
<span className="text-sm text-[#666666]">
{products.length} products
</span>
<div className="relative">
<select
className="appearance-none bg-transparent border border-[#e5e5e5] pl-4 pr-10 py-2 text-sm focus:outline-none focus:border-black cursor-pointer"
@@ -47,13 +51,16 @@ export default async function ProductsPage() {
</div>
</div>
{/* Products Grid */}
<section className="py-12 md:py-16">
<div className="container">
{products.length === 0 ? (
<div className="text-center py-20">
<p className="text-[#666666] mb-4">No products available</p>
<p className="text-sm text-[#999999]">Please check back later for new arrivals.</p>
<p className="text-[#666666] mb-4">
No products available
</p>
<p className="text-sm text-[#999999]">
Please check back later for new arrivals.
</p>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">