Revise paste Shoptet Medailonek v5

<div class="row" style="margin-top:10px">
            <div class="col-md-6" style="margin-bottom:30px"><a href="https://www.kancelar24.cz/" target="_blank"
                    class="btn-card-hover"
                    style="background:#6262f9;border-radius:12px;padding:16px;color:#fff;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.1)"><img
                        src="https://www.webotvurci.cz/wp-content/uploads/2025/08/kancelar24.svg" alt="Kancelář24 logo"
                        style="width:100%;height:60px;background:#fff;border-radius:8px;padding:12px;margin-bottom:30px;object-fit:contain">
                    <img src="https://www.webotvurci.cz/wp-content/uploads/2025/09/kancelar24.png"
                        alt="Kancelář24 – ukázka" style="width:100%;height:auto;border-radius:8px;margin-bottom:10px">
                    <div style="margin-bottom:12px">Staráme se o kompletní vývoj front-endu e-shopu a automatizace
                        procesů. Společně ladíme každý detail.</div><span class="btn-service-hover"
                        style="background:#fff;color:#6262f9;font-weight:700;border:0;border-radius:999px;padding:10px 18px;text-align:center;display:block;text-decoration:none;margin-top:auto">Vyplout
                        na e-shop</span>
                </a></div>

<div class="col-md-6" style="margin-bottom:30px"><a href="https://www.kasumex.cz/" target="_blank"
                    class="btn-card-hover"
                    style="background:#a4262c;border-radius:12px;padding:16px;color:#fff;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.1)"><img
                        src="https://www.webotvurci.cz/wp-content/uploads/2025/08/kasumex-logo.svg" alt="Kasumex logo"
                        style="width:100%;height:60px;background:#fff;border-radius:8px;padding:12px;margin-bottom:30px;object-fit:contain">
                    <img src="https://www.webotvurci.cz/wp-content/uploads/2025/09/kasumex.png" alt="Kasumex – ukázka"
                        style="width:100%;height:auto;border-radius:8px;margin-bottom:10px">
                    <div style="margin-bottom:12px">Pro Kasumex jsme navrhli UX, grafiku a kompletní vývoj e-shopu.
                        Funkční, přehledné a na míru.</div><span class="btn-service-hover"
                        style="background:#fff;color:#a4262c;font-weight:700;border:0;border-radius:999px;padding:10px 18px;text-align:center;display:block;text-decoration:none;margin-top:auto">Vyplout
                        na e-shop</span>
                </a></div>

<div class="col-md-6" style="margin-bottom:30px">
                <div class="btn-card-hover"
                    style="background:#1468b3;border-radius:12px;padding:16px;color:#fff;height:100%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.1)">
                    <img src="https://www.webotvurci.cz/wp-content/uploads/2025/08/brain-market.svg"
                        alt="Brain Market logo"
                        style="width:100%;height:60px;background:#fff;border-radius:8px;padding:12px;margin-bottom:30px;object-fit:contain">
                    <div>Vyvinuli jsme partnerský portál, kde generují obsah uživatelé napojený na
                        automatizaci. Autenticita a efektivita na jednom místě.</div>
                </div>
            </div>

<div class="col-md-6" style="margin-bottom:30px">
                <div class="btn-card-hover"
                    style="background:#39c886;border-radius:12px;padding:16px;color:#fff;height:100%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.1)">
                    <img src="https://www.webotvurci.cz/wp-content/uploads/2025/09/krasne-vune.svg"
                        alt="Krásné Vůně logo"
                        style="width:100%;height:60px;background:#fff;border-radius:8px;padding:12px;margin-bottom:30px;object-fit:contain">
                    <div>Pomáháme s vývojem front-endu a rozvojem e-shopu. Krásné vůně si zaslouží krásnou
                        prezentaci.</div>
                </div>
            </div>
        </div>
    </section>

