Template

Files

StanisLove 202ac4627f feat: add base design

2026-01-02 10:21:37 +03:00

22 KiB

Raw Blame History

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

Это профессиональный шаблон продающей страницы (лендинга), созданный по методологии Feature-Sliced Design (FSD). Шаблон легко адаптируется под любой продукт, услугу или бизнес.

🏗️ Архитектура

Проект построен по FSD (Feature-Sliced Design) - современной методологии архитектуры фронтенд-приложений:

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

Принципы FSD:

Слоистая архитектура: от общего (shared) к специфичному (app)
Изолированность: каждый компонент независим
Переиспользование: компоненты можно легко использовать в других проектах
Понятность: структура ясна для ИИ и разработчиков

📁 Структура проекта

Детальная структура:

src/
├── app/
│   ├── layout.tsx              # Root layout с провайдерами
│   ├── page.tsx                # Главная страница (композиция widgets)
│   └── globals.css             # Глобальные стили + CSS переменные
│
├── widgets/                    # 🎯 КОМПОЗИТНЫЕ СЕКЦИИ ЛЕНДИНГА
│   ├── header.tsx              # Header с навигацией
│   ├── hero-section.tsx        # Главная секция
│   ├── features-section.tsx    # Секция возможностей
│   ├── stats-section.tsx       # Статистика/достижения
│   ├── how-it-works-section.tsx# Как это работает
│   ├── comparison-section.tsx  # Сравнение до/после
│   ├── gallery-section.tsx     # Галерея/портфолио
│   ├── social-proof-section.tsx# Отзывы и логотипы
│   ├── team-section.tsx        # Команда
│   ├── pricing-section.tsx     # Тарифы
│   ├── faq-section.tsx         # Частые вопросы
│   ├── cta-section.tsx         # Призыв к действию
│   └── footer.tsx              # Подвал сайта
│
├── features/                   # 🧩 ПЕРЕИСПОЛЬЗУЕМЫЕ БЛОКИ
│   ├── section-container.tsx   # Обертка для секций
│   ├── section-header.tsx      # Заголовок секции
│   ├── gradient-background.tsx # Градиентный фон
│   ├── feature-card.tsx        # Карточка фичи
│   ├── testimonial-card.tsx    # Карточка отзыва
│   ├── pricing-card.tsx        # Карточка тарифа
│   ├── stat-card.tsx           # Карточка статистики
│   ├── step-card.tsx           # Карточка шага
│   ├── team-member-card.tsx    # Карточка члена команды
│   ├── comparison-item.tsx     # Элемент сравнения
│   ├── portfolio-item.tsx      # Элемент портфолио
│   └── logo-cloud.tsx          # Облако логотипов
│
└── shared/                     # 🔧 ОБЩИЙ КОД
    ├── ui/                     # shadcn/ui компоненты
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── input.tsx
    │   └── ... (50+ компонентов)
    ├── hooks/
    │   ├── use-in-view.ts      # Хук для viewport detection
    │   ├── use-scroll-animation.ts # Хук для scroll анимаций
    │   └── theme-provider.tsx  # Провайдер темы
    └── lib/
        └── utils.ts            # Утилиты

🧩 Компоненты

Features (переиспользуемые блоки)

1. SectionContainer

Универсальная обертка для всех секций.

Props:

{
  children: ReactNode;
  className?: string;
  variant?: 'default' | 'narrow' | 'wide';      // Ширина контейнера
  background?: 'default' | 'muted' | 'gradient'; // Фон секции
  withPadding?: boolean;                         // Отступы сверху/снизу
  id?: string;                                   // Для якорей навигации
}

Где используется: Во всех секциях

2. SectionHeader

Заголовок секции с subtitle и description.

Props:

{
  title: string;                              // Основной заголовок
  subtitle?: string;                          // Надзаголовок
  description?: string;                       // Описание
  align?: 'left' | 'center' | 'right';       // Выравнивание
  withGradient?: boolean;                     // Gradient на заголовке
}

Где используется: Features, Stats, Team, Pricing и др.

3. FeatureCard

Карточка возможности/преимущества.

Props:

{
  icon: LucideIcon;                          // Иконка
  title: string;                             // Название
  description: string;                       // Описание
  variant?: 'default' | 'bordered' | 'filled';
  link?: { href: string, label: string };    // Опциональная ссылка
}

Где используется: Features Section

4. PricingCard

Карточка тарифного плана.

Props:

