bnmbnmbnhjkhjkhjkhjktyutyutyuytutyutyutyhgjgjghjgjghjguytutyry

halohalo bnmbnmbnhjkhjkhjkhjktyutyutyuytutyutyutyhgjgjghjgjghjguytutyry

<?php
$pageTitle = 'About Us';

$extraHead = '
<style type="text/css">
    @keyframes scroll-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 12px)); }
    }
    @keyframes scroll-right {
        0% { transform: translateX(calc(-50% - 12px)); }
        100% { transform: translateX(0); }
    }
    .animate-scroll-left { animation: scroll-left 40s linear infinite; }
    .animate-scroll-right { animation: scroll-right 40s linear infinite; }
    .pause-on-hover:hover .animate-scroll-left,
    .pause-on-hover:hover .animate-scroll-right { animation-play-state: paused; }
    .card-gradient { background: linear-gradient(135deg, #18181a 0%, #080808 100%); }
</style>';

include 'header.php';
?>

<section class="relative bg-[#050505] py-10 overflow-hidden">
        <div class="max-w-[1360px] mx-auto px-6 relative z-10 mb-14">
            <h2 class="text-center text-white text-[30px] font-light tracking-normal">
                About Stanjo
            </h2>
        </div>
        
        <div
            class="absolute left-0 top-0 bottom-0 w-[15%] md:w-[25%] bg-gradient-to-r from-[#050505] via-[#050505]/80 to-transparent z-20 pointer-events-none">
        </div>
        <div
            class="absolute right-0 top-0 bottom-0 w-[15%] md:w-[25%] bg-gradient-to-l from-[#050505] via-[#050505]/80 to-transparent z-20 pointer-events-none">
        </div>

<div class="pause-on-hover relative z-10 flex flex-col gap-6">
            
            <div class="flex gap-6 w-max animate-scroll-left">
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">100% FOCUS ON LED
                        LIGHT</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">Over 20 years dedicated industry and
                        focus only on LED products to illuminate the future with our advanced technology.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">LOW COST OF
                        OWNERSHIP</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">When you switch to LED, the
                        maintenance costs and 80% less energy. Our energy-efficient LED make ownership significantly
                        less cost.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">LONG LIFE WARRANTY
                        IN INDIA</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">Stanjo offers up to 50,000 hours life
                        for LED panels it is engineered for lowest failure rate with the best material, EMC technology,
                        and structure.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">BRIGHTER ENVIRONMENT
                    </h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">Our LED are designed to be extremely
                        bright environment. You will absolutely feel the amazing life difference.</p>
                </div>
                
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">100% FOCUS ON LED
                        LIGHT</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">Over 20 years dedicated industry and
                        focus only on LED products to illuminate the future with our advanced technology.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">LOW COST OF
                        OWNERSHIP</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">When you switch to LED, the
                        maintenance costs and 80% less energy. Our energy-efficient LED make ownership significantly
                        less cost.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">LONG LIFE WARRANTY
                        IN INDIA</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">Stanjo offers up to 50,000 hours life
                        for LED panels it is engineered for lowest failure rate with the best material, EMC technology,
                        and structure.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">BRIGHTER ENVIRONMENT
                    </h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">Our LED are designed to be extremely
                        bright environment. You will absolutely feel the amazing life difference.</p>
                </div>
            </div>

<div class="flex gap-6 w-max animate-scroll-right">
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">ECO GREEN EFFORT
                    </h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">We operate conscious minimum waste
                        producing practices towards more green values.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">MADE IN INDIA, FOR
                        INDIA</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">All our green LED products are
                        locally manufactured with 10 times under tough Indian condition and BIS regulations to match
                        perfectly Indian environment.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">HIGH QUALITY OF
                        LIGHT</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">Highest CRI colors render true
                        standards which absolutely matches the exact true Colors in the magic light rays.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">GROWING ALL REFLECT
                        HIGH STANDARD</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">We combine High CRI and solid
                        reliability. Our products stand out to our modern LED values.</p>
                </div>
                
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">ECO GREEN EFFORT
                    </h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">We operate conscious minimum waste
                        producing practices towards more green values.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">MADE IN INDIA, FOR
                        INDIA</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">All our green LED products are
                        locally manufactured with 10 times under tough Indian condition and BIS regulations to match
                        perfectly Indian environment.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">HIGH QUALITY OF
                        LIGHT</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">Highest CRI colors render true
                        standards which absolutely matches the exact true Colors in the magic light rays.</p>
                </div>
                <div
                    class="w-[300px] md:w-[380px] flex-shrink-0 card-gradient p-8 border border-[#2a2a2a] rounded-[2px] hover:border-[#444] transition-colors duration-300">
                    <h3 class="text-white text-[12px] uppercase tracking-widest font-semibold mb-3">GROWING ALL REFLECT
                        HIGH STANDARD</h3>
                    <p class="text-[#888888] text-[13px] leading-[1.8] font-light">We combine High CRI and solid
                        reliability. Our products stand out to our modern LED values.</p>
                </div>
            </div>
        </div>
    </section>

<section class="bg-[#111] py-10 border-t border-[#1a1a1a]">

<div class="max-w-[1300px] mx-auto px-4">

<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">

<div class="relative group w-full overflow-hidden bg-black/40 border border-[#222] rounded-lg">

<div
                            class="absolute inset-0 bg-[#333] opacity-0 group-hover:opacity-40 transition-all duration-500">
                        </div>

<div class="absolute inset-0 bg-gradient-to-r from-transparent to-[#111]/30"></div>
                    </div>

<div class="flex flex-col gap-5 text-[16px] text-[#888888] font-light leading-[1.7] text-center">

<h2 class="text-white text-[30px] font-light tracking-normal mb-3">
                            Why Stanjo?
                        </h2>

<div class="text-[#999999] text-[13px] max-w-[700px] mx-auto text-left">
                            <p>Top 5 reasons we believe it is your return on the value you put in by choosing Stanjo</p>

<p>Stanjo stands as one of the leading LED lighting manufacturers with state-of-the-art
                                products setting true trends in design, quality, and performance standards.</p>

<p>Delivering products through deep research and strictly followed steps from concept to
                                production.</p>

<p>Stanjo ensures vibrant spaces with modern lighting standards for homes and businesses.
                            </p>

<p>Designed for performance in Indian power conditions since 2012.</p>
                        </div>

</div>

</section>
    
    <section class="bg-[#050505] py-10 pb-32 border-t border-[#111]">

<div class="max-w-[1200px] mx-auto mb-6 px-4">

<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">

<div
                    class="relative group bg-[#0F0F0F] border border-[#1A1A1A] p-6 md:p-8 lg:p-10 flex flex-col pt-12 overflow-hidden rounded-lg">

<p class="relative z-10 text-[#888888] text-[13px] font-light leading-[1.85] mb-10 flex-grow pr-4">
                        The Color Rendering Index (CRI) measures the accuracy a light source displays colors
                        compared to natural sunlight. Inside our modern LED lighting, a great CRI means colors
                        appear more natural, vibrant, and true to life. It is highly particularly important in
                        environments like retail, display spaces, and art studios, and simply also for the real
                        user. While many LED typically have 80 or less, they often compromise on color accuracy in
                        real good time. With our high CRI LEDs (which carry 90+), you literally match it so
                        perfectly real life appearances highlighting real moods setting properly making it an
                        absolute premium standard LED standard.
                    </p>

<div
                    class="relative group bg-[#0F0F0F] border border-[#1A1A1A] p-6 md:p-8 lg:p-10 flex flex-col pt-12 overflow-hidden rounded-lg">

<h2 class="relative z-10 text-white text-[30px] font-light tracking-normal mb-5">
                        Why Flicker Free
                    </h2>

<p class="relative z-10 text-[#888888] text-[13px] font-light leading-[1.85] mb-10 flex-grow pr-4">
                        Flickering in cheap, substandard lighting can easily lead to healthy issues making eye
                        strain and headaches with all combined while working or reading daily. And it causes an
                        annoying issues and a huge strain on your video and photography equipments. Poor lighting
                        stands to act strict on low quality components. At Stanjo we typically employ a top premium
                        driver inside the housing filtering away all these waves effectively. Result is pure
                        lighting which stays smooth therefore you are totally safe from eye strain whether capturing
                        photos and videos it will simply look natural and extremely good.
                    </p>

</div>

</section>

<section class="bg-stanjo-bg py-10 border-t border-[#1a1a1a]">
        <div class="max-w-[1360px] mx-auto px-6">

<h2 class="text-center text-white text-[30px] font-light tracking-normal mb-2">
                Our Process
            </h2>

<p class="text-center text-[#999999] text-[16px] mb-16 font-light">
                Rigorous step setting checks ensures highest consistency, energy efficiency, reliability across all
                lighting
            </p>

<div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <?php
                    $sliderQuery = "SELECT * FROM about_slider WHERE status = 1 ORDER BY id DESC";
                    $sliderResult = $conn->query($sliderQuery);
                    if ($sliderResult->num_rows > 0) {
                        while ($slide = $sliderResult->fetch_assoc()) {
                            $imagePath = 'admin/uploads/' . htmlspecialchars($slide['image']);
                            $title = htmlspecialchars($slide['title']);
                            // Replace spaces with <br> to somewhat match original layout, or just use it directly
                            // if they typed long string. We will just output it directly.
                            $ext = pathinfo($slide['image'], PATHINFO_EXTENSION);
                            $mediaHtml = "";
                            if (strtolower($ext) === 'mp4') {
                                $mediaHtml = '<video src="' . $imagePath . '" muted autoplay loop playsinline class="w-full h-[170px] object-cover opacity-90"></video>';
                            } else {
                                $mediaHtml = '<img src="' . $imagePath . '" class="w-full h-[170px] object-cover opacity-90 grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700">';
                            }
                            ?>
                            <div class="swiper-slide">
                                <div class="relative group border border-[#222] overflow-hidden">
                                    <?= $mediaHtml ?>

</div>
    </section>
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 5,
            spaceBetween: 16,
            loop: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            breakpoints: {
                320: { slidesPerView: 1 },
                640: { slidesPerView: 2 },
                768: { slidesPerView: 3 },
                1024: { slidesPerView: 5 }
            },
            on: {
                init: function () {
                    this.el.querySelectorAll('video').forEach(video => {
                        video.play().catch(e => console.log('Auto-play blocked:', e));
                    });
                },
                slideChange: function () {
                    this.el.querySelectorAll('video').forEach(video => {
                        video.play().catch(e => console.log('Auto-play blocked:', e));
                    });
                }
            }
        });
    </script>
    
    <section class="bg-[#111] py-10 pb-14">
        <div class="max-w-[1360px] mx-auto px-5">
            <h2 class="text-center text-white text-[30px] font-light tracking-normal mb-2">
                Our Certificate
            </h2>
            <p class="text-center text-[#999999] text-[16px] mb-16 font-light">STANJO's strict compliance testing to
                global standards, energy efficiency, durability and stable lighting</p>
            
            
            <div class="relative group">
                <div class="swiper certSwiper pb-12">
                    <div class="swiper-wrapper">
                        <?php
                        $certQuery = "SELECT * FROM certificates WHERE status = 1 ORDER BY id DESC";
                        $certResult = $conn->query($certQuery);
                        if ($certResult->num_rows > 0) {
                            while ($cert = $certResult->fetch_assoc()) {
                                $imagePath = 'admin/uploads/' . htmlspecialchars($cert['image']);
                                echo '
                                <div class="swiper-slide">
                                    <div class="bg-[#1a1a1a] transition-transform duration-300 ease-in-out hover:scale-[1.02]">
                                        <div class="w-full bg-white h-full relative border border-[#222]">
                                            <img src="' . $imagePath . '" alt="Stanjo Certificate"
                                                class="w-full h-auto aspect-[3/4] object-contain p-4">
                                        </div>
                                    </div>
                                </div>';
                            }
                        }
                        ?>
                    </div>
                    
                    <div class="swiper-pagination"></div>
                </div>
                
                
                <div class="swiper-button-next !text-white !w-10 !h-10 !bg-black/50 backdrop-blur-md rounded-none after:!text-[18px] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div class="swiper-button-prev !text-white !w-10 !h-10 !bg-black/50 backdrop-blur-md rounded-none after:!text-[18px] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            
        </div>
    </section>

<?php include 'footer.php'; ?>