{extend name="../view/default/basetmp.htm" /}

{block name="css"} 
<link rel="stylesheet" href="__INDEX__/css/royalcms.index.css">
{/block}

{block name="main"} 
    <!-- Hero Banner Section -->
    <section class="royal-hero" data-aos="fade-in">
        <div class="swiper royal-swiper-banner">
            <div class="swiper-wrapper">
                {Rycms:lists model='Ad' limit='12' idname='adposid' cid='1' order='sort ASC'}
                <div class="swiper-slide">
                    <div class="royal-swiper-banner-item" style="background-image: url({$v.thumb});">
                        <div class="royal-container">
                            <div class="royal-hero-content">
                                <div class="royal-hero-text" data-aos="fade-right" data-aos-delay="300">
                                    <h1>{$v.title}</h1>
                                    <p>{$v.stitle|cut_str=40}</p>
                                    <div class="royal-hero-buttons">
                                        <a href="javascript:void(0);" class="royal-btn royal-btn-free royal-download">
                                            <i class="fas fa-download"></i> {$Think.lang.public_free_download}
                                        </a> 
                                        <a class="royal-btn royal-btn-primary" href="/royalcms/website/login/index" target="_blank">
                                            <i class="fas fa-user"></i>{$Think.lang.public_admin_login}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/Rycms:lists}
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next">
                <i class="fas fa-chevron-right"></i>
            </div>
            <div class="swiper-button-prev">
                <i class="fas fa-chevron-left"></i>
            </div>
        </div>
    </section>

    <!-- Application Areas Section -->
    <section id="applications" class="royal-applications-section">
        <div class="royal-container">
            <div class="royal-section-title" data-aos="fade-up">
                <h2>{Rycms:sing model="Cate" field="title" id="100"}</h2>
                <p>{Rycms:sing model="Cate" field="stitle" id="100"}</p>
            </div>

            <div class="royal-applications-grid">
                {Rycms:lists model='Article' limit='6' idname='cateid' cid='100' order='sort ASC'}
                <div class="royal-application-card" data-aos="fade-up" >
                    <div class="royal-application-icon-container">
                        <div class="royal-application-icon">
                            <i class="fas {$v.icon}"></i>
                        </div>
                    </div>
                    <h3>{$v.title}</h3>
                    <p>{$v.stitle|cut_str=30}</p>
                </div>
                {/Rycms:lists}
            </div>
        </div>
    </section>

    <!-- About Us Section -->
    <section id="about" class="royal-about-section">
        <div class="royal-container">
            <div class="royal-section-title" data-aos="fade-up">
                <h2>{Rycms:sing model="Cate" field="title" id="2"}</h2>
                <p>{Rycms:sing model="Cate" field="stitle" id="2"}</p>
            </div>

            <div class="royal-about-content">
                <div class="royal-about-text">
                    <h3 data-aos="fade-up">{Rycms:sing model="Article" field="title" id="260"}</h3>
                    <p data-aos="fade-up" data-aos-delay="100">{Rycms:sing model="Article" field="stitle" id="260"}</p>
                    <div class="royal-timeline">
                        <h3 data-aos="fade-up">{Rycms:sing model="Cate" field="title" id="3"}</h3>
                        {Rycms:lists model='Article' limit='4' idname='cateid' cid='3' order='sort ASC' is_index='1'}
                        <div class="royal-timeline-item" data-aos="fade-up" data-aos-delay="{$i*150}">
                            <h4>{$v.price}</h4>
                            <p>{$v.title}</p>
                        </div>
                        {/Rycms:lists}
                    </div>
                </div>

                <div class="royal-about-visual">
                    <div class="royal-about-image" data-aos="fade-up" data-aos-delay="300">
                        <img src='{Rycms:sing model="Article" field="thumb" id="260"}' 
                             alt="{Rycms:sing model='Article' field='title' id='260'}" 
                             loading="lazy">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Products Center Section -->
    <section class="royal-products-section">
        <div class="royal-container">
            <div class="royal-section-title" data-aos="fade-up">
                <h2>{Rycms:sing model="Cate" field="title" id="6"}</h2>
                <p>{Rycms:sing model="Cate" field="stitle" id="6"}</p>
            </div>

            <div class="royal-products-tabs" data-aos="fade-up" data-aos-delay="100">
                {Rycms:lists model='Cate' limit='6' idname='pid' cid='6' order='sort ASC'}
                <div class="royal-product-tab" data-category="{$v.id}">{$v.title}</div>
                {/Rycms:lists}
            </div>

            <div class="royal-products-grid" id="royal-products-container">
                <!-- Category 7 Products -->
                {Rycms:lists model='Article' limit='8' idname='cateid' cid='7' order='sort ASC'} 
                <div class="royal-product-card" data-category="7" data-aos="fade-up" data-aos-delay="{$i*50}">
                    <div class="royal-product-image">
                        <a href="{$v.url}">
                            <img src="{$v.thumb}" alt="{$v.title}" loading="lazy">
                        </a>
                    </div>
                    {if in_array($v.type, [1,2,3])}
                        <div class="royal-tag royal-tag-type{$v.type}">
                            {switch name="$v.type"}
                                {case value="1"}{$Think.lang.product_tag_hot}{/case}
                                {case value="2"}{$Think.lang.product_tag_recommended}{/case}
                                {case value="3"}{$Think.lang.product_tag_popular}{/case}
                            {/switch}
                        </div>
                    {/if}
                    <h3><a href="{$v.url}">{$v.title}</a></h3>
                    <p>{$v.stitle|cut_str=30}</p>
                    <div class="royal-product-stats">
                        <div class="royal-stat-item">
                            <div class="royal-stat-icon royal-stat-sales">
                                <i class="fas fa-fire"></i>
                            </div>
                            <div class="royal-stat-count">{$v.click}</div>
                        </div>
                        <div class="royal-stat-item">
                            <div class="royal-stat-icon royal-stat-favorites">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="royal-stat-count">{$v.star}</div>
                        </div>
                    </div>
                </div>
                {/Rycms:lists}
                
                <!-- Category 8 Products -->
                {Rycms:lists model='Article' limit='8' idname='cateid' cid='8' order='sort ASC'}
                <div class="royal-product-card" data-category="8" data-aos="fade-up" data-aos-delay="{$i*50}">
                    <div class="royal-product-image">
                        <a href="{$v.url}">
                            <img src="{$v.thumb}" alt="{$v.title}" loading="lazy">
                        </a>
                    </div>
                    {if in_array($v.type, [1,2,3])}
                        <div class="royal-tag royal-tag-type{$v.type}">
                            {switch name="$v.type"}
                                {case value="1"}{$Think.lang.product_tag_hot}{/case}
                                {case value="2"}{$Think.lang.product_tag_recommended}{/case}
                                {case value="3"}{$Think.lang.product_tag_popular}{/case}
                            {/switch}
                        </div>
                    {/if}
                    <h3><a href="{$v.url}">{$v.title}</a></h3>
                    <p>{$v.stitle|cut_str=30}</p>
                    <div class="royal-product-stats">
                        <div class="royal-stat-item">
                            <div class="royal-stat-icon royal-stat-sales">
                                <i class="fas fa-fire"></i>
                            </div>
                            <div class="royal-stat-count">{$v.click}</div>
                        </div>
                        <div class="royal-stat-item">
                            <div class="royal-stat-icon royal-stat-favorites">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="royal-stat-count">{$v.star}</div>
                        </div>
                    </div>
                </div>
                {/Rycms:lists}
                
                <!-- Category 9 Products -->
                {Rycms:lists model='Article' limit='8' idname='cateid' cid='9' order='sort ASC'}
                <div class="royal-product-card" data-category="9" data-aos="fade-up" data-aos-delay="{$i*50}">
                    <div class="royal-product-image">
                        <a href="{$v.url}">
                            <img src="{$v.thumb}" alt="{$v.title}" loading="lazy">
                        </a>
                    </div>
                    {if in_array($v.type, [1,2,3])}
                        <div class="royal-tag royal-tag-type{$v.type}">
                            {switch name="$v.type"}
                                {case value="1"}{$Think.lang.product_tag_hot}{/case}
                                {case value="2"}{$Think.lang.product_tag_recommended}{/case}
                                {case value="3"}{$Think.lang.product_tag_popular}{/case}
                            {/switch}
                        </div>
                    {/if}
                    <h3><a href="{$v.url}">{$v.title}</a></h3>
                    <p>{$v.stitle|cut_str=30}</p>
                    <div class="royal-product-stats">
                        <div class="royal-stat-item">
                            <div class="royal-stat-icon royal-stat-sales">
                                <i class="fas fa-fire"></i>
                            </div>
                            <div class="royal-stat-count">{$v.click}</div>
                        </div>
                        <div class="royal-stat-item">
                            <div class="royal-stat-icon royal-stat-favorites">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="royal-stat-count">{$v.star}</div>
                        </div>
                    </div>
                </div>
                {/Rycms:lists}
                
                <!-- Category 10 Products -->
                {Rycms:lists model='Article' limit='8' idname='cateid' cid='10' order='sort ASC'}
                <div class="royal-product-card" data-category="10" data-aos="fade-up" data-aos-delay="{$i*50}">
                    <div class="royal-product-image">
                        <a href="{$v.url}">
                            <img src="{$v.thumb}" alt="{$v.title}" loading="lazy">
                        </a>
                    </div>
                    {if in_array($v.type, [1,2,3])}
                        <div class="royal-tag royal-tag-type{$v.type}">
                            {switch name="$v.type"}
                                {case value="1"}{$Think.lang.product_tag_hot}{/case}
                                {case value="2"}{$Think.lang.product_tag_recommended}{/case}
                                {case value="3"}{$Think.lang.product_tag_popular}{/case}
                            {/switch}
                        </div>
                    {/if}
                    <h3><a href="{$v.url}">{$v.title}</a></h3>
                    <p>{$v.stitle|cut_str=30}</p>
                    <div class="royal-product-stats">
                        <div class="royal-stat-item">
                            <div class="royal-stat-icon royal-stat-sales">
                                <i class="fas fa-fire"></i>
                            </div>
                            <div class="royal-stat-count">{$v.click}</div>
                        </div>
                        <div class="royal-stat-item">
                            <div class="royal-stat-icon royal-stat-favorites">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="royal-stat-count">{$v.star}</div>
                        </div>
                    </div>
                </div>
                {/Rycms:lists}
            </div>

            <div class="royal-more-products" data-aos="fade-up">
                <a href="/a/{Rycms:sing model='Cate' field='ename' id='6'}.html" class="royal-btn royal-btn-primary">
                    <i class="fas fa-eye"></i>
                    {$Think.lang.public_view_more}
                </a>
            </div>
        </div>
    </section>

    <!-- News & Information Section -->
    <section id="news" class="royal-news-section">
        <div class="royal-container">
            <div class="royal-section-title" data-aos="fade-up">
                <h2>{Rycms:sing model="Cate" field="title" id="16"}</h2>
                <p>{Rycms:sing model="Cate" field="stitle" id="16"}</p>
            </div>

            <div class="royal-news-content">
                <div class="royal-news-slider" data-aos="fade-right">
                    <div class="swiper royal-news-swiper">
                        <div class="swiper-wrapper">
                            {Rycms:lists model='Article' limit='6' idname='cateid' cid='17,18,19,20' order='sort ASC' type='1'}
                            <div class="swiper-slide">
                                <a href="{$v.url}">
                                    <div class="royal-news-slide-item">
                                        <div class="royal-news-slide-image">
                                            <img src="{$v.thumb}" alt="{$v.title}" loading="lazy">
                                        </div>
                                        <div class="royal-news-slide-content">
                                            <h3>{$v.title}</h3>
                                            <p>{$v.stitle|cut_str=36}</p>
                                            <div class="royal-news-meta">
                                                <div class="royal-news-date"><i class="fas fa-clock"></i>  {$v.create_time|date='Y-m-d'}</div>
                                                <div class="royal-news-category">{$v.keywords}</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            {/Rycms:lists}
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>

                <div class="royal-news-list">
                    {Rycms:lists model='Article' limit='4' idname='cateid' cid='17,18,19,20' order='sort ASC'}
                    <div class="royal-news-list-item" data-aos="fade-up" >
                        <div class="royal-news-list-image">
                            <a href="{$v.url}">
                                <img src="{$v.thumb}" alt="{$v.title}" loading="lazy">
                            </a>
                        </div>
                        <div class="royal-news-list-content">
                            <h4>{$v.title}</h4>
                            <p>{$v.stitle|cut_str=40}</p>
                            <div class="royal-news-meta">
                                <div class="royal-news-date"><i class="fas fa-clock"></i>  {$v.create_time|date='Y-m-d'}</div> 
                                <div class="royal-news-category">{$v.keywords}</div>
                            </div>
                        </div>
                    </div>
                    {/Rycms:lists}
                </div>
            </div>
        </div>
    </section>

    <!-- Solutions Section -->
    <section class="royal-solutions-section">
        <div class="royal-container">
            <div class="royal-section-title" data-aos="fade-up">
                <h2>{Rycms:sing model="Cate" field="title" id="11"}</h2>
                <p>{Rycms:sing model="Cate" field="stitle" id="11"}</p>
            </div>

            <div class="royal-index-solutions-grid">
                {Rycms:lists model='Article' limit='6' idname='cateid' cid='15' order='sort ASC' is_index='1'}
                <div class="royal-solution-card" data-aos="zoom-in" >
                    <div class="royal-solution-icon-bg">
                        <div class="royal-solution-icon">
                            <i class="fas {$v.icon}"></i>
                        </div>
                    </div>
                    <h3>{$v.title}</h3>
                    <p>{$v.stitle|cut_str=40}</p>
                </div>
                {/Rycms:lists}
            </div>

            <div class="royal-more-products" data-aos="fade-up">
                <a href="/a/{Rycms:sing model='Cate' field='ename' id='15'}.html" class="royal-btn royal-btn-primary">
                    <i class="fas fa-eye"></i>
                    {$Think.lang.public_view_more}
                </a>
            </div>
        </div>
    </section>

    <!-- Clients Section -->
    <section class="royal-clients-section">
        <div class="royal-container">
            <div class="royal-section-title" data-aos="fade-up">
                <h2>{Rycms:sing model="Cate" field="title" id="101"}</h2>
                <p>{Rycms:sing model="Cate" field="stitle" id="101"}</p>
            </div>
            <div class="royal-clients-grid" data-aos="fade-up">
                {Rycms:lists model='Article' limit='12' idname='cateid' cid='101' order='sort ASC' is_index='1'}
                <div class="royal-client-logo" data-aos="zoom-in" data-aos-delay="{$i*50}">
                    <img src="{$v.thumb}" alt="{$v.title}" loading="lazy">
                </div>
                {/Rycms:lists}
            </div>
        </div>
    </section>

    <!-- Contact Us Section -->
    <section id="contact" class="royal-contact-section">
        <div class="royal-container">
            <div class="royal-section-title" data-aos="fade-up">
                <h2>{Rycms:sing model="Cate" field="title" id="21"}</h2>
                <p>{Rycms:sing model="Cate" field="stitle" id="21"}</p>
            </div>

            <div class="royal-contact-content">
                <div class="royal-contact-info" data-aos="fade-right">
                    <div class="royal-contact-item" data-aos="fade-up" data-aos-delay="100">
                        <div class="royal-contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="royal-contact-details">
                            <h3>{$Think.lang.contact_company_address}</h3>
                            <p>{$ConfRes.add}</p>
                        </div>
                    </div>

                    <div class="royal-contact-item" data-aos="fade-up" data-aos-delay="200">
                        <div class="royal-contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="royal-contact-details">
                            <h3>{$Think.lang.contact_phone}</h3>
                            <p>{$ConfRes.tel}</p>
                        </div>
                    </div>

                    <div class="royal-contact-item" data-aos="fade-up" data-aos-delay="300">
                        <div class="royal-contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="royal-contact-details">
                            <h3>{$Think.lang.contact_email}</h3>
                            <p>{$ConfRes.email}</p>
                        </div>
                    </div>

                    <div class="royal-contact-item" data-aos="fade-up" data-aos-delay="400">
                        <div class="royal-contact-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="royal-contact-details">
                            <h3>{$Think.lang.contact_join}</h3> 
                            <div class="royal-jobs-preview">
                                {Rycms:lists model='Article' limit='2' idname='cateid' cid='24' order='sort ASC'}
                                <a href="{$v.url}" class="royal-job-item" data-aos="fade-up" data-aos-delay="{$i*100+500}">
                                    <div class="royal-job-title">{$v.title}</div>
                                    <div class="royal-job-meta">{$v.stitle|cut_str=30}</div>
                                </a>
                                {/Rycms:lists}
                            </div>
                        </div>
                    </div>
                </div>
                
                {include file='../view/default/form.htm'} 
            </div>
        </div>
    </section>
{/block}

{block name="js"} 
<script src="__INDEX__/js/royalcms.index.js"></script>
 
{/block}