<?php
/*
* Template Name: 关于能辉 
*/
?>
<?php get_header();?>

<?php
// 加载关于页面Banner样式
wp_enqueue_style('about-banner-css', get_template_directory_uri() . '/assets/css/about-page.css', array(), '1.0.0');
// 加载关于页面特色区块样式
wp_enqueue_style('about-features-css', get_template_directory_uri() . '/assets/css/about-features.css', array(), '1.0.0');
// 加载关于页面特色区块JavaScript
wp_enqueue_script('about-features-js', get_template_directory_uri() . '/assets/js/about-features.js', array(), '1.0.0', true);
?>

<div class="relative page-full-width mt-[80px]  bg-slate-50   border-slate-200/60">
    <!-- 关于能辉Banner -->
    <section class="relative w-full  flex flex-col items-center justify-center z-10  border-slate-100">
        <div class="about-banner-content !pb-[5rem] !pt-[8rem]">
            <h2 class="font-display text-[2.66rem] font-black text-slate-800 tracking-widest leading-[1.2] mb-2">公司介绍</h1>
       
             <div class="w-20 h-1.5 bg-gradient-to-r from-primary to-teal-400 mx-auto mt-6 rounded-full"></div>
        </div>
    </section>
    
<div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: linear-gradient(#10b981 1px, transparent 1px), linear-gradient(90deg, #10b981 1px, transparent 1px); background-size: 32px 32px;"></div>
<div class="absolute top-0 left-0 w-[600px] h-[600px] bg-primary-light/40 rounded-full mix-blend-multiply filter blur-[100px] opacity-70 -translate-x-1/2 -translate-y-1/2 pointer-events-none"></div>
    <!-- 页面内容区域 -->
    <!-- ===================== 模块：企业简介 ===================== -->
<section id="section-about" class="scroll-section relative w-full px-6 lg:px-16 xl:px-24 py-24 border-b border-slate-200/60 scroll-mt-0">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-center max-w-[100rem] mx-auto">
        
        <!-- 左侧：文本与介绍 -->
        <div class="lg:col-span-6 flex flex-col items-start" data-aos="fade-right">
            <!-- 模块浮动标签 -->
            
            
            <!-- 主标题 -->
            <h2 class="font-display text-3xl font-black text-slate-800 tracking-wider mb-6 leading-[1.3]">
                为全球用户提供安全、经济、高效、低碳的<br class="hidden xl:block">新能源解决方案
            </h2>
            <div class="w-12 h-1 bg-primary mb-10"></div>

            <!-- 段落文本 -->
            <div class="flex flex-col gap-6 text-[1rem] text-slate-500 font-medium leading-loose tracking-[0.1em]">
                <p>能辉科技是一家领先的新能源产品与技术服务提供商，为全球客户提供风力光伏新能源、新型储能、商用车充换电和智算中心的产品、系统集成及电力交易综合解决方案。</p>
                
                <p>面对新科技浪潮，公司正以深厚的新能源业务为基座，以领先的轮式充换电机器人技术为支撑，实践“新能源+AI、新能源+算力、新能源+机器人”的全面战略转型。</p>
            </div>

            <!-- 强调数据卡片（UI元素，已去除句号） -->
            <div class="mt-10 inline-flex items-center gap-5 p-5 bg-slate-50 rounded-2xl border border-slate-100 hover:shadow-md hover:border-primary/30 transition-all duration-300 group cursor-default">
                <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary transition-colors duration-300 flex-shrink-0">
                    <span class="material-symbols-outlined text-primary group-hover:text-white text-2xl">&#xe84f;</span>
                </div>
                <div>
                    <p class="text-[1rem] font-bold text-slate-800 tracking-widest mb-1">深交所创业板上市企业</p>
                    <p class="text-[0.875rem] text-slate-500 tracking-wider">2021年上市，股票代码：<strong class="text-primary text-[1rem]">301046.SZ</strong></p>
                </div>
            </div>
        </div>

        <!-- 右侧：大图展示 -->
        <div class="lg:col-span-6 relative" data-aos="fade-left">
            <!-- 装饰背景光晕 -->
            <div class="absolute -top-10 -right-10 w-64 h-64 bg-primary/5 rounded-full filter blur-[40px] -z-10"></div>
            <div class="absolute -bottom-10 -left-10 w-64 h-64 bg-blue-500/5 rounded-full filter blur-[40px] -z-10"></div>
            
            <div class="relative rounded-[2.5rem] overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.06)] border border-slate-100 group">
                <img class="w-full aspect-[6/3] lg:aspect-[4/3] object-cover group-hover:scale-105 transition-transform duration-700" 
                     src="http://cn.nenghui.com/wp-content/themes/nenghui-energy-theme-cn/assets/images/nh-build.png" 
                     alt="能辉科技办公大楼">
                <!-- 图片优雅渐变遮罩 -->
                <div class="absolute inset-0 bg-gradient-to-t from-slate-900/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
            </div>
        </div>

    </div>
</section>


     
    <!--  公司优势  -->
     <section class="relative py-24 lg:py-32 bg-surface overflow-hidden">
        
        <!-- 明亮版的点缀背景形状 -->
        <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-primary-light/40 to-transparent pointer-events-none"></div>

        <div class="container mx-auto px-6 lg:px-12 relative z-10">
            
            <!-- 模块标题 -->
            <!-- <div class="text-center mb-20 lg:mb-28" data-aos="fade-up">
                <h2 class="text-4xl md:text-5xl font-display font-bold text-slate-heading">核心优势与能力</h2>
                
                <div class="w-20 h-1.5 bg-gradient-to-r from-primary to-accent mx-auto mt-6 rounded-full"></div>
                <p class="mt-6 text-slate-text max-w-2xl mx-auto text-lg">构建于前沿架构之上，为您提供兼具美感与性能的现代化数字解决方案。</p>
            </div> -->

            <!-- 交错布局容器 -->
            <div class="flex flex-col gap-24 lg:gap-32">
                
                <!-- 【第一组】 左侧图，右侧文 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                    
                    <div class="order-2 lg:order-1 relative rounded-[2rem] overflow-hidden shadow-2xl shadow-slate-200/60 border border-slate-100 group" data-aos="fade-right">
                        <img src="https://cn.nenghui.com/wp-content/uploads/2026/04/about-3.png" alt="Office Tech" class="w-full aspect-[6/3] object-cover group-hover:scale-105 transition-transform duration-700"/>
                        <div class="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
                    </div>
                    
                    <div class="order-1 lg:order-2 flex flex-col justify-center" data-aos="fade-left">
                        <!-- 短线条 + 标题 -->
                        <div class="flex items-center gap-4 mb-6">
                            <div class="w-1.5 h-10 bg-primary rounded-full shadow-[0_4px_10px_rgba(16,185,129,0.4)]"></div>
                            <h3 class="text-3xl font-display font-bold text-slate-heading">设计一流</h3>
                        </div>
                        <p class="text-lg text-slate-text leading-relaxed mb-8">
                         创始人及核心管理团队均来自于省级电力设计院，且长期致力于智慧能源和环保领域的设计与研究，有较强的专业背景，特别体现在电力设计、工程设计等领域具备一流能力
                        </p>
                       
                    </div>
                </div>

                <!-- 【第二组】 左侧文，右侧图 (交错) -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                    
                    <div class="order-1 lg:order-1 flex flex-col justify-center" data-aos="fade-right">
                        <div class="flex items-center gap-4 mb-6">
                            <div class="w-1.5 h-10 bg-accent rounded-full shadow-[0_4px_10px_rgba(249,115,22,0.4)]"></div>
                            <h3 class="text-3xl  font-display font-bold text-slate-heading"> 技术领先</h3>
                        </div>
                        <p class="text-lg text-slate-text leading-relaxed mb-8">
                         
   公司拥有超过200项各类知识产权，与清华大学、浙江大学、上海交通大学建立了长期技术合作伙伴关系，在光伏、储能、充换电、综合能源等领域深耕多年，具备全面技术领先优势
                          
                        </p>
                       
                    </div>

                    <div class="order-2 lg:order-2 relative rounded-[2rem] overflow-hidden shadow-2xl shadow-slate-200/60 border border-slate-100 group" data-aos="fade-left">
                        <img src="https://cn.nenghui.com/wp-content/uploads/2026/04/about-2.png" alt="Data Analytics" class="w-full aspect-[6/3] object-cover group-hover:scale-105 transition-transform duration-700"/>
                    </div>
                </div>

                <!-- 【第三组】 左侧图，右侧文 (交错) -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                    
                    <div class="order-2 lg:order-1 relative rounded-[2rem] overflow-hidden shadow-2xl shadow-slate-200/60 border border-slate-100 group bg-white p-2" data-aos="fade-right">
                        <!-- 微交互视差框 -->
                        <div data-tilt data-tilt-max="3" data-tilt-speed="400" data-tilt-glare="true" data-tilt-max-glare="0.1" class="w-full h-full rounded-[1.5rem] overflow-hidden">
                            <img src="https://cn.nenghui.com/wp-content/uploads/2026/04/about-1.png" alt="API Integration" class="w-full aspect-[6/3] object-cover"/>
                        </div>
                    </div>
                    
                    <div class="order-1 lg:order-2 flex flex-col justify-center" data-aos="fade-left">
                        <div class="flex items-center gap-4 mb-6">
                            <div class="w-1.5 h-10 bg-gradient-to-r from-primary to-blue-500 rounded-full shadow-[0_4px_10px_rgba(16,185,129,0.3)]"></div>
                            <h3 class="text-3xl font-display font-bold text-slate-heading">产品可靠</h3>
                        </div>
                        <p class="text-lg text-slate-text leading-relaxed mb-8">
                            公司已经累计为客户提供了近200个中大型新能源电站、一大批电力环保及电网工程的总包服务，也为海内外客户提供高性能储能产品和电动重卡充换电设备，质量可靠

                        </p>
                       
                    </div>
                </div>

            </div>
        </div>
    </section>

    <div class="">
    
    <!-- 特色区块 -->
    <?php include get_template_directory() . '/template-parts/block/block-about-features.php'; ?>

    <!-- 发展历程 -->


    <!-- 合作伙伴 -->
    <?php include get_template_directory() . '/template-parts/block/block-cooperate.php'; ?>

</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    
    <script>
        // AOS 初始化
        AOS.init({ 
            once: true, 
            offset: 100, 
            duration: 800,
            easing: 'ease-out-cubic'
        });
        </script>

<?php get_footer();?>