{"id":3483,"date":"2022-12-06T01:50:57","date_gmt":"2022-12-06T01:50:57","guid":{"rendered":"http:\/\/source.wpopal.com\/poco\/?page_id=3483"},"modified":"2026-05-09T19:57:33","modified_gmt":"2026-05-09T19:57:33","slug":"home-8","status":"publish","type":"page","link":"https:\/\/projectsuya.store\/index.php\/home-8\/","title":{"rendered":"Home 8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3483\" class=\"elementor elementor-3483\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<div class=\"elementor-section elementor-top-section elementor-element elementor-element-12ff2a6 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"12ff2a6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5b2776b\" data-id=\"5b2776b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-54bf87f elementor-widget elementor-widget-html\" data-id=\"54bf87f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');\r\n \r\n.ps-hero-slider-container {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    color: #F5EFE6;\r\n    font-family: 'DM Sans', sans-serif;\r\n}\r\n \r\n.ps-hero-slide {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: opacity 1s ease-in-out, visibility 1s;\r\n    z-index: 1;\r\n}\r\n \r\n.ps-hero-slide.ps-active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    z-index: 2;\r\n}\r\n \r\n.ps-hero-video {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    min-width: 100%;\r\n    min-height: 100%;\r\n    width: auto;\r\n    height: auto;\r\n    object-fit: cover;\r\n    z-index: -1;\r\n}\r\n \r\n.ps-hero-content {\r\n    width: 100%;\r\n    max-width: 95%;\r\n    height: 100%;\r\n    padding: 0 2%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    position: relative;\r\n    z-index: 2;\r\n    gap: 20vw;\r\n}\r\n \r\n.ps-hero-left-col {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    text-align: left;\r\n    padding-bottom: 50px;\r\n}\r\n \r\n.ps-hero-right-col {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-end;\r\n    align-items: flex-end;\r\n    text-align: right;\r\n    padding-bottom: 10vh;\r\n}\r\n \r\n.ps-hero-title {\r\n    font-family: 'Playfair Display', serif;\r\n    font-weight: 900;\r\n    font-size: 5rem;\r\n    line-height: 0.95;\r\n    text-transform: uppercase;\r\n    margin: 0;\r\n    letter-spacing: 0px;\r\n    color: #F5EFE6;\r\n    text-shadow: 2px 2px 15px rgba(0,0,0,0.4);\r\n}\r\n \r\n.ps-hero-subtitle {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 1.8rem;\r\n    color: #F0A500;\r\n    margin-top: 15px;\r\n    line-height: 1;\r\n    display: inline-block;\r\n    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);\r\n}\r\n \r\n.ps-hero-description {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 1.5rem;\r\n    font-weight: 300;\r\n    line-height: 1.4;\r\n    max-width: 500px;\r\n    margin-bottom: 2.5rem;\r\n    margin-top: 1rem;\r\n    color: #FDF5E6;\r\n    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);\r\n}\r\n \r\n.ps-hero-btn {\r\n    background: linear-gradient(135deg, #C84B11 0%, #a83a0d 100%);\r\n    color: #F5EFE6;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 1.6rem;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    padding: 18px 50px;\r\n    border-radius: 50px;\r\n    text-decoration: none;\r\n    border: 2px solid #F0A500;\r\n    box-shadow: 0 0 20px rgba(200, 75, 17, 0.4);\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    letter-spacing: 1px;\r\n}\r\n \r\n.ps-hero-btn:hover {\r\n    transform: scale(1.05);\r\n    filter: brightness(1.1);\r\n}\r\n \r\n.ps-hero-nav {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 10;\r\n    display: flex;\r\n    gap: 15px;\r\n}\r\n \r\n.ps-hero-nav-dot {\r\n    width: 12px;\r\n    height: 12px;\r\n    background: rgba(245,239,230,0.4);\r\n    border: 1px solid #F0A500;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    transition: all 0.3s;\r\n}\r\n \r\n.ps-hero-nav-dot.ps-active {\r\n    background: #F0A500;\r\n    transform: scale(1.3);\r\n}\r\n \r\n@media (max-width: 768px) {\r\n    .ps-hero-content {\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        padding-top: 100px;\r\n        gap: 2rem;\r\n        text-align: center;\r\n    }\r\n    .ps-hero-left-col, .ps-hero-right-col {\r\n        justify-content: center;\r\n        align-items: center;\r\n        text-align: center;\r\n        padding-bottom: 0;\r\n        flex: none;\r\n    }\r\n    .ps-hero-title { font-size: 3rem; }\r\n    .ps-hero-subtitle { font-size: 1.5rem; }\r\n    .ps-hero-description { font-size: 1.2rem; }\r\n    .ps-hero-btn { font-size: 1.2rem; padding: 12px 35px; }\r\n}\r\n<\/style>\r\n \r\n<div class=\"ps-hero-slider-container\" id=\"psHeroSlider\">\r\n    <!-- Slides will be populated by JavaScript -->\r\n<\/div>\r\n \r\n<script>\r\n(function() {\r\n    \/\/ Fetch slides from REST API\r\n    async function loadHeroSlides() {\r\n        try {\r\n            const response = await fetch('\/wp-json\/wp\/v2\/suya_hero_slide?per_page=100');\r\n            const slides = await response.json();\r\n            \r\n            if (!slides || slides.length === 0) {\r\n                console.warn('No hero slides found');\r\n                return;\r\n            }\r\n            \r\n            \/\/ Sort by order\r\n            slides.sort((a, b) => {\r\n                const orderA = parseInt(a.acf?.hero_order) || 0;\r\n                const orderB = parseInt(b.acf?.hero_order) || 0;\r\n                return orderA - orderB;\r\n            });\r\n            \r\n            const container = document.getElementById('psHeroSlider');\r\n            let slidesHTML = '';\r\n            \r\n            slides.forEach((slide, index) => {\r\n                const isActive = index === 0 ? 'ps-active' : '';\r\n                const videoUrl = slide.acf?.hero_video_url || '';\r\n                const title = slide.title?.rendered || 'Slide';\r\n                const subtitle = slide.acf?.hero_subtitle || '';\r\n                const description = slide.acf?.hero_description || '';\r\n                const buttonText = slide.acf?.hero_button_text || 'ORDER NOW';\r\n                const buttonUrl = slide.acf?.hero_button_url || '\/shop';\r\n                \r\n                slidesHTML += `\r\n                    <div class=\"ps-hero-slide ${isActive}\">\r\n                        <video class=\"ps-hero-video\" autoplay muted loop playsinline>\r\n                            <source src=\"${videoUrl}\" type=\"video\/mp4\">\r\n                        <\/video>\r\n                        <div class=\"ps-hero-content\">\r\n                            <div class=\"ps-hero-left-col\">\r\n                                <h1 class=\"ps-hero-title\">${title}<\/h1>\r\n                                ${subtitle ? `<span class=\"ps-hero-subtitle\">${subtitle}<\/span>` : ''}\r\n                            <\/div>\r\n                            <div class=\"ps-hero-right-col\">\r\n                                ${description ? `<p class=\"ps-hero-description\">${description}<\/p>` : ''}\r\n                                <a href=\"${buttonUrl}\" class=\"ps-hero-btn\">${buttonText}<\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n            });\r\n            \r\n            container.innerHTML = slidesHTML;\r\n            \r\n            \/\/ Create navigation dots\r\n            let dotsHTML = '<div class=\"ps-hero-nav\">';\r\n            slides.forEach((_, index) => {\r\n                const isActive = index === 0 ? 'ps-active' : '';\r\n                dotsHTML += `<div class=\"ps-hero-nav-dot ${isActive}\" onclick=\"window.changeHeroSlide(${index})\"><\/div>`;\r\n            });\r\n            dotsHTML += '<\/div>';\r\n            container.innerHTML += dotsHTML;\r\n            \r\n            \/\/ Initialize slider\r\n            initHeroSlider(slides.length);\r\n        } catch (error) {\r\n            console.error('Error loading hero slides:', error);\r\n        }\r\n    }\r\n    \r\n    function initHeroSlider(totalSlides) {\r\n        let currentSlide = 0;\r\n        let slideInterval;\r\n        \r\n        window.changeHeroSlide = function(index) {\r\n            clearInterval(slideInterval);\r\n            showHeroSlide(index);\r\n            startHeroAutoPlay();\r\n        };\r\n        \r\n        function showHeroSlide(index) {\r\n            const slides = document.querySelectorAll('.ps-hero-slide');\r\n            const dots = document.querySelectorAll('.ps-hero-nav-dot');\r\n            \r\n            if (slides.length === 0) return;\r\n            \r\n            slides.forEach(s => s.classList.remove('ps-active'));\r\n            dots.forEach(d => d.classList.remove('ps-active'));\r\n            \r\n            slides[index].classList.add('ps-active');\r\n            dots[index].classList.add('ps-active');\r\n            \r\n            const video = slides[index].querySelector('video');\r\n            if (video) {\r\n                video.currentTime = 0;\r\n                video.play();\r\n            }\r\n            \r\n            currentSlide = index;\r\n        }\r\n        \r\n        function nextHeroSlide() {\r\n            let next = (currentSlide + 1) % totalSlides;\r\n            showHeroSlide(next);\r\n        }\r\n        \r\n        function startHeroAutoPlay() {\r\n            slideInterval = setInterval(nextHeroSlide, 6000);\r\n        }\r\n        \r\n        startHeroAutoPlay();\r\n    }\r\n    \r\n    \/\/ Load slides when DOM is ready\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', loadHeroSlides);\r\n    } else {\r\n        loadHeroSlides();\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-homepage.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3483","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/projectsuya.store\/index.php\/wp-json\/wp\/v2\/pages\/3483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projectsuya.store\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projectsuya.store\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projectsuya.store\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projectsuya.store\/index.php\/wp-json\/wp\/v2\/comments?post=3483"}],"version-history":[{"count":38,"href":"https:\/\/projectsuya.store\/index.php\/wp-json\/wp\/v2\/pages\/3483\/revisions"}],"predecessor-version":[{"id":6012,"href":"https:\/\/projectsuya.store\/index.php\/wp-json\/wp\/v2\/pages\/3483\/revisions\/6012"}],"wp:attachment":[{"href":"https:\/\/projectsuya.store\/index.php\/wp-json\/wp\/v2\/media?parent=3483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}