Landing PagesБесплатно

SevenDays.pro - Лендинг страница с анимацией. Сделано с Fable 5

Лендинг сайт с динамичной анимацией, сделан через Fable 5. Продуктовая студия нового типа: MVP за 7 дней и AI-агенты для автоматизации бизнеса с измеримой прибылью.

~5 минЛёгкийREADMEИнструкция из README

Next.js 14React 18TypeScriptTailwindCSSFramer MotionGSAPScrollTriggerLenis

Читать инструкцию Master Prompt

Ценность

Вайбкодинг

3 ч

Строк кода

2800+

Аналог у студии

от 50 000 ₽

Экономия на токенах

≈ 3000 ₽

Инструкция из репозитория

SevenDays.pro

Продуктовая студия нового типа: MVP за 7 дней и AI-агенты для автоматизации бизнеса с измеримой прибылью.

Kinetic scroll-driven лендинг (Next.js) с формой заявки через SMTP и кампаниями Яндекс Директ в docs/.

Возможности · Стек · Требования · Установка · Переменные · Структура · Скрипты · Деплой · Git · Troubleshooting · Security · Документация

Возможности

Поверхность	Описание
Лендинг `/`	Одна страница: Hero → Problem → Solution → Marquee → Process → Cases → CTA → Footer
WebGL Hero	`HeroField` — fragment shader, реакция на курсор (`@react-three/fiber`)
Process	Pinned horizontal Day 1→7 timeline (GSAP ScrollTrigger)
CTA / заявка	Форма → `POST /api/contact` → письмо на `hello@sevendays.pro`
Privacy / cookies	`PrivacyModal`, `CookieBanner`
Аналитика	Yandex Metrika (инициализация в `layout.tsx`)
Маркетинг	Материалы Яндекс Директ: `docs/marketing/`, Excel: `docs/data/`

Админ-панели в репозитории нет.

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

ID	Компонент	Назначение
`#hero`	`Hero`	Headline + WebGL field + CTA
`#problem`	`Problem`	Проблематика / статистика
`#solution`	`Solution`	Три столпа решения
—	`Marquee`	Кинетическая полоса ключевых слов
`#process`	`Process`	Процесс за 7 дней
`#work`	`Cases`	Кейсы
`#cta`	`CTA`	Форма заявки
—	`Footer`	Контакты

Стек

Слой	Технология	Версия (package.json)
Framework	Next.js (App Router)	`^14.2.33`
UI	React + TypeScript	`^18.3.1` / `^5.6.3`
Styles	Tailwind CSS	`^3.4.15`
Motion	Framer Motion, GSAP, Lenis	см. dependencies
WebGL	three + R3F / drei	`^0.169.0`
Mail	nodemailer	`^8.0.10`
Marketing tooling	xlsx (dev)	`^0.18.5`

Package manager: npm (есть package-lock.json).

Требования

Node.js 18+ (рекомендуется LTS)
npm 9+
SMTP-учётные данные для отправки заявок (production и локальная проверка формы)

Отдельная БД / Redis / S3 не требуются.

Установка

Clone (SSH)

git clone git@gitverse.ru:spacemod/sevendays.pro.git
cd sevendays.pro

Доступ к remote выдаёт администратор репозитория.

Local development

npm install
cp .env.example .env.local
# заполните SMTP_* (см. docs/setup/environment.md)
npm run dev

Откройте http://localhost:3000.

Проверка формы без SMTP (только development)

Если SMTP_* не заданы, в NODE_ENV=development API логирует заявку в консоль сервера и отвечает { ok: true }.
В production без SMTP форма получит 503.

Регенерация Excel для Яндекс Директ

node scripts/generate-direct-xlsx.mjs
# → docs/data/yandex-direct.xlsx

Переменные окружения

Канонический список имён: .env.example.

Ключ	Уровень	Описание
`SMTP_HOST`	Required (prod)	SMTP-хост
`SMTP_PORT`	Recommended	По умолчанию в коде `465`
`SMTP_SECURE`	Recommended	`true` / `false`
`SMTP_USER`	Required (prod)	Логин
`SMTP_PASS`	Required (prod)	Пароль / app-password — только out-of-band

Подробнее: docs/setup/environment.md.

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

.
├── README.md
├── .env.example
├── package.json
├── next.config.mjs
├── tailwind.config.ts
├── public/
│   └── favicon.svg
├── scripts/
│   └── generate-direct-xlsx.mjs
├── docs/                         # см. docs/README.md
│   ├── marketing/yandex-direct.md
│   └── data/yandex-direct.xlsx
└── src/
    ├── app/
    │   ├── layout.tsx            # fonts, metadata, Metrika
    │   ├── page.tsx              # composition лендинга
    │   ├── globals.css
    │   └── api/contact/route.ts  # SMTP lead handler
    ├── components/
    │   ├── providers/SmoothScroll.tsx
    │   ├── three/HeroField.tsx
    │   ├── sections/             # Nav … Footer
    │   └── ui/                   # Cursor, Reveal, CookieBanner, …
    └── lib/cn.ts

Скрипты

Команда	Назначение
`npm run dev`	Dev-сервер (порт 3000)
`npm run build`	Production build
`npm run start`	Production server (порт 3000)
`npm run lint`	Next.js lint
`node scripts/generate-direct-xlsx.mjs`	Сборка Excel Директа

Production deploy

Инфраструктура: Node-хост с поддержкой Next.js (часто Vercel). Docker Compose / k8s в репо не включены.

Критично:

Задать все SMTP_* в env хоста.
npm run build → npm run start (или платформенный Next adapter).
Проверить доставку писем с формы.

Runbook: docs/ops/deploy.md.

Git workflow

Ветка	Роль
`master`	production
`develop`	интеграция
`feature/*`	задачи

Никогда не коммитить напрямую в master / develop.
Порядок: feature/* → develop → master (--no-ff).

Полное описание: docs/git/workflow.md.

Troubleshooting

Симптом	Что проверить
Hydration / `<noscript>`	Метрика и `<noscript>` должны быть внутри `<body>` (`layout.tsx`)
Форма → alert / 503	Заданы ли `SMTP_*`; в prod пустой SMTP = `503`
Письмо не приходит	Логин/пароль SMTP, порт, `SMTP_SECURE`, спам-папка
WebGL пустой	GPU / `prefers-reduced-motion`; fallback — статичный градиент
Excel не там	Генератор пишет в `docs/data/yandex-direct.xlsx`

Security для внешних разработчиков

Секреты (SMTP) выдаёт администратор out-of-band, не через git.
Не коммитить .env, .env.local, бэкапы *.bak.
Перед доступом к репо владелец ротирует секреты, которые когда-либо попадали в history.
Чеклист: docs/security/rotation-checklist.md.

Документация

Документ	Ссылка
Индекс docs	docs/README.md
Env	docs/setup/environment.md
Deploy	docs/ops/deploy.md
Git	docs/git/workflow.md
Яндекс Директ	docs/marketing/yandex-direct.md

Контакты

Продукт: https://sevendays.pro
Почта: hello@sevendays.pro

Лицензия: private ("private": true в package.json).

Master Prompt

Скопируйте в Cursor / Claude Code. Каждый copy даёт новый токен; предыдущий действует ещё 48 часов.

v1.0.0

Войдите, чтобы установить

Приложение бесплатное. Нужен аккаунт — выдадим персональный доступ к репозиторию для установки.

Войти Создать аккаунт

Changelog

v1.0.0 · 2026-07-16
Первый каталожный релиз с private repo placeholders.

Docs Prompt