dnssash/theme/rd.dnssash/rb.layout/dnssash/index.php

<?php
if (!defined('_GNUBOARD_')) exit;
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
?>
<!-- 💡 [수정] 컴포넌트화된 팝업 로더를 절대 경로로 포함합니다. -->





<div class="main-container">
    <!-- 1. 메인 비주얼 섹션 -->
    <section class="main-visual">
        <div class="visual-slider swiper-container">
            <div class="swiper-wrapper">
                <?php
                // 슬라이드 데이터 정의
                $main_visual_data = [
                        [
                                'bg' => 'back20.jpg',
                                'subtitle' => '이끌림으로 품격을 높이다!'
                        ],
                        [
                                'bg' => 'back014.jpg',
                                'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'
                        ],
                        [
                                'bg' => 'back012.jpg',
                                'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.'
                        ]
                ];

                foreach ($main_visual_data as $item) {
                    ?>
                    <div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
                        <a href="#" class="visual-link">
                            <!-- 배경 이미지 -->
                            <div class="visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>

                            <!-- 텍스트 레이어 (타이틀 + 부제목 구조) -->
                            <div class="visual-layer-wrap">
                                <div class="visual-layer-item">
                                    <h2 class="visual-title">PREMIUM DESIGN</h2>
                                    <span class="visual-divider"></span>
                                    <p class="visual-subtitle"><?php echo $item['subtitle']; ?></p>
                                </div>
                            </div>
                        </a>
                    </div>
                <?php } ?>
            </div>
            <div class="swiper-pagination"></div>

            <!-- 네비게이션 버튼 -->
            <div class="swiper-button-prev">
                <div class="thumb-wrapper"><div class="thumb" ></div></div>
            </div>
            <div class="swiper-button-next">
                <div class="thumb-wrapper"><div class="thumb"></div></div>
            </div>
        </div>

    </section>
    <section class="hero_container">
        <div class="content_inner">
            <img src="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">
            <div class="text_area">
                <p class="label_blue">SMART WINDOW ORDERING</p>
                <h1 class="main_title">
                    창호의 새로운 기준,<br>
                    <span class="highlight_blue">이끌림샤시</span>로 시작하세요
                </h1>
                <p class="sub_description">
                    복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
                    고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
                </p>
                <!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->

                <div class="main_action_row">
                    <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
                        <div class="btn_icon">🏢</div>
                        <div class="btn_txt">
                            <strong>창호 온라인 주문</strong>
                            <p>실시간 직접 견적 및 주문 확정</p>
                        </div>
                    </a>
                    <div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
                        <div class="btn_icon">👨‍🔧</div>
                        <div class="btn_txt">
                            <strong>창호 전문가 부르기</strong>
                            <p>방문 실측 및 맞춤 상담 신청</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="floating_as_badge">
                <p>전국 대리점망</p>
                <strong>A/S 10년 보장</strong>
            </div>
        </div>
    </section>
    <!-- 2. 제품 소개 섹션 (아이콘 형태) -->
   <!-- <section class="product-intro container">
        <div class="section-title">
            <h3>PRODUCT</h3>
            <p>동남창호의 주요 제품을 소개합니다.</p>
        </div>
        <div class="product-list">
            <a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=product&sca=발코니창" class="product-item">
                <div class="icon-box"><img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/icon_product_01.png" alt="발코니창"></div>
                <h4>발코니창</h4>
                <p>Balcony Window</p>
            </a>
            <a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=product&sca=내창" class="product-item">
                <div class="icon-box"><img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/icon_product_02.png" alt="내창"></div>
                <h4>내창</h4>
                <p>Inner Window</p>
            </a>
            <a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=product&sca=시스템창" class="product-item">
                <div class="icon-box"><img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/icon_product_03.png" alt="시스템창"></div>
                <h4>시스템창</h4>
                <p>System Window</p>
            </a>
            <a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=product&sca=도어" class="product-item">
                <div class="icon-box"><img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/icon_product_04.png" alt="도어"></div>
                <h4>도어</h4>
                <p>Door</p>
            </a>
        </div>
    </section>-->

    <!-- 3. 회사 소개 및 홍보 섹션 -->
   <!-- <section class="about-section">
        <div class="container">
            <div class="about-content">
                <div class="about-text">
                    <h3>ABOUT US</h3>
                    <h2>(주)동남창호</h2>
                    <p>
                        동남창호는 다년간의 축적된 노하우와 기술력을 바탕으로<br>
                        고객님께 최상의 만족을 드리기 위해 항상 노력하고 있습니다.<br>
                        끊임없는 연구 개발과 품질 혁신으로 창호 시장을 선도하겠습니다.
                    </p>
                    <a href="<?php /*echo get_pretty_url('content', 'company'); */?>" class="btn-more">회사소개 바로가기</a>
                </div>
                <div class="about-img">
                    <img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/about_img.jpg" alt="회사소개 이미지">
                </div>
            </div>
        </div>
    </section>-->

    <!-- 4. 갤러리/시공사례 섹션 -->
   <!-- <section class="gallery-section container">
        <div class="section-title">
            <h3>GALLERY</h3>
            <p>동남창호의 시공 사례를 확인해보세요.</p>
        </div>
        <div class="gallery-list">
            <?php /*echo latest('theme/rb.gallery_bbs', 'gallery', 4, 20); */?>
        </div>
    </section>-->

    <!-- 5. 고객센터/오시는길 섹션 -->
    <!--<section class="contact-map-section">
        <div class="container">
            <div class="contact-info-box">
                <h3>CUSTOMER CENTER</h3>
                <p class="tel">031-123-4567</p>
                <p class="desc">
                    평일 09:00 ~ 18:00<br>
                    점심 12:00 ~ 13:00<br>
                    (토/일/공휴일 휴무)
                </p>
                <div class="btns">
                    <a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=qa" class="btn-inquiry">1:1 문의하기</a>
                    <a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=notice" class="btn-notice">공지사항</a>
                </div>
            </div>
            <div class="map-box">

                <img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/map_img.jpg" alt="오시는길" style="width:100%; height:100%; object-fit:cover;">
            </div>
        </div>
    </section>-->
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var mainVisualSwiper = new Swiper('.visual-slider', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {
                init: function () {
                    updateNavThumbs(this);
                },
                slideChangeTransitionEnd: function () {
                    updateNavThumbs(this);
                },
            },
        });

        function updateNavThumbs(swiper) {
            var prevSlide = $(swiper.slides[swiper.previousIndex]);
            var nextSlide = $(swiper.slides[swiper.activeIndex + 1]);

            var prevThumb = prevSlide.data('thumb-bg');
            var nextThumb = nextSlide.data('thumb-bg');

            swiper.navigation.prevEl.querySelector('.thumb').style.backgroundImage = 'url(' + prevThumb + ')';
            swiper.navigation.nextEl.querySelector('.thumb').style.backgroundImage = 'url(' + nextThumb + ')';
        }
    });
</script>