YaltopiaTech/TrustWin-Landing
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui updated and logo added

Browse Source
This commit is contained in:
Filmon24 2026-03-26 13:37:21 +03:00
parent 85cddaf9a6
commit 2daf634260
18 changed files with 320 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
messages/am.json
View File

@ -31,6 +31,7 @@
"stackAlt": "የተከማቹ የብረት መገለጫዎች ምስል፦ ቦረት፣ ፍላት ባር፣ ቧንቧ እና ባዶ ክፍል"
},
"services": {
"eyebrow": "ልዩ ብቃታችን",
"title": "አገልግሎቶቻችን",
"subtitle": "ለኢንዱስትሪ ደረጃ ቁሳቁሶች፣ ሰነዶች፣ ሎጂስቲክስ እና የፕሮጀክት ድጋፍ ከአንድ ሰርተጅ።",
"cut": {

1
messages/en.json
View File

@ -31,6 +31,7 @@
"stackAlt": "Illustration of stacked steel profiles: rebar, flat bar, pipe, and hollow section"
},
"services": {
"eyebrow": "Our Expertise",
"title": "Our services",
"subtitle": "Industrial-grade materials, documentation, logistics, and project support from one desk.",
"cut": {

BIN
public/Logo/TrustLogo-removebg-preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

2
src/app/[locale]/cart/page.tsx
View File

@ -12,7 +12,7 @@ export default async function CartPage() {
return (
<div className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
<h1 className="text-3xl font-semibold tracking-tight text-neutral-900">
<h1 className="text-4xl font-semibold tracking-tight text-brand-navy">
{t("title")}
</h1>
<div className="mt-8">

4
src/app/[locale]/checkout/page.tsx
View File

@ -11,10 +11,10 @@ export default async function CheckoutPage() {
return (
<div className="mx-auto max-w-2xl px-4 py-10 sm:px-6 lg:px-8">
<h1 className="text-3xl font-semibold tracking-tight text-neutral-900">
<h1 className="text-4xl font-semibold tracking-tight text-brand-navy">
{t("title")}
</h1>
<p className="mt-2 text-neutral-600">{t("subtitle")}</p>
<p className="mt-3 text-base font-normal text-neutral-600">{t("subtitle")}</p>
<div className="mt-8">
<CheckoutForm />
</div>

135
src/app/[locale]/page.tsx
View File

@ -8,34 +8,35 @@ export default async function HomePage() {
return (
<div>
<section className="relative overflow-hidden border-b border-neutral-200/90 bg-gradient-to-b from-white to-neutral-50">
<div className="mx-auto grid max-w-[1440px] gap-10 px-4 py-14 sm:px-6 lg:grid-cols-2 lg:items-center lg:py-20 lg:px-8">
{/* 1. Hero -> bg-brand-navy */}
<section className="relative overflow-hidden bg-brand-navy">
<div className="mx-auto grid max-w-7xl gap-10 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:items-center lg:py-20 lg:px-8">
<div>
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("hero.eyebrow")}
</p>
<h1 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl lg:text-5xl">
<h1 className="mt-3 text-4xl font-semibold tracking-tight text-white sm:text-5xl lg:text-6xl">
{t("hero.title")}
</h1>
<p className="mt-4 text-base leading-relaxed text-neutral-600 sm:text-lg">
<p className="mt-4 text-base font-normal leading-relaxed text-brand-navy100 sm:text-lg">
{t("hero.subtitle")}
</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<Link
href="/catalog"
className="inline-flex items-center justify-center rounded-lg bg-neutral-900 px-5 py-3.5 text-sm font-semibold text-white transition hover:bg-neutral-800"
className="inline-flex items-center justify-center rounded-lg bg-brand-gold px-6 py-3 text-sm font-semibold text-brand-navy transition duration-150 hover:bg-brand-gold700"
>
{t("hero.ctaCatalog")}
</Link>
<Link
href="/checkout"
className="inline-flex items-center justify-center rounded-lg border border-neutral-200 bg-white px-5 py-3.5 text-sm font-semibold text-neutral-600 transition hover:border-neutral-300 hover:text-neutral-900"
className="inline-flex items-center justify-center rounded-lg border border-white/30 px-6 py-3 text-sm font-semibold text-white transition duration-150 hover:border-white hover:bg-white/5"
>
{t("hero.ctaQuote")}
</Link>
</div>
</div>
<div className="relative aspect-[4/3] overflow-hidden rounded-lg bg-[#e2e8f0] border border-neutral-200">
<div className="relative aspect-[4/3] overflow-hidden rounded-lg border border-white/10 bg-brand-navy600/20">
<Image
src="/metal/hero-stack.svg"
alt={th("stackAlt")}
@ -49,20 +50,28 @@ export default async function HomePage() {
</div>
</section>
{/* 2. Trust bar missing - move to Services */}
{/* 3. Services -> bg-neutral-100 */}
<section
id="services"
className="border-y border-neutral-200/80 bg-neutral-50/80"
className="relative bg-neutral-100"
aria-labelledby="services-heading"
>
<div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("services.eyebrow") || "Our Services"}
</p>
<h2
id="services-heading"
className="text-2xl font-semibold text-neutral-900 sm:text-3xl"
className="mt-3 text-3xl font-semibold text-brand-navy"
>
{t("services.title")}
</h2>
<p className="mt-2 max-w-2xl text-neutral-600">{t("services.subtitle")}</p>
<ul className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<p className="mt-4 max-w-2xl text-sm font-normal text-neutral-700">
{t("services.subtitle")}
</p>
<ul className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
{(
[
"cut",
@ -75,9 +84,9 @@ export default async function HomePage() {
).map((key) => (
<li
key={key}
className="rounded-lg bg-white p-5 border border-neutral-100"
className="group relative rounded-lg border border-neutral-200 bg-neutral-0 p-6 border-l-2 border-l-brand-gold transition duration-150 hover:border-neutral-300"
>
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-900 text-white">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-brand-gold50 text-brand-gold">
{key === "cut" && (
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 11-4.243 4.243 3 3 0 014.243-4.243zm0-5.758a3 3 0 11-4.243-4.243 3 3 0 014.243 4.243z" />
@ -109,10 +118,10 @@ export default async function HomePage() {
</svg>
)}
</div>
<h3 className="mt-4 text-lg font-semibold text-neutral-900">
<h3 className="mt-4 text-base font-semibold text-brand-navy">
{t(`services.${key}.title`)}
</h3>
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
<p className="mt-2 text-sm font-normal leading-relaxed text-neutral-600">
{t(`services.${key}.body`)}
</p>
</li>
@ -121,25 +130,29 @@ export default async function HomePage() {
</div>
</section>
<section className="bg-white">
<div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
<h2 className="text-2xl font-semibold text-neutral-900 sm:text-3xl">
{/* 4. About / How it works -> bg-neutral-0 */}
<section className="bg-neutral-0">
<div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
Process
</p>
<h2 className="mt-3 text-3xl font-semibold text-brand-navy">
{t("how.title")}
</h2>
<p className="mt-2 text-neutral-600">{t("how.subtitle")}</p>
<ol className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<p className="mt-4 text-sm font-normal text-neutral-600">{t("how.subtitle")}</p>
<ol className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
{([1, 2, 3, 4] as const).map((n) => (
<li
key={n}
className="relative rounded-lg border border-neutral-100 bg-neutral-50/80 p-5"
className="relative rounded-lg border border-neutral-200 bg-neutral-0 p-6 transition duration-150 hover:border-neutral-300"
>
<span className="text-3xl font-semibold text-neutral-300">
{n}
<span className="text-3xl font-semibold text-neutral-200">
0{n}
</span>
<h3 className="mt-2 font-semibold text-neutral-900">
<h3 className="mt-4 text-base font-semibold text-brand-navy">
{t(`how.step${n}.title` as "how.step1.title")}
</h3>
<p className="mt-2 text-sm text-neutral-600">
<p className="mt-2 text-sm font-normal text-neutral-600">
{t(`how.step${n}.body` as "how.step1.body")}
</p>
</li>
@ -148,27 +161,31 @@ export default async function HomePage() {
</div>
</section>
{/* 5. FAQ -> bg-neutral-100 */}
<section
id="faq"
className="border-t border-neutral-100 bg-neutral-50/80"
className="bg-neutral-100"
aria-labelledby="faq-heading"
>
<div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
<div className="mx-auto max-w-3xl">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold text-center">
Questions
</p>
<h2
id="faq-heading"
className="text-2xl font-semibold text-neutral-900 sm:text-3xl"
className="mt-3 text-3xl font-semibold text-brand-navy text-center"
>
{t("faq.title")}
</h2>
<p className="mt-2 text-neutral-600">{t("faq.subtitle")}</p>
<div className="mt-10 space-y-3">
<p className="mt-4 text-center text-sm font-normal text-neutral-700">{t("faq.subtitle")}</p>
<div className="mt-12 space-y-4">
{([1, 2, 3, 4, 5, 6] as const).map((n) => (
<details
key={n}
className="group rounded-lg border border-neutral-200 bg-white px-4 py-1"
className="group rounded-lg border border-neutral-200 bg-neutral-0 px-6 py-2 transition duration-150"
>
<summary className="flex cursor-pointer list-none items-center justify-between gap-3 py-3 text-left text-sm font-semibold text-neutral-900 [&::-webkit-details-marker]:hidden">
<summary className="flex cursor-pointer list-none items-center justify-between gap-3 py-3 text-left text-sm font-semibold text-brand-navy [&::-webkit-details-marker]:hidden">
<span>{t(`faq.i${n}.q` as "faq.i1.q")}</span>
<svg
className="faq-chevron h-5 w-5 shrink-0 text-neutral-400 transition-transform duration-200"
@ -183,9 +200,9 @@ export default async function HomePage() {
/>
</svg>
</summary>
<p className="border-t border-neutral-100 pb-4 pt-3 text-sm leading-relaxed text-neutral-600">
<div className="border-t border-neutral-100 pb-5 pt-4 text-sm font-normal leading-relaxed text-neutral-600">
{t(`faq.i${n}.a` as "faq.i1.a")}
</p>
</div>
</details>
))}
</div>
@ -193,25 +210,33 @@ export default async function HomePage() {
</div>
</section>
<section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
<div className="overflow-hidden rounded-lg bg-neutral-900 px-6 py-10 text-center text-white sm:px-12">
<h2 className="text-2xl font-semibold sm:text-3xl">{t("ctaBand.title")}</h2>
<p className="mx-auto mt-3 max-w-xl text-sm text-neutral-400 sm:text-base">
{t("ctaBand.body")}
</p>
<div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
<Link
href="/checkout"
className="inline-flex justify-center rounded-lg bg-white px-6 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100"
>
{t("ctaBand.primary")}
</Link>
<a
href={`tel:${(process.env.NEXT_PUBLIC_CONTACT_PHONE ?? "+251911000000").replace(/\s/g, "")}`}
className="inline-flex justify-center rounded-lg border border-white/20 bg-white/10 px-6 py-3.5 text-sm font-semibold text-white transition hover:bg-white/20"
>
{t("ctaBand.secondary")}
</a>
{/* 6. CTA Band -> bg-neutral-100 */}
<section className="bg-neutral-100 py-24 sm:py-32 border-t border-neutral-200">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
Get Started
</p>
<h2 className="mt-3 text-3xl font-semibold text-brand-navy sm:text-4xl">
{t("ctaBand.title")}
</h2>
<p className="mx-auto mt-4 max-w-xl text-base font-normal text-neutral-600">
{t("ctaBand.body")}
</p>
<div className="mt-10 flex flex-col justify-center gap-4 sm:flex-row">
<Link
href="/checkout"
className="inline-flex justify-center rounded-lg bg-brand-navy px-10 py-4 text-sm font-semibold text-white transition duration-150 hover:bg-brand-navy800"
>
{t("ctaBand.primary")}
</Link>
<a
href={`tel:${(process.env.NEXT_PUBLIC_CONTACT_PHONE ?? "+251911000000").replace(/\s/g, "")}`}
className="inline-flex justify-center rounded-lg border border-neutral-200 bg-white px-10 py-4 text-sm font-semibold text-brand-navy transition duration-150 hover:border-neutral-300"
>
{t("ctaBand.secondary")}
</a>
</div>
</div>
</div>
</section>

30
src/app/[locale]/product/[slug]/page.tsx
View File

@ -39,7 +39,7 @@ export default async function ProductPage({ params }: Props) {
<div className="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-8">
<Link
href="/catalog"
className="text-sm font-medium text-neutral-500 transition hover:text-neutral-900"
className="inline-flex items-center text-sm font-semibold text-neutral-500 transition hover:text-brand-navy"
>
← {t("back")}
</Link>
@ -47,12 +47,12 @@ export default async function ProductPage({ params }: Props) {
<div className="mt-8 grid gap-10 lg:grid-cols-2 lg:gap-16">
<div>
<ProductGallery slug={slug} sources={product.gallery} />
<div className="mt-6">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<div className="mt-8">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("thicknessLabel")}
</p>
<div
className="mt-2 flex flex-wrap gap-2"
className="mt-3 flex flex-wrap gap-2"
role="list"
aria-label={tc("thicknessList")}
>
@ -60,7 +60,7 @@ export default async function ProductPage({ params }: Props) {
<span
key={mm}
role="listitem"
className="inline-flex rounded-md border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm font-semibold tabular-nums text-neutral-800"
className="inline-flex rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm font-semibold tabular-nums text-neutral-800 transition hover:border-neutral-300"
>
{t("thicknessValue", {
value: formatThicknessMm(mm),
@ -72,34 +72,34 @@ export default async function ProductPage({ params }: Props) {
</div>
<div>
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{tcl(product.catalogLineKey)}
</p>
<p className="mt-2 text-sm font-semibold text-neutral-900">
<p className="mt-2 text-sm font-semibold text-neutral-700">
{tn("supplier")}
</p>
<h1 className="mt-1 text-2xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-3xl lg:text-4xl">
<h1 className="mt-1 text-3xl font-semibold leading-tight tracking-tight text-brand-navy sm:text-4xl lg:text-5xl">
{tp(`${slug}.name`)}
</h1>
<p className="mt-4 text-base leading-relaxed text-neutral-600">
<p className="mt-4 text-base font-normal leading-relaxed text-neutral-600">
{tp(`${slug}.short`)}
</p>
<p className="mt-6 text-xl font-semibold text-neutral-900">
<p className="mt-6 text-2xl font-semibold text-brand-navy">
{product.pricePerUnit.toFixed(2)}{" "}
<span className="text-sm font-medium text-neutral-500">
<span className="text-sm font-normal text-neutral-500">
{tu(product.unitKey)}
</span>
</p>
<div className="mt-8">
<div className="mt-10">
<ProductAddToCart product={product} />
</div>
<div className="mt-8 rounded-lg border border-neutral-100 bg-neutral-50/80 p-5">
<h2 className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<div className="mt-10 rounded-lg border border-neutral-200 bg-neutral-50 p-6">
<h2 className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("details")}
</h2>
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
<p className="mt-3 text-sm font-normal leading-relaxed text-neutral-700">
{tp(`${slug}.short`)}
</p>
</div>

64
src/app/globals.css
View File

@ -9,35 +9,32 @@
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-brand-navy: #1E2263;
--color-brand-navy800: #2C3390;
--color-brand-navy600: #5C64B8;
--color-brand-navy100: #CDD0EE;
--color-brand-navy50: #EEEFFE;
--color-brand-gold: #E8A020;
--color-brand-gold700: #B07800;
--color-brand-gold300: #F4C56A;
--color-brand-gold50: #FEF8EC;
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F9F9F9;
--color-neutral-100: #F0F0F0;
--color-neutral-200: #E0E0E0;
--color-neutral-300: #C2C2C2;
--color-neutral-400: #9E9E9E;
--color-neutral-500: #767676;
--color-neutral-600: #545454;
--color-neutral-700: #3D3D3D;
--color-neutral-800: #242424;
--color-neutral-900: #111111;
--font-sans: var(--font-dm-sans), ui-sans-serif, system-ui, sans-serif;
/* Navy (lower chroma + lightness than default Tailwind blue) */
--color-blue-50: oklch(96.5% 0.012 262);
--color-blue-100: oklch(90.5% 0.028 262);
--color-blue-200: oklch(83% 0.045 262);
--color-blue-300: oklch(70% 0.07 262);
--color-blue-400: oklch(56% 0.095 262);
--color-blue-500: oklch(44% 0.11 262);
--color-blue-600: oklch(36% 0.105 262);
--color-blue-700: oklch(30% 0.09 262);
--color-blue-800: oklch(25% 0.075 262);
--color-blue-900: oklch(21% 0.06 262);
--color-blue-950: oklch(16% 0.045 262);
/* Burnt orange (darker than default orange-500/400) */
--color-orange-50: oklch(97% 0.018 55);
--color-orange-100: oklch(92.5% 0.038 52);
--color-orange-200: oklch(86% 0.065 48);
--color-orange-300: oklch(74% 0.1 46);
--color-orange-400: oklch(62% 0.14 44);
--color-orange-500: oklch(52% 0.155 42);
--color-orange-600: oklch(44% 0.14 40);
--color-orange-700: oklch(37% 0.12 39);
--color-orange-800: oklch(31% 0.095 38);
--color-orange-900: oklch(26% 0.075 37);
--color-orange-950: oklch(19% 0.05 36);
--radius-lg: 0.5rem;
--radius-md: 0.375rem;
}
body {
@ -57,3 +54,14 @@ body {
details[open] .faq-chevron {
transform: rotate(180deg);
}
.bg-grid {
background-size: 60px 80px;
background-image:
linear-gradient(to right, oklch(9.693% 0.00001 271.152 / 0.03) 1px, transparent 1px),
linear-gradient(to bottom, oklch(0% 0 0 / 0.03) 1px, transparent 1px);
}
.bg-grid-mask {
mask-image: radial-gradient(circle at center, black, transparent 80%);
}

2
src/components/CartBadge.tsx
View File

@ -9,7 +9,7 @@ export function CartBadge() {
if (count === 0) return null;
return (
<span className="absolute -right-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-neutral-900 px-1 text-[10px] font-semibold text-white">
<span className="absolute -right-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-brand-gold px-1 text-[10px] font-semibold text-white">
{count > 99 ? "99+" : count}
</span>
);

2
src/components/CartCheckoutLink.tsx
View File

@ -12,7 +12,7 @@ export function CartCheckoutLink() {
<div className="mt-8 flex justify-end">
<Link
href="/checkout"
className="inline-flex rounded-lg bg-neutral-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
className="inline-flex rounded-lg bg-brand-navy px-8 py-3.5 text-sm font-semibold text-white transition hover:bg-brand-navy800"
>
{t("checkout")}
</Link>

18
src/components/CartView.tsx
View File

@ -17,11 +17,11 @@ export function CartView() {
if (items.length === 0) {
return (
<div className="mx-auto max-w-lg rounded-lg border border-neutral-100 bg-white p-10 text-center">
<p className="text-neutral-600">{t("empty")}</p>
<div className="mx-auto max-w-lg rounded-lg border border-neutral-200 bg-neutral-50 p-10 text-center">
<p className="text-sm font-normal text-neutral-600">{t("empty")}</p>
<Link
href="/catalog"
className="mt-6 inline-flex rounded-lg bg-neutral-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
className="mt-8 inline-flex rounded-lg bg-brand-navy px-8 py-3 text-sm font-semibold text-white transition hover:bg-brand-navy800"
>
{t("emptyCta")}
</Link>
@ -79,13 +79,13 @@ function CartLineRow({
const lineTotal = price * line.quantity;
return (
<li className="flex flex-col gap-4 rounded-lg border border-neutral-100 bg-white p-4 sm:flex-row sm:items-center sm:justify-between">
<li className="flex flex-col gap-6 rounded-lg border border-neutral-200 bg-neutral-0 p-5 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0 flex-1">
<p className="font-semibold text-neutral-900">{name}</p>
<p className="text-lg font-semibold text-brand-navy">{name}</p>
{sub ? (
<p className="mt-1 text-sm text-neutral-500">{sub}</p>
<p className="mt-1 text-sm font-normal text-neutral-500">{sub}</p>
) : null}
<p className="mt-2 text-sm text-neutral-600">
<p className="mt-2 text-sm font-normal text-neutral-600">
{price.toFixed(2)}{" "}
{product ? tu(product.unitKey) : ""} {t("each")}
</p>
@ -103,9 +103,9 @@ function CartLineRow({
onChange={(e) =>
updateQuantity(line.lineId, Number(e.target.value) || 1)
}
className="w-20 rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm font-semibold outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
className="w-20 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm font-semibold tabular-nums text-neutral-800 outline-none transition duration-150 focus:border-brand-navy600 focus:ring-2 focus:ring-brand-navy/8"
/>
<p className="text-sm font-semibold text-neutral-900">
<p className="text-lg font-semibold text-brand-navy">
{lineTotal.toFixed(2)}
</p>
<button

183
src/components/CatalogExplorer.tsx
View File

@ -97,10 +97,10 @@ export function CatalogExplorer({
const filterPanel = (
<div className="space-y-6">
<div>
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("filterCategory")}
</p>
<ul className="mt-3 space-y-1">
<ul className="mt-4 space-y-1">
{categoryList.map((c) => (
<li key={c}>
<button
@ -109,10 +109,10 @@ export function CatalogExplorer({
setCat(c);
setFiltersOpen(false);
}}
className={`flex w-full rounded-lg px-3 py-2 text-left text-sm font-medium transition ${
className={`flex w-full rounded-lg px-3 py-2 text-left text-sm font-semibold transition duration-150 ${
cat === c
? "bg-neutral-900 text-white"
: "text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900"
? "bg-brand-navy text-white"
: "text-neutral-500 hover:bg-neutral-50 hover:text-brand-navy"
}`}
>
{c === "all" ? t("all") : tc(c)}
@ -123,13 +123,13 @@ export function CatalogExplorer({
</div>
<div>
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("filterSort")}
</p>
<select
value={sort}
onChange={(e) => setSort(e.target.value as SortKey)}
className="mt-3 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-medium text-neutral-900 outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
className="mt-4 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-normal text-neutral-800 outline-none transition duration-150 focus:border-brand-navy600 focus:ring-2 focus:ring-brand-navy/8"
>
<option value="name-asc">{t("sortNameAsc")}</option>
<option value="name-desc">{t("sortNameDesc")}</option>
@ -138,9 +138,9 @@ export function CatalogExplorer({
</select>
</div>
<div className="rounded-lg border border-neutral-100 bg-neutral-50/80 p-4">
<div className="rounded-lg border border-neutral-200 bg-neutral-50 p-5">
<div className="flex items-center justify-between gap-3">
<span className="text-sm font-medium text-neutral-800">
<span className="text-sm font-semibold text-neutral-700">
{t("galvToggle")}
</span>
<button
@ -149,25 +149,25 @@ export function CatalogExplorer({
aria-checked={preferGalv}
aria-label={t("galvToggle")}
onClick={() => setPreferGalv((v) => !v)}
className={`relative h-7 w-12 shrink-0 rounded-full transition-colors ${
preferGalv ? "bg-neutral-900" : "bg-neutral-300"
className={`relative h-7 w-12 shrink-0 rounded-full transition-colors duration-200 ${
preferGalv ? "bg-brand-gold" : "bg-neutral-300"
}`}
>
<span
className={`absolute top-1 h-5 w-5 rounded-full bg-white transition-all ${
className={`absolute top-1 h-5 w-5 rounded-full bg-white transition-all duration-200 ${
preferGalv ? "left-[calc(100%-1.25rem-0.25rem)]" : "left-1"
}`}
/>
</button>
</div>
<p className="mt-2 text-xs leading-relaxed text-neutral-500">
<p className="mt-3 text-xs font-normal leading-relaxed text-neutral-500">
{t("sidebarGalvBody")}
</p>
</div>
<div className="rounded-lg border border-neutral-100 bg-white p-4">
<p className="text-sm font-semibold text-neutral-900">{t("sidebarDocs")}</p>
<p className="mt-2 text-xs leading-relaxed text-neutral-600">
<div className="rounded-lg border border-neutral-200 bg-neutral-50 p-5">
<p className="text-sm font-semibold text-neutral-700">{t("sidebarDocs")}</p>
<p className="mt-2 text-xs font-normal leading-relaxed text-neutral-600">
{t("sidebarDocsBody")}
</p>
</div>
@ -175,27 +175,30 @@ export function CatalogExplorer({
);
return (
<div className="min-h-screen bg-neutral-50">
<div className="mx-auto max-w-[1440px] px-4 py-8 sm:py-10 lg:px-8">
<div className="min-h-screen bg-neutral-0">
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
<header className="max-w-3xl">
<h1 className="text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
Catalog
</p>
<h1 className="mt-3 text-4xl font-semibold tracking-tight text-brand-navy">
{t("title")}
</h1>
<p className="mt-3 text-sm leading-relaxed text-neutral-600 sm:text-base">
<p className="mt-4 text-base font-normal leading-relaxed text-neutral-600">
{t("subtitle")}
</p>
</header>
<form
onSubmit={submitSearch}
className="relative mt-6 md:hidden"
className="relative mt-10 md:hidden"
role="search"
>
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={tn("searchPlaceholder")}
className="w-full rounded-lg border border-neutral-200 bg-neutral-50 py-3 pl-11 pr-4 text-sm text-neutral-900 outline-none transition duration-150 placeholder:text-neutral-400 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
className="w-full rounded-lg border border-neutral-200 bg-neutral-50 py-3 pl-11 pr-4 text-sm font-normal text-neutral-800 outline-none transition duration-150 focus:border-brand-navy600 focus:bg-white focus:ring-2 focus:ring-brand-navy/8 placeholder:text-neutral-400"
/>
<span className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400">
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
@ -204,10 +207,10 @@ export function CatalogExplorer({
</span>
</form>
<div className="mt-8 flex flex-wrap items-center gap-3">
<div className="mt-8 flex flex-wrap items-center gap-4">
<button
type="button"
className="inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-semibold text-neutral-800 transition hover:border-neutral-300 lg:hidden"
className="inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-5 py-2.5 text-sm font-semibold text-neutral-700 transition hover:border-neutral-300 hover:text-brand-navy lg:hidden"
onClick={() => setFiltersOpen(true)}
>
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@ -222,10 +225,10 @@ export function CatalogExplorer({
key={c}
type="button"
onClick={() => setCat(c)}
className={`shrink-0 rounded-md px-4 py-2 text-sm font-semibold transition ${
className={`shrink-0 rounded-lg px-5 py-2 text-sm font-semibold transition duration-150 ${
cat === c
? "bg-neutral-900 text-white"
: "border border-neutral-200 bg-white text-neutral-500 hover:border-neutral-300 hover:text-neutral-900"
? "bg-brand-navy text-white shadow-sm"
: "border border-neutral-200 bg-white text-neutral-500 hover:border-neutral-300 hover:text-brand-navy"
}`}
>
{c === "all" ? t("allShort") : tc(c)}
@ -233,7 +236,7 @@ export function CatalogExplorer({
))}
</div>
<div className="hidden items-center gap-2 sm:flex">
<div className="hidden items-center gap-3 sm:flex">
<label htmlFor="catalog-sort" className="sr-only">
{t("sort")}
</label>
@ -241,7 +244,7 @@ export function CatalogExplorer({
id="catalog-sort"
value={sort}
onChange={(e) => setSort(e.target.value as SortKey)}
className="rounded-lg border border-neutral-200 bg-neutral-50 py-2 pl-3 pr-8 text-sm font-medium text-neutral-900 outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
className="rounded-lg border border-neutral-200 bg-neutral-50 py-2 pl-3 pr-8 text-sm font-semibold text-neutral-700 outline-none transition duration-150 focus:border-brand-navy600 focus:bg-white focus:ring-2 focus:ring-brand-navy/8"
>
<option value="name-asc">{t("sortNameAsc")}</option>
<option value="name-desc">{t("sortNameDesc")}</option>
@ -251,84 +254,88 @@ export function CatalogExplorer({
</div>
</div>
<div className="mt-10 flex gap-10">
<aside className="hidden w-72 shrink-0 lg:block">{filterPanel}</aside>
<div className="mt-12 flex gap-12">
<aside className="hidden w-64 shrink-0 lg:block">{filterPanel}</aside>
<div className="min-w-0 flex-1">
{filtered.length === 0 ? (
<p className="py-20 text-center text-sm text-neutral-500">{t("empty")}</p>
<p className="py-24 text-center text-sm font-normal text-neutral-500">{t("empty")}</p>
) : (
<ul className="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
<ul className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{filtered.map((p) => (
<li key={p.slug}>
<article className="group flex h-full flex-col">
<Link
href={`/product/${p.slug}`}
className="group relative block overflow-hidden rounded-lg border border-neutral-100"
className="group relative block overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50"
>
<div className="relative aspect-square">
<MetalProfileVisual
src={p.gallery[0]}
alt={tp(`${p.slug}.imageAlt`)}
className="h-full w-full rounded-lg"
className="h-full w-full rounded-lg mix-blend-multiply"
/>
</div>
</Link>
<div className="mt-4 px-0.5">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{t("thicknessLabel")}
</p>
<div
className="mt-1.5 flex flex-wrap gap-1.5"
role="list"
aria-label={t("thicknessList")}
>
{p.thicknessesMm.map((mm) => (
<span
key={`${p.slug}-${mm}`}
role="listitem"
className="inline-flex rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-1 text-xs font-semibold tabular-nums text-neutral-800"
>
{t("thicknessValue", {
value: formatThicknessMm(mm),
})}
</span>
))}
<div className="mt-5 flex flex-col flex-1">
<div>
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("thicknessLabel")}
</p>
<div
className="mt-2 flex flex-wrap gap-1.5"
role="list"
aria-label={t("thicknessList")}
>
{p.thicknessesMm.map((mm) => (
<span
key={`${p.slug}-${mm}`}
role="listitem"
className="inline-flex rounded-lg border border-neutral-200 bg-neutral-50 px-2.5 py-1 text-xs font-semibold tabular-nums text-neutral-700"
>
{t("thicknessValue", {
value: formatThicknessMm(mm),
})}
</span>
))}
</div>
</div>
<div className="mt-4">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-500">
{tcl(p.catalogLineKey)}
</p>
<p className="mt-1 text-xs font-semibold text-neutral-700">
{tn("supplier")}
</p>
<h2 className="mt-1 text-lg font-semibold tracking-tight text-brand-navy">
<Link
href={`/product/${p.slug}`}
className="transition duration-150 hover:text-brand-navy800"
>
{tp(`${p.slug}.name`)}
</Link>
</h2>
</div>
<div className="mt-4 flex items-baseline gap-1.5">
<span className="text-[11px] font-semibold uppercase tracking-widest text-neutral-500">
{t("from")}
</span>
<span className="text-xl font-semibold text-brand-navy">
{p.pricePerUnit.toFixed(2)}
</span>
<span className="text-xs font-normal text-neutral-500">{tu(p.unitKey)}</span>
</div>
</div>
<p className="mt-3 text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{tcl(p.catalogLineKey)}
</p>
<p className="mt-1 text-sm font-semibold text-neutral-900">
{tn("supplier")}
</p>
<h2 className="mt-0.5 text-sm font-normal leading-snug text-neutral-600">
<Link
href={`/product/${p.slug}`}
className="transition hover:text-neutral-900"
className="mt-6 w-full rounded-lg bg-brand-navy py-3 text-center text-sm font-semibold text-white transition duration-150 hover:bg-brand-navy800"
>
{tp(`${p.slug}.name`)}
{t("addToCart")}
</Link>
</h2>
<p className="mt-3 text-sm text-neutral-500">
<span className="text-[11px] font-semibold uppercase tracking-widest">
{t("from")}
</span>{" "}
<span className="text-base font-semibold text-neutral-900">
{p.pricePerUnit.toFixed(2)}
</span>{" "}
<span className="text-neutral-500">{tu(p.unitKey)}</span>
</p>
<Link
href={`/product/${p.slug}`}
className="mt-4 w-full rounded-lg bg-neutral-900 py-2.5 text-center text-sm font-semibold text-white transition hover:bg-neutral-800"
>
{t("addToCart")}
</Link>
</div>
</article>
</li>
))}
@ -342,16 +349,16 @@ export function CatalogExplorer({
<>
<button
type="button"
className="fixed inset-0 z-50 bg-neutral-950/40 backdrop-blur-[1px] lg:hidden"
className="fixed inset-0 z-50 bg-neutral-900/40 backdrop-blur-[2px] lg:hidden"
aria-label={t("closeFilters")}
onClick={() => setFiltersOpen(false)}
/>
<div className="fixed inset-y-0 left-0 z-[60] w-[min(22rem,100vw)] overflow-y-auto border-r border-neutral-100 bg-white p-6 lg:hidden">
<div className="mb-6 flex items-center justify-between">
<p className="text-lg font-semibold text-neutral-900">{t("filters")}</p>
<div className="fixed inset-y-0 left-0 z-[60] w-[min(20rem,100vw)] overflow-y-auto bg-white p-8 lg:hidden shadow-2xl">
<div className="mb-8 flex items-center justify-between">
<p className="text-xl font-semibold text-brand-navy">{t("filters")}</p>
<button
type="button"
className="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900"
className="rounded-lg p-2 text-neutral-400 transition hover:bg-neutral-50 hover:text-brand-navy"
onClick={() => setFiltersOpen(false)}
>
<span className="sr-only">{t("closeFilters")}</span>

38
src/components/CheckoutForm.tsx
View File

@ -19,7 +19,7 @@ const formSchema = z.object({
type FormValues = z.infer<typeof formSchema>;
const inputClass =
"mt-1 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm text-neutral-900 outline-none transition duration-150 placeholder:text-neutral-400 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8";
"mt-1.5 w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm font-normal text-neutral-800 outline-none transition duration-150 placeholder:text-neutral-400 focus:border-brand-navy600 focus:ring-2 focus:ring-brand-navy/8";
export function CheckoutForm() {
const t = useTranslations("checkout");
@ -46,11 +46,11 @@ export function CheckoutForm() {
if (items.length === 0 && status !== "success") {
return (
<div className="rounded-lg border border-neutral-100 bg-white p-8 text-center">
<p className="text-neutral-600">{t("cartEmpty")}</p>
<div className="rounded-lg border border-neutral-200 bg-neutral-50 p-10 text-center">
<p className="text-sm font-normal text-neutral-600">{t("cartEmpty")}</p>
<Link
href="/cart"
className="mt-4 inline-flex rounded-lg bg-neutral-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
className="mt-6 inline-flex rounded-lg bg-brand-navy px-8 py-3 text-sm font-semibold text-white transition hover:bg-brand-navy800"
>
{t("goCart")}
</Link>
@ -60,22 +60,22 @@ export function CheckoutForm() {
if (status === "success" && requestId) {
return (
<div className="rounded-lg border border-neutral-100 bg-white p-8">
<h2 className="text-xl font-semibold text-green-800">{t("successTitle")}</h2>
<p className="mt-2 text-sm text-neutral-600">
<div className="rounded-lg border border-neutral-200 bg-neutral-50 p-8">
<h2 className="text-2xl font-semibold text-brand-navy">{t("successTitle")}</h2>
<p className="mt-3 text-sm font-normal text-neutral-700">
{t("successBody")}{" "}
<span className="font-mono font-semibold text-neutral-900">
<span className="font-mono font-semibold text-brand-navy">
{requestId}
</span>
</p>
{emailWarn ? (
<p className="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
<p className="mt-4 rounded-lg border border-brand-gold/20 bg-brand-gold/5 p-4 text-sm font-normal text-neutral-800">
{t("emailWarn")}
</p>
) : null}
<Link
href="/catalog"
className="mt-6 inline-flex rounded-lg bg-neutral-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
className="mt-8 inline-flex rounded-lg bg-brand-navy px-8 py-3.5 text-sm font-semibold text-white transition hover:bg-brand-navy800"
>
{t("successCta")}
</Link>
@ -147,7 +147,7 @@ export function CheckoutForm() {
return (
<form
onSubmit={onFormSubmit}
className="space-y-6 rounded-lg border border-neutral-100 bg-white p-6 sm:p-8"
className="space-y-8 rounded-lg border border-neutral-200 bg-neutral-50 p-6 sm:p-10"
>
<input
type="text"
@ -160,7 +160,7 @@ export function CheckoutForm() {
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="text-sm font-medium text-neutral-700" htmlFor="name">
<label className="text-sm font-semibold text-neutral-700" htmlFor="name">
{t("name")}
</label>
<input
@ -173,7 +173,7 @@ export function CheckoutForm() {
) : null}
</div>
<div>
<label className="text-sm font-medium text-neutral-700" htmlFor="phone">
<label className="text-sm font-semibold text-neutral-700" htmlFor="phone">
{t("phone")}
</label>
<input
@ -188,7 +188,7 @@ export function CheckoutForm() {
</div>
<div>
<label className="text-sm font-medium text-neutral-700" htmlFor="email">
<label className="text-sm font-semibold text-neutral-700" htmlFor="email">
{t("email")}
</label>
<input
@ -203,7 +203,7 @@ export function CheckoutForm() {
</div>
<div>
<label className="text-sm font-medium text-neutral-700" htmlFor="company">
<label className="text-sm font-semibold text-neutral-700" htmlFor="company">
{t("company")}
</label>
<input
@ -214,7 +214,7 @@ export function CheckoutForm() {
</div>
<div>
<label className="text-sm font-medium text-neutral-700" htmlFor="message">
<label className="text-sm font-semibold text-neutral-700" htmlFor="message">
{t("message")}
</label>
<textarea
@ -226,7 +226,7 @@ export function CheckoutForm() {
</div>
<div>
<label className="text-sm font-medium text-neutral-700" htmlFor="refs">
<label className="text-sm font-semibold text-neutral-700" htmlFor="refs">
{t("referenceImages")}
</label>
<input
@ -242,7 +242,7 @@ export function CheckoutForm() {
</div>
<div>
<label className="text-sm font-medium text-neutral-700" htmlFor="proforma">
<label className="text-sm font-semibold text-neutral-700" htmlFor="proforma">
{t("proforma")}
</label>
<input
@ -265,7 +265,7 @@ export function CheckoutForm() {
<button
type="submit"
disabled={status === "sending"}
className="w-full rounded-lg bg-neutral-900 py-3.5 text-sm font-semibold text-white transition hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto sm:px-10"
className="w-full rounded-lg bg-brand-navy py-4 text-sm font-semibold text-white transition duration-150 hover:bg-brand-navy800 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto sm:px-12"
>
{status === "sending" ? t("sending") : t("submit")}
</button>

51
src/components/Footer.tsx
View File

@ -8,6 +8,7 @@ import {
publicContactPhone,
telHref,
} from "@/lib/public-contact";
import Image from "next/image";
function SocialGlyph({
name,
@ -54,45 +55,41 @@ export async function Footer() {
const socials = getPublicSocialLinks();
return (
<footer className="border-t border-neutral-100 bg-white">
<div className="mx-auto max-w-6xl px-4 py-14 sm:px-6 lg:px-8">
<footer className="bg-brand-navy">
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
<div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
{/* Brand column */}
<div className="space-y-4">
<div className="flex items-center gap-2">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-900 text-white">
<svg width="14" height="14" viewBox="0 0 32 32" fill="none" aria-hidden>
<path d="M6 24 16 6l10 18H6Z" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round" />
</svg>
</span>
<span className="text-[15px] font-semibold tracking-tight text-neutral-900">
TrustWin
</span>
<Link href="/" className="text-2xl font-semibold tracking-tight">
<span className="text-white">Trust</span>
<span className="text-brand-gold">Win</span>
</Link>
</div>
<p className="max-w-xs text-sm leading-relaxed text-neutral-500">
<p className="max-w-xs text-sm font-normal leading-relaxed text-brand-navy100">
{t("tagline")}
</p>
</div>
{/* Links column */}
<div className="space-y-4">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{tn("catalog")}
</p>
<ul className="space-y-2.5 text-sm">
<li>
<Link href="/" className="text-neutral-500 transition hover:text-neutral-900">
<Link href="/" className="font-normal text-brand-navy100 transition hover:text-white">
{tn("home")}
</Link>
</li>
<li>
<Link href="/catalog" className="text-neutral-500 transition hover:text-neutral-900">
<Link href="/catalog" className="font-normal text-brand-navy100 transition hover:text-white">
{tn("products")}
</Link>
</li>
<li>
<Link href="/cart" className="text-neutral-500 transition hover:text-neutral-900">
<Link href="/cart" className="font-normal text-brand-navy100 transition hover:text-white">
{tn("cart")}
</Link>
</li>
@ -101,14 +98,14 @@ export async function Footer() {
{/* Contact column */}
<div className="space-y-4">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("contactTitle")}
</p>
<ul className="space-y-2.5 text-sm">
<li>
<a
href={telHref(publicContactPhone)}
className="font-medium text-neutral-800 transition-colors hover:text-neutral-500"
className="font-normal text-brand-navy100 transition hover:text-white"
>
{publicContactPhone}
</a>
@ -117,37 +114,37 @@ export async function Footer() {
<li>
<a
href={`mailto:${publicContactEmail}`}
className="text-neutral-500 underline underline-offset-2 decoration-neutral-300 transition-colors hover:text-neutral-800 hover:decoration-neutral-500"
className="font-normal text-brand-navy100 transition hover:text-white"
>
{publicContactEmail}
</a>
</li>
)}
{publicContactAddress && (
<li className="whitespace-pre-line text-neutral-500">
<li className="whitespace-pre-line font-normal text-brand-navy100">
{publicContactAddress}
</li>
)}
{publicContactHours && (
<li className="text-neutral-500">{publicContactHours}</li>
<li className="font-normal text-brand-navy100">{publicContactHours}</li>
)}
</ul>
</div>
{/* Social column */}
<div className="flex flex-col items-center space-y-4 sm:col-span-2 lg:col-span-1 lg:items-center">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<div className="flex flex-col items-start space-y-4 sm:col-span-2 lg:col-span-1 lg:items-start">
<p className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("socialTitle")}
</p>
{socials.length > 0 ? (
<ul className="flex flex-wrap justify-center gap-2">
<ul className="flex flex-wrap gap-2">
{socials.map(({ key, href }) => (
<li key={key}>
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="flex h-9 w-9 items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-500 transition hover:border-neutral-900 hover:bg-neutral-900 hover:text-white"
className="flex h-9 w-9 items-center justify-center rounded-lg border border-white/20 text-white transition hover:border-white hover:bg-white/10"
aria-label={t(`social.${key}`)}
>
<SocialGlyph name={key} />
@ -156,7 +153,7 @@ export async function Footer() {
))}
</ul>
) : (
<p className="max-w-xs text-center text-sm leading-relaxed text-neutral-400">
<p className="max-w-xs text-sm font-normal leading-relaxed text-brand-navy100 opacity-70">
{t("socialHint")}
</p>
)}
@ -164,8 +161,8 @@ export async function Footer() {
</div>
{/* Bottom bar */}
<div className="mt-14 flex flex-col items-center justify-center gap-3 border-t border-neutral-100 pt-8 sm:flex-row">
<p className="text-xs font-semibold text-black-300">
<div className="mt-16 flex flex-col items-center justify-between gap-3 border-t border-white/10 pt-8 sm:flex-row">
<p className="text-xs font-normal text-brand-navy100">
© {year} TrustWin. {t("rights")}
</p>
</div>

49
src/components/Header.tsx
View File

@ -6,33 +6,33 @@ import { Link } from "@/i18n/navigation";
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
import { CartBadge } from "@/components/CartBadge";
import { HeaderCatalogSearch } from "@/components/HeaderCatalogSearch";
import Image from "next/image";
export function Header() {
const t = useTranslations("nav");
const [open, setOpen] = useState(false);
const navLinkClass =
"relative text-sm font-medium text-neutral-500 transition-colors duration-150 hover:text-neutral-900 after:absolute after:-bottom-0.5 after:left-0 after:h-px after:w-0 after:bg-neutral-900 after:transition-all after:duration-200 hover:after:w-full";
"relative text-sm font-semibold text-neutral-500 transition-colors duration-150 hover:text-brand-navy after:absolute after:-bottom-0.5 after:left-0 after:h-[2px] after:w-0 after:bg-brand-gold after:transition-all after:duration-150 hover:after:w-full";
const mobileLinks = (
<>
<Link
href="/"
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
className="rounded-lg px-3 py-2.5 text-sm font-semibold text-neutral-700 transition hover:bg-neutral-50 hover:text-brand-navy"
onClick={() => setOpen(false)}
>
{t("home")}
</Link>
<Link
href="/catalog"
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
className="rounded-lg px-3 py-2.5 text-sm font-semibold text-neutral-700 transition hover:bg-neutral-50 hover:text-brand-navy"
onClick={() => setOpen(false)}
>
{t("catalog")}
</Link>
<Link
href="/cart"
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
className="rounded-lg px-3 py-2.5 text-sm font-semibold text-neutral-700 transition hover:bg-neutral-50 hover:text-brand-navy"
onClick={() => setOpen(false)}
>
{t("cart")}
@ -40,7 +40,7 @@ export function Header() {
<div className="pt-2">
<Link
href="/checkout"
className="block rounded-lg bg-neutral-900 px-4 py-2.5 text-center text-sm font-semibold text-white transition hover:bg-neutral-800"
className="block rounded-lg bg-brand-navy px-4 py-2.5 text-center text-sm font-semibold text-white transition hover:bg-brand-navy800"
onClick={() => setOpen(false)}
>
{t("joinCta")}
@ -50,32 +50,23 @@ export function Header() {
);
return (
<header className="sticky top-0 z-40 border-b border-neutral-100 bg-white/98 backdrop-blur-sm">
<div className="mx-auto flex max-w-[1440px] items-center gap-6 px-4 py-3.5 sm:gap-8 lg:px-8">
<header className="sticky top-0 z-40 border-b border-neutral-200 bg-neutral-0">
<div className="mx-auto flex max-w-7xl items-center px-4 py-1 sm:gap-8 lg:px-8">
{/* Logo */}
<Link
href="/"
className="group flex shrink-0 items-center gap-2 text-neutral-900"
className="group flex items-center"
onClick={() => setOpen(false)}
>
<span
className="flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-900 text-white transition duration-200 group-hover:bg-neutral-700"
aria-hidden
>
<svg width="16" height="16" viewBox="0 0 32 32" fill="none">
<path
d="M6 24 16 6l10 18H6Z"
stroke="currentColor"
strokeWidth="2.5"
strokeLinejoin="round"
fill="none"
/>
</svg>
</span>
<span className="hidden text-[15px] font-semibold tracking-tight sm:inline">
{t("brand")}
</span>
<Image
src="/Logo/TrustLogo-removebg-preview.png"
alt={t("brand")}
width={120}
height={40}
className="h-16 w-auto object-contain"
priority
/>
</Link>
{/* Desktop nav */}
@ -100,7 +91,7 @@ export function Header() {
{/* Cart */}
<Link
href="/cart"
className="relative rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900"
className="relative rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-neutral-800"
aria-label={t("cart")}
>
<svg
@ -123,7 +114,7 @@ export function Header() {
{/* CTA */}
<Link
href="/checkout"
className="hidden rounded-lg bg-neutral-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-neutral-800 sm:inline-flex"
className="hidden rounded-lg bg-brand-navy px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-navy800 sm:inline-flex"
>
{t("joinCta")}
</Link>
@ -131,7 +122,7 @@ export function Header() {
{/* Mobile menu toggle */}
<button
type="button"
className="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900 lg:hidden"
className="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-neutral-800 lg:hidden"
aria-expanded={open}
aria-controls="mobile-nav"
onClick={() => setOpen((v) => !v)}

8
src/components/HeaderCatalogSearch.tsx
View File

@ -54,10 +54,10 @@ function HeaderCatalogSearchInner() {
placeholder={t("searchPlaceholder")}
className="
w-full rounded-lg border border-neutral-200 bg-neutral-50 py-2.5 pl-10 pr-10
text-sm text-neutral-900 outline-none transition duration-150
text-sm text-neutral-800 outline-none transition duration-150
placeholder:text-neutral-400
hover:border-neutral-300 hover:bg-white
focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8
hover:border-neutral-300
focus:bg-neutral-0 focus:border-brand-navy600 focus:ring-2 focus:ring-brand-navy/8
"
/>
@ -65,7 +65,7 @@ function HeaderCatalogSearchInner() {
{q.trim() && (
<button
type="submit"
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md bg-neutral-900 px-2 py-1 text-[11px] font-semibold text-white transition hover:bg-neutral-700"
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md bg-brand-navy px-2 py-1 text-[11px] font-semibold text-white transition hover:bg-brand-navy800"
>
↵
</button>

8
src/components/LanguageSwitcher.tsx
View File

@ -13,8 +13,8 @@ export function LanguageSwitcher() {
href={pathname}
locale="en"
className={`rounded-md px-2.5 py-1.5 text-[11px] font-semibold tracking-wide transition-all duration-150 ${locale === "en"
? "bg-white text-neutral-900"
: "text-neutral-400 hover:text-neutral-700"
? "bg-white text-brand-navy"
: "text-neutral-500 hover:text-brand-navy"
}`}
aria-current={locale === "en" ? "true" : undefined}
>
@ -24,8 +24,8 @@ export function LanguageSwitcher() {
href={pathname}
locale="am"
className={`rounded-md px-2.5 py-1.5 text-[11px] font-semibold tracking-wide transition-all duration-150 ${locale === "am"
? "bg-white text-neutral-900"
: "text-neutral-400 hover:text-neutral-700"
? "bg-white text-brand-navy"
: "text-neutral-500 hover:text-brand-navy"
}`}
aria-current={locale === "am" ? "true" : undefined}
>

14
src/components/ProductAddToCart.tsx
View File

@ -40,18 +40,18 @@ export function ProductAddToCart({ product }: { product: Product }) {
}
return (
<div className="rounded-lg border border-neutral-100 bg-white p-5">
<h2 className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
<div className="rounded-lg border border-neutral-200 bg-neutral-50 p-6">
<h2 className="text-[11px] font-semibold uppercase tracking-widest text-brand-gold">
{t("options")}
</h2>
<div className="mt-4 space-y-4">
{product.variants.map((v) => (
<div key={v.key}>
<label className="text-xs font-medium text-neutral-600">
<label className="text-sm font-semibold text-neutral-700">
{tv(v.labelKey)}
</label>
<select
className="mt-1 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-medium text-neutral-900 outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
className="mt-1.5 w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm font-normal text-neutral-800 outline-none transition duration-150 focus:border-brand-navy600 focus:ring-2 focus:ring-brand-navy/8"
value={selections[v.key]}
onChange={(e) =>
setSelections((s) => ({ ...s, [v.key]: e.target.value }))
@ -68,7 +68,7 @@ export function ProductAddToCart({ product }: { product: Product }) {
</div>
<div className="mt-6">
<label htmlFor="qty" className="text-xs font-medium text-neutral-600">
<label htmlFor="qty" className="text-sm font-semibold text-neutral-700">
{t("qty")}
</label>
<input
@ -78,13 +78,13 @@ export function ProductAddToCart({ product }: { product: Product }) {
max={9999}
value={qty}
onChange={(e) => setQty(Math.max(1, Number(e.target.value) || 1))}
className="mt-2 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm font-semibold outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
className="mt-1.5 w-full rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-normal text-neutral-800 outline-none transition duration-150 focus:border-brand-navy600 focus:ring-2 focus:ring-brand-navy/8"
/>
<button
type="button"
onClick={handleAdd}
disabled={!canSubmit}
className="mt-4 w-full rounded-lg bg-neutral-900 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-40"
className="mt-6 w-full rounded-lg bg-brand-navy py-3 text-sm font-semibold text-white transition duration-150 hover:bg-brand-navy800 disabled:cursor-not-allowed disabled:opacity-40"
>
{added ? `✓ ${t("add")}` : t("add")}
</button>