scientia-website/src/pages/index.astro

---
import Base from "../layouts/Base.astro";
import CTAForm from "../components/CTAForm.astro";
import TelegramWidget from "../components/TelegramWidget.astro";
import { services } from "../data/services";
import { products } from "../data/products";
import { site } from "../data/site";

const whyUs = [
  {
    title: "Разработки",
    text: "Собственные программные и аппаратные решения позволяют решать задачи, которые другие считают невозможными. В команде работают не только инженеры, но и программисты.",
  },
  {
    title: "Инновации",
    text: "Регулярно тестируем и внедряем технические новшества, что поддерживает актуальность наших услуг.",
  },
  {
    title: "Открытость",
    text: "В отчётах подробно описываются все параметры, решения и допущения. Клиенты получают развёрнутые консультации.",
  },
  {
    title: "Эффективность",
    text: "Важна не только безопасность, но и экономика решений. Поиск потенциала для экономии — одна из задач геомеханика.",
  },
];

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);
---

<Base
  title="Геомеханическое моделирование и ПО. Горная геомеханика — Scientia"
  description="Институт геомеханики оценивает геомеханические риски, ведёт геотехнический мониторинг, кинематический анализ, расчет прочности и устойчивости горных работ, мониторинг бортов карьера, инженерно геологическая съемка, геомеханическая модель"
