Landing Page на Astro: Создаём конверсионный лендинг

---
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro';
import Hero from '../sections/Hero.astro';
import Features from '../sections/Features.astro';
import HowItWorks from '../sections/HowItWorks.astro';
import Testimonials from '../sections/Testimonials.astro';
import Pricing from '../sections/Pricing.astro';
import FAQ from '../sections/FAQ.astro';
import CTA from '../sections/CTA.astro';
---

<BaseLayout title="..." description="...">
  <Hero />
  <!-- Заголовок + подзаголовок + CTA -->
  <Features />
  <!-- Преимущества продукта -->
  <HowItWorks />
  <!-- Как это работает: 3 шага -->
  <Testimonials />
  <!-- Отзывы/социальные доказательства -->
  <Pricing />
  <!-- Тарифные планы -->
  <FAQ />
  <!-- Частые вопросы -->
  <CTA />
  <!-- Финальный призыв к действию -->
</BaseLayout>

---
// src/sections/Hero.astro
// Форма захвата лидов — Preact-остров
import LeadForm from '../components/LeadForm.tsx';
---

<section class="hero">
  <!-- Бейдж-якорь доверия -->
  <div class="hero__badge">✅ 2 000+ клиентов уже используют</div>

  <!-- H1 — главный заголовок с выгодой -->
  <h1 class="hero__headline">
    Создайте сайт за 30 минут<br />
    <span class="gradient-text">без разработчиков</span>
  </h1>

  <!-- Подзаголовок — конкретика -->
  <p class="hero__subheadline">
    Astro-конструктор для малого бизнеса. PageSpeed 100, домен в подарок, деплой одной
    кнопкой. Без ежемесячной платы.
  </p>

  <!-- CTA — конкретное действие -->
  <div class="hero__cta">
    <LeadForm client:load />
    <p class="hero__social-proof">Бесплатно 14 дней · Без карты · Отмена в 1 клик</p>
  </div>

  <!-- Визуальное доказательство -->
  <img
    src="/screenshot-dashboard.webp"
    alt="Скриншот интерфейса платформы"
    width="1200"
    height="680"
    loading="eager"
    fetchpriority="high"
  />
</section>

---
// src/components/AnimatedSection.astro
---

<div class="animate-on-scroll">
  <slot />
</div>

<script>
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((el) => {
        if (el.isIntersecting) {
          el.target.classList.add('is-visible');
          observer.unobserve(el.target);
        }
      });
    },
    { threshold: 0.1 },
  );

  document.querySelectorAll('.animate-on-scroll').forEach((el) => observer.observe(el));
</script>

<style>
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
  }
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
  }
</style>

// src/components/LeadForm.tsx
import { useState } from 'preact/hooks';

interface Props {
  action?: string;
  buttonText?: string;
}

export default function LeadForm({
  action = '/api/leads',
  buttonText = 'Начать бесплатно →',
}: Props) {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState<'idle' | 'loading' | 'done'>('idle');

  async function submit(e: Event) {
    e.preventDefault();
    setStatus('loading');
    await fetch(action, {
      method: 'POST',
      body: JSON.stringify({ email }),
      headers: { 'Content-Type': 'application/json' },
    });
    setStatus('done');
  }

  if (status === 'done') {
    return <p>🎉 Отлично! Проверьте email — отправили доступ.</p>;
  }

  return (
    <form onSubmit={submit} class="lead-form">
      <input
        type="email"
        value={email}
        onInput={(e) => setEmail((e.target as HTMLInputElement).value)}
        placeholder="Ваш email"
        required
      />
      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? '...' : buttonText}
      </button>
    </form>
  );
}

---
const features = [
  {
    icon: 'bolt',
    title: 'Скорость без компромиссов',
    description:
      'PageSpeed 100 из коробки. Время до первого байта — 20 мс с Cloudflare CDN.',
  },
  {
    icon: 'shield',
    title: 'Безопасность',
    description: 'Статические файлы — нет PHP, нет базы данных. Нечего взламывать.',
  },
  {
    icon: 'savings',
    title: 'Бесплатный хостинг',
    description: 'Cloudflare Pages — бесплатно до 100K запросов в день.',
  },
];
---

<section class="features">
  <h2>Почему выбирают нас</h2>
  <div class="features-grid">
    {
      features.map((f) => (
        <div class="feature-card">
          <span class="material-symbols-outlined">{f.icon}</span>
          <h3>{f.title}</h3>
          <p>{f.description}</p>
        </div>
      ))
    }
  </div>
</section>

---
// Ключевое слово: "конструктор сайтов для бизнеса"
---

<BaseLayout
  title="Конструктор сайтов для малого бизнеса | YourProduct"
  description="Создайте профессиональный сайт за 30 минут. PageSpeed 100, домен в подарок. Бесплатный пробный период."
/>

---
const schema = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  name: 'YourProduct',
  applicationCategory: 'WebApplication',
  offers: {
    '@type': 'Offer',
    price: '0',
    priceCurrency: 'RUB',
    description: 'Бесплатный период 14 дней',
  },
  aggregateRating: {
    '@type': 'AggregateRating',
    ratingValue: '4.8',
    ratingCount: '2000',
  },
};
---

<script type="application/ld+json" set:html={JSON.stringify(schema)} />