fix: clean repo and fix .gitigonre
This commit is contained in:
76
.gitignore
vendored
76
.gitignore
vendored
@@ -1,42 +1,80 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
# dependencies
|
||||||
/node_modules
|
/node_modules/
|
||||||
|
/.pnpm-store/
|
||||||
|
/.npm/
|
||||||
/.pnp
|
/.pnp
|
||||||
.pnp.*
|
.pnp.*
|
||||||
|
|
||||||
|
# package managers
|
||||||
.yarn/*
|
.yarn/*
|
||||||
!.yarn/patches
|
!.yarn/patches
|
||||||
!.yarn/plugins
|
!.yarn/plugins
|
||||||
!.yarn/releases
|
!.yarn/releases
|
||||||
|
!.yarn/sdks
|
||||||
!.yarn/versions
|
!.yarn/versions
|
||||||
|
|
||||||
# testing
|
# build output
|
||||||
/coverage
|
|
||||||
|
|
||||||
# next.js
|
|
||||||
/.next/
|
/.next/
|
||||||
/out/
|
/out/
|
||||||
|
/build/
|
||||||
|
/dist/
|
||||||
|
|
||||||
# production
|
# caches
|
||||||
/build
|
/.turbo/
|
||||||
|
/.cache/
|
||||||
|
/.swc/
|
||||||
|
.eslintcache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
# misc
|
# testing
|
||||||
.DS_Store
|
/coverage/
|
||||||
*.pem
|
|
||||||
|
|
||||||
# debug
|
# logs
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
.pnpm-debug.log*
|
.pnpm-debug.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
# env files (can opt-in for committing if needed)
|
# env files
|
||||||
.env*
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env*.local
|
||||||
!.env.example
|
!.env.example
|
||||||
|
|
||||||
# vercel
|
# deployment / hosting
|
||||||
.vercel
|
.vercel/
|
||||||
|
|
||||||
# typescript
|
# payload cms
|
||||||
*.tsbuildinfo
|
/.payload/
|
||||||
|
# /uploads/
|
||||||
|
# /media/
|
||||||
|
# /public/uploads/
|
||||||
|
# /public/media/
|
||||||
|
payload.db*
|
||||||
|
*.sqlite
|
||||||
|
*.sqlite3
|
||||||
|
*.db-wal
|
||||||
|
*.db-shm
|
||||||
|
*.sqlite-journal
|
||||||
|
|
||||||
|
# editor / OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# secrets / local certs
|
||||||
|
*.pem
|
||||||
|
*.key
|
||||||
|
*.crt
|
||||||
|
|
||||||
|
# generated by next
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
|
|||||||
@@ -1,47 +0,0 @@
|
|||||||
src/
|
|
||||||
├── app/
|
|
||||||
│ ├── layout.tsx # Root layout с провайдерами
|
|
||||||
│ ├── page.tsx # Главная страница
|
|
||||||
│ └── globals.css # Глобальные стили + CSS переменные
|
|
||||||
│
|
|
||||||
├── widgets/ # Композитные секции
|
|
||||||
│ ├── header.tsx
|
|
||||||
│ ├── 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
|
|
||||||
│ ├── use-scroll-animation.ts
|
|
||||||
│ └── theme-provider.tsx
|
|
||||||
└── lib/
|
|
||||||
└── utils.ts
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
# 📐 Coding Conventions
|
|
||||||
|
|
||||||
## Именование
|
|
||||||
|
|
||||||
- **Компоненты:** PascalCase (`Button.tsx`)
|
|
||||||
- **Утилиты:** kebab-case (`format-date.ts`)
|
|
||||||
- **Хуки:** camelCase с use (`useInView.ts`)
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const userName = "John";
|
|
||||||
const MAX_RETRIES = 3;
|
|
||||||
```
|
|
||||||
|
|
||||||
## Структура компонента
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { Button } from "@/shared/ui/button";
|
|
||||||
|
|
||||||
interface MyComponentProps {
|
|
||||||
title: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function MyComponent({ title }: MyComponentProps) {
|
|
||||||
return <div>{title}</div>;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## TypeScript
|
|
||||||
|
|
||||||
Всегда типизируйте props:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface ButtonProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
variant?: "primary" | "secondary";
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Импорты
|
|
||||||
|
|
||||||
Порядок: React → Внешние → Наши (@/...)
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
import { useState } from "react";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { Button } from "@/shared/ui/button";
|
|
||||||
```
|
|
||||||
|
|
||||||
**ВСЕГДА используйте @/ для абсолютных импортов.**
|
|
||||||
|
|
||||||
## Стилизация
|
|
||||||
|
|
||||||
Порядок Tailwind: Layout → Sizing → Spacing → Typography → Colors
|
|
||||||
|
|
||||||
Условные классы через cn():
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
import { cn } from '@/shared/lib/utils';
|
|
||||||
<button className={cn('px-4 py-2', variant === 'primary' && 'bg-primary')}>
|
|
||||||
```
|
|
||||||
87
EXAMPLES.md
87
EXAMPLES.md
@@ -1,87 +0,0 @@
|
|||||||
# 📝 Code Examples
|
|
||||||
|
|
||||||
## Создание компонента
|
|
||||||
|
|
||||||
### Feature компонент
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// features/your-card.tsx
|
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { Card } from "@/shared/ui/card";
|
|
||||||
|
|
||||||
interface YourCardProps {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function YourCard({ title, description }: YourCardProps) {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<Card className="p-6">
|
|
||||||
<h3 className="text-2xl font-bold">{title}</h3>
|
|
||||||
<p>{description}</p>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Widget секция
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// 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="Заголовок" withGradient />
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
{/* Контент */}
|
|
||||||
</div>
|
|
||||||
</SectionContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Работа с состоянием
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export function Counter() {
|
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p>Count: {count}</p>
|
|
||||||
<button onClick={() => setCount(count + 1)}>Increment</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Анимации
|
|
||||||
|
|
||||||
### Fade in + Slide up
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.5 }}
|
|
||||||
>
|
|
||||||
Content
|
|
||||||
</motion.div>
|
|
||||||
```
|
|
||||||
@@ -1,787 +0,0 @@
|
|||||||
# 🚀 Универсальный шаблон лендинга 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:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
children: ReactNode;
|
|
||||||
className?: string;
|
|
||||||
variant?: 'default' | 'narrow' | 'wide'; // Ширина контейнера
|
|
||||||
background?: 'default' | 'muted' | 'gradient'; // Фон секции
|
|
||||||
withPadding?: boolean; // Отступы сверху/снизу
|
|
||||||
id?: string; // Для якорей навигации
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Где используется:** Во всех секциях
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 2. **SectionHeader**
|
|
||||||
|
|
||||||
Заголовок секции с subtitle и description.
|
|
||||||
|
|
||||||
**Props:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
title: string; // Основной заголовок
|
|
||||||
subtitle?: string; // Надзаголовок
|
|
||||||
description?: string; // Описание
|
|
||||||
align?: 'left' | 'center' | 'right'; // Выравнивание
|
|
||||||
withGradient?: boolean; // Gradient на заголовке
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Где используется:** Features, Stats, Team, Pricing и др.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 3. **FeatureCard**
|
|
||||||
|
|
||||||
Карточка возможности/преимущества.
|
|
||||||
|
|
||||||
**Props:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
icon: LucideIcon; // Иконка
|
|
||||||
title: string; // Название
|
|
||||||
description: string; // Описание
|
|
||||||
variant?: 'default' | 'bordered' | 'filled';
|
|
||||||
link?: { href: string, label: string }; // Опциональная ссылка
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Где используется:** Features Section
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 4. **PricingCard**
|
|
||||||
|
|
||||||
Карточка тарифного плана.
|
|
||||||
|
|
||||||
**Props:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
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:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
value: string | number; // Значение
|
|
||||||
label: string; // Подпись
|
|
||||||
icon?: LucideIcon;
|
|
||||||
animated?: boolean; // Анимация счетчика
|
|
||||||
trend?: { // Тренд вверх/вниз
|
|
||||||
value: number;
|
|
||||||
direction: 'up' | 'down';
|
|
||||||
};
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Где используется:** Stats Section
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 6. **TestimonialCard**
|
|
||||||
|
|
||||||
Карточка отзыва клиента.
|
|
||||||
|
|
||||||
**Props:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
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 к секциям
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// Измените навигацию в массиве:
|
|
||||||
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 карточек с возможностями.
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
icon: Zap, // Иконка из lucide-react
|
|
||||||
title: "Ваша фича",
|
|
||||||
description: "Описание...",
|
|
||||||
},
|
|
||||||
// ... добавьте или удалите фичи
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. **Stats Section** (`widgets/stats-section.tsx`)
|
|
||||||
|
|
||||||
4 карточки со статистикой.
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const stats = [
|
|
||||||
{
|
|
||||||
value: "10000+", // Число или строка
|
|
||||||
label: "Ваш показатель",
|
|
||||||
icon: Users,
|
|
||||||
animated: true, // Анимация счетчика
|
|
||||||
},
|
|
||||||
// ...
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. **How It Works** (`widgets/how-it-works-section.tsx`)
|
|
||||||
|
|
||||||
4 шага с описанием процесса.
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const steps = [
|
|
||||||
{
|
|
||||||
number: 1,
|
|
||||||
title: "Шаг 1",
|
|
||||||
description: "Описание...",
|
|
||||||
icon: YourIcon,
|
|
||||||
},
|
|
||||||
// ...
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. **Comparison Section** (`widgets/comparison-section.tsx`)
|
|
||||||
|
|
||||||
Сравнение "до/после" (3 элемента).
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
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`)
|
|
||||||
|
|
||||||
Отзывы клиентов + логотипы компаний.
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
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`)
|
|
||||||
|
|
||||||
Карточки членов команды.
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
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 тарифных плана.
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
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 частых вопросов с ответами.
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const faqs = [
|
|
||||||
{
|
|
||||||
question: "Ваш вопрос?",
|
|
||||||
answer: "Подробный ответ...",
|
|
||||||
},
|
|
||||||
// ...
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 12. **CTA Section** (`widgets/cta-section.tsx`)
|
|
||||||
|
|
||||||
Финальный призыв к действию.
|
|
||||||
|
|
||||||
**Что изменить:**
|
|
||||||
|
|
||||||
- Заголовок
|
|
||||||
- Описание
|
|
||||||
- Текст на кнопке
|
|
||||||
- Форма подписки (email input)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 13. **Footer** (`widgets/footer.tsx`)
|
|
||||||
|
|
||||||
Подвал с ссылками и соцсетями.
|
|
||||||
|
|
||||||
**Как изменить:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const footerLinks = {
|
|
||||||
product: {
|
|
||||||
title: "Ваша категория",
|
|
||||||
links: [
|
|
||||||
{ name: "Ссылка", href: "#" },
|
|
||||||
// ...
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// ... добавьте колонки
|
|
||||||
};
|
|
||||||
|
|
||||||
const socialLinks = [
|
|
||||||
{ name: "GitHub", icon: Github, href: "#" },
|
|
||||||
// ...
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎨 Стилизация
|
|
||||||
|
|
||||||
### CSS Переменные
|
|
||||||
|
|
||||||
Все цвета настраиваются в `src/app/globals.css`:
|
|
||||||
|
|
||||||
```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 классы
|
|
||||||
|
|
||||||
Три готовых класса для градиентов:
|
|
||||||
|
|
||||||
```css
|
|
||||||
.text-gradient /* Градиентный текст */
|
|
||||||
/* Градиентный текст */
|
|
||||||
/* Градиентный текст */
|
|
||||||
/* Градиентный текст */
|
|
||||||
.bg-gradient-primary /* Градиентный фон */
|
|
||||||
.border-gradient; /* Градиентная рамка */
|
|
||||||
```
|
|
||||||
|
|
||||||
**Использование:**
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
<h1 className="text-gradient">Заголовок с градиентом</h1>
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✨ Анимации
|
|
||||||
|
|
||||||
### Framer Motion паттерны
|
|
||||||
|
|
||||||
#### 1. Fade-in + Slide-up (для заголовков)
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.5 }}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. Stagger (для списков)
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// Используйте готовые варианты из 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 эффекты
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
whileHover={{ y: -5, scale: 1.02 }}
|
|
||||||
transition={{ type: "spring", stiffness: 300 }}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 4. Анимированный счетчик (StatCard)
|
|
||||||
|
|
||||||
Автоматически анимирует числовые значения при появлении в viewport.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 Как изменять шаблон
|
|
||||||
|
|
||||||
### Быстрый старт
|
|
||||||
|
|
||||||
1. **Изменить брендинг:**
|
|
||||||
|
|
||||||
- Замените "TaskFlow" на название вашего продукта
|
|
||||||
- Обновите логотип в `Header` и `Footer`
|
|
||||||
- Измените цвета в `globals.css`
|
|
||||||
|
|
||||||
2. **Изменить контент:**
|
|
||||||
|
|
||||||
- Откройте нужный widget в `src/widgets/`
|
|
||||||
- Найдите массив с данными (features, testimonials, etc.)
|
|
||||||
- Замените текст и изображения
|
|
||||||
|
|
||||||
3. **Добавить/удалить секции:**
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// src/app/page.tsx
|
|
||||||
export default function Home() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
<main>
|
|
||||||
<HeroSection />
|
|
||||||
{/* Добавьте или удалите секции здесь */}
|
|
||||||
<YourCustomSection />
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
4. **Изменить порядок секций:**
|
|
||||||
Просто поменяйте местами компоненты в `page.tsx`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Создание новой секции
|
|
||||||
|
|
||||||
1. Создайте файл `src/widgets/your-section.tsx`:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
"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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Импортируйте в `page.tsx`:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
import { YourSection } from "@/widgets/your-section";
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Добавьте в композицию:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
<YourSection />
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Создание нового feature-компонента
|
|
||||||
|
|
||||||
1. Создайте файл `src/features/your-card.tsx`:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
"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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Используйте в widget:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
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+ готовых компонентов
|
|
||||||
✅ **Чистый код** - комментарии и документация
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Для ИИ-ассистентов
|
|
||||||
|
|
||||||
Этот шаблон специально оптимизирован для работы с ИИ:
|
|
||||||
|
|
||||||
1. **Понятная структура** - FSD методология
|
|
||||||
2. **Изолированные компоненты** - легко заменять
|
|
||||||
3. **Подробные props** - TypeScript интерфейсы
|
|
||||||
4. **Комментарии в коде** - объяснения назначения
|
|
||||||
5. **Примеры данных** - в каждом widget
|
|
||||||
6. **Модульность** - добавляй/удаляй секции без проблем
|
|
||||||
|
|
||||||
### Типичные задачи для ИИ:
|
|
||||||
|
|
||||||
**"Измени цвета на зеленый"**
|
|
||||||
→ Обнови переменные в `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** - Темизация
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🤝 Поддержка
|
|
||||||
|
|
||||||
Этот шаблон создан как база для ИИ-генерации уникальных лендингов. Изучите структуру, измените контент под ваш продукт, и получите профессиональную продающую страницу!
|
|
||||||
|
|
||||||
**Успешной адаптации! 🚀**
|
|
||||||
Reference in New Issue
Block a user