<section id="doplnky" style="margin-bottom:28px">
        <h2>Naše doplňky pro Shoptet</h2>
        <div class="row" style="margin-top:10px">
            <div class="col-md-6" style="margin-bottom:30px"><a href="https://doplnky.shoptet.cz/propojeni-produktu"
                    class="btn-card-hover"
                    style="background:#fff;border-radius:12px;padding:16px;color:#000b22;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.1)"><img
                        src="https://www.webotvurci.cz/wp-content/uploads/2025/08/propojeni-produktu-1.png"
                        alt="Propojení produktů" style="width:100%;height:auto;border-radius:8px;margin-bottom:10px">
                    <h3>Propojení produktů</h3>
                    <div style="margin-bottom:12px">Zákazníci najdou správnou variantu rychleji a vy získáte víc
                        objednávek. Propojení produktů v Shoptetu rozšíří možnosti variant, URL i sad produktů.</div>
                    <div
                        style="display:inline-block;margin-bottom:30px;align-self:flex-start;letter-spacing:.5px;position:absolute;right:15px;top:0;border:0;padding:4px 16px;border-radius:0 8px;background:linear-gradient(270deg,#0f38a0 0,#205aee 98.43%),linear-gradient(0deg,#205aee,#205aee);font-size:14px;color:#fff;font-weight:900;font-family:'Plus Jakarta Sans',sans-serif;text-transform:uppercase">
                        900+ INSTALACÍ</div><span class="btn-service-hover"
                        style="background:#6aeaca;color:#001b2b;font-weight:700;border:0;border-radius:999px;padding:10px 18px;text-align:center;display:inline-block;text-decoration:none;margin-top:auto">Chci
                        propojit produkty</span>
                </a></div>
                <div class="col-md-6" style="margin-bottom:30px"><a href="https://doplnky.shoptet.cz/kontaktni-formulare"
                    class="btn-card-hover"
                    style="background:#fff;border-radius:12px;padding:16px;color:#000b22;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.1)"><img
                        src="https://www.webotvurci.cz/wp-content/uploads/2025/09/kontaktni-formulare-1.png"
                        alt="Kontaktní formuláře" style="width:100%;height:auto;border-radius:8px;margin-bottom:10px">
                    <h3>Kontaktní formuláře</h3>
                    <div style="margin-bottom:12px">Vytvářejte neomezené formuláře bez programování. Vizuální editor,
                        pole na míru, přílohy, kalendář, SMTP a webhooky do Make/Sheets. Vložení kamkoli v e-shopu. 30
                        dní zdarma.</div>
                    <div
                        style="display:inline-block;margin-bottom:30px;align-self:flex-start;letter-spacing:.5px;position:absolute;right:15px;top:0;border:0;padding:4px 16px;border-radius:0 8px;background:linear-gradient(270deg,#0f38a0 0,#205aee 98.43%),linear-gradient(0deg,#205aee,#205aee);font-size:14px;color:#fff;font-weight:900;font-family:'Plus Jakarta Sans',sans-serif;text-transform:uppercase">
                        1 000+ FORMULÁŘŮ</div><span class="btn-service-hover"
                        style="background:#6aeaca;color:#001b2b;font-weight:700;border:0;border-radius:999px;padding:10px 18px;text-align:center;display:inline-block;text-decoration:none;margin-top:auto">Chci
                        formuláře</span>
                </a></div>
            <div class="col-md-6" style="margin-bottom:30px"><a href="https://doplnky.shoptet.cz/produktova-kalkulacka"
                    class="btn-card-hover"
                    style="background:#fff;border-radius:12px;padding:16px;color:#000b22;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.1)"><img
                        src="https://www.webotvurci.cz/wp-content/uploads/2025/08/produktova-kalkulacka-1.png"
                        alt="Produktová kalkulačka" style="width:100%;height:auto;border-radius:8px;margin-bottom:10px">
                    <h3>Produktová kalkulačka</h3>
                    <div style="margin-bottom:12px">Zákazník zadá rozměry, kalkulačka spočítá potřebné množství.
                        Rychlejší nákup, méně vratek, spokojenější zákazníci. Ideální pro stavebniny, podlahy či
                        obklady.</div><span class="btn-service-hover"
                        style="background:#6aeaca;color:#001b2b;font-weight:700;border:0;border-radius:999px;padding:10px 18px;text-align:center;display:inline-block;text-decoration:none;margin-top:auto">Chci
                        kalkulačku</span>
                </a></div>
            
            <div class="col-md-6" style="margin-bottom:30px"><a
                    href="https://doplnky.shoptet.cz/rozsirena-realita-u-produktu"
                    class="btn-card-hover"
                    style="background:#fff;border-radius:12px;padding:16px;color:#000b22;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.1)"><img
                        src="https://www.webotvurci.cz/wp-content/uploads/2025/09/og_rozsirena_realita_u_produktu_cz.png"
                        alt="AR zobrazovač – produkty ve 3D"
                        style="width:100%;height:auto;border-radius:8px;margin-bottom:10px">
                    <h3>Produkty e-shopu ve 3D</h3>
                    <div style="margin-bottom:12px">Dejte zákazníkům možnost vidět vaše produkty v rozšířené realitě.
                        Otočí, přiblíží a zobrazí si je přímo u sebe doma – bez aplikace, rovnou v telefonu.</div>
                    <div
                        style="display:inline-block;margin-bottom:30px;align-self:flex-start;letter-spacing:.5px;position:absolute;right:15px;top:0;border:0;padding:4px 16px;border-radius:0 8px;background:linear-gradient(270deg,#0f38a0 0,#205aee 98.43%),linear-gradient(0deg,#205aee,#205aee);font-size:14px;color:#fff;font-weight:900;font-family:'Plus Jakarta Sans',sans-serif;text-transform:uppercase">
                        Novinka</div><span class="btn-service-hover"
                        style="background:#6aeaca;color:#001b2b;font-weight:700;border:0;border-radius:999px;padding:10px 18px;text-align:center;display:inline-block;text-decoration:none;margin-top:auto">Chci
                        AR doplněk</span>
                </a></div>
            <div class="col-md-6" style="margin-bottom:30px"><a href="https://doplnky.shoptet.cz/nahrazovac-textu"
                    class="btn-card-hover"
                    style="background:#fff;border-radius:12px;padding:16px;color:#000b22;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.1)"><img
                        src="https://www.webotvurci.cz/wp-content/uploads/2025/09/nahrazovac-textu.png"
                        alt="Nahrazovač textů" style="width:100%;height:auto;border-radius:8px;margin-bottom:10px">
                    <h3>Nahrazovač textů</h3>
                    <div style="margin-bottom:12px">Zobrazujte rozdílné popisy produktů podle zákaznických skupin.
                        Koncoví uživatelé, velkoobchod nebo MLM partneři – každý uvidí informace, které jsou pro něj
                        relevantní.</div>
                    <div
                        style="display:inline-block;margin-bottom:30px;align-self:flex-start;letter-spacing:.5px;position:absolute;right:15px;top:0;border:0;padding:4px 16px;border-radius:0 8px;background:linear-gradient(270deg,#0f38a0 0,#205aee 98.43%),linear-gradient(0deg,#205aee,#205aee);font-size:14px;color:#fff;font-weight:900;font-family:'Plus Jakarta Sans',sans-serif;text-transform:uppercase">
                        NOVINKA</div><span class="btn-service-hover"
                        style="background:#6aeaca;color:#001b2b;font-weight:700;border:0;border-radius:999px;padding:10px 18px;text-align:center;display:inline-block;text-decoration:none;margin-top:auto">Chci
                        doplněk</span>
                </a></div>
            <div class="col-md-6" style="margin-bottom:30px"><a
                    href="https://doplnky.shoptet.cz/pop-up-po-oznaceni-nazvu-produktu" class="btn-card-hover"
                    style="background:#fff;border-radius:12px;padding:16px;color:#000b22;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.1)"><img
                        src="https://www.webotvurci.cz/wp-content/uploads/2025/09/og_popup_po_oznaceni_produktu_cz.png"
                        alt="Pop-up po označení názvu produktu"
                        style="width:100%;height:auto;border-radius:8px;margin-bottom:10px">
                    <h3>Pop-up po neutíkejte</h3>
                    <div style="margin-bottom:12px">Udržte zákazníka na svém e-shopu. Pop-up okno mu připomene výhody
                        nákupu u vás – od ceny po dopravu zdarma. Jednoduché, ale účinné řešení.</div><span
                        class="btn-service-hover"
                        style="background:#6aeaca;color:#001b2b;font-weight:700;border:0;border-radius:999px;padding:10px 18px;text-align:center;display:inline-block;text-decoration:none;margin-top:auto">Chci
                        pop-up</span>
                </a></div>
        </div>
    </section>
    <section style="margin-bottom:28px">
        <h2>Proč Webotvůrci</h2>
        <ul style="margin:8px 0 0 18px">
            <li><strong>Zlatý & Premium Shoptet Partner </strong>– certifikovaná kvalita</li>
            <li><strong>17+ vlastních doplňků </strong>s 1 200+ instalacemi</li>
            <li><strong>Silná technická expertíza </strong>– API, AI, automatizace</li>
            <li><strong>7+ let zkušeností </strong>s desítkami projektů</li>
            <li><strong>Individuální přístup</strong> a rychlá komunikace</li>
            <li><strong>Dlouhodobé partnerství</strong> s našimi klienty</li>
        </ul>
    </section>
    <section style="background:url(https://www.webotvurci.cz/wp-content/themes/wordpress/src/images/introduction-bg1.jpg) 
    center/cover;color:#fff;position:relative;overflow:hidden;margin-bottom:28px;border-radius:12px">
        <div style="padding:40px 24px;position:relative;z-index:2">
            <h2 style="margin:0 0 16px 0;font-size:24px;font-weight:700;line-height:1.2">Chcete posunout svůj Shoptet
                e-shop na vyšší úroveň?</h2>
            <p style="margin:0 0 24px 0;font-size:16px;opacity:.9;line-height:1.5">Pojďme společně vytvořit e-shop,
                který bude vydělávat. Jsme tu pro vás.</p>
            <div class="contact-section">
                <div class="contact-person">
                    <img src="https://www.webotvurci.cz/wp-content/themes/wordpress/src/images/tomas.jpg" alt="Tomáš Drdla">
                    <div>
                        <div class="name">Tomáš Drdla</div>
                        <div class="title">Kapitán</div>
                    </div>
                </div>
                <div class="contact-buttons">
                    <a href="#partner_request~17698" class="btn-primary-hover"
                        style="background:#6aeaca;color:#001b2b;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center">Napište
                        nám</a>
                    <a href="tel:+420728089029" class="btn-secondary-hover"
                        style="background:0 0;color:#fff;border:2px solid #6aeaca;padding:10px 24px;border-radius:999px;text-decoration:none;font-weight:600;display:inline-flex;align-items:center">Zavolejte
                        nám: +420 728 089 029</a>
                </div>
            </div>
        </div>
    </section>
    <section style="position:relative;height:300px;overflow:hidden;margin:0 -40px -32px -40px" class="ship-container">
        <div
            style="position:absolute;width:100%;height:66px;bottom:0;left:0;background-image:url(https://www.webotvurci.cz/wp-content/themes/wordpress/src/images/mini-waves1.svg);background-size:cover;background-repeat:no-repeat">
        </div>
        <div id="ship"
            style="position:absolute;width:232px;height:146px;bottom:46px;left:60px;background-image:url(https://www.webotvurci.cz/wp-content/themes/wordpress/src/images/ship-logo.svg);background-size:contain;background-repeat:no-repeat;transition:left .2s linear,transform .2s linear">
        </div>
    </section>
