html/portfolio.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Примеры работ и отзывы — Студия мультфильмов О'ляпка</title>
    <meta name="description" content="Смотрите примеры ИИ-мультиков студии О'ляпка: персональные подарки, рекламные ролики, Love Story. Реальные отзывы клиентов.">
    
    <meta property="og:type" content="website">
    <meta property="og:title" content="Примеры работ студии О'ляпка">
    <meta property="og:description" content="Авторские ИИ-мультики: подарки, реклама, Love Story. Смотрите работы и отзывы.">
    <meta property="og:image" content="https://olapka.ru/img/og-portfolio.jpg">
    <meta property="og:url" content="https://olapka.ru/portfolio.html">
    
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
    <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=Montserrat:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "Примеры работ студии О'ляпка",
        "itemListElement": [
            {"@type":"ListItem","position":1,"name":"Love Story Анны и Дмитрия","url":"https://olapka.ru/portfolio.html#work-1"},
            {"@type":"ListItem","position":2,"name":"Рекламный ролик для массажной студии","url":"https://olapka.ru/portfolio.html#work-2"},
            {"@type":"ListItem","position":3,"name":"Сказка для Миши, 5 лет","url":"https://olapka.ru/portfolio.html#work-3"}
        ]
    }
    </script>
    
    <script type="text/javascript">
       (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
       m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src="https://mc.yandex.ru/metrika/tag.js",a.parentNode.insertBefore(k,a)})
       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
       ym(110606131, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true});
    </script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=GTM-M5HGH586"></script>
    <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','GTM-M5HGH586');</script>
