673760f9da
- Set up Vite 7 + React 19 + TypeScript 5 + Tailwind CSS 4 - Configure path aliases (@/ -> src/) - Create Layout with Header and Footer components - Create HomePage with hero section and feature highlights - Set up cursor rules for agent-driven development - Create PLAN.md and LESSONS.md for progress tracking Co-authored-by: Cursor <cursoragent@cursor.com>
84 lines
3.6 KiB
TypeScript
84 lines
3.6 KiB
TypeScript
import { Link } from "react-router-dom";
|
||
|
||
const highlights = [
|
||
{
|
||
icon: "\u{1F4D6}",
|
||
title: "Подробные описания",
|
||
text: "Каждая методика с научным обоснованием, плюсами и минусами",
|
||
},
|
||
{
|
||
icon: "\u{1F50D}",
|
||
title: "Удобный поиск",
|
||
text: "Быстрый поиск и фильтрация по категориям и параметрам",
|
||
},
|
||
{
|
||
icon: "\u{1F4CA}",
|
||
title: "Калькулятор BMI",
|
||
text: "Рассчитайте индекс массы тела и получите рекомендации",
|
||
},
|
||
{
|
||
icon: "\u{2696}\u{FE0F}",
|
||
title: "Сравнение методик",
|
||
text: "Сравните до 3 методик бок о бок для выбора подходящей",
|
||
},
|
||
] as const;
|
||
|
||
export function HomePage() {
|
||
return (
|
||
<>
|
||
{/* Hero Section */}
|
||
<section className="bg-gradient-to-br from-primary-50 via-white to-accent-50 py-20 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
|
||
<div className="container mx-auto px-4 text-center">
|
||
<h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl dark:text-white">
|
||
Методики похудения
|
||
<span className="block text-primary-600 dark:text-primary-400">и здорового веса</span>
|
||
</h1>
|
||
<p className="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
|
||
Полный справочник научно обоснованных методик — от диет до физической активности.
|
||
Найдите подход, который подойдёт именно вам.
|
||
</p>
|
||
<div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||
<Link
|
||
to="/methods"
|
||
className="rounded-xl bg-primary-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-primary-500/25 transition hover:bg-primary-700 hover:shadow-xl"
|
||
>
|
||
Смотреть методики
|
||
</Link>
|
||
<Link
|
||
to="/calculator"
|
||
className="rounded-xl border-2 border-gray-300 bg-white px-8 py-3.5 text-base font-semibold text-gray-700 transition hover:border-primary-300 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-primary-600"
|
||
>
|
||
Рассчитать BMI
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Highlights */}
|
||
<section className="py-20">
|
||
<div className="container mx-auto px-4">
|
||
<h2 className="text-center text-3xl font-bold text-gray-900 dark:text-white">
|
||
Что вас ждёт
|
||
</h2>
|
||
<div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
||
{highlights.map(({ icon, title, text }) => (
|
||
<div
|
||
key={title}
|
||
className="rounded-2xl border border-gray-200 bg-white p-6 text-center transition-shadow hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"
|
||
>
|
||
<div className="text-4xl" aria-hidden="true">{icon}</div>
|
||
<h3 className="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
|
||
{title}
|
||
</h3>
|
||
<p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
||
{text}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|