zenkaibot_landing/index.html at main · K-Rinat/zenkaibot_landing · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Лаборатория Сафрена и Солано</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background-color: #f4fdfc;
      color: #2d2d2d;
    }
    .container {
      max-width: 960px;
      margin: 0 auto;
      padding: 40px 20px;
    }
    header {
      text-align: center;
      padding: 40px 20px;
    }
    header img {
      width: 120px;
      margin-bottom: 20px;
    }
    h1 {
      font-size: 32px;
      margin-bottom: 10px;
    }
    .subtitle {
      font-size: 18px;
      color: #555;
    }
    .button {
      background-color: #42b0a4;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 16px 24px;
      font-size: 18px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      margin-top: 30px;
    }
    .section {
      margin-top: 60px;
    }
    .section h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .features, .steps, .audience {
      display: grid;
      gap: 16px;
    }
    .quote {
      background-color: #e3f9f6;
      padding: 24px;
      border-radius: 12px;
      font-style: italic;
    }
    footer {
      text-align: center;
      font-size: 14px;
      color: #888;
      margin-top: 80px;
      padding-bottom: 40px;
    }
  </style>
</head>
<body>
  <header>
    <img src="Logo_bot.png" alt="Логотип бота" />
    <h1>Лаборатория Сафрена и Солано</h1>
    <p class="subtitle">Телеграм-бот, который помогает взрослым с СДВГ наладить жизнь — без давления, но с прогрессом</p>
    <a class="button" href="https://t.me/your_bot_link" target="_blank">Запустить бота в Telegram</a>
  </header>

  <div class="container">
    <div class="section">
      <h2>Что внутри</h2>
      <div class="features">
        <p>🌿 Микроупражнения на фокус и мотивацию</p>
        <p>🤖 Курс, созданный с помощью ИИ</p>
        <p>🧠 Научный подход без осуждения</p>
        <p>⏱ Всего 5 минут в день</p>
      </div>
    </div>

    <div class="section">
      <h2>Подходит тебе, если…</h2>
      <div class="audience">
        <p>✅ У тебя есть СДВГ (или ты подозреваешь это)</p>
        <p>✅ Сложно доводить дела до конца</p>
        <p>✅ Много вины и тревоги из-за “прокрастинации”</p>
        <p>✅ Ищешь простой, поддерживающий инструмент</p>
      </div>
    </div>

    <div class="section">
      <h2>Как это работает</h2>
      <div class="steps">
        <p>1. Жмёшь кнопку — запускается бот</p>
        <p>2. Получаешь 1-й модуль бесплатно</p>
        <p>3. Каждый день — короткий шаг</p>
        <p>4. Всё остальное — по подписке</p>
      </div>
    </div>

    <div class="section">
      <h2>Немного эмпатии</h2>
      <div class="quote">
        Ты не сломан(а). У тебя просто другой способ мышления.<br />
        Мы поможем тебе наладить свою систему — с уважением, простотой и юмором.
      </div>
    </div>

    <div class="section">
      <h2>Отзывы</h2>
      <div class="quote">
        “Это первый курс, который я не бросила. Он меня не осуждает.”<br /><br />
        “Я не верил, что бот может помочь. Но это работает.”<br /><br />
        “Каждое сообщение будто написано специально для меня.”
      </div>
    </div>

    <div class="section">
      <h2>О проекте</h2>
      <p>Контент — сгенерирован с помощью ИИ и адаптирован людьми с СДВГ.<br />Проект не заменяет врача. Это — мягкая поддержка от нейроразнообразных для нейроразнообразных.</p>
    </div>
  </div>

  <footer>
    <p>© 2025 Лаборатория Сафрена и Солано • Приватность уважается • <a href="#">Политика конфиденциальности</a></p>
  </footer>
</body>
</html>