</head>
<body>
    <div class="cookie-banner" id="cookieBanner">
        <div class="cookie-text">Мы используем cookies. <a href="legal.html">Подробнее</a>.</div>
        <button class="cookie-btn" id="cookieAccept" data-goal="cookie_accept">Принять</button>
    </div>

    <header class="header">
        <div class="container header-inner">
            <a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
            <nav class="nav" id="nav">
                <a href="index.html" class="nav-link">Главная</a>
                <a href="services.html" class="nav-link">Услуги</a>
                <a href="portfolio.html" class="nav-link active">Работы</a>
                <a href="contacts.html" class="nav-link">Контакты</a>
            </nav>
            <a href="contacts.html" class="btn btn-primary" data-goal="order_header">Заказать</a>
            <button class="burger" id="burger" aria-label="Меню"><span></span><span></span><span></span></button>
        </div>
    </header>

    <main>
        <section class="page-hero">
            <div class="container">
                <h1 class="page-title">Наши <span class="accent">работы</span></h1>
                <p class="page-subtitle">Каждый мультик — это уникальная история. Смотрите примеры и вдохновляйтесь.</p>
            </div>
        </section>

        <!-- Примеры работ -->
        <section class="section">
            <div class="container">
                <div class="portfolio-grid">
                    <article class="work-card" id="work-1">
                        <div class="work-media">
                            <button class="work-video" type="button" data-video="video/video-1.webm" data-title="История Анны и Дмитрия" data-goal="video_open" aria-label="Смотреть видео: История Анны и Дмитрия">
                                <video class="work-video-preview" src="video/video-1.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
                                <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
                                <span class="work-video-label">Love Story</span>
                            </button>
                        </div>
                        <div class="work-info">
                            <span class="work-tag">💍 Love Story</span>
                            <h3>История Анны и Дмитрия</h3>
                            <p>Романтичный мультик о знакомстве пары, который Дмитрий подарил Анне на годовщину. 1 минута, 6 сцен, авторская озвучка.</p>
                            <div class="work-meta">
                                <span>Тариф: История</span>
                                <span>4 500 ₽</span>
                            </div>
                        </div>
                    </article>
                    <article class="work-card" id="work-2">
                        <div class="work-media">
                            <button class="work-video" type="button" data-video="video/video-2.webm" data-title="Рекламный ролик для детской массажной студии" data-goal="video_open" aria-label="Смотреть видео: Рекламный ролик для детской массажной студии">
                                <video class="work-video-preview" src="video/video-2.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
                                <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
                                <span class="work-video-label">Реклама студии</span>
                            </button>
                        </div>
                        <div class="work-info">
                            <span class="work-tag">🚀 Для бизнеса</span>
                            <h3>Рекламный ролик для детской массажной студии</h3>
                            <p>Показали пользу массажа через метафору: малыш растёт, а вместе с ним расцветает и его мир. Вирусный Reels с ростом охватов в 3 раза.</p>
                            <div class="work-meta">
                                <span>Тариф: Сказка</span>
                                <span>9 000 ₽</span>
                            </div>
                        </div>
                    </article>
                    <article class="work-card" id="work-3">
                        <div class="work-media">
                            <button class="work-video" type="button" data-video="video/video-3.webm" data-title="Миша и волшебный лес" data-goal="video_open" aria-label="Смотреть видео: Миша и волшебный лес">
                                <video class="work-video-preview" src="video/video-3.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
                                <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
                                <span class="work-video-label">Сказка для Миши</span>
                            </button>
                        </div>
                        <div class="work-info">
                            <span class="work-tag">🧸 Детская сказка</span>
                            <h3>Миша и волшебный лес</h3>
                            <p>Персональная сказка для мальчика 5 лет, где он побеждает страх темноты. Мама плакала от счастья.</p>
                            <div class="work-meta">
                                <span>Тариф: История</span>
                                <span>4 500 ₽</span>
                            </div>
                        </div>
                    </article>
                    <article class="work-card" id="work-4">
                        <div class="work-media">
                            <button class="work-video" type="button" data-video="video/video-4.webm" data-title="Юбилей мамы — 55 лет" data-goal="video_open" aria-label="Смотреть видео: Юбилей мамы — 55 лет">
                                <video class="work-video-preview" src="video/video-4.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
                                <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
                                <span class="work-video-label">Подарок маме</span>
                            </button>
                        </div>
                        <div class="work-info">
                            <span class="work-tag">🎁 Подарок</span>
                            <h3>Юбилей мамы — 55 лет</h3>
                            <p>Дети подарили маме мультик о её жизни: детство в деревне, свадьба, рождение детей. 30 гостей смотрели со слезами на глазах.</p>
                            <div class="work-meta">
                                <span>Тариф: Сказка</span>
                                <span>9 000 ₽</span>
                            </div>
                        </div>
                    </article>
                    <article class="work-card" id="work-5">
                        <div class="work-media">
                            <button class="work-video" type="button" data-video="video/video-5.webm" data-title="Серия Reels для эксперта по детскому сну" data-goal="video_open" aria-label="Смотреть видео: Серия Reels для эксперта по детскому сну">
                                <video class="work-video-preview" src="video/video-5.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
                                <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
                                <span class="work-video-label">Контент для блога</span>
                            </button>
                        </div>
                        <div class="work-info">
                            <span class="work-tag">📱 Для соцсетей</span>
                            <h3>Серия Reels для эксперта по детскому сну</h3>
                            <p>4 мультика в едином стиле для контент-плана на месяц. Сохранения выросли в 5 раз, пришли новые подписчики.</p>
                            <div class="work-meta">
                                <span>Пакет «Контент-месяц»</span>
                                <span>15 300 ₽ (со скидкой)</span>
                            </div>
                        </div>
                    </article>
                    <article class="work-card" id="work-6">
                        <div class="work-media">
                            <button class="work-video" type="button" data-video="video/video-6.webm" data-title="Поздравление с Новым годом для партнёров" data-goal="video_open" aria-label="Смотреть видео: Поздравление с Новым годом для партнёров">
                                <video class="work-video-preview" src="video/video-6.webm#t=0.1" preload="metadata" muted playsinline disablepictureinpicture tabindex="-1" aria-hidden="true"></video>
                                <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M8 5.5v13l10-6.5z" fill="currentColor"/></svg></span>
                                <span class="work-video-label">Открытка</span>
                            </button>
                        </div>
                        <div class="work-info">
                            <span class="work-tag">✨ Короткий</span>
                            <h3>Поздравление с Новым годом для партнёров</h3>
                            <p>Короткая анимированная открытка для рассылки VIP-клиентам бухгалтерской компании. Тёплое и необычное решение.</p>
                            <div class="work-meta">
                                <span>Тариф: Искры</span>
                                <span>2 500 ₽</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- Отзывы -->
        <section class="section reviews">
            <div class="container">
                <h2 class="section-title">Что говорят <span class="accent">клиенты</span></h2>
                <div class="reviews-grid">
                    <article class="review-card">
                        <div class="review-stars">★★★★★</div>
                        <p class="review-text">«Заказывали мультик на годовщину свадьбы. Муж был в полном восторге! Пересматриваем уже раз десять. Спасибо за вашу работу и душу, которую вы вкладываете!»</p>
                        <div class="review-author">
                            <div class="review-name">Анна К.</div>
                            <div class="review-role">Love Story, тариф «История»</div>
                        </div>
                    </article>
                    <article class="review-card">
                        <div class="review-stars">★★★★★</div>
                        <p class="review-text">«Рекламный ролик для нашей студии массажа превзошёл ожидания. Клиенты пишут, что именно этот мультик убедил их прийти. Охваты в Instagram выросли в 3 раза!»</p>
                        <div class="review-author">
                            <div class="review-name">Елена М.</div>
                            <div class="review-role">Детская массажная студия</div>
                        </div>
                    </article>
                    <article class="review-card">
                        <div class="review-stars">★★★★★</div>
                        <p class="review-text">«Сын смотрел мультик про себя и не мог оторваться. Спросил: "Мама, это я настоящий в мультике?" Сердце растаяло. Спасибо за волшебство!»</p>
                        <div class="review-author">
                            <div class="review-name">Ольга В.</div>
                            <div class="review-role">Сказка для ребёнка</div>
                        </div>
                    </article>
                    <article class="review-card">
                        <div class="review-stars">★★★★★</div>
                        <p class="review-text">«Заказали контент-пакет на месяц. Теперь у нас не болит голова "что постить завтра". Аудитория ждёт новые серии, сохранения бьют рекорды.»</p>
                        <div class="review-author">
                            <div class="review-name">Марина Д.</div>
                            <div class="review-role">Эксперт по детскому сну</div>
                        </div>
                    </article>
                </div>
                <div class="cta-inline">
                    <h3>Хотите так же?</h3>
                    <p>Расскажите нам о своей идее — и мы создадим мультик, который влюбит в себя.</p>
                    <a href="contacts.html" class="btn btn-primary btn-lg" data-goal="order_portfolio">Заказать мультик</a>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container footer-inner">
            <div class="footer-col">
                <a href="index.html" class="logo"><span class="logo-bird">🐦</span><span class="logo-text">О'ЛЯПКА</span></a>
                <p class="footer-about">Студия авторских ИИ-мультиков.</p>
            </div>
            <div class="footer-col">
                <h4>Навигация</h4>
                <a href="index.html">Главная</a>
                <a href="services.html">Услуги</a>
                <a href="portfolio.html">Работы</a>
                <a href="contacts.html">Контакты</a>
            </div>
            <div class="footer-col">
                <h4>Документы</h4>
                <a href="legal.html">Политика cookies</a>
                <a href="legal.html#agreement">Пользовательское соглашение</a>
            </div>
            <div class="footer-col">
                <h4>Связаться</h4>
                <a href="https://t.me/YuliaAnimation" target="_blank" rel="noopener">Telegram</a>
                <a href="https://instagram.com/yuliasl1010" target="_blank" rel="noopener">Instagram</a>
                <a href="https://vk.com/club240204788" target="_blank" rel="noopener">ВКонтакте</a>
            </div>
        </div>
        <div class="footer-bottom"><div class="container">© 2026 Студия мультфильмов О'ляпка</div></div>
    </footer>

    <!-- Видео-лайтбокс -->
    <div class="video-modal" id="videoModal" role="dialog" aria-modal="true" aria-labelledby="videoModalTitle" aria-hidden="true">
        <div class="video-modal-backdrop" data-video-close></div>
        <div class="video-modal-dialog">
            <div class="video-modal-bar">
                <span class="video-modal-title" id="videoModalTitle"></span>
                <div class="video-modal-actions">
                    <button class="video-modal-btn" type="button" id="videoModalFullscreen" aria-label="На весь экран" title="На весь экран">
                        <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <button class="video-modal-btn" type="button" data-video-close aria-label="Закрыть" title="Закрыть (Esc)">
                        <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    </button>
                </div>
            </div>
            <div class="video-modal-stage">
                <video id="videoModalPlayer" controls playsinline preload="metadata"></video>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>