{
  name: string;                              // Название плана
  price: number | 'custom';                  // Цена в рублях
  period?: 'month' | 'year';                 // Период оплаты
  description: string;
  features: Array<{                          // Список возможностей
    text: string;
    included: boolean;
  }>;
  ctaLabel: string;                          // Текст кнопки
  ctaHref: string;
  popular?: boolean;                         // Популярный план
}

Где используется: Pricing Section

5. StatCard

Карточка статистики с анимированным счетчиком.

Props:

{
  value: string | number;                    // Значение
  label: string;                             // Подпись
  icon?: LucideIcon;
  animated?: boolean;                        // Анимация счетчика
  trend?: {                                  // Тренд вверх/вниз
    value: number;
    direction: 'up' | 'down';
  };
}

Где используется: Stats Section

6. TestimonialCard

Карточка отзыва клиента.

Props:

{
  content: string;                           // Текст отзыва
  author: {
    name: string;
    role: string;
    company?: string;
    avatar?: string;
  };
  rating?: number;                           // Рейтинг 1-5
  variant?: 'card' | 'quote';               // Стиль отображения
}

Где используется: Social Proof Section

Другие компоненты

StepCard - для How It Works
TeamMemberCard - для Team
ComparisonItem - для Comparison
PortfolioItem - для Gallery
LogoCloud - для логотипов клиентов

🎨 Секции лендинга

1. Header (`widgets/header.tsx`)

Sticky навигация с backdrop blur
Мобильное меню (Sheet)
Переключатель темы
Smooth scroll к секциям

Как изменить:

// Измените навигацию в массиве:
const navigation = [
  { name: "Ваш пункт", href: "#section-id" },
  // ...
];

2. Hero Section (`widgets/hero-section.tsx`)

Главная секция с заголовком и CTA.

Что изменить:

Заголовок: "Управляйте проектами быстрее и проще"
Описание: "Все инструменты для командной работы..."
Кнопки CTA
Hero изображение (замените placeholder)

3. Features Section (`widgets/features-section.tsx`)

6 карточек с возможностями.

Как изменить:

const features = [
  {
    icon: Zap, // Иконка из lucide-react
    title: "Ваша фича",
    description: "Описание...",
  },
  // ... добавьте или удалите фичи
];

4. Stats Section (`widgets/stats-section.tsx`)

4 карточки со статистикой.

Как изменить:

const stats = [
  {
    value: "10000+", // Число или строка
    label: "Ваш показатель",
    icon: Users,
    animated: true, // Анимация счетчика
  },
  // ...
];

5. How It Works (`widgets/how-it-works-section.tsx`)

4 шага с описанием процесса.

Как изменить:

const steps = [
  {
    number: 1,
    title: "Шаг 1",
    description: "Описание...",
    icon: YourIcon,
  },
  // ...
];

6. Comparison Section (`widgets/comparison-section.tsx`)

Сравнение "до/после" (3 элемента).

Как изменить:

const comparisons = [
  {
    before: {
      title: "Старый способ",
      description: "...",
    },
    after: {
      title: "Новый способ",
      description: "...",
    },
  },
  // ...
];

7. Gallery Section (`widgets/gallery-section.tsx`)

6-8 примеров работ/скриншотов.

Как изменить:

Замените /api/placeholder/600/400 на реальные изображения
Измените категории и описания

8. Social Proof (`widgets/social-proof-section.tsx`)

Отзывы клиентов + логотипы компаний.

Как изменить:

const testimonials = [
  {
    content: "Текст отзыва...",
    author: {
      name: "Имя",
      role: "Должность",
      company: "Компания",
      avatar: "/path/to/avatar.jpg",
    },
    rating: 5,
  },
  // ...
];

const logos = [
  { name: "Company", src: "/path/to/logo.png" },
  // ...
];

9. Team Section (`widgets/team-section.tsx`)

Карточки членов команды.

Как изменить:

const team = [
  {
    name: "Имя",
    role: "Должность",
    bio: "Краткая биография",
    image: "/path/to/photo.jpg",
    socials: [
      { platform: "linkedin", url: "#" },
      { platform: "github", url: "#" },
    ],
  },
  // ...
];

10. Pricing Section (`widgets/pricing-section.tsx`)

3 тарифных плана.

Как изменить:

const pricingPlans = [
  {
    name: "Название",
    price: 2900, // В рублях
    period: "month", // или "year"
    description: "Описание плана",
    features: [
      { text: "Возможность 1", included: true },
      { text: "Возможность 2", included: false },
    ],
    ctaLabel: "Купить",
    ctaHref: "#",
    popular: true, // Показать badge "Популярный"
  },
  // ...
];

