feat: revamp offer pages with dynamic slots, timeline infographic and copy updates

- Rewrite offer copy for sharper messaging across all 4 pages
- Add hash-based slot decrement and count-up animation in offer-dates.ts
- Replace step-based process infographic with horizontal timeline bars
- Add availability urgency states (low/critical) with fade-in animation
- Increase slot count from 5 to 10 per month

Author: baslie

src/pages/offer/1.astro

@@ -15,11 +15,11 @@ import OfferFooter from '../../components/offer/OfferFooter.astro';
     ctaHref="/offer/2"
     eagerPhoto={true}
   >
-    <p>Вы решили сделать сайт. Открыли поиск — и начались варианты, каждый из которых чем-то да не устраивает.</p>
-    <p><strong>Студия.</strong> От 100 тысяч рублей. Несколько недель только на согласование макетов. Бесконечная цепочка менеджеров, дизайнеров, верстальщиков. Результат может быть хорошим, но путь к нему — долгий и дорогой.</p>
-    <p><strong>Фрилансер на Тильде.</strong> Дешевле — от 15–20 тысяч (обычный ценник новичков). Но сайт выглядит как сайт на Тильде: шаблонная структура, медленная загрузка, ежемесячная подписка за платформу. А если фрилансер использует зероблоки, чтобы сделать красивее — вы потом, скорее всего, не сможете ничего поменять сами, придётся снова обращаться к дизайнеру.</p>
-    <p><strong>Собрать самому.</strong> Убить несколько недель. Получить что-то, за что немного неловко перед клиентами. Потому что вы не дизайнер — и это нормально.</p>
-    <p><strong>ИИ-агенты и онлайн-генераторы.</strong> Страница за один промпт. Без понимания вашего бизнеса, без структуры, без внятных текстов. Экономия на спичках.</p>
+    <p>Вам нужен сайт. Не «когда-нибудь потом», а сейчас. Вы открываете поиск — и понимаете, что ни один вариант не подходит целиком.</p>
+    <p><strong>Студия.</strong> От 100 тысяч. Недели на согласование макетов. Менеджеры, дизайнеры, верстальщики — цепочка, в которой теряется время и деньги. Результат может быть хорошим, но вы заплатите за процесс, а не за итог.</p>
+    <p><strong>Фрилансер на Тильде.</strong> От 15–20 тысяч. Но сайт выглядит как Тильда: шаблонная структура, медленная загрузка, подписка за платформу. А если фрилансер уходит в зероблоки ради красоты — менять что-либо потом вы не сможете без него.</p>
+    <p><strong>Собрать самому.</strong> Несколько недель вечерами. Результат, за который неловко перед клиентами. Вы не дизайнер — и не должны им быть.</p>
+    <p><strong>ИИ-генераторы.</strong> Страница за минуту. Без понимания бизнеса, без структуры, без текстов, которые продают. Выглядит как сайт, но не работает как сайт.</p>
     <p>В итоге вы либо переплачиваете, либо получаете компромисс, с которым потом живёте. Но есть и другой путь.</p>
 
     <OfferFooter slot="footer" />

src/pages/offer/2.astro

@@ -13,46 +13,38 @@ import OfferFooter from '../../components/offer/OfferFooter.astro';
     ctaText="Как устроен процесс?"
     ctaHref="/offer/3"
   >
-    <p>Меня зовут Роман Пуртов. Я делаю сайты с 2018 года — начинал на Тильде и конструкторах, прошёл через десятки проектов в разных нишах. Параллельно занимался маркетингом: запускал рекламу, строил воронки продаж, помогал бизнесам выходить на обороты в миллионы рублей в месяц.</p>
+    <p>Меня зовут Роман Пуртов. Я делаю сайты с 2013 года — начинал с HTML-вёрстки, продолжил на конструкторах и Тильде, прошёл через десятки проектов в разных нишах. Параллельно занимался маркетингом: запускал рекламу, строил воронки продаж, помогал бизнесам выходить на обороты в миллионы рублей в месяц.</p>
     <p>Классический процесс создания сайта устроен избыточно. Сначала рисуется макет в Figma — это дни или недели. Потом этот макет «переводится» в код — ещё столько же. Два этапа, которые по сути делают одно и то же.</p>
     <p>Я объединил их в один. Проектирую сайт сразу как готовый продукт — то, что вы видите на экране, уже является рабочим сайтом, а не картинкой в дизайн-программе.</p>
 
     <div class="o3-process" aria-label="Сравнение подходов по времени">
       <p class="o3-process-title">Где теряются сроки</p>
 
