🚀 Универсальный шаблон лендинга TaskFlow

Профессиональный шаблон продающей страницы по методологии Feature-Sliced Design (FSD).

📋 Архитектура

Проект построен по FSD:

src/
├── app/              # Слой приложения
├── widgets/          # Композитные секции
├── features/         # Переиспользуемые блоки
└── shared/           # Общий код (UI-kit, хуки)

Принципы: Слоистая архитектура, изолированность, переиспользование.

🛠 Технологии

Next.js 14 - React framework
TypeScript - Type safety
Tailwind CSS 4 - Utility-first CSS
Framer Motion - Анимации
shadcn/ui - UI компоненты

📁 Структура

src/
├── app/              # layout.tsx, page.tsx, globals.css
├── widgets/          # header, hero-section, features-section
├── features/         # section-container, feature-card
└── shared/           # ui/, hooks/, lib/

🧩 Паттерны компонентов

"use client";

import { Button } from "@/shared/ui/button";

export function MyFeature() {
  return (
    <section className="py-20">
      <Button>Action</Button>
    </section>
  );
}

Правила: 'use client' для клиентских, @/ alias для импортов, PascalCase, Named exports.

🎨 Стилизация

Tailwind CSS 4 с CSS переменными в globals.css.

📦 Импорты

ВСЕГДА используйте @/ alias: import { Button } from '@/shared/ui/button';

🎬 Анимации

Framer Motion: initial={{ opacity: 0, y: 20 }} → whileInView={{ opacity: 1, y: 0 }}

🚀 Команды

pnpm dev      # Запуск dev сервера
pnpm build    # Production build

2.0 KiB Raw Blame History Unescape Escape