11. FAQ Section (`widgets/faq-section.tsx`)

8 частых вопросов с ответами.

Как изменить:

const faqs = [
  {
    question: "Ваш вопрос?",
    answer: "Подробный ответ...",
  },
  // ...
];

12. CTA Section (`widgets/cta-section.tsx`)

Финальный призыв к действию.

Что изменить:

Заголовок
Описание
Текст на кнопке
Форма подписки (email input)

13. Footer (`widgets/footer.tsx`)

Подвал с ссылками и соцсетями.

Как изменить:

const footerLinks = {
  product: {
    title: "Ваша категория",
    links: [
      { name: "Ссылка", href: "#" },
      // ...
    ],
  },
  // ... добавьте колонки
};

const socialLinks = [
  { name: "GitHub", icon: Github, href: "#" },
  // ...
];

🎨 Стилизация

CSS Переменные

Все цвета настраиваются в src/app/globals.css:

:root {
  /* Градиенты для лендинга */
  --gradient-from: oklch(0.67 0.24 252); /* Синий */
  --gradient-via: oklch(0.62 0.23 295); /* Фиолетовый */
  --gradient-to: oklch(0.72 0.19 345); /* Розовый */

  /* Акцентный цвет */
  --feature-accent: oklch(0.65 0.21 165); /* Бирюзовый */

  /* Spacing */
  --section-padding-y: 5rem;
  --section-padding-y-lg: 8rem;
}

Utility классы

Три готовых класса для градиентов:

.text-gradient          /* Градиентный текст */
/* Градиентный текст */
/* Градиентный текст */
/* Градиентный текст */
.bg-gradient-primary    /* Градиентный фон */
.border-gradient; /* Градиентная рамка */

Использование:

<h1 className="text-gradient">Заголовок с градиентом</h1>

✨ Анимации

Framer Motion паттерны

1. Fade-in + Slide-up (для заголовков)

initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}

2. Stagger (для списков)

// Используйте готовые варианты из shared/hooks/use-scroll-animation.ts
import {
  staggerContainer,
  staggerItem,
} from "@/shared/hooks/use-scroll-animation";

<motion.div variants={staggerContainer} initial="hidden" whileInView="show">
  {items.map((item) => (
    <motion.div key={item.id} variants={staggerItem}>
      {/* content */}
    </motion.div>
  ))}
</motion.div>;

3. Hover эффекты

whileHover={{ y: -5, scale: 1.02 }}
transition={{ type: "spring", stiffness: 300 }}

4. Анимированный счетчик (StatCard)

Автоматически анимирует числовые значения при появлении в viewport.

🔧 Как изменять шаблон

Быстрый старт

Изменить брендинг:
- Замените "TaskFlow" на название вашего продукта
- Обновите логотип в Header и Footer
- Измените цвета в globals.css
Изменить контент:
- Откройте нужный widget в src/widgets/
- Найдите массив с данными (features, testimonials, etc.)
- Замените текст и изображения

Добавить/удалить секции:

// src/app/page.tsx
export default function Home() {
  return (
    <>
      <Header />
      <main>
        <HeroSection />
        {/* Добавьте или удалите секции здесь */}
        <YourCustomSection />
      </main>
      <Footer />
    </>
  );
}

Изменить порядок секций: Просто поменяйте местами компоненты в page.tsx

Создание новой секции

Создайте файл src/widgets/your-section.tsx:

"use client";

import { SectionContainer } from "@/features/section-container";
import { SectionHeader } from "@/features/section-header";

export function YourSection() {
  return (
    <SectionContainer id="your-section">
      <SectionHeader
        title="Ваш заголовок"
        description="Описание"
        withGradient
      />

      {/* Ваш контент */}
    </SectionContainer>
  );
}

Импортируйте в page.tsx:

import { YourSection } from "@/widgets/your-section";

Добавьте в композицию:

<YourSection />

Создание нового feature-компонента

Создайте файл src/features/your-card.tsx:

"use client";

import { cn } from "@/shared/lib/utils";
import { motion } from "framer-motion";

export interface YourCardProps {
  title: string;
  // ... ваши props
}

export function YourCard({ title }: YourCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="p-6 rounded-xl bg-card"
    >
      <h3>{title}</h3>
      {/* ... ваш контент */}
    </motion.div>
  );
}

Используйте в widget:

import { YourCard } from "@/features/your-card";

📝 Чеклист для адаптации