-      <div class="o3-process-row">
-        <div class="o3-process-head">
-          <span class="o3-process-label">Обычный подход</span>
-          <span class="o3-process-time">Обычно: недели</span>
-        </div>
-        <div class="o3-process-steps">
-          <div class="o3-process-step">
-            <span class="o3-process-step-dot">1</span>
-            <span>Дизайн в Figma</span>
-          </div>
-          <span class="o3-process-arrow">+</span>
-          <div class="o3-process-step">
-            <span class="o3-process-step-dot">2</span>
-            <span>Вёрстка в код</span>
+      <div class="o3-timeline-row">
+        <span class="o3-timeline-label">Обычный подход</span>
+        <div class="o3-timeline-track">
+          <div class="o3-timeline-bar o3-timeline-bar--default" style="width:100%">
+            <span class="o3-timeline-seg">Дизайн в Figma</span>
+            <span class="o3-timeline-sep">+</span>
+            <span class="o3-timeline-seg">Вёрстка в код</span>
           </div>
+          <span class="o3-timeline-time">~недели</span>
         </div>
       </div>
 
-      <div class="o3-process-row o3-process-row--highlight">
-        <div class="o3-process-head">
-          <span class="o3-process-label">Мой подход</span>
-          <span class="o3-process-time">Обычно: дни</span>
-        </div>
-        <div class="o3-process-steps">
-          <div class="o3-process-step o3-process-step--accent">
-            <span class="o3-process-step-dot o3-process-step-dot--accent">1</span>
-            <span>Сразу делаю дизайн как рабочий сайт</span>
+      <div class="o3-timeline-row">
+        <span class="o3-timeline-label o3-timeline-label--accent">Мой подход</span>
+        <div class="o3-timeline-track">
+          <div class="o3-timeline-bar o3-timeline-bar--accent" style="width:45%">
+            <span class="o3-timeline-seg">Сразу рабочий сайт</span>
           </div>
+          <span class="o3-timeline-time">~дни</span>
         </div>
       </div>
     </div>
 
-    <p>Сайт готов за дни, а не недели. Страницы грузятся за секунду. Сайт нормально находится в Яндексе и Google. И главное — он полностью принадлежит вам. Никаких ежемесячных платежей за платформу. При этом стоит это не как студийная разработка.</p>
+    <p>Сайт готов за дни, а не недели. Страницы грузятся за секунду. Сайт нормально находится в Яндексе и Google. И главное — он полностью принадлежит вам. Никаких ежемесячных платежей за платформу. При этом сто́ит это не как студийная разработка.</p>
+    <p>«А если нужно что-то поменять на сайте — текст, фото, контакты?» Мелкие правки я делаю бесплатно. Для более крупных задач стоимость обсудим отдельно — но даже несколько платных доработок в год обойдутся дешевле, чем ежемесячная подписка на конструктор.</p>
 
     <OfferFooter slot="footer" />
   </Offer03Card>

src/pages/offer/3.astro

@@ -8,16 +8,16 @@ import OfferFooter from '../../components/offer/OfferFooter.astro';
   <Offer03Card
     photo="/images/offer/03/03.jpg"
     photoAlt="Роман Пуртов за работой"
-    superTitle="Понятные этапы, результат на каждом шаге"
+    superTitle="Понятные этапы = результат на каждом шаге"
     heading="От разговора до готового сайта — 5 шагов"
     ctaText="Сколько это стоит?"
     ctaHref="/offer/4"
   >
-    <p><strong>1. Разговор.</strong> Созваниваемся на 30–40 минут. Разбираемся, что за бизнес, кто ваши клиенты, какую задачу должен решать сайт.</p>
-    <p><strong>2. Текстовый скелет.</strong> Составляю структуру: какие блоки, в каком порядке, с какими заголовками и текстами. Вы читаете, вносите правки — фиксируем.</p>
-    <p><strong>3. Визуальный вайрфрейм.</strong> Превращаю скелет в наглядную схему — уже в браузере. Можно потрогать и покрутить с телефона или компьютера.</p>
+    <p><strong>1. Разговор.</strong> Созваниваемся на 30–40 минут. Разбираемся, какую задачу должен решать сайт, кто будет его смотреть и какой результат вы хотите получить.</p>
+    <p><strong>2. Текстовый прототип.</strong> Составляю структуру: какие блоки, в каком порядке, с какими заголовками и текстами. Вы читаете, вносите правки — фиксируем.</p>
+    <p><strong>3. Визуальный вайрфрейм.</strong> Превращаю прототип в наглядную схему — уже в браузере. Можно потрогать и покрутить с телефона и компьютера.</p>
     <p><strong>4. Готовый сайт.</strong> Финальный дизайн: цвета, шрифты, изображения, анимации. Это уже рабочий сайт — адаптивный, быстрый, с формой заявки.</p>
