Motiva
Мои коллекции
← каталог

Landing Podcast

Подкаст — архетип «шоу»: продаётся привычка слушать. Полоса платформ сразу под hero (до маркетинга), выпуски указателем, видеоверсия фасадом, двое ведущих и «третий стул», цитаты слушателей лентой; в сокете hero — interactive-dot-grid как эквалайзер без буквальности.

cssloadscrollrevealbasic~14 КБreduced-motion ✓
↗
↕ демо длиннее кадра — прокрутите его

Установка

npx shadcn@latest add https://motiva.pages.dev/r/landing-podcast.json
Что нужно в проекте до установки
  1. Файл components.json в корне

    Из него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:

    "aliases": { "components": "@/components", "lib": "@/lib" }

    Нет файла — установка не начнётся вовсе.

  2. Алиас @ объявлен дважды

    В корневом tsconfig.json и в конфиге сборщика. В Vite корневой tsconfig часто содержит только references — этого мало.

    "paths": { "@/*": ["./src/*"] }        // tsconfig.json
    resolve.alias = { "@": "/src" }        // vite.config.ts

    Без paths CLI молча создаёт папку с именем @.

  3. Токены подключены один раз на приложение

    Они приезжают вместе с записью — достаточно импортировать их в точке входа:

    import "@/styles/motiva-tokens.css";

    Без них блок потеряет цвета, ритм и тему.

  4. Своя типографика не спорит с блоком

    Наследуемые свойства протекают внутрь: text-align: center на обёртке отцентрует содержимое секции. То же касается font-familyи line-height.

  5. Проект без TypeScript? всё равно нужен tsconfig

    CLI грузит tsconfig.json безусловно, а при "tsx": false идёт за jsconfig.json и падает так же. Минимум — файл с pathsи "tsx": true в components.json.

    Приехавший рядом .tsx можно не трогать — вам нужен .vanilla.js.

Экспорт

↓ Скачать .zip

Код

import { NavBlend } from "@/components/nav-blend";
import { HeroCentered } from "@/components/hero-centered";
import { InteractiveDotGrid } from "@/components/interactive-dot-grid";
import { LogosStrip } from "@/components/logos-strip";
import { BlogIndex } from "@/components/blog-index";
import { VideoFacade } from "@/components/video-facade";
import { TeamGrid } from "@/components/team-grid";
import { TestimonialsMarquee } from "@/components/testimonials-marquee";
import { NewsletterInline } from "@/components/newsletter-inline";
import { FooterMinimal } from "@/components/footer-minimal";

/**
 * Подкаст — архетип «шоу»: продаётся ПРИВЫЧКА СЛУШАТЬ, поэтому первым делом —
 * где слушать (полоса платформ сразу под hero, до всякого маркетинга), затем
 * свежие выпуски указателем (blog-index в роли списка эпизодов), видеоверсия
 * фасадом, двое ведущих и постоянные гости сеткой, цитаты слушателей лентой.
 * Подписка на дайджест — в конце: сначала дать послушать.
 *
 * В сокете hero — interactive-dot-grid: точечная сетка, дышащая под курсором, —
 * эквалайзер без буквальной волны (своя тёмная подложка, светлой теме
 * не страшно). Акцент — тёплый янтарь студийной лампы (--ds-accent-h: 55).
 */
