src/components/sections/Process.tsx - master - Hiru/Feschenko-architecture

src/components/sections/Process.tsx
79 строк4 KB
Hiruman
archutecture - v1
23 май 2026, 14:34
23 май 2026, 14:34441fef7
import { processSteps } from "@/data/site";
import { Reveal } from "@/components/ui/Reveal";
import { RevealGroup } from "@/components/ui/RevealGroup";
import { RevealItem } from "@/components/ui/RevealItem";

export function Process() {
  return (
    <section className="relative overflow-hidden px-5 py-28 md:px-10">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute left-[8%] top-24 h-px w-[34%] bg-[color-mix(in_srgb,var(--primary)_12%,transparent)]" />
        <div className="absolute right-[10%] top-40 h-px w-[28%] bg-[color-mix(in_srgb,var(--accent)_18%,transparent)]" />
        <div className="absolute right-[12%] bottom-24 h-40 w-40 border border-[color-mix(in_srgb,var(--primary)_10%,transparent)]" />
      </div>

      <div className="relative mx-auto max-w-7xl">
        <Reveal>
          <div className="mb-16 grid gap-8 border-b border-[var(--border)] pb-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-end">
            <div>
              <span className="text-sm font-semibold uppercase tracking-[0.24em] text-[var(--accent)]">
                Этапы работы
              </span>

              <h2 className="mt-4 text-[40px] font-semibold leading-[1] text-[var(--text)] sm:text-[48px] md:text-[56px]">
                Понятный путь от первой идеи до готового проектного решения
              </h2>
            </div>

            <p className="max-w-xl leading-8 text-[var(--muted)]">
              Работа выстраивается последовательно: сначала задача и вводные,
              затем концепция, проработка решений и передача материалов.
            </p>
          </div>
        </Reveal>

        <div className="relative">
          <div className="absolute left-5 top-0 hidden h-full w-px bg-[color-mix(in_srgb,var(--primary)_18%,transparent)] md:block" />

          <RevealGroup className="grid gap-7">
            {processSteps.map((step, index) => (
              <RevealItem key={step.title}>
                <article className="relative grid gap-5 md:grid-cols-[72px_1fr]">
                  <div className="relative hidden md:block">
                    <div className="absolute left-0 top-8 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-[color-mix(in_srgb,var(--primary)_22%,transparent)] bg-[var(--background)]">
                      <div className="h-3 w-3 rounded-full bg-[var(--accent)]" />
                    </div>
                  </div>

                  <div className="relative overflow-hidden border border-[var(--border)] bg-[var(--card-soft)] p-6 shadow-sm backdrop-blur md:p-8">
                    <div className="absolute left-0 top-0 h-full w-[3px] bg-[color-mix(in_srgb,var(--primary)_30%,transparent)]" />

                    <div className="grid gap-6 lg:grid-cols-[1fr_auto] lg:items-start">
                      <div className="pl-4">
                        <div className="mb-5 text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent)]">
                          Этап {String(index + 1).padStart(2, "0")}
                        </div>

                        <h3 className="text-3xl font-semibold leading-none text-[var(--text)] md:text-4xl">
                          {step.title}
                        </h3>

                        <p className="mt-4 max-w-2xl leading-8 text-[var(--muted)]">
                          {step.text}
                        </p>
                      </div>

                      <div className="hidden text-8xl font-semibold leading-none text-[color-mix(in_srgb,var(--primary)_10%,transparent)] lg:block">
                        {String(index + 1).padStart(2, "0")}
                      </div>
                    </div>
                  </div>
                </article>
              </RevealItem>
            ))}
          </RevealGroup>
        </div>
      </div>
    </section>
  );
}