-    <p><strong>5. Запуск.</strong> Размещаю на хостинге, настраиваю формы, прописываю SEO-основу. Сайт работает и принимает заявки.</p>
+    <p><strong>5. Запуск.</strong> Размещаю на хостинге, настраиваю формы, закладываю SEO-основу. Сайт работает, принимает и отправляет заявки.</p>
     <p>После запуска остаюсь на связи. Если нужно поменять текст, заменить фото или подправить мелочи — сделаю бесплатно. Для более крупных доработок обсудим стоимость отдельно.</p>
 
     <OfferFooter slot="footer" />

src/pages/offer/4.astro

@@ -12,7 +12,7 @@ import OfferFooter from '../../components/offer/OfferFooter.astro';
   >
     <Fragment slot="heading">Лендинг за 2 рабочих дня — <span class="o3-price-old">50 000 &#8381;</span> <span class="o3-price-new">35 000 &#8381;</span></Fragment>
 
-    <p data-offer-date="monthLimit">В апреле я беру только 5 проектов. Не больше — потому что каждым занимаюсь лично, в полном фокусе, без параллельных задач на фоне.</p>
+    <p data-offer-date="monthLimit">В апреле я беру только 10 проектов. Не больше — потому что каждым занимаюсь лично, в полном фокусе, без параллельных задач на фоне.</p>
     <p>Это не урезанный продукт и не «сайт-визитка на одну страничку». Это полноценный лендинг с проработанной структурой, дизайном с нуля и всем, что нужно для запуска.</p>
 
     <div class="o3-checklist-wrap">
@@ -55,7 +55,7 @@ import OfferFooter from '../../components/offer/OfferFooter.astro';
 
     <div class="o3-availability" data-offer-date="availability">
       <span class="o3-dot"></span>
-      Свободно: 5 из 5 мест на апрель
+      Свободно: 10 из 10 мест на апрель
     </div>
 
     <div class="o3-form-wrap">

src/scripts/offer-dates.ts

