|
|
@@ -25,11 +25,19 @@ const whyUs = [
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+// Client logos, arranged checkerboard: heavy dark logos alternate with light ones.
|
|
|
+// `big` — logos with lots of internal whitespace, render larger to match the others optically
|
|
|
const clients = [
|
|
|
- "___1.png", "_2.jpg", "photo-610z4l.jpg", "29595058_20159791717.jpg",
|
|
|
- "9f97a370e8530d40a0ff.jpg", "unnamed.jpg", "321.JPG", "evraz.jpg",
|
|
|
- "c5aa9760-2920-4b4d-b.png", "17304586690.jpg",
|
|
|
-].map((f) => "/images/" + f);
|
|
|
+ { file: "___1.png" }, // УГМК — heavy
|
|
|
+ { file: "unnamed.jpg", big: true }, // Атлас Майнинг — light
|
|
|
+ { file: "c5aa9760-2920-4b4d-b.png" }, // ВНИМИ — heavy
|
|
|
+ { file: "29595058_20159791717.jpg", big: true }, // Норникель — light
|
|
|
+ { file: "9f97a370e8530d40a0ff.jpg" }, // РМК — heavy
|
|
|
+ { file: "_2.jpg" }, // Полюс — light
|
|
|
+ { file: "evraz.jpg" }, // Евраз — medium
|
|
|
+ { file: "17304586690.jpg", big: true }, // УГХ — light
|
|
|
+ { file: "photo-610z4l.jpg" }, // Алроса — medium
|
|
|
+].map((c) => ({ ...c, src: "/images/" + c.file }));
|
|
|
---
|
|
|
|
|
|
<Base
|
|
|
@@ -118,17 +126,14 @@ const clients = [
|
|
|
<span class="absolute left-4 top-4 bg-accent-300 px-2.5 py-1 text-xs font-bold text-night-950">{s.tag}</span>
|
|
|
)}
|
|
|
</div>
|
|
|
- <div class="mt-5 flex items-start justify-between gap-4">
|
|
|
- <div>
|
|
|
- <h3 class="display text-2xl">{s.title}</h3>
|
|
|
- {s.items && (
|
|
|
- <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-slate-500">{s.items[0]}</p>
|
|
|
- )}
|
|
|
- {s.description && (
|
|
|
- <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-slate-500">{s.description}</p>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <span class="chip-arrow chip-arrow-dark mt-1 h-10 w-10" aria-hidden="true">→</span>
|
|
|
+ <div class="mt-5">
|
|
|
+ <h3 class="display text-2xl">{s.title}</h3>
|
|
|
+ {s.items && (
|
|
|
+ <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-slate-500">{s.items[0]}</p>
|
|
|
+ )}
|
|
|
+ {s.description && (
|
|
|
+ <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-slate-500">{s.description}</p>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</a>
|
|
|
))}
|
|
|
@@ -173,6 +178,23 @@ const clients = [
|
|
|
<h2 class="display max-w-3xl text-5xl sm:text-6xl">
|
|
|
Почему выбирают нас<span class="dot">.</span>
|
|
|
</h2>
|
|
|
+
|
|
|
+ <!-- Client logos -->
|
|
|
+ <div class="mt-12">
|
|
|
+ <div class="grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3">
|
|
|
+ {clients.map((c) => (
|
|
|
+ <span class="flex h-36 w-full items-center justify-center">
|
|
|
+ <img
|
|
|
+ src={c.src}
|
|
|
+ alt="Логотип заказчика"
|
|
|
+ class:list={["w-auto object-contain", c.big ? "max-h-36 max-w-[300px]" : "max-h-24 max-w-[220px]"]}
|
|
|
+ loading="lazy"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="mt-16 grid gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
|
|
|
{whyUs.map((w, i) => (
|
|
|
<div class="border-t-2 border-night-950 pt-6">
|
|
|
@@ -185,18 +207,6 @@ const clients = [
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
- <!-- Clients -->
|
|
|
- <section class="border-y border-slate-200 bg-white">
|
|
|
- <div class="mx-auto max-w-[1400px] px-5 py-20 sm:px-8">
|
|
|
- <h2 class="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Наши заказчики</h2>
|
|
|
- <div class="mt-10 grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
|
|
|
- {clients.map((src) => (
|
|
|
- <img src={src} alt="Логотип заказчика" class="max-h-14 w-auto max-w-[150px] object-contain opacity-60 grayscale transition hover:opacity-100 hover:grayscale-0" loading="lazy" />
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
<!-- Community — Porsche-style tiles -->
|
|
|
<section class="bg-night-950 text-white">
|
|
|
<div class="mx-auto grid max-w-[1400px] gap-px px-0 sm:grid-cols-2">
|
xander