export function LandingPodcast() {
  return (
    <div
      className="lpc ds-scope"
      style={{
        textAlign: "start",
        ["--ds-accent-h" as string]: "55",
        ["--ds-section-y" as string]: "clamp(44px, 6.5vw, 88px)",
        background: "var(--ds-bg, oklch(0.14 0.02 275))",
      }}
    >
      <NavBlend brand="шум/сигнал" links={["Выпуски", "Ведущие", "Видео"]} cta="Слушать" />

      <HeroCentered
        badge="подкаст о технологиях · выходит по средам"
        title="Разговоры длиннее ленты"
        accentWords={2}
        sub="Час в неделю о том, как техника меняет работу и быт — без хайпа, зато с людьми, которые делают её руками. Сто сорок выпусков, и мы только разогрелись."
        primary="Свежий выпуск"
        secondary="С чего начать"
        note="час в неделю · по средам · без рекламы казино"
        background={<InteractiveDotGrid />}
        tone="dark"
        scrim={0.55}
      />

      <LogosStrip
        caption="слушайте на любой площадке"
        items={["Подкасты Apple", "Яндекс Музыка", "Spotify", "Castbox", "Overcast", "Pocket Casts", "RSS"]}
      />

      <BlogIndex
        eyebrow="сезон 6"
        title="Свежие выпуски"
        items={[
          { title: "№140 · Почему все пишут свой мессенджер", tag: "разговор", date: "среда", image: "https://motiva.pages.dev/img/1016-900x675.jpg" },
          { title: "№139 · Инженер дата-центра: смена под гул", tag: "профессия", date: "неделю назад", image: "https://motiva.pages.dev/img/1043-900x675.jpg" },
          { title: "№138 · Локальные модели дома: зачем и почём", tag: "практика", date: "две недели", image: "https://motiva.pages.dev/img/1057-900x675.jpg" },
          { title: "№137 · Клавиатуры как хобби, диагноз и рынок", tag: "залипание", date: "три недели", image: "https://motiva.pages.dev/img/1082-1600x1000.jpg" },
        ]}
      />

      <VideoFacade
        eyebrow="видеоверсия"
        title="Смотреть, как мы это записываем"
        sub="Полные видеоверсии — для тех, кому важны лица и жесты. Аудио остаётся главным форматом."
        src="https://motiva.pages.dev/video/mesh-1280x720.mp4"
        poster="https://motiva.pages.dev/video/mesh-1280x720-poster.jpg"
        duration="58:12"
        caption="выпуск №140, видеоверсия"
      />

      <TeamGrid
        eyebrow="кто в эфире"
        title="Двое ведущих и вечный третий стул"
        sub="Третий стул — для гостя. За шесть сезонов на нём сидели сто десять человек."
        items={[
          { name: "Лев Гордин", role: "ведущий · «за технику»", photo: "https://motiva.pages.dev/img/1015-600x750.jpg", about: "Инженер с двадцатилетним стажем. Верит логам, а не презентациям." },
          { name: "Соня Брагина", role: "ведущая · «за людей»", photo: "https://motiva.pages.dev/img/1021-600x750.jpg", about: "Продакт и бывший журналист. Задаёт вопрос «зачем» до тех пор, пока не страшно." },
          { name: "Гость недели", role: "третий стул", photo: "https://motiva.pages.dev/img/1029-600x750.jpg", about: "Инженеры, врачи, фермеры и один диспетчер порта. Пишите, если вам есть что рассказать." },
        ]}
      />

      <TestimonialsMarquee
        eyebrow="слушатели"
        title="Из отзывов на площадках"
        items={[
          { text: "Единственный подкаст, где слово «нейросеть» произносят реже, чем «зарплата инженера».", name: "оценка 5/5", role: "Подкасты Apple" },
          { text: "Слушаю на пробежке: час выпуска — ровно десять километров. Расписание тренировок теперь по средам.", name: "оценка 5/5", role: "Яндекс Музыка" },
          { text: "Выпуск про дата-центр переслушал трижды. Это уровень хорошего документального кино, только ушами.", name: "оценка 5/5", role: "Spotify" },
          { text: "Спорят так, что хочется вставить своё слово. Пару раз писал в чат — зачитали в эфире.", name: "оценка 4/5", role: "Overcast" },
          { text: "Начал с подборки «с чего начать» — за месяц догнал все шесть сезонов. Штраф за продуктивность на вас.", name: "оценка 5/5", role: "Pocket Casts" },
          { text: "Реклама только своя и её мало. Так можно было, оказывается.", name: "оценка 5/5", role: "Castbox" },
        ]}
      />

      <NewsletterInline
        eyebrow="дайджест"
        title="Письмо к каждому выпуску"
        sub="Тезисы, ссылки из разговора и таймкоды — в почту утром в среду."
        buttonLabel="Подписаться"
        note="Никакого спама — одно письмо в неделю"
      />

      <FooterMinimal
        brand="шум/сигнал"
        tagline="Подкаст о технологиях. Час в неделю, по средам, шестой сезон."
        columns={[
          { title: "Слушать", links: ["Свежий выпуск", "С чего начать", "Все сезоны"] },
          { title: "Связь", links: ["Чат слушателей", "Предложить гостя", "ether@signal.fm"] },
        ]}
      />
    </div>
  );
}
лицензия: MITавтор: Motivaисточник: оригинал (Motiva)v1.0.0