diff --git a/messages/am.json b/messages/am.json index 9910f0f..94d8fd5 100644 --- a/messages/am.json +++ b/messages/am.json @@ -31,6 +31,7 @@ "stackAlt": "የተከማቹ የብረት መገለጫዎች ምስል፦ ቦረት፣ ፍላት ባር፣ ቧንቧ እና ባዶ ክፍል" }, "services": { + "eyebrow": "ልዩ ብቃታችን", "title": "አገልግሎቶቻችን", "subtitle": "ለኢንዱስትሪ ደረጃ ቁሳቁሶች፣ ሰነዶች፣ ሎጂስቲክስ እና የፕሮጀክት ድጋፍ ከአንድ ሰርተጅ።", "cut": { diff --git a/messages/en.json b/messages/en.json index 6f7439a..de25580 100644 --- a/messages/en.json +++ b/messages/en.json @@ -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": { diff --git a/public/Logo/TrustLogo-removebg-preview.png b/public/Logo/TrustLogo-removebg-preview.png new file mode 100644 index 0000000..7b1ee7d Binary files /dev/null and b/public/Logo/TrustLogo-removebg-preview.png differ diff --git a/src/app/[locale]/cart/page.tsx b/src/app/[locale]/cart/page.tsx index 55d00f4..bf3d0e6 100644 --- a/src/app/[locale]/cart/page.tsx +++ b/src/app/[locale]/cart/page.tsx @@ -12,7 +12,7 @@ export default async function CartPage() { return (
-

+

{t("title")}

diff --git a/src/app/[locale]/checkout/page.tsx b/src/app/[locale]/checkout/page.tsx index d54c420..963cc8b 100644 --- a/src/app/[locale]/checkout/page.tsx +++ b/src/app/[locale]/checkout/page.tsx @@ -11,10 +11,10 @@ export default async function CheckoutPage() { return (
-

+

{t("title")}

-

{t("subtitle")}

+

{t("subtitle")}

diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index 584dfda..31e5695 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -8,34 +8,35 @@ export default async function HomePage() { return (
-
-
+ {/* 1. Hero -> bg-brand-navy */} +
+
-

+

{t("hero.eyebrow")}

-

+

{t("hero.title")}

-

+

{t("hero.subtitle")}

{t("hero.ctaCatalog")} {t("hero.ctaQuote")}
-
+
{th("stackAlt")}
+ {/* 2. Trust bar missing - move to Services */} + + {/* 3. Services -> bg-neutral-100 */}
-
+
+

+ {t("services.eyebrow") || "Our Services"} +

{t("services.title")}

-

{t("services.subtitle")}

-
    +

    + {t("services.subtitle")} +

    +
      {( [ "cut", @@ -75,9 +84,9 @@ export default async function HomePage() { ).map((key) => (
    • -
      +
      {key === "cut" && ( @@ -109,10 +118,10 @@ export default async function HomePage() { )}
      -

      +

      {t(`services.${key}.title`)}

      -

      +

      {t(`services.${key}.body`)}

      • @@ -121,25 +130,29 @@ export default async function HomePage() {
-
-
-

+ {/* 4. About / How it works -> bg-neutral-0 */} +
+
+

+ Process +

+

{t("how.title")}

-

{t("how.subtitle")}

-
    +

    {t("how.subtitle")}

    +
      {([1, 2, 3, 4] as const).map((n) => (
    1. - - {n} + + 0{n} -

      +

      {t(`how.step${n}.title` as "how.step1.title")}

      -

      +

      {t(`how.step${n}.body` as "how.step1.body")}

      2. @@ -148,27 +161,31 @@ export default async function HomePage() {
+ {/* 5. FAQ -> bg-neutral-100 */}
-
+
+

+ Questions +

{t("faq.title")}

-

{t("faq.subtitle")}

-
+

{t("faq.subtitle")}

+
{([1, 2, 3, 4, 5, 6] as const).map((n) => (
- + {t(`faq.i${n}.q` as "faq.i1.q")} -

+

{t(`faq.i${n}.a` as "faq.i1.a")} -

+
))}
@@ -193,25 +210,33 @@ export default async function HomePage() {
-
-
-

{t("ctaBand.title")}

-

- {t("ctaBand.body")} -

-
- - {t("ctaBand.primary")} - - - {t("ctaBand.secondary")} - + {/* 6. CTA Band -> bg-neutral-100 */} +
+
+
+

+ Get Started +

+

+ {t("ctaBand.title")} +

+

+ {t("ctaBand.body")} +

+
+ + {t("ctaBand.primary")} + + + {t("ctaBand.secondary")} + +
diff --git a/src/app/[locale]/product/[slug]/page.tsx b/src/app/[locale]/product/[slug]/page.tsx index 4521824..8d70046 100644 --- a/src/app/[locale]/product/[slug]/page.tsx +++ b/src/app/[locale]/product/[slug]/page.tsx @@ -39,7 +39,7 @@ export default async function ProductPage({ params }: Props) {
← {t("back")} @@ -47,12 +47,12 @@ export default async function ProductPage({ params }: Props) {
-
-

+

+

{t("thicknessLabel")}

@@ -60,7 +60,7 @@ export default async function ProductPage({ params }: Props) { {t("thicknessValue", { value: formatThicknessMm(mm), @@ -72,34 +72,34 @@ export default async function ProductPage({ params }: Props) {
-

+

{tcl(product.catalogLineKey)}

-

+

{tn("supplier")}

-

+

{tp(`${slug}.name`)}

-

+

{tp(`${slug}.short`)}

-

+

{product.pricePerUnit.toFixed(2)}{" "} - + {tu(product.unitKey)}

-
+
-
-

+
+

{t("details")}

-

+

{tp(`${slug}.short`)}

diff --git a/src/app/globals.css b/src/app/globals.css index 9673b41..dd84381 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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%); +} \ No newline at end of file diff --git a/src/components/CartBadge.tsx b/src/components/CartBadge.tsx index be85c3e..3e033c2 100644 --- a/src/components/CartBadge.tsx +++ b/src/components/CartBadge.tsx @@ -9,7 +9,7 @@ export function CartBadge() { if (count === 0) return null; return ( - + {count > 99 ? "99+" : count} ); diff --git a/src/components/CartCheckoutLink.tsx b/src/components/CartCheckoutLink.tsx index b496854..23ffa21 100644 --- a/src/components/CartCheckoutLink.tsx +++ b/src/components/CartCheckoutLink.tsx @@ -12,7 +12,7 @@ export function CartCheckoutLink() {
{t("checkout")} diff --git a/src/components/CartView.tsx b/src/components/CartView.tsx index 2cead73..69b5fcc 100644 --- a/src/components/CartView.tsx +++ b/src/components/CartView.tsx @@ -17,11 +17,11 @@ export function CartView() { if (items.length === 0) { return ( -
-

{t("empty")}

+
+

{t("empty")}

{t("emptyCta")} @@ -79,13 +79,13 @@ function CartLineRow({ const lineTotal = price * line.quantity; return ( -
  • +
  • -

    {name}

    +

    {name}

    {sub ? ( -

    {sub}

    +

    {sub}

    ) : null} -

    +

    {price.toFixed(2)}{" "} {product ? tu(product.unitKey) : ""} {t("each")}

    @@ -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" /> -

    +

    {lineTotal.toFixed(2)}

    -

    +

    {t("filterSort")}

    -
    +
    - + {t("galvToggle")}
    -

    +

    {t("sidebarGalvBody")}

    -
    -

    {t("sidebarDocs")}

    -

    +

    +

    {t("sidebarDocs")}

    +

    {t("sidebarDocsBody")}

    @@ -175,27 +175,30 @@ export function CatalogExplorer({ ); return ( -
    -
    +
    +
    -

    +

    + Catalog +

    +

    {t("title")}

    -

    +

    {t("subtitle")}

    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" /> @@ -204,10 +207,10 @@ export function CatalogExplorer({
    -
    +
    -
    +
    @@ -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" > @@ -251,84 +254,88 @@ export function CatalogExplorer({
    -
    - +
    +
    {filtered.length === 0 ? ( -

    {t("empty")}

    +

    {t("empty")}

    ) : ( -
      +
        {filtered.map((p) => (
      • -
        -

        - {t("thicknessLabel")} -

        -
        - {p.thicknessesMm.map((mm) => ( - - {t("thicknessValue", { - value: formatThicknessMm(mm), - })} - - ))} +
        +
        +

        + {t("thicknessLabel")} +

        +
        + {p.thicknessesMm.map((mm) => ( + + {t("thicknessValue", { + value: formatThicknessMm(mm), + })} + + ))} +
        +
        + +
        +

        + {tcl(p.catalogLineKey)} +

        +

        + {tn("supplier")} +

        +

        + + {tp(`${p.slug}.name`)} + +

        +
        + +
        + + {t("from")} + + + {p.pricePerUnit.toFixed(2)} + + {tu(p.unitKey)}
        -
        -

        - {tcl(p.catalogLineKey)} -

        -

        - {tn("supplier")} -

        -

        - {tp(`${p.slug}.name`)} + {t("addToCart")} -

        - -

        - - {t("from")} - {" "} - - {p.pricePerUnit.toFixed(2)} - {" "} - {tu(p.unitKey)} -

        - - - {t("addToCart")} - +
        • ))} @@ -342,16 +349,16 @@ export function CatalogExplorer({ <>