Gekon Dev
a16f6a5c58
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.
93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
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>
|
||
);
|
||
}
|