@@ -2,8 +2,63 @@ const ACC = ['январь','февраль','март','апрель','май',
 const PREP = ['январе','феврале','марте','апреле','мае','июне','июле','августе','сентябре','октябре','ноябре','декабре'];
 
 const FINAL_WEEK_THRESHOLD = 7;
-const SLOTS_SINGLE = 5;
-const SLOTS_DOUBLE = 10;
+const SLOTS_SINGLE = 10;
+const SLOTS_DOUBLE = 20;
+
+/* ---------- hash & fake-decrement ---------- */
+
+function splitmix(seed: number): number {
+  let h = (seed + 0x9e3779b9) >>> 0;
+  h = ((h ^ (h >>> 16)) * 0x85ebca6b) >>> 0;
+  h = ((h ^ (h >>> 13)) * 0xc2b2ae35) >>> 0;
+  return (h ^ (h >>> 16)) >>> 0;
+}
+
+function getSlotsTaken(totalSlots: number, year: number, month: number, day: number): number {
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+  // Collect working days starting from day 2
+  const workingDays: number[] = [];
+  for (let d = 2; d <= daysInMonth; d++) {
+    const dow = new Date(year, month, d).getDay();
+    if (dow !== 0 && dow !== 6) workingDays.push(d);
+  }
+
+  // Pick `totalSlots` days from working days using hash
+  const takenDays: number[] = [];
+  const pool = [...workingDays];
+
+  for (let i = 0; i < totalSlots && pool.length > 0; i++) {
+    const h = splitmix(year * 374761 + month * 668265 + i * 119873);
+    const norm = h / 0xFFFFFFFF;
+    const biased = Math.pow(norm, 0.7); // slight front-loading
+    const idx = Math.min(Math.floor(biased * pool.length), pool.length - 1);
+    takenDays.push(pool[idx]);
+    pool.splice(idx, 1);
+  }
+
+  // Count how many "taken" days have passed
+  const taken = takenDays.filter(d => d <= day).length;
+
+  // Always keep at least 1 slot free
+  return Math.min(taken, totalSlots - 1);
+}
+
+/* ---------- count-up animation ---------- */
+
+function animateCount(el: HTMLElement, target: number, duration = 600) {
+  if (target <= 0) { el.textContent = '0'; return; }
+  const start = performance.now();
+  const step = (now: number) => {
+    const progress = Math.min((now - start) / duration, 1);
+    const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
+    el.textContent = String(Math.round(eased * target));
+    if (progress < 1) requestAnimationFrame(step);
+  };
+  requestAnimationFrame(step);
+}
+
+/* ---------- main ---------- */
 
 const now = new Date();
 const month = now.getMonth();
@@ -17,36 +72,53 @@ const nextYear = month === 11 ? year + 1 : year;
 
 const isDouble = daysLeft <= FINAL_WEEK_THRESHOLD;
 const slots = isDouble ? SLOTS_DOUBLE : SLOTS_SINGLE;
+const taken = getSlotsTaken(SLOTS_SINGLE, year, month, day);
+const free = slots - taken;
 
-// superTitle: "Специальное предложение на апрель 2026" или "на апрель–май 2026"
+// superTitle
 const superEl = document.querySelector<HTMLElement>('.o3-super');
 if (superEl) {
-  if (isDouble) {
-    superEl.textContent = `Специальное предложение на ${ACC[month]}–${ACC[nextMonth]} ${nextYear}`;
-  } else {
-    superEl.textContent = `Специальное предложение на ${ACC[month]} ${year}`;
-  }
+  superEl.textContent = isDouble
+    ? `Специальное предложение на ${ACC[month]}–${ACC[nextMonth]} ${nextYear}`
+    : `Специальное предложение на ${ACC[month]} ${year}`;
 }
 
-// monthLimit: "В апреле я беру только 5 проектов" или "В апреле–мае я беру только 10 проектов"
+// monthLimit
 const limitEl = document.querySelector<HTMLElement>('[data-offer-date="monthLimit"]');
 if (limitEl) {
   const rest = '. Не больше — потому что каждым занимаюсь лично, в полном фокусе, без параллельных задач на фоне.';
-  if (isDouble) {
-    limitEl.textContent = `В ${PREP[month]}–${PREP[nextMonth]} я беру только ${slots} проектов${rest}`;
-  } else {
-    limitEl.textContent = `В ${PREP[month]} я беру только ${slots} проектов${rest}`;
-  }
+  limitEl.textContent = isDouble
+    ? `В ${PREP[month]}–${PREP[nextMonth]} я беру только ${slots} проектов${rest}`
+    : `В ${PREP[month]} я беру только ${slots} проектов${rest}`;
 }
 
-// availability: "Свободно: 5 из 5 мест на апрель" или "10 из 10 мест на апрель–май"
+// availability
 const availEl = document.querySelector<HTMLElement>('[data-offer-date="availability"]');
 if (availEl) {
   const dot = availEl.querySelector('.o3-dot');
-  if (isDouble) {
-    availEl.textContent = `Свободно: ${slots} из ${slots} мест на ${ACC[month]}–${ACC[nextMonth]}`;
-  } else {
-    availEl.textContent = `Свободно: ${slots} из ${slots} мест на ${ACC[month]}`;
+  const monthLabel = isDouble ? `${ACC[month]}–${ACC[nextMonth]}` : ACC[month];
+
+  // Build content with a span for the animated number
+  const countSpan = document.createElement('span');
+  countSpan.className = 'o3-free-count';
+  countSpan.textContent = '0';
+
+  availEl.textContent = '';
+  if (dot) availEl.appendChild(dot);
+  availEl.appendChild(document.createTextNode(' Свободно: '));
+  availEl.appendChild(countSpan);
+  availEl.appendChild(document.createTextNode(` из ${slots} мест на ${monthLabel}`));
+
+  // Urgency classes
+  if (free <= 1) {
+    availEl.classList.add('is-critical');
+  } else if (free <= 3) {
+    availEl.classList.add('is-low');
   }
-  if (dot) availEl.prepend(dot);
+
+  // Fade-in + count-up
+  requestAnimationFrame(() => {
+    availEl.classList.add('is-visible');
+    animateCount(countSpan, free);
+  });
 }