feat: add offer/02 page and update README quick start

- Add new offer page with hero section and Telegram CTA
- Add quick start section to README
- Update devalue dependency

Author: baslie

README.md

@@ -12,6 +12,14 @@
 
 ## Разработка
 
+**Быстрый старт:**
+
+```bash
+npm install && npm run dev
+```
+
+**Все команды:**
+
 ```bash
 npm install              # установка зависимостей
 npm run dev              # dev-сервер с HMR

package-lock.json

@@ -0,0 +1,76 @@
+---
+import Base from '../../layouts/Base.astro';
+import CornerNav from '../../components/CornerNav.astro';
+---
+
+<Base
+  title="Роман Пуртов — маркетолог, дизайнер, разработчик"
+  description="Создаю лендинги и сайты на чистом коде. Маркетинг, UX/UI дизайн, разработка под ключ."
+  ogUrl="https://roman-purtow.ru/offer/02"
+  canonical="https://roman-purtow.ru/offer/02"
+>
+  <CornerNav showLang={false} homeLink={true} />
+
+  <main class="relative w-screen h-auto min-h-dvh pt-[90px] px-5 pb-8 md:h-dvh md:min-h-0 md:pt-0 md:px-[clamp(20px,2.5vw,48px)] md:pb-0 overflow-hidden flex items-center justify-center bg-zinc-50 dark:bg-zinc-950">
+
+    <div class="flex flex-col gap-8 text-center w-full h-auto md:grid md:grid-cols-12 md:gap-[clamp(20px,2vw,40px)] md:h-full md:text-left items-center">
+
+      <!-- Text block: 5 колонок -->
+      <div class="flex flex-col justify-center items-center md:items-start md:col-span-5 pt-[clamp(16px,4dvh,40px)]">
+        <h1 class="text-[clamp(28px,7vw,44px)] md:text-[clamp(56px,7vw,120px)] font-bold leading-[0.93] tracking-tight text-zinc-950 dark:text-zinc-50 mb-[clamp(20px,2vw,36px)] animate-fade-in-up [animation-delay:0.1s]">
+          Маркетолог, дизайнер,<br />разработчик
+        </h1>
+        <p class="text-[clamp(15px,4vw,18px)] md:text-[clamp(18px,1.8vw,28px)] leading-[1.55] text-zinc-500 dark:text-zinc-400 mb-[28px] md:mb-[clamp(28px,2.5vw,44px)] animate-fade-in-up [animation-delay:0.25s]">
+          Создаю лендинги и сайты на чистом коде —<br class="hidden md:inline" />
+          быстрее студии, качественнее конструктора
+        </p>
+        <a
+          href="https://t.me/roman_purtow"
+          class="inline-flex items-center justify-center py-[clamp(14px,1.1vw,18px)] px-[clamp(28px,2.4vw,40px)] bg-zinc-950 dark:bg-zinc-50 text-white dark:text-zinc-950 font-semibold text-[clamp(15px,1.15vw,18px)] rounded-xl no-underline transition-[background,transform] duration-200 ease-in-out w-fit hover:bg-zinc-800 dark:hover:bg-zinc-300 hover:-translate-y-0.5 active:translate-y-0 animate-fade-in-up [animation-delay:0.4s]"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Написать в Telegram
+        </a>
+      </div>
+
+      <!-- Photo block: 7 колонок -->
+      <div class="flex items-center md:items-end justify-center h-auto flex-1 md:h-full overflow-hidden md:col-span-7 animate-fade-in-up [animation-delay:0.55s]">
+        <img
+          src="/images/offer/roman-purtow.png"
+          alt="Роман Пуртов"
+          class="w-[260px] max-w-[65vw] max-h-none md:max-h-[92dvh] md:w-auto md:max-w-full object-contain block"
+        />
+      </div>
+    </div>
+
+    <!-- Grain overlay -->
+    <div class="grain absolute inset-0 pointer-events-none opacity-[0.03]" aria-hidden="true"></div>
+  </main>
+</Base>
+
+<style>
+  :global(body)::before { display: none !important; }
+  :global(body) { background: #fafafa !important; overflow: hidden; }
+  :global(.dark body) { background: #09090b !important; }
+
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(24px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .animate-fade-in-up {
+    opacity: 0;
+    animation: fade-in-up 0.8s ease forwards;
+  }
+
+  .grain {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+    background-size: 256px 256px;
+  }
+
+  @media (max-width: 767px) {
+    :global(body) { overflow: auto !important; }
+  }
+</style>