feat: add legal pages and improve site navigation

Introduce polished legal/support/contact/careers/about pages with production-ready content and update header/footer links to point to real routes and external resources.
2026-05-09 20:11:26 +03:00
parent 80f98282e7
commit a16f6a5c58
13 changed files with 1148 additions and 24 deletions
@@ -0,0 +1,92 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { ParticlesBackground } from "@/components/ParticlesBackground";
+import { FileText, ScrollText } from "lucide-react";
+
+type LegalSection = {
+  heading: string;
+  paragraphs: string[];
+};
+
+type LegalDocumentPageProps = {
+  title: string;
+  subtitle: string;
+  sections: LegalSection[];
+};
+
+function makeSectionId(heading: string, index: number) {
+  const normalized = heading
+    .toLowerCase()
+    .replace(/[^a-zа-я0-9]+/gi, "-")
+    .replace(/^-+|-+$/g, "");
+  return normalized ? `${normalized}-${index + 1}` : `section-${index + 1}`;
+}
+
+export function LegalDocumentPage({ title, subtitle, sections }: LegalDocumentPageProps) {
+  return (
+    <div className="relative min-h-screen">
+      <ParticlesBackground />
+      <Navbar />
+
+      <main className="relative z-10 px-4 pb-16 pt-28 sm:pb-20">
+        <div className="mx-auto max-w-7xl">
+          <section className="mb-5 rounded-2xl border border-gekon-green/20 bg-gradient-to-br from-background/95 via-background/85 to-background/95 p-6 shadow-[0_0_0_1px_rgba(16,185,129,0.06)] sm:p-8">
+            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-gekon-green/30 bg-gekon-green/10 px-3 py-1 text-xs font-medium text-gekon-green">
+              <FileText size={14} />
+              Юридический документ
+            </div>
+            <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">{title}</h1>
+            <p className="mt-3 max-w-4xl text-sm leading-relaxed text-muted-foreground sm:text-base">{subtitle}</p>
+          </section>
+
+          <div className="grid gap-5 lg:grid-cols-[280px_minmax(0,1fr)]">
+            <aside className="h-fit rounded-2xl border border-border bg-background/75 p-4 lg:sticky lg:top-24">
+              <h2 className="mb-3 inline-flex items-center gap-2 text-sm font-semibold text-foreground">
+                <ScrollText size={16} />
+                Содержание
+              </h2>
+              <nav className="space-y-1.5">
+                {sections.map((section, index) => {
+                  const id = makeSectionId(section.heading, index);
+                  return (
+                    <a
+                      key={id}
+                      href={`#${id}`}
+                      className="block rounded-lg px-2.5 py-2 text-sm text-muted-foreground transition-colors hover:bg-gekon-green/10 hover:text-foreground"
+                    >
+                      {section.heading}
+                    </a>
+                  );
+                })}
+              </nav>
+            </aside>
+
+            <section className="space-y-4">
+              {sections.map((section, index) => {
+                const id = makeSectionId(section.heading, index);
+                return (
+                  <article
+                    id={id}
+                    key={id}
+                    className="scroll-mt-24 rounded-2xl border border-gekon-green/15 bg-gradient-to-br from-background/90 via-background/75 to-background/90 p-5 shadow-[0_0_0_1px_rgba(16,185,129,0.05)] transition-all hover:border-gekon-green/30 hover:shadow-[0_10px_28px_rgba(16,185,129,0.12)] sm:p-6"
+                  >
+                    <h3 className="text-lg font-semibold text-foreground sm:text-xl">{section.heading}</h3>
+                    <div className="mt-3 space-y-3">
+                      {section.paragraphs.map((paragraph) => (
+                        <p key={paragraph} className="text-sm leading-relaxed text-muted-foreground sm:text-[15px]">
+                          {paragraph}
+                        </p>
+                      ))}
+                    </div>
+                  </article>
+                );
+              })}
+            </section>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}