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

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

{block name="main"}
    {include file='../view/default/innerbanner.htm'}
    
    <!-- Company Introduction Content -->
    <section class="royal-category-content">
        <div class="royal-container">
            
            {include file='../view/default/left.htm'}
            
            <!-- Company Introduction Section -->
            <div class="royal-company-intro-section">
                <div class="royal-section-title" data-aos="fade-up" >
                    <h2 data-aos="fade-down" data-aos-delay="200">{$Cates.title}</h2>
                    <p data-aos="fade-up" data-aos-delay="400">{$Cates.stitle}</p>
                </div>
                
                <div class="royal-company-content">
                    <!-- Company Description Text -->
                    <div class="royal-company-text" data-aos="fade-right" data-aos-delay="300" >
                        {Rycms:sing model="Article" field="content" id="260"}
                    </div>
                    
                    <!-- Company Visual Element -->
                    <div class="royal-company-visual" data-aos="fade-left" data-aos-delay="500" >
                        <div class="royal-company-image" data-aos="zoom-in" data-aos-delay="700">
                            <img src='{Rycms:sing model="Article" field="thumb" id="260"}' alt="Company Introduction">
                        </div>
                    </div>
                </div>

                <!-- Statistics Section -->
                <div class="royal-stats-section">
                    <div class="royal-stats-grid">
                        {Rycms:lists model='Article' limit='4' idname='cateid' cid='2' order='sort ASC' type='1'}
                        <div class="royal-stat-card" 
                             data-aos="flip-up" 
                             data-aos-delay="{$i*150}" 
                             data-aos-duration="600">
                            <div class="royal-stat-icon" data-aos="bounce-in" >
                                <i class="fas {$v.icon}"></i>
                            </div>
                            <div class="royal-stat-content">
                                <div class="royal-stat-number" data-aos="fade-up" >{$v.stitle}</div>
                                <div class="royal-stat-label" data-aos="fade-up" >{$v.title}</div>
                            </div>
                        </div>
                        {/Rycms:lists}
                    </div>
                </div>
                
                <!-- Company Mission & Values -->
                <div class="royal-company-mission">
                    {Rycms:lists model='Article' limit='4' idname='cateid' cid='2' order='sort ASC' type='5'}
                    <div class="royal-mission-item" 
                         data-aos="fade-up" 
                         data-aos-delay="{$i*200}" 
                         data-aos-duration="600">
                        <h4 data-aos="fade-right" >
                            <i class="fas fa-bullseye" data-aos="rotate-in" ></i>
                            {$v.title}
                        </h4>
                        <p data-aos="fade-up" data-aos-delay="{$i*200+400}">{$v.stitle}</p>
                    </div>
                    {/Rycms:lists}
                </div>
            </div>
            
        </div>
    </section>
{/block}