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

updated site first commit

Browse Source
This commit is contained in:
Filmon24 2026-03-24 12:18:39 +03:00
parent 386d3dd4cf
commit 85cddaf9a6
21 changed files with 343 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
next-env.d.ts vendored
View File

@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

149
package-lock.json generated
View File

@ -598,9 +598,6 @@
"cpu": [
"arm"
],
"libc": [
"glibc"
],
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@ -617,9 +614,6 @@
"cpu": [
"arm64"
],
"libc": [
"glibc"
],
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@ -636,9 +630,6 @@
"cpu": [
"ppc64"
],
"libc": [
"glibc"
],
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@ -655,9 +646,6 @@
"cpu": [
"riscv64"
],
"libc": [
"glibc"
],
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@ -674,9 +662,6 @@
"cpu": [
"s390x"
],
"libc": [
"glibc"
],
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@ -693,9 +678,6 @@
"cpu": [
"x64"
],
"libc": [
"glibc"
],
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@ -712,9 +694,6 @@
"cpu": [
"arm64"
],
"libc": [
"musl"
],
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@ -731,9 +710,6 @@
"cpu": [
"x64"
],
"libc": [
"musl"
],
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@ -750,9 +726,6 @@
"cpu": [
"arm"
],
"libc": [
"glibc"
],
"license": "Apache-2.0",
"optional": true,
"os": [
@ -775,9 +748,6 @@
"cpu": [
"arm64"
],
"libc": [
"glibc"
],
"license": "Apache-2.0",
"optional": true,
"os": [
@ -800,9 +770,6 @@
"cpu": [
"ppc64"
],
"libc": [
"glibc"
],
"license": "Apache-2.0",
"optional": true,
"os": [
@ -825,9 +792,6 @@
"cpu": [
"riscv64"
],
"libc": [
"glibc"
],
"license": "Apache-2.0",
"optional": true,
"os": [
@ -850,9 +814,6 @@
"cpu": [
"s390x"
],
"libc": [
"glibc"
],
"license": "Apache-2.0",
"optional": true,
"os": [
@ -875,9 +836,6 @@
"cpu": [
"x64"
],
"libc": [
"glibc"
],
"license": "Apache-2.0",
"optional": true,
"os": [
@ -900,9 +858,6 @@
"cpu": [
"arm64"
],
"libc": [
"musl"
],
"license": "Apache-2.0",
"optional": true,
"os": [
@ -925,9 +880,6 @@
"cpu": [
"x64"
],
"libc": [
"musl"
],
"license": "Apache-2.0",
"optional": true,
"os": [
@ -1119,9 +1071,6 @@
"cpu": [
"arm64"
],
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -1138,9 +1087,6 @@
"cpu": [
"arm64"
],
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -1157,9 +1103,6 @@
"cpu": [
"x64"
],
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -1176,9 +1119,6 @@
"cpu": [
"x64"
],
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -1382,9 +1322,6 @@
"cpu": [
"arm"
],
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -1405,9 +1342,6 @@
"cpu": [
"arm"
],
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -1428,9 +1362,6 @@
"cpu": [
"arm64"
],
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -1451,9 +1382,6 @@
"cpu": [
"arm64"
],
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -1474,9 +1402,6 @@
"cpu": [
"x64"
],
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -1497,9 +1422,6 @@
"cpu": [
"x64"
],
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -1657,9 +1579,6 @@
"cpu": [
"arm64"
],
"libc": [
"glibc"
],
"license": "Apache-2.0 AND MIT",
"optional": true,
"os": [
@ -1676,9 +1595,6 @@
"cpu": [
"arm64"
],
"libc": [
"musl"
],
"license": "Apache-2.0 AND MIT",
"optional": true,
"os": [
@ -1695,9 +1611,6 @@
"cpu": [
"x64"
],
"libc": [
"glibc"
],
"license": "Apache-2.0 AND MIT",
"optional": true,
"os": [
@ -1714,9 +1627,6 @@
"cpu": [
"x64"
],
"libc": [
"musl"
],
"license": "Apache-2.0 AND MIT",
"optional": true,
"os": [
@ -1933,9 +1843,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -1953,9 +1860,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -1973,9 +1877,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -1993,9 +1894,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -2510,9 +2408,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -2527,9 +2422,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -2544,9 +2436,6 @@
"ppc64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -2561,9 +2450,6 @@
"riscv64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -2578,9 +2464,6 @@
"riscv64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -2595,9 +2478,6 @@
"s390x"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -2612,9 +2492,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@ -2629,9 +2506,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@ -4964,9 +4838,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MPL-2.0",
"optional": true,
"os": [
@ -4988,9 +4859,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MPL-2.0",
"optional": true,
"os": [
@ -5012,9 +4880,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MPL-2.0",
"optional": true,
"os": [
@ -5036,9 +4901,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MPL-2.0",
"optional": true,
"os": [
@ -5365,6 +5227,17 @@
}
}
},
"node_modules/next-intl/node_modules/@swc/helpers": {
"version": "0.5.19",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz",
"integrity": "sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==",
"license": "Apache-2.0",
"optional": true,
"peer": true,
"dependencies": {
"tslib": "^2.8.0"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

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-bold tracking-tight text-stone-900">
<h1 className="text-3xl font-semibold tracking-tight text-neutral-900">
{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-bold tracking-tight text-stone-900">
<h1 className="text-3xl font-semibold tracking-tight text-neutral-900">
{t("title")}
</h1>
<p className="mt-2 text-stone-600">{t("subtitle")}</p>
<p className="mt-2 text-neutral-600">{t("subtitle")}</p>
<div className="mt-8">
<CheckoutForm />
</div>

4
src/app/[locale]/not-found.tsx
View File

@ -6,10 +6,10 @@ export default async function NotFound() {
return (
<div className="mx-auto flex max-w-lg flex-col items-center px-4 py-24 text-center">
<h1 className="text-2xl font-bold text-stone-900">{t("notFound")}</h1>
<h1 className="text-2xl font-semibold text-neutral-900">{t("notFound")}</h1>
<Link
href="/catalog"
className="mt-6 rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
className="mt-6 rounded-lg bg-neutral-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
>
{t("back")}
</Link>

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

@ -11,31 +11,31 @@ export default async function HomePage() {
<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">
<div>
<p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{t("hero.eyebrow")}
</p>
<h1 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl lg:text-5xl">
<h1 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl lg:text-5xl">
{t("hero.title")}
</h1>
<p className="mt-4 text-base leading-relaxed text-stone-600 sm:text-lg">
<p className="mt-4 text-base leading-relaxed text-neutral-600 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-full bg-blue-600 px-5 py-3.5 text-sm font-bold text-white shadow-lg shadow-blue-600/20 hover:bg-blue-700"
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"
>
{t("hero.ctaCatalog")}
</Link>
<Link
href="/checkout"
className="inline-flex items-center justify-center rounded-full border border-neutral-300 bg-white px-5 py-3.5 text-sm font-semibold text-neutral-800 shadow-sm hover:border-neutral-400 hover:text-neutral-950"
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"
>
{t("hero.ctaQuote")}
</Link>
</div>
</div>
<div className="relative aspect-[4/3] overflow-hidden rounded-2xl bg-[#e2e8f0] shadow-xl ring-1 ring-neutral-200/90">
<div className="relative aspect-[4/3] overflow-hidden rounded-lg bg-[#e2e8f0] border border-neutral-200">
<Image
src="/metal/hero-stack.svg"
alt={th("stackAlt")}
@ -51,17 +51,17 @@ export default async function HomePage() {
<section
id="services"
className="border-y border-stone-200/80 bg-stone-50/80"
className="border-y border-neutral-200/80 bg-neutral-50/80"
aria-labelledby="services-heading"
>
<div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
<h2
id="services-heading"
className="text-2xl font-bold text-stone-900 sm:text-3xl"
className="text-2xl font-semibold text-neutral-900 sm:text-3xl"
>
{t("services.title")}
</h2>
<p className="mt-2 max-w-2xl text-stone-600">{t("services.subtitle")}</p>
<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">
{(
[
@ -75,17 +75,44 @@ export default async function HomePage() {
).map((key) => (
<li
key={key}
className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-stone-200/80"
className="rounded-lg bg-white p-5 border border-neutral-100"
>
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-600 text-white">
<span className="text-lg font-black" aria-hidden>
✓
</span>
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-900 text-white">
{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" />
</svg>
)}
{key === "coating" && (
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
)}
{key === "docs" && (
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
)}
{key === "delivery" && (
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
</svg>
)}
{key === "sizing" && (
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
)}
{key === "bulk" && (
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
)}
</div>
<h3 className="mt-4 text-lg font-semibold text-stone-900">
<h3 className="mt-4 text-lg font-semibold text-neutral-900">
{t(`services.${key}.title`)}
</h3>
<p className="mt-2 text-sm leading-relaxed text-stone-600">
<p className="mt-2 text-sm leading-relaxed text-neutral-600">
{t(`services.${key}.body`)}
</p>
</li>
@ -96,23 +123,23 @@ export default async function HomePage() {
<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-bold text-stone-900 sm:text-3xl">
<h2 className="text-2xl font-semibold text-neutral-900 sm:text-3xl">
{t("how.title")}
</h2>
<p className="mt-2 text-stone-600">{t("how.subtitle")}</p>
<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">
{([1, 2, 3, 4] as const).map((n) => (
<li
key={n}
className="relative rounded-2xl border border-stone-200 bg-stone-50/80 p-5"
className="relative rounded-lg border border-neutral-100 bg-neutral-50/80 p-5"
>
<span className="text-3xl font-black text-orange-500/30">
<span className="text-3xl font-semibold text-neutral-300">
{n}
</span>
<h3 className="mt-2 font-semibold text-stone-900">
<h3 className="mt-2 font-semibold text-neutral-900">
{t(`how.step${n}.title` as "how.step1.title")}
</h3>
<p className="mt-2 text-sm text-stone-600">
<p className="mt-2 text-sm text-neutral-600">
{t(`how.step${n}.body` as "how.step1.body")}
</p>
</li>
@ -123,28 +150,28 @@ export default async function HomePage() {
<section
id="faq"
className="border-t border-stone-200/80 bg-stone-50/80"
className="border-t border-neutral-100 bg-neutral-50/80"
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-3xl">
<h2
id="faq-heading"
className="text-2xl font-bold text-stone-900 sm:text-3xl"
className="text-2xl font-semibold text-neutral-900 sm:text-3xl"
>
{t("faq.title")}
</h2>
<p className="mt-2 text-stone-600">{t("faq.subtitle")}</p>
<p className="mt-2 text-neutral-600">{t("faq.subtitle")}</p>
<div className="mt-10 space-y-3">
{([1, 2, 3, 4, 5, 6] as const).map((n) => (
<details
key={n}
className="group rounded-2xl border border-stone-200 bg-white px-4 py-1 shadow-sm ring-stone-200/80 open:ring-2 open:ring-blue-600/15"
className="group rounded-lg border border-neutral-200 bg-white px-4 py-1"
>
<summary className="flex cursor-pointer list-none items-center justify-between gap-3 py-3 text-left text-sm font-semibold text-stone-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-neutral-900 [&::-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-stone-400 transition-transform duration-200"
className="faq-chevron h-5 w-5 shrink-0 text-neutral-400 transition-transform duration-200"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden
@ -156,7 +183,7 @@ export default async function HomePage() {
/>
</svg>
</summary>
<p className="border-t border-stone-100 pb-4 pt-3 text-sm leading-relaxed text-stone-600">
<p className="border-t border-neutral-100 pb-4 pt-3 text-sm leading-relaxed text-neutral-600">
{t(`faq.i${n}.a` as "faq.i1.a")}
</p>
</details>
@ -167,21 +194,21 @@ export default async function HomePage() {
</section>
<section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
<div className="overflow-hidden rounded-3xl bg-blue-600 px-6 py-10 text-center text-white shadow-xl shadow-blue-600/25 sm:px-12">
<h2 className="text-2xl font-bold sm:text-3xl">{t("ctaBand.title")}</h2>
<p className="mx-auto mt-3 max-w-xl text-sm text-blue-100 sm:text-base">
<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-xl bg-orange-500 px-6 py-3.5 text-sm font-bold text-white hover:bg-orange-600"
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-xl border border-white/40 bg-white/10 px-6 py-3.5 text-sm font-semibold text-white backdrop-blur hover:bg-white/20"
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>

16
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-blue-600 hover:text-blue-700"
className="text-sm font-medium text-neutral-500 transition hover:text-neutral-900"
>
← {t("back")}
</Link>
@ -47,8 +47,8 @@ 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-4">
<p className="text-xs font-bold uppercase tracking-wider text-neutral-500">
<div className="mt-6">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{t("thicknessLabel")}
</p>
<div
@ -60,7 +60,7 @@ export default async function ProductPage({ params }: Props) {
<span
key={mm}
role="listitem"
className="inline-flex rounded-full bg-neutral-100 px-3 py-1.5 text-sm font-semibold tabular-nums text-neutral-800 ring-1 ring-neutral-200/90"
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"
>
{t("thicknessValue", {
value: formatThicknessMm(mm),
@ -72,13 +72,13 @@ export default async function ProductPage({ params }: Props) {
</div>
<div>
<p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-neutral-500">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{tcl(product.catalogLineKey)}
</p>
<p className="mt-2 text-sm font-semibold text-neutral-900">
{tn("supplier")}
</p>
<h1 className="mt-1 text-2xl font-normal leading-tight tracking-tight text-neutral-700 sm:text-3xl lg:text-4xl">
<h1 className="mt-1 text-2xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-3xl lg:text-4xl">
{tp(`${slug}.name`)}
</h1>
<p className="mt-4 text-base leading-relaxed text-neutral-600">
@ -95,8 +95,8 @@ export default async function ProductPage({ params }: Props) {
<ProductAddToCart product={product} />
</div>
<div className="mt-8 rounded-2xl border border-neutral-200 bg-neutral-50/80 p-5">
<h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
<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">
{t("details")}
</h2>
<p className="mt-2 text-sm leading-relaxed text-neutral-600">

2
src/app/layout.tsx
View File

@ -11,7 +11,7 @@ const dmSans = DM_Sans({
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={dmSans.variable} suppressHydrationWarning>
<body className="min-h-screen bg-stone-50 font-sans text-stone-900 antialiased">
<body className="min-h-screen bg-neutral-50 font-sans text-neutral-900 antialiased">
{children}
</body>
</html>

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-orange-500 px-1 text-[10px] font-bold text-white shadow-sm">
<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">
{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-xl bg-orange-500 px-6 py-3 text-sm font-bold text-white shadow-sm hover:bg-orange-600"
className="inline-flex rounded-lg bg-neutral-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
>
{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-2xl bg-white p-10 text-center shadow-sm ring-1 ring-stone-200/80">
<p className="text-stone-600">{t("empty")}</p>
<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>
<Link
href="/catalog"
className="mt-6 inline-flex rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
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"
>
{t("emptyCta")}
</Link>
@ -79,13 +79,13 @@ function CartLineRow({
const lineTotal = price * line.quantity;
return (
<li className="flex flex-col gap-4 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-stone-200/80 sm:flex-row sm:items-center sm:justify-between">
<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">
<div className="min-w-0 flex-1">
<p className="font-semibold text-stone-900">{name}</p>
<p className="font-semibold text-neutral-900">{name}</p>
{sub ? (
<p className="mt-1 text-sm text-stone-500">{sub}</p>
<p className="mt-1 text-sm text-neutral-500">{sub}</p>
) : null}
<p className="mt-2 text-sm text-stone-600">
<p className="mt-2 text-sm 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-stone-200 px-2 py-1.5 text-sm font-semibold"
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"
/>
<p className="text-sm font-bold text-orange-500">
<p className="text-sm font-semibold text-neutral-900">
{lineTotal.toFixed(2)}
</p>
<button

54
src/components/CatalogExplorer.tsx
View File

@ -97,7 +97,7 @@ export function CatalogExplorer({
const filterPanel = (
<div className="space-y-6">
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{t("filterCategory")}
</p>
<ul className="mt-3 space-y-1">
@ -109,10 +109,10 @@ export function CatalogExplorer({
setCat(c);
setFiltersOpen(false);
}}
className={`flex w-full rounded-xl 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-medium transition ${
cat === c
? "bg-blue-600 text-white"
: "text-neutral-700 hover:bg-neutral-100"
? "bg-neutral-900 text-white"
: "text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900"
}`}
>
{c === "all" ? t("all") : tc(c)}
@ -123,13 +123,13 @@ export function CatalogExplorer({
</div>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{t("filterSort")}
</p>
<select
value={sort}
onChange={(e) => setSort(e.target.value as SortKey)}
className="mt-3 w-full rounded-xl border border-neutral-200 bg-white px-3 py-2.5 text-sm font-medium text-neutral-900 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
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"
>
<option value="name-asc">{t("sortNameAsc")}</option>
<option value="name-desc">{t("sortNameDesc")}</option>
@ -138,7 +138,7 @@ export function CatalogExplorer({
</select>
</div>
<div className="rounded-2xl border border-neutral-200 bg-neutral-50/80 p-4">
<div className="rounded-lg border border-neutral-100 bg-neutral-50/80 p-4">
<div className="flex items-center justify-between gap-3">
<span className="text-sm font-medium text-neutral-800">
{t("galvToggle")}
@ -150,11 +150,11 @@ export function CatalogExplorer({
aria-label={t("galvToggle")}
onClick={() => setPreferGalv((v) => !v)}
className={`relative h-7 w-12 shrink-0 rounded-full transition-colors ${
preferGalv ? "bg-blue-600" : "bg-neutral-300"
preferGalv ? "bg-neutral-900" : "bg-neutral-300"
}`}
>
<span
className={`absolute top-1 h-5 w-5 rounded-full bg-white shadow transition-all ${
className={`absolute top-1 h-5 w-5 rounded-full bg-white transition-all ${
preferGalv ? "left-[calc(100%-1.25rem-0.25rem)]" : "left-1"
}`}
/>
@ -165,7 +165,7 @@ export function CatalogExplorer({
</p>
</div>
<div className="rounded-2xl border border-neutral-200 bg-white p-4">
<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">
{t("sidebarDocsBody")}
@ -195,7 +195,7 @@ export function CatalogExplorer({
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={tn("searchPlaceholder")}
className="w-full rounded-full border border-neutral-200 bg-white py-3 pl-11 pr-4 text-sm text-neutral-900 shadow-sm outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
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"
/>
<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}>
@ -207,7 +207,7 @@ export function CatalogExplorer({
<div className="mt-8 flex flex-wrap items-center gap-3">
<button
type="button"
className="inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-4 py-2.5 text-sm font-semibold text-neutral-800 shadow-sm lg:hidden"
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"
onClick={() => setFiltersOpen(true)}
>
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@ -222,10 +222,10 @@ export function CatalogExplorer({
key={c}
type="button"
onClick={() => setCat(c)}
className={`shrink-0 rounded-full px-4 py-2 text-sm font-semibold transition ${
className={`shrink-0 rounded-md px-4 py-2 text-sm font-semibold transition ${
cat === c
? "bg-blue-600 text-white shadow-sm"
: "bg-white text-neutral-700 ring-1 ring-neutral-200 hover:bg-neutral-100"
? "bg-neutral-900 text-white"
: "border border-neutral-200 bg-white text-neutral-500 hover:border-neutral-300 hover:text-neutral-900"
}`}
>
{c === "all" ? t("allShort") : tc(c)}
@ -241,7 +241,7 @@ export function CatalogExplorer({
id="catalog-sort"
value={sort}
onChange={(e) => setSort(e.target.value as SortKey)}
className="rounded-full border border-neutral-200 bg-white py-2 pl-3 pr-8 text-sm font-medium text-neutral-900 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
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"
>
<option value="name-asc">{t("sortNameAsc")}</option>
<option value="name-desc">{t("sortNameDesc")}</option>
@ -264,19 +264,19 @@ export function CatalogExplorer({
<article className="group flex h-full flex-col">
<Link
href={`/product/${p.slug}`}
className="group relative block overflow-hidden rounded-2xl ring-1 ring-neutral-200/80"
className="group relative block overflow-hidden rounded-lg border border-neutral-100"
>
<div className="relative aspect-square">
<MetalProfileVisual
src={p.gallery[0]}
alt={tp(`${p.slug}.imageAlt`)}
className="h-full w-full rounded-2xl"
className="h-full w-full rounded-lg"
/>
</div>
</Link>
<div className="mt-3 px-0.5">
<p className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
<div className="mt-4 px-0.5">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{t("thicknessLabel")}
</p>
<div
@ -288,7 +288,7 @@ export function CatalogExplorer({
<span
key={`${p.slug}-${mm}`}
role="listitem"
className="inline-flex rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-semibold tabular-nums text-neutral-800 ring-1 ring-neutral-200/90"
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),
@ -298,7 +298,7 @@ export function CatalogExplorer({
</div>
</div>
<p className="mt-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-500">
<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">
@ -307,14 +307,14 @@ export function CatalogExplorer({
<h2 className="mt-0.5 text-sm font-normal leading-snug text-neutral-600">
<Link
href={`/product/${p.slug}`}
className="hover:text-blue-600"
className="transition hover:text-neutral-900"
>
{tp(`${p.slug}.name`)}
</Link>
</h2>
<p className="mt-3 text-sm text-neutral-500">
<span className="text-[11px] font-semibold uppercase tracking-wide">
<span className="text-[11px] font-semibold uppercase tracking-widest">
{t("from")}
</span>{" "}
<span className="text-base font-semibold text-neutral-900">
@ -325,7 +325,7 @@ export function CatalogExplorer({
<Link
href={`/product/${p.slug}`}
className="mt-4 w-full rounded-full border border-neutral-300 bg-white py-2.5 text-center text-sm font-semibold text-neutral-900 transition hover:border-blue-600 hover:bg-blue-600 hover:text-white"
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>
@ -346,12 +346,12 @@ export function CatalogExplorer({
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-200 bg-white p-6 shadow-2xl lg:hidden">
<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>
<button
type="button"
className="rounded-full p-2 text-neutral-500 hover:bg-neutral-100"
className="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900"
onClick={() => setFiltersOpen(false)}
>
<span className="sr-only">{t("closeFilters")}</span>

59
src/components/CheckoutForm.tsx
View File

@ -18,6 +18,9 @@ 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";
export function CheckoutForm() {
const t = useTranslations("checkout");
const items = useCartStore((s) => s.items);
@ -43,11 +46,11 @@ export function CheckoutForm() {
if (items.length === 0 && status !== "success") {
return (
<div className="rounded-2xl bg-white p-8 text-center shadow-sm ring-1 ring-stone-200/80">
<p className="text-stone-600">{t("cartEmpty")}</p>
<div className="rounded-lg border border-neutral-100 bg-white p-8 text-center">
<p className="text-neutral-600">{t("cartEmpty")}</p>
<Link
href="/cart"
className="mt-4 inline-flex rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
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"
>
{t("goCart")}
</Link>
@ -57,22 +60,22 @@ export function CheckoutForm() {
if (status === "success" && requestId) {
return (
<div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-emerald-200/80">
<h2 className="text-xl font-bold text-emerald-800">{t("successTitle")}</h2>
<p className="mt-2 text-sm text-stone-600">
<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">
{t("successBody")}{" "}
<span className="font-mono font-semibold text-stone-900">
<span className="font-mono font-semibold text-neutral-900">
{requestId}
</span>
</p>
{emailWarn ? (
<p className="mt-4 rounded-xl bg-amber-50 p-3 text-sm text-amber-900 ring-1 ring-amber-200">
<p className="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
{t("emailWarn")}
</p>
) : null}
<Link
href="/catalog"
className="mt-6 inline-flex rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
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"
>
{t("successCta")}
</Link>
@ -144,7 +147,7 @@ export function CheckoutForm() {
return (
<form
onSubmit={onFormSubmit}
className="space-y-6 rounded-2xl bg-white p-6 shadow-sm ring-1 ring-stone-200/80 sm:p-8"
className="space-y-6 rounded-lg border border-neutral-100 bg-white p-6 sm:p-8"
>
<input
type="text"
@ -157,12 +160,12 @@ export function CheckoutForm() {
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="text-sm font-medium text-stone-700" htmlFor="name">
<label className="text-sm font-medium text-neutral-700" htmlFor="name">
{t("name")}
</label>
<input
id="name"
className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
className={inputClass}
{...register("name")}
/>
{errors.name ? (
@ -170,12 +173,12 @@ export function CheckoutForm() {
) : null}
</div>
<div>
<label className="text-sm font-medium text-stone-700" htmlFor="phone">
<label className="text-sm font-medium text-neutral-700" htmlFor="phone">
{t("phone")}
</label>
<input
id="phone"
className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
className={inputClass}
{...register("phone")}
/>
{errors.phone ? (
@ -185,13 +188,13 @@ export function CheckoutForm() {
</div>
<div>
<label className="text-sm font-medium text-stone-700" htmlFor="email">
<label className="text-sm font-medium text-neutral-700" htmlFor="email">
{t("email")}
</label>
<input
id="email"
type="email"
className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
className={inputClass}
{...register("email")}
/>
{errors.email ? (
@ -200,30 +203,30 @@ export function CheckoutForm() {
</div>
<div>
<label className="text-sm font-medium text-stone-700" htmlFor="company">
<label className="text-sm font-medium text-neutral-700" htmlFor="company">
{t("company")}
</label>
<input
id="company"
className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
className={inputClass}
{...register("company")}
/>
</div>
<div>
<label className="text-sm font-medium text-stone-700" htmlFor="message">
<label className="text-sm font-medium text-neutral-700" htmlFor="message">
{t("message")}
</label>
<textarea
id="message"
rows={4}
className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
className={inputClass}
{...register("message")}
/>
</div>
<div>
<label className="text-sm font-medium text-stone-700" htmlFor="refs">
<label className="text-sm font-medium text-neutral-700" htmlFor="refs">
{t("referenceImages")}
</label>
<input
@ -233,13 +236,13 @@ export function CheckoutForm() {
name="referenceImages"
accept="image/jpeg,image/png,image/webp"
multiple
className="mt-1 block w-full text-sm text-stone-600 file:mr-3 file:rounded-lg file:border-0 file:bg-blue-50 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100"
className="mt-1 block w-full text-sm text-neutral-600 file:mr-3 file:rounded-lg file:border-0 file:bg-neutral-100 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-neutral-700 hover:file:bg-neutral-200"
/>
<p className="mt-1 text-xs text-stone-500">{t("referenceHelp")}</p>
<p className="mt-1 text-xs text-neutral-500">{t("referenceHelp")}</p>
</div>
<div>
<label className="text-sm font-medium text-stone-700" htmlFor="proforma">
<label className="text-sm font-medium text-neutral-700" htmlFor="proforma">
{t("proforma")}
</label>
<input
@ -248,13 +251,13 @@ export function CheckoutForm() {
type="file"
name="proforma"
accept="application/pdf,image/jpeg,image/png,image/webp"
className="mt-1 block w-full text-sm text-stone-600 file:mr-3 file:rounded-lg file:border-0 file:bg-orange-50 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-orange-700 hover:file:bg-orange-100"
className="mt-1 block w-full text-sm text-neutral-600 file:mr-3 file:rounded-lg file:border-0 file:bg-neutral-100 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-neutral-700 hover:file:bg-neutral-200"
/>
<p className="mt-1 text-xs text-stone-500">{t("proformaHelp")}</p>
<p className="mt-1 text-xs text-neutral-500">{t("proformaHelp")}</p>
</div>
{errorMsg ? (
<p className="rounded-xl bg-red-50 p-3 text-sm text-red-800 ring-1 ring-red-200">
<p className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800">
{errorMsg}
</p>
) : null}
@ -262,7 +265,7 @@ export function CheckoutForm() {
<button
type="submit"
disabled={status === "sending"}
className="w-full rounded-xl bg-orange-500 py-3.5 text-sm font-bold text-white shadow-sm hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto sm:px-10"
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"
>
{status === "sending" ? t("sending") : t("submit")}
</button>

100
src/components/Footer.tsx
View File

@ -1,4 +1,5 @@
import { getTranslations } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import {
getPublicSocialLinks,
publicContactAddress,
@ -15,7 +16,7 @@ function SocialGlyph({
name: "linkedin" | "facebook" | "telegram" | "instagram";
className?: string;
}) {
const c = className ?? "h-5 w-5";
const c = className ?? "h-4 w-4";
switch (name) {
case "linkedin":
return (
@ -48,69 +49,105 @@ function SocialGlyph({
export async function Footer() {
const t = await getTranslations("footer");
const tn = await getTranslations("nav");
const year = new Date().getFullYear();
const socials = getPublicSocialLinks();
return (
<footer className="mt-16 border-t border-stone-200/80 bg-white">
<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
<div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-3 lg:gap-12">
<div>
<h2 className="text-lg font-bold tracking-tight text-blue-600">
TrustWin
</h2>
<p className="mt-3 max-w-sm text-sm leading-relaxed text-stone-600">
<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">
<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>
</div>
<p className="max-w-xs text-sm leading-relaxed text-neutral-500">
{t("tagline")}
</p>
</div>
<div>
<h3 className="text-xs font-semibold uppercase tracking-wider text-stone-500">
{/* Links column */}
<div className="space-y-4">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{tn("catalog")}
</p>
<ul className="space-y-2.5 text-sm">
<li>
<Link href="/" className="text-neutral-500 transition hover:text-neutral-900">
{tn("home")}
</Link>
</li>
<li>
<Link href="/catalog" className="text-neutral-500 transition hover:text-neutral-900">
{tn("products")}
</Link>
</li>
<li>
<Link href="/cart" className="text-neutral-500 transition hover:text-neutral-900">
{tn("cart")}
</Link>
</li>
</ul>
</div>
{/* Contact column */}
<div className="space-y-4">
<p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{t("contactTitle")}
</h3>
<ul className="mt-4 space-y-3 text-sm">
</p>
<ul className="space-y-2.5 text-sm">
<li>
<a
href={telHref(publicContactPhone)}
className="font-medium text-stone-900 transition hover:text-blue-600"
className="font-medium text-neutral-800 transition-colors hover:text-neutral-500"
>
{publicContactPhone}
</a>
</li>
{publicContactEmail ? (
{publicContactEmail && (
<li>
<a
href={`mailto:${publicContactEmail}`}
className="text-stone-700 underline-offset-2 transition hover:text-blue-600 hover:underline"
className="text-neutral-500 underline underline-offset-2 decoration-neutral-300 transition-colors hover:text-neutral-800 hover:decoration-neutral-500"
>
{publicContactEmail}
</a>
</li>
) : null}
{publicContactAddress ? (
<li className="whitespace-pre-line text-stone-600">
)}
{publicContactAddress && (
<li className="whitespace-pre-line text-neutral-500">
{publicContactAddress}
</li>
) : null}
{publicContactHours ? (
<li className="text-stone-600">{publicContactHours}</li>
) : null}
)}
{publicContactHours && (
<li className="text-neutral-500">{publicContactHours}</li>
)}
</ul>
</div>
<div className="sm:col-span-2 lg:col-span-1">
<h3 className="text-xs font-semibold uppercase tracking-wider text-stone-500">
{/* 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">
{t("socialTitle")}
</h3>
</p>
{socials.length > 0 ? (
<ul className="mt-4 flex flex-wrap gap-3">
<ul className="flex flex-wrap justify-center gap-2">
{socials.map(({ key, href }) => (
<li key={key}>
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="flex h-11 w-11 items-center justify-center rounded-xl bg-stone-50 text-stone-600 shadow-sm ring-1 ring-stone-200/90 transition hover:bg-blue-600 hover:text-white hover:ring-blue-600"
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"
aria-label={t(`social.${key}`)}
>
<SocialGlyph name={key} />
@ -119,15 +156,16 @@ export async function Footer() {
))}
</ul>
) : (
<p className="mt-4 max-w-xs text-sm leading-relaxed text-stone-500">
<p className="max-w-xs text-center text-sm leading-relaxed text-neutral-400">
{t("socialHint")}
</p>
)}
</div>
</div>
<div className="mt-10 border-t border-stone-200/80 pt-8">
<p className="text-center text-xs text-stone-500 sm:text-left">
{/* 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">
© {year} TrustWin. {t("rights")}
</p>
</div>

89
src/components/Header.tsx
View File

@ -11,100 +11,104 @@ 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";
const mobileLinks = (
<>
<Link
href="/"
className="rounded-full px-4 py-3 text-sm font-medium text-neutral-800 hover:bg-neutral-100"
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
onClick={() => setOpen(false)}
>
{t("home")}
</Link>
<Link
href="/catalog"
className="rounded-full px-4 py-3 text-sm font-medium text-neutral-800 hover:bg-neutral-100"
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
onClick={() => setOpen(false)}
>
{t("catalog")}
</Link>
<Link
href="/cart"
className="rounded-full px-4 py-3 text-sm font-medium text-neutral-800 hover:bg-neutral-100"
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
onClick={() => setOpen(false)}
>
{t("cart")}
</Link>
<Link
href="/checkout"
className="mx-2 mt-2 rounded-full bg-blue-600 px-4 py-3 text-center text-sm font-semibold text-white"
onClick={() => setOpen(false)}
>
{t("joinCta")}
</Link>
<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"
onClick={() => setOpen(false)}
>
{t("joinCta")}
</Link>
</div>
</>
);
return (
<header className="sticky top-0 z-40 border-b border-neutral-200/90 bg-white/95 backdrop-blur-md">
<div className="mx-auto flex max-w-[1440px] items-center gap-3 px-4 py-3 sm:gap-4 lg:px-8">
<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">
{/* Logo */}
<Link
href="/"
className="flex shrink-0 items-center gap-2.5 text-neutral-900"
className="group flex shrink-0 items-center gap-2 text-neutral-900"
onClick={() => setOpen(false)}
>
<span
className="flex h-9 w-9 items-center justify-center rounded-2xl bg-blue-600 text-white shadow-sm"
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="20" height="20" viewBox="0 0 32 32" fill="none" className="text-white">
<svg width="16" height="16" viewBox="0 0 32 32" fill="none">
<path
d="M6 24 16 6l10 18H6Z"
stroke="currentColor"
strokeWidth="2.2"
strokeWidth="2.5"
strokeLinejoin="round"
fill="none"
/>
</svg>
</span>
<span className="hidden text-[17px] font-semibold tracking-tight sm:inline">
<span className="hidden text-[15px] font-semibold tracking-tight sm:inline">
{t("brand")}
</span>
</Link>
<nav
className="hidden items-center gap-1 lg:flex"
aria-label="Primary"
>
<Link
href="/"
className="rounded-full px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950"
>
{/* Desktop nav */}
<nav className="hidden items-center gap-6 lg:flex" aria-label="Primary">
<Link href="/" className={navLinkClass}>
{t("home")}
</Link>
<Link
href="/catalog"
className="rounded-full px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950"
>
<Link href="/catalog" className={navLinkClass}>
{t("products")}
</Link>
</nav>
{/* Search */}
<div className="min-w-0 flex-1">
<HeaderCatalogSearch />
</div>
<div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
{/* Right actions */}
<div className="flex shrink-0 items-center gap-2">
<LanguageSwitcher />
{/* Cart */}
<Link
href="/cart"
className="relative rounded-full p-2.5 text-neutral-600 transition hover:bg-neutral-100 hover:text-blue-600"
className="relative rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900"
aria-label={t("cart")}
>
<svg
className="h-6 w-6"
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
strokeWidth={1.6}
aria-hidden
>
<path
@ -116,27 +120,29 @@ export function Header() {
<CartBadge />
</Link>
{/* CTA */}
<Link
href="/checkout"
className="hidden rounded-full bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 sm:inline-flex"
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"
>
{t("joinCta")}
</Link>
{/* Mobile menu toggle */}
<button
type="button"
className="rounded-full p-2.5 text-neutral-800 hover:bg-neutral-100 lg:hidden"
className="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900 lg:hidden"
aria-expanded={open}
aria-controls="mobile-nav"
onClick={() => setOpen((v) => !v)}
>
<span className="sr-only">{open ? t("closeMenu") : t("openMenu")}</span>
{open ? (
<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
<path strokeLinecap="round" d="M6 18 18 6M6 6l12 12" />
</svg>
) : (
<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
<path strokeLinecap="round" d="M4 7h16M4 12h16M4 17h16" />
</svg>
)}
@ -144,16 +150,17 @@ export function Header() {
</div>
</div>
{open ? (
{/* Mobile nav drawer */}
{open && (
<div
id="mobile-nav"
className="border-t border-neutral-200 bg-white px-4 py-4 lg:hidden"
className="border-t border-neutral-100 bg-white px-4 pb-4 pt-2 lg:hidden"
>
<nav className="flex flex-col gap-1" aria-label="Mobile">
<nav className="flex flex-col gap-0.5" aria-label="Mobile">
{mobileLinks}
</nav>
</div>
) : null}
)}
</header>
);
}

41
src/components/HeaderCatalogSearch.tsx
View File

@ -28,12 +28,23 @@ function HeaderCatalogSearchInner() {
return (
<form
onSubmit={onSubmit}
className="relative hidden w-full max-w-xl md:block"
className="relative hidden w-full max-w-lg md:block"
role="search"
>
<label htmlFor="header-catalog-search" className="sr-only">
{t("searchAria")}
</label>
{/* Search icon */}
<span
className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400"
aria-hidden
>
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
<path strokeLinecap="round" strokeLinejoin="round" d="m21 21-4.34-4.34M11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z" />
</svg>
</span>
<input
id="header-catalog-search"
type="search"
@ -41,16 +52,24 @@ function HeaderCatalogSearchInner() {
value={q}
onChange={(e) => setQ(e.target.value)}
placeholder={t("searchPlaceholder")}
className="w-full rounded-full border border-neutral-200 bg-neutral-50 py-2.5 pl-11 pr-4 text-sm text-neutral-900 shadow-inner shadow-neutral-200/40 outline-none ring-blue-600/0 transition placeholder:text-neutral-400 focus:border-blue-600 focus:bg-white focus:ring-2 focus:ring-blue-600/20"
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
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
"
/>
<span
className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400"
aria-hidden
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
<path strokeLinecap="round" strokeLinejoin="round" d="m21 21-4.34-4.34M11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z" />
</svg>
</span>
{/* Submit button - visible only when there's input */}
{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"
>
↵
</button>
)}
</form>
);
}
@ -60,7 +79,7 @@ export function HeaderCatalogSearch() {
<Suspense
fallback={
<div
className="hidden h-10 w-full max-w-xl rounded-full bg-neutral-100 md:block"
className="hidden h-[38px] w-full max-w-lg animate-pulse rounded-lg bg-neutral-100 md:block"
aria-hidden
/>
}

52
src/components/LanguageSwitcher.tsx
View File

@ -8,39 +8,29 @@ export function LanguageSwitcher() {
const pathname = usePathname();
return (
<div className="flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-1 py-1 shadow-sm">
<span className="hidden pl-2 text-neutral-400 sm:inline" aria-hidden>
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M3.6 9h16.8M3.6 15h16.8M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9Z" />
</svg>
</span>
<div className="flex items-center rounded-full bg-neutral-100 p-0.5 text-[11px] font-semibold text-neutral-600">
<Link
href={pathname}
locale="en"
className={`rounded-full px-2 py-1 transition ${
locale === "en"
? "bg-white text-blue-600 shadow-sm"
: "hover:text-neutral-900"
<div className="flex items-center rounded-lg border border-neutral-200 bg-neutral-50 p-0.5">
<Link
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"
}`}
aria-current={locale === "en" ? "true" : undefined}
>
EN
</Link>
<Link
href={pathname}
locale="am"
className={`rounded-full px-2 py-1 transition ${
locale === "am"
? "bg-white text-orange-500 shadow-sm"
: "hover:text-neutral-900"
aria-current={locale === "en" ? "true" : undefined}
>
EN
</Link>
<Link
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"
}`}
aria-current={locale === "am" ? "true" : undefined}
>
አማ
</Link>
</div>
aria-current={locale === "am" ? "true" : undefined}
>
አማ
</Link>
</div>
);
}

10
src/components/ProductAddToCart.tsx
View File

@ -40,8 +40,8 @@ export function ProductAddToCart({ product }: { product: Product }) {
}
return (
<div className="rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm">
<h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
<div className="rounded-lg border border-neutral-100 bg-white p-5">
<h2 className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
{t("options")}
</h2>
<div className="mt-4 space-y-4">
@ -51,7 +51,7 @@ export function ProductAddToCart({ product }: { product: Product }) {
{tv(v.labelKey)}
</label>
<select
className="mt-1 w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-medium text-neutral-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/15"
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"
value={selections[v.key]}
onChange={(e) =>
setSelections((s) => ({ ...s, [v.key]: e.target.value }))
@ -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-full border border-neutral-200 bg-white px-4 py-2.5 text-sm font-semibold focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/15"
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"
/>
<button
type="button"
onClick={handleAdd}
disabled={!canSubmit}
className="mt-4 w-full rounded-full border border-neutral-300 bg-neutral-900 py-3 text-sm font-semibold text-white transition hover:border-blue-600 hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
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"
>
{added ? `✓ ${t("add")}` : t("add")}
</button>

16
src/components/ProductGallery.tsx
View File

@ -51,7 +51,7 @@ export function ProductGallery({ slug, sources }: Props) {
if (n === 0) {
return (
<div
className="flex aspect-square items-center justify-center rounded-2xl bg-neutral-100 text-sm text-neutral-500 ring-1 ring-neutral-200/90"
className="flex aspect-square items-center justify-center rounded-lg border border-neutral-200 bg-neutral-100 text-sm text-neutral-500"
role="img"
aria-label={alt}
>
@ -67,7 +67,7 @@ export function ProductGallery({ slug, sources }: Props) {
return (
<div className="space-y-3">
<div
className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 ring-1 ring-neutral-200/90"
className="relative aspect-square overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100"
onTouchStart={(e) => {
touchStartX.current = e.touches[0]?.clientX ?? null;
}}
@ -99,7 +99,7 @@ export function ProductGallery({ slug, sources }: Props) {
<button
type="button"
onClick={() => go(-1)}
className="absolute left-2 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-neutral-800 shadow-md ring-1 ring-neutral-200/80 backdrop-blur-sm transition hover:bg-white"
className="absolute left-2 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-lg border border-neutral-200 bg-white/90 text-neutral-800 backdrop-blur-sm transition hover:bg-white"
aria-label={t("galleryPrev")}
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@ -109,14 +109,14 @@ export function ProductGallery({ slug, sources }: Props) {
<button
type="button"
onClick={() => go(1)}
className="absolute right-2 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-neutral-800 shadow-md ring-1 ring-neutral-200/80 backdrop-blur-sm transition hover:bg-white"
className="absolute right-2 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-lg border border-neutral-200 bg-white/90 text-neutral-800 backdrop-blur-sm transition hover:bg-white"
aria-label={t("galleryNext")}
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
<p className="pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-neutral-950/55 px-3 py-1 text-xs font-medium tabular-nums text-white backdrop-blur-sm">
<p className="pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-md bg-neutral-950/55 px-3 py-1 text-xs font-medium tabular-nums text-white backdrop-blur-sm">
{t("galleryCounter", { current: slideIndex + 1, total: n })}
</p>
</>
@ -140,10 +140,10 @@ export function ProductGallery({ slug, sources }: Props) {
aria-selected={active}
aria-label={t("galleryGoTo", { n: i + 1 })}
onClick={() => setSlide(i)}
className={`relative h-16 w-16 shrink-0 overflow-hidden rounded-xl ring-2 transition sm:h-20 sm:w-20 ${
className={`relative h-16 w-16 shrink-0 overflow-hidden rounded-lg border-2 transition sm:h-20 sm:w-20 ${
active
? "ring-blue-600 ring-offset-2"
: "ring-transparent ring-offset-0 opacity-80 hover:opacity-100"
? "border-neutral-900"
: "border-transparent opacity-70 hover:opacity-100"
}`}
>
<Image

2
src/components/SiteChrome.tsx
View File

@ -5,7 +5,7 @@ import { StickyCallBar } from "@/components/StickyCallBar";
export async function SiteChrome({ children }: { children: ReactNode }) {
return (
<div className="flex min-h-screen flex-col pb-24 sm:pb-28">
<div className="flex min-h-screen flex-col">
<Header />
<main className="flex-1">{children}</main>
<Footer />

2
src/components/StickyCallBar.tsx
View File

@ -14,7 +14,7 @@ export function StickyCallBar() {
>
<a
href={telHref(publicContactPhone)}
className="flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-xl shadow-blue-600/35 transition hover:bg-blue-700"
className="flex h-14 w-14 items-center justify-center rounded-full bg-neutral-900 text-white transition hover:bg-neutral-800"
aria-label={t("call")}
>
<svg