unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Redesign phase 1: Homepage polish and design system foundation

Browse Source 
- Fix newsletter subscribe box centering on homepage
- Fix header overlap on product pages (pt-[72px] instead of pt-[100px])
- Add scroll-mt-[72px] for smooth scroll anchor offset
- Add HeroVideo component with video hero placeholder
- Add REDESIGN_SPECIFICATION.md with 9-phase design plan
- Clean up globals.css theme declarations and comments
- Update Header with improved sticky behavior and cart
- Update ProductDetail with better layout and spacing
- Update CartDrawer with improved slide-out cart UI
- Add English translations for updated pages
- Various CSS refinements across pages
This commit is contained in:
Unchained
2026-03-21 16:22:17 +02:00
parent 9d639fbd64
commit 7c05bd2346
22 changed files with 2653 additions and 884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/app/products/[slug]/page.tsx
View File

@@ -1,7 +1,7 @@
import Image from "next/image";
import { getProductBySlug, getProducts, getProductPrice, getProductImage, getLocalizedProduct, formatPrice } from "@/lib/saleor";
import { getProductBySlug, getProducts, getLocalizedProduct } from "@/lib/saleor";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import ProductDetail from "@/components/product/ProductDetail";
import type { Product } from "@/types/saleor";
interface ProductPageProps {
@@ -52,6 +52,12 @@ export async function generateMetadata({ params }: ProductPageProps) {
"en": product.translation?.slug ? `/products/${product.translation.slug}` : `/products/${product.slug}`,
},
},
openGraph: {
title: localized.name,
description: localized.seoDescription || localized.description?.slice(0, 160),
images: product.media?.[0]?.url ? [product.media[0].url] : [],
type: 'website',
},
};
}
@@ -61,111 +67,57 @@ export default async function ProductPage({ params }: ProductPageProps) {
if (!product) {
return (
<main className="min-h-screen">
<>
<Header />
<div className="pt-24 text-center">
<h1 className="text-2xl">
{locale === "en" ? "Product not found" : "Proizvod nije pronađen"}
</h1>
</div>
<main className="min-h-screen bg-white">
<div className="pt-[180px] lg:pt-[200px] pb-20 text-center px-4">
<h1 className="text-2xl font-medium mb-4">
{locale === "en" ? "Product not found" : "Proizvod nije pronađen"}
</h1>
<p className="text-[#666666] mb-8">
{locale === "en"
? "The product you're looking for doesn't exist or has been removed."
: "Proizvod koji tražite ne postoji ili je uklonjen."}
</p>
<a
href="/products"
className="inline-block px-8 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
>
{locale === "en" ? "Browse Products" : "Pregledaj proizvode"}
</a>
</div>
</main>
<Footer />
</main>
</>
);
}
const localized = getLocalizedProduct(product, locale.toUpperCase());
const image = getProductImage(product);
const price = getProductPrice(product);
const variant = product.variants?.[0];
const isAvailable = variant?.quantityAvailable > 0;
// Determine language based on which slug matched
const isEnglishSlug = slug === product.translation?.slug;
const currentLocale = isEnglishSlug ? "en" : "sr";
const currentLocale = isEnglishSlug ? "EN" : "SR";
// URLs for language switcher
const serbianUrl = `/products/${product.slug}`;
const englishUrl = product.translation?.slug
? `/products/${product.translation.slug}`
: serbianUrl;
// Get related products (same category or just other products)
let relatedProducts: Product[] = [];
try {
const allProducts = await getProducts(currentLocale, 8);
relatedProducts = allProducts
.filter((p: Product) => p.id !== product.id)
.slice(0, 4);
} catch (e) {
// Ignore error, just won't show related products
}
return (
<main className="min-h-screen">
<>
<Header />
<section className="pt-24 pb-20 px-4">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
{/* Product Image */}
<div className="relative aspect-[4/5] bg-background-ice overflow-hidden">
<Image
src={image}
alt={localized.name}
fill
className="object-cover"
priority
/>
</div>
{/* Product Info */}
<div className="flex flex-col">
<h1 className="text-4xl font-serif mb-4">{localized.name}</h1>
{price && (
<div className="text-2xl mb-6">{price}</div>
)}
{localized.description && (
<div
className="prose max-w-none mb-8"
dangerouslySetInnerHTML={{ __html: localized.description }}
/>
)}
{/* Add to Cart Button */}
<button
className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium text-center hover:bg-opacity-90 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
disabled={!isAvailable}
>
{isAvailable
? (currentLocale === "en" ? "Add to Cart" : "Dodaj u korpu")
: (currentLocale === "en" ? "Out of Stock" : "Nema na stanju")
}
</button>
{/* SKU */}
{variant?.sku && (
<p className="mt-4 text-sm text-foreground-muted">
SKU: {variant.sku}
</p>
)}
{/* Language Switcher */}
<div className="mt-8 pt-8 border-t">
<p className="text-sm text-foreground-muted mb-2">
{currentLocale === "en" ? "Language:" : "Jezik:"}
</p>
<div className="flex gap-4">
<a
href={serbianUrl}
className={`text-sm font-medium ${currentLocale === "sr" ? "text-foreground" : "text-foreground-muted hover:text-foreground"}`}
>
🇷🇸 Srpski
</a>
<a
href={englishUrl}
className={`text-sm font-medium ${currentLocale === "en" ? "text-foreground" : "text-foreground-muted hover:text-foreground"}`}
>
🇬🇧 English
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<main className="min-h-screen bg-white">
<ProductDetail
product={product}
relatedProducts={relatedProducts}
locale={currentLocale}
/>
</main>
<Footer />
</main>
</>
);
}