Изменить название продукта (TaskFlow → Ваше)
Обновить логотип
Изменить цветовую схему (globals.css)
Заменить все текстовые плейсхолдеры
Загрузить реальные изображения
Обновить иконки (выбрать из lucide-react)
Изменить количество фич/отзывов/членов команды
Настроить цены и тарифы
Обновить FAQ
Добавить реальные ссылки в Footer
Настроить соцсети
Проверить адаптивность на всех размерах экрана
Протестировать все анимации
Добавить реальные ссылки CTA

🚀 Преимущества шаблона

✅ Правильная FSD архитектура - легко масштабировать и поддерживать
✅ Переиспользуемые компоненты - DRY принцип
✅ Типизация TypeScript - меньше ошибок
✅ Современные анимации - Framer Motion
✅ Темная/светлая тема - автоматически
✅ Полностью адаптивный - от 320px до 4K
✅ Accessibility - семантичный HTML, ARIA
✅ shadcn/ui - 50+ готовых компонентов
✅ Чистый код - комментарии и документация

🎯 Для ИИ-ассистентов

Этот шаблон специально оптимизирован для работы с ИИ:

Понятная структура - FSD методология
Изолированные компоненты - легко заменять
Подробные props - TypeScript интерфейсы
Комментарии в коде - объяснения назначения
Примеры данных - в каждом widget
Модульность - добавляй/удаляй секции без проблем

Типичные задачи для ИИ:

"Измени цвета на зеленый" → Обнови переменные в globals.css

"Добавь секцию с видео" → Создай новый widget в src/widgets/video-section.tsx

"Убери секцию Team" → Удали <TeamSection /> из page.tsx

"Сделай 4 тарифа вместо 3" → Добавь объект в массив pricingPlans в pricing-section.tsx

📦 Технологии

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

🤝 Поддержка

Этот шаблон создан как база для ИИ-генерации уникальных лендингов. Изучите структуру, измените контент под ваш продукт, и получите профессиональную продающую страницу!

Успешной адаптации! 🚀

22 KiB Raw Blame History Unescape Escape

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

📋 Содержание

🏗️ Архитектура

Принципы FSD:

📁 Структура проекта

Детальная структура:

🧩 Компоненты

Features (переиспользуемые блоки)

1. SectionContainer

2. SectionHeader

3. FeatureCard

4. PricingCard

5. StatCard

6. TestimonialCard

Другие компоненты

🎨 Секции лендинга

1. Header (widgets/header.tsx)

2. Hero Section (widgets/hero-section.tsx)

3. Features Section (widgets/features-section.tsx)

4. Stats Section (widgets/stats-section.tsx)

5. How It Works (widgets/how-it-works-section.tsx)

6. Comparison Section (widgets/comparison-section.tsx)

7. Gallery Section (widgets/gallery-section.tsx)

8. Social Proof (widgets/social-proof-section.tsx)

9. Team Section (widgets/team-section.tsx)

10. Pricing Section (widgets/pricing-section.tsx)

11. FAQ Section (widgets/faq-section.tsx)

12. CTA Section (widgets/cta-section.tsx)

13. Footer (widgets/footer.tsx)

🎨 Стилизация

CSS Переменные

Utility классы

✨ Анимации

Framer Motion паттерны

1. Fade-in + Slide-up (для заголовков)

2. Stagger (для списков)

3. Hover эффекты

4. Анимированный счетчик (StatCard)

🔧 Как изменять шаблон

Быстрый старт

Создание новой секции

Создание нового feature-компонента

📝 Чеклист для адаптации

🚀 Преимущества шаблона

🎯 Для ИИ-ассистентов

Типичные задачи для ИИ:

📦 Технологии

🤝 Поддержка

22 KiB

Raw Blame History

1. Header (`widgets/header.tsx`)

2. Hero Section (`widgets/hero-section.tsx`)

3. Features Section (`widgets/features-section.tsx`)

4. Stats Section (`widgets/stats-section.tsx`)

5. How It Works (`widgets/how-it-works-section.tsx`)

6. Comparison Section (`widgets/comparison-section.tsx`)

7. Gallery Section (`widgets/gallery-section.tsx`)

8. Social Proof (`widgets/social-proof-section.tsx`)

9. Team Section (`widgets/team-section.tsx`)

10. Pricing Section (`widgets/pricing-section.tsx`)

11. FAQ Section (`widgets/faq-section.tsx`)

12. CTA Section (`widgets/cta-section.tsx`)

13. Footer (`widgets/footer.tsx`)