</div>
<style>
    @media (max-width:991px) {
        .ship-container {
            margin: 0 -17px -17px -17px !important;
            height: 250px !important
        }
    }

.btn-primary-hover:hover {
        background: #41cfab !important;
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(65, 207, 171, .3);
        transition: all .3s ease
    }

.btn-secondary-hover:hover {
        background: #41cfab !important;
        color: #fff !important;
        border-color: #41cfab !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(65, 207, 171, .3);
        transition: all .3s ease
    }

.btn-card-hover:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
        transition: all .3s ease
    }

.btn-service-hover:hover {
        background: #41cfab !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(65, 207, 171, .3);
        transition: all .3s ease;
        color: #fff !important
    }
    .contact-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .contact-person {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, .08);
        border-radius: 999px;
        padding: 8px 12px;
        color: #fff;
        align-self: flex-start;
    }
    .contact-buttons {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }
    .contact-person img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #6aeaca;
    }
    .contact-person .name {
        font-weight: 700;
        line-height: 1.2;
    }
    .contact-person .title {
        font-size: 13px;
        opacity: .85;
        line-height: 1.2;
    }
    @media (min-width: 992px) {
        .contact-person img { width: 64px; height: 64px; }
    }
    @media (max-width: 991px) {
        .contact-section { align-items: center; }
        .contact-person { align-self: center; }
        .contact-person > div { text-align: center; }
        .contact-buttons { justify-content: center; }
    }
</style>
<script>
    (function () {
        function initShipAnimation() {
            const ship = document.getElementById('ship');
            if (!ship) {
                setTimeout(initShipAnimation, 100);
                return;
            }
            let shipLeft = 60;
            let shipWidth = window.innerWidth < 992 ? 180 : 232;
            let direction = 1;
            function animateShip() {
                const containerWidth = ship.parentElement.offsetWidth;
                let maxLeft = containerWidth - shipWidth;
                shipLeft += 0.6 * direction;
                if (shipLeft >= maxLeft) {
                    shipLeft = maxLeft;
                    direction = -1;
                } else if (shipLeft <= 0) {
                    shipLeft = 0;
                    direction = 1;
                }
                ship.style.left = shipLeft + 'px';
                ship.style.transform = direction === 1 ? 'scaleX(1)' : 'scaleX(-1)';
                requestAnimationFrame(animateShip);
            }
            requestAnimationFrame(animateShip);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initShipAnimation);
        } else {
            initShipAnimation();
        }
        window.addEventListener('load', function () {
            if (!document.getElementById('ship').style.left) {
                initShipAnimation();
            }
        });
    })();
</script>