ECommerce.Module/Components/Pages/About.razor

@page "/about"
@using Common

<!-- Hero Section -->
<div class="relative w-full h-80 rounded-b-2xl overflow-hidden shadow-2xl mb-12 mt-32 md:mt-36">
    <div class="absolute inset-0 bg-cover bg-center"
        style="background-image: url(https://img.daisyui.com/images/stock/photo-1522071820081-009f0129c71c.webp);">
    </div>
    <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]"></div>
    <div class="relative z-10 h-full flex flex-col justify-center items-center text-center text-white py-16 px-6">
        <h1 class="text-5xl md:text-7xl font-extrabold mb-4 tracking-tight">About MassTech</h1>
        <p class="text-lg md:text-xl text-gray-200 max-w-2xl">Your trusted destination for premium products and curated bundles.</p>
    </div>
</div>

<!-- About Content -->
<div class="max-w-7xl mx-auto px-6 lg:px-12 pb-20 space-y-24">

    <!-- Mission Section -->
    <section class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
        <div>
            <h2 class="text-3xl font-black text-white mb-4 tracking-tight">Our Mission</h2>
            <p class="text-base leading-relaxed mb-3" style="color: #cbd5e1 !important;">
                At MassTech, we believe that finding the right product shouldn't be a chore. Our mission is to connect discerning shoppers with carefully curated, top-quality goods from trusted brands worldwide.
            </p>
            <p class="text-base leading-relaxed mb-3" style="color: #cbd5e1 !important;">
                Whether you're looking for cutting-edge electronics, timeless fashion pieces, or unique bundles that offer exceptional value, MassTech brings together quality, convenience, and great pricing in one seamless experience.
            </p>
            <p class="text-base leading-relaxed" style="color: #cbd5e1 !important;">
                Every item in our marketplace is vetted by our team to ensure it meets our high standards. We're not just another online store — we're your partner in finding products that truly elevate your everyday life.
            </p>
        </div>
        <div class="bg-orange-500/10 rounded-3xl p-6 border border-orange-500/20">
            <div class="grid grid-cols-2 gap-4 text-center">
                <div class="p-2">
                    <div class="text-4xl font-black text-primary mb-1">10K+</div>
                    <p class="text-white/70 text-xs font-semibold uppercase tracking-wider">Products</p>
                </div>
                <div class="p-2">
                    <div class="text-4xl font-black text-primary mb-1">500+</div>
                    <p class="text-white/70 text-xs font-semibold uppercase tracking-wider">Brands</p>
                </div>
                <div class="p-2">
                    <div class="text-4xl font-black text-primary mb-1">50K+</div>
                    <p class="text-white/70 text-xs font-semibold uppercase tracking-wider">Customers</p>
                </div>
                <div class="p-2">
                    <div class="text-4xl font-black text-primary mb-1">99%</div>
                    <p class="text-white/70 text-xs font-semibold uppercase tracking-wider">Satisfaction</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Values Section -->
    <section>
        <div class="text-center mb-8">
            <h2 class="text-3xl font-black text-white mb-3 tracking-tight">What We Stand For</h2>
            <p class="text-base max-w-2xl mx-auto" style="color: #cbd5e1 !important;">Our core values guide every decision we make, from the products we sell to the way we serve our community.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-5 border border-orange-500/10 hover:border-orange-500/30 transition-all">
                <div class="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                </div>
                <h3 class="text-base font-bold text-white mb-2">Quality First</h3>
                <p class="text-white/70 text-sm leading-relaxed">We never compromise on quality. Every product undergoes rigorous evaluation before earning a place in our marketplace.</p>
            </div>

            <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-5 border border-orange-500/10 hover:border-orange-500/30 transition-all">
                <div class="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                </div>
                <h3 class="text-base font-bold text-white mb-2">Customer First</h3>
                <p class="text-white/70 text-sm leading-relaxed">Your satisfaction drives everything we do. From browsing to delivery, we're here to make your experience exceptional.</p>
            </div>

            <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-5 border border-orange-500/10 hover:border-orange-500/30 transition-all">
                <div class="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                </div>
                <h3 class="text-base font-bold text-white mb-2">Innovation</h3>
                <p class="text-white/70 text-sm leading-relaxed">We constantly evolve our platform with the latest technology to give you a faster, smarter shopping experience.</p>
            </div>

            <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-5 border border-orange-500/10 hover:border-orange-500/30 transition-all">
                <div class="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <h3 class="text-base font-bold text-white mb-2">Global Reach</h3>
                <p class="text-white/70 text-sm leading-relaxed">With worldwide shipping and multilingual support, we bring great products to your doorstep, anywhere.</p>
            </div>

            <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-5 border border-orange-500/10 hover:border-orange-500/30 transition-all">
                <div class="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <h3 class="text-base font-bold text-white mb-2">Best Value</h3>
                <p class="text-white/70 text-sm leading-relaxed">Competitive pricing, exclusive bundles, and seasonal deals ensure you always get the most for your money.</p>
            </div>

            <div class="bg-base-100/50 backdrop-blur-sm rounded-2xl p-5 border border-orange-500/10 hover:border-orange-500/30 transition-all">
                <div class="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9-9-3m-9 9a9 9 0 019-9" />
                    </svg>
                </div>
                <h3 class="text-base font-bold text-white mb-2">Worldwide Shipping</h3>
                <p class="text-white/70 text-sm leading-relaxed">Fast, reliable shipping to over 100 countries. Track your order every step of the way.</p>
            </div>
        </div>
    </section>

    <!-- Story Section -->
    <section class="bg-base-100/30 backdrop-blur-sm rounded-3xl p-8">
        <h2 class="text-3xl font-black text-white mb-4 tracking-tight text-center">Our Story</h2>
        <div class="max-w-3xl mx-auto space-y-3 text-base leading-relaxed text-center" style="color: #cbd5e1 !important;">
            <p>
                MassTech was founded with a simple idea: shopping for premium products should be inspiring, not overwhelming. We noticed that the modern marketplace had become cluttered with low-quality goods, misleading descriptions, and inflated prices.
            </p>
            <p>
                We set out to change that. Starting with a small team of passionate curators and engineers, we built a platform that prioritizes quality over quantity. Every product on MassTech is hand-selected by our team of experts who understand what makes a product worth buying.
            </p>
            <p>
                Today, we're proud to serve thousands of customers across the globe, offering them access to the world's best products in one trusted place. But we're just getting started. As we grow, our commitment to quality, value, and customer service remains unchanged.
            </p>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="text-center">
        <h2 class="text-2xl font-black text-white mb-3">Ready to Experience the Difference?</h2>
        <p class="text-base mb-6 max-w-2xl mx-auto" style="color: #cbd5e1 !important;">Discover our curated collection of premium products and find your next favorite item.</p>
        <div class="flex flex-wrap gap-3 justify-center">
            <a href="/shop" class="btn bg-orange-600 hover:bg-orange-700 text-white border-orange-600 btn-md shadow-lg shadow-orange-500/20">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
                Start Shopping
            </a>
            <a href="/contact" class="btn bg-orange-600/10 hover:bg-orange-600/20 text-orange-400 border-orange-600/30 btn-md">
                Get in Touch
            </a>
        </div>
    </section>
</div>