>
  <!-- Cinematic full-viewport hero -->
  <section class="relative flex h-[100svh] min-h-[640px] items-end overflow-hidden bg-night-950 text-white">
    <img
      src="/images/1655676643_10-kartin.jpg"
      alt=""
      class="absolute inset-0 h-full w-full object-cover"
      loading="eager"
    />
    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/25 to-black/40"></div>

    <div class="relative mx-auto w-full max-w-[1400px] px-5 pb-28 sm:px-8">
      <p class="text-xs font-semibold uppercase tracking-[0.25em] text-accent-300">{site.tagline}</p>
      <h1 class="display mt-5 max-w-4xl text-5xl sm:text-7xl lg:text-8xl">
        Разработки, инновации и&nbsp;открытость<span class="dot">.</span>
      </h1>
      <p class="mt-6 max-w-xl text-lg leading-relaxed text-white/75">
        Для эффективности горной промышленности: комплексные геомеханические исследования,
        собственное ПО и аппаратура.
      </p>
      <div class="mt-9 flex flex-wrap items-center gap-4">
        <a
          href="#razrabotki"
          class="group flex items-center gap-3 rounded-full bg-accent-300 py-3.5 pl-7 pr-4 font-semibold text-night-950 transition-colors hover:bg-accent-200"
        >
          Наши разработки
          <span class="flex h-8 w-8 items-center justify-center rounded-full bg-night-950 text-accent-300" aria-hidden="true">→</span>
        </a>
        <a
          href="#uslugi"
          class="rounded-full border border-white/40 px-7 py-3.5 font-semibold text-white transition-colors hover:border-white hover:bg-white/10"
        >
          Услуги
        </a>
      </div>
    </div>

    <!-- Telegram news window (right side) -->
    <div class="absolute bottom-24 right-20 z-10 hidden xl:block">
      <TelegramWidget />
    </div>

    <!-- Scroll indicator -->
    <a
      href="#uslugi"
      class="absolute bottom-6 left-1/2 -translate-x-1/2 text-white/70 transition-colors hover:text-white"
      aria-label="Листайте вниз"
    >
      <svg class="h-7 w-7 animate-bounce" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
      </svg>
    </a>
  </section>

  <!-- Services — Rocscience-style section header + card deck -->
  <section id="uslugi" class="scroll-mt-20 bg-white">
    <div class="mx-auto max-w-[1400px] px-5 py-24 sm:px-8 lg:py-32">
      <div class="flex flex-wrap items-end justify-between gap-6">
        <h2 class="display text-5xl sm:text-6xl">Услуги<span class="dot">.</span></h2>
        <p class="max-w-md text-slate-500">
          Полный цикл: от структурно-геологического картирования до мониторинга деформаций
          и аналитических исследований.
        </p>
      </div>

      <div class="mt-14 grid gap-x-8 gap-y-14 sm:grid-cols-2 lg:grid-cols-4">
        {services.map((s) => (
          <a
            href={s.href ?? (s.external ? s.href : "#contacts")}
            class="group block"
            {...s.external ? { target: "_blank", rel: "noopener" } : {}}
          >
            <div class="relative aspect-[4/3] overflow-hidden">
              <img
                src={s.image}
                alt={s.title}
                class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                loading="lazy"
              />
              {"tag" in s && s.tag && (
                <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">
              <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>
        ))}
      </div>
    </div>
  </section>

  <!-- Products — Porsche-style full-bleed stages -->
  <section id="razrabotki" class="scroll-mt-20 bg-night-950 text-white">
    {products.map((p) => (
      <a href={p.href} class="group relative block h-[82svh] min-h-[560px] overflow-hidden border-t border-white/10">
        <img
          src={p.image}
          alt={p.name}
          class="absolute inset-0 h-full w-full object-cover opacity-80 transition-all duration-700 group-hover:scale-[1.03] group-hover:opacity-100"
          loading="lazy"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-black/30"></div>
        <div class="relative mx-auto flex h-full max-w-[1400px] items-end px-5 pb-16 sm:px-8">
          <div class="w-full">
            <p class="text-xs font-semibold uppercase tracking-[0.25em] text-accent-300">{p.tagline}</p>
            <div class="mt-3 flex flex-wrap items-end justify-between gap-6">
              <div class="max-w-2xl">
                <h3 class="display text-5xl sm:text-6xl lg:text-7xl">{p.name}<span class="dot">.</span></h3>
                <p class="mt-4 max-w-xl text-white/75">{p.description}</p>
              </div>
              <span class="chip-arrow" aria-hidden="true">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3" />
                </svg>
              </span>
            </div>
          </div>
        </div>
      </a>
    ))}
  </section>

  <!-- Why us — editorial dark numbers -->
  <section class="bg-white">
    <div class="mx-auto max-w-[1400px] px-5 py-24 sm:px-8 lg:py-32">
      <h2 class="display max-w-3xl text-5xl sm:text-6xl">
        Почему выбирают нас<span class="dot">.</span>
      </h2>
      <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">
            <span class="display text-6xl text-accent-300">{String(i + 1).padStart(2, "0")}</span>
            <h3 class="display mt-4 text-2xl">{w.title}</h3>
            <p class="mt-3 text-sm leading-relaxed text-slate-500">{w.text}</p>
          </div>
        ))}
      </div>

      <!-- Client logos -->
      <div class="mt-20 border-t border-slate-200 pt-14">
        <h3 class="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Наши заказчики</h3>
        <div class="mt-10 grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-10 sm:grid-cols-3 lg:grid-cols-5">
          {clients.map((src) => (
            <img src={src} alt="Логотип заказчика" class="max-h-24 w-auto max-w-[220px] object-contain opacity-70 grayscale transition hover:opacity-100 hover:grayscale-0" loading="lazy" />
          ))}
        </div>
      </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">
      <a href="https://t.me/scientia_ru" target="_blank" rel="noopener" class="group relative block min-h-[420px] overflow-hidden">
        <img src="/images/20200629_141121.jpg" alt="" class="absolute inset-0 h-full w-full object-cover opacity-40 transition-all duration-700 group-hover:scale-[1.03] group-hover:opacity-60" loading="lazy" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
        <div class="relative flex h-full flex-col justify-end p-10">
          <h3 class="display text-4xl">Телеграм-канал<span class="dot">.</span></h3>
          <p class="mt-3 max-w-sm text-white/70">Новости, открытия и рекомендации — делимся в канале компании</p>
          <span class="chip-arrow mt-8" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3" />
            </svg>
          </span>
        </div>
      </a>
      <a href={site.external.blog} target="_blank" rel="noopener" class="group relative block min-h-[420px] overflow-hidden border-l border-white/10">
        <img src="/images/photo_2022-09-19_06-.jpg" alt="" class="absolute inset-0 h-full w-full object-cover opacity-40 transition-all duration-700 group-hover:scale-[1.03] group-hover:opacity-60" loading="lazy" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
        <div class="relative flex h-full flex-col justify-end p-10">
          <h3 class="display text-4xl">Блог<span class="dot">.</span></h3>
          <p class="mt-3 max-w-sm text-white/70">Последние записи и статьи — на платформе Teletype</p>
          <span class="chip-arrow mt-8" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3" />
            </svg>
          </span>
        </div>
      </a>
    </div>
  </section>

  <CTAForm />
</Base>