@extends('layouts.app')

@section('title', 'Smart QR Keychains India | OneQR')

@section('content')
    <section class="relative pt-32 pb-24 lg:pt-48 lg:pb-32 overflow-hidden bg-primary">
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <div
                class="absolute top-0 -left-4 w-72 h-72 bg-accent rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob">
            </div>
            <div
                class="absolute top-0 -right-4 w-72 h-72 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000">
            </div>
            <div
                class="absolute -bottom-8 left-20 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000">
            </div>
            <div class="absolute inset-0"
                style="background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px;">
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
                <div class="max-w-2xl text-center lg:text-left">
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-8">
                        <span class="relative flex h-3 w-3">
                            <span
                                class="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-accent"></span>
                        </span>
                        <span class="text-white text-xs font-semibold tracking-widest uppercase">The Future of
                            Identity</span>
                    </div>
                    <h1 class="font-heading text-5xl sm:text-6xl lg:text-7xl font-black text-white leading-[1.1] mb-6">
                        Smart Tags for <br>
                        <span class="text-gradient">Students, Pets & Vehicles</span>
                    </h1>
                    <p class="text-lg sm:text-xl text-slate-300 mb-10 leading-relaxed max-w-xl mx-auto lg:mx-0 font-light">
                        Stay connected instantly. Share emergency, contact, and identity details with a single QR scan.
                        No app required.
                    </p>
                    <div class="flex flex-col sm:flex-row items-center lg:justify-start justify-center gap-4">
                        <a href="{{ url('/buy-smart-qr-keychains-india') }}"
                            class="w-full sm:w-auto inline-flex justify-center items-center gap-2 bg-accent hover:bg-accent-light text-primary font-bold px-8 py-4 rounded-2xl transition-all transform hover:-translate-y-1 shadow-glow">
                            Shop Smart Tags
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                        <a href="{{ url('/about-oneqrscan') }}"
                            class="w-full sm:w-auto inline-flex justify-center items-center gap-2 glass-card hover:bg-white/10 text-white font-semibold px-8 py-4 rounded-2xl transition-all">
                            Learn More
                        </a>
                    </div>
                </div>

                <div class="relative lg:ml-auto w-full max-w-lg mx-auto mt-10 lg:mt-0 animate-float">
                    <div class="relative w-full aspect-square flex items-center justify-center">
                        <div class="absolute inset-0 bg-gradient-to-tr from-accent/20 to-transparent rounded-full blur-3xl">
                        </div>

                        <div
                            class="absolute -ml-24 -mt-20 w-56 glass-card p-4 rounded-3xl shadow-2xl transform -rotate-6 z-20 backdrop-blur-xl bg-white/10 border border-white/20">
                            <img src="{{ asset('assets/images/bike-keychain.png') }}"
                                class="w-full h-36 object-cover rounded-2xl mb-4" alt="Bike Safety">
                            <div class="flex justify-between items-start">
                                <div>
                                    <div class="font-heading font-bold text-white text-lg leading-tight">Digital Docs</div>
                                    <div class="text-[10px] text-slate-300 mt-1 uppercase tracking-wider font-semibold">Bike
                                        Protection</div>
                                </div>
                                <div class="w-10 h-10 bg-white rounded-lg p-1 shadow-lg">
                                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=BikeSafety"
                                        class="w-full h-full" alt="QR Code">
                                </div>
                            </div>
                            <div class="flex gap-2 mt-3">
                                <span
                                    class="text-[9px] bg-accent/20 text-accent px-2 py-0.5 rounded-md border border-accent/30 font-bold">RC</span>
                                <span
                                    class="text-[9px] bg-blue-500/20 text-blue-300 px-2 py-0.5 rounded-md border border-blue-500/30 font-bold">INSURANCE</span>
                            </div>
                        </div>

                        <div
                            class="absolute z-10 w-64 bg-white p-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] transform rotate-3 translate-y-16 translate-x-12 border border-slate-100">
                            <div
                                class="w-full aspect-square mx-auto bg-slate-50 p-4 rounded-2xl mb-5 border border-slate-100 flex flex-col items-center justify-center">
                                <img src="{{ asset('assets/images/student-keychain.png') }}"
                                    class="w-full h-36 object-cover rounded-2xl mb-4" alt="Bike Safety">

                            </div>
                            <div class="text-center">
                                <div class="font-heading font-black text-primary text-xl tracking-tight">Krishika Kowtham
                                </div>
                                <div class="text-xs font-bold text-slate-400 mt-1">Grade 3 • Section A</div>
                                <div class="flex items-center justify-center gap-2 mt-3">
                                    <span
                                        class="text-[10px] uppercase tracking-wider font-bold text-red-500 bg-red-50 px-2 py-1 rounded-md border border-red-100">Emergency
                                        Contact</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="relative z-20 -mt-10 mx-4 sm:mx-8 lg:mx-auto max-w-6xl">
        <div class="bg-white rounded-3xl shadow-soft border border-slate-100 p-2">
            <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-slate-100">
                <div
                    class="flex items-center gap-4 p-6 justify-center md:justify-start hover:bg-slate-50 transition-colors rounded-2xl">
                    <div
                        class="w-12 h-12 rounded-2xl bg-accent/10 flex items-center justify-center text-accent flex-shrink-0">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-heading font-bold text-primary text-lg">No App Required</h3>
                        <p class="text-sm text-slate-500">Scan instantly with any camera</p>
                    </div>
                </div>
                <div
                    class="flex items-center gap-4 p-6 justify-center md:justify-start hover:bg-slate-50 transition-colors rounded-2xl">
                    <div
                        class="w-12 h-12 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500 flex-shrink-0">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                            </path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-heading font-bold text-primary text-lg">Bank-Grade Security</h3>
                        <p class="text-sm text-slate-500">You control what gets shared</p>
                    </div>
                </div>
                <div
                    class="flex items-center gap-4 p-6 justify-center md:justify-start hover:bg-slate-50 transition-colors rounded-2xl">
                    <div
                        class="w-12 h-12 rounded-2xl bg-emerald-50 flex items-center justify-center text-emerald-500 flex-shrink-0">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                            </path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-heading font-bold text-primary text-lg">Update Anytime</h3>
                        <p class="text-sm text-slate-500">Edit details via cloud dashboard</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section id="about" class="py-24 lg:py-32">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                <div class="order-2 lg:order-1 relative">
                    <div class="relative z-10 rounded-[2rem] overflow-hidden shadow-2xl border-8 border-white">
                        <img src="https://images.unsplash.com/photo-1512428559087-560fa5ceab42?auto=format&fit=crop&w=800&q=80"
                            alt="Smartphone usage"
                            class="w-full h-auto object-cover hover:scale-105 transition-transform duration-700">
                    </div>
                    <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-accent rounded-full -z-10 blur-3xl opacity-40">
                    </div>
                    <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-400 rounded-full -z-10 blur-3xl opacity-20">
                    </div>
                    <div class="absolute bottom-10 -left-12 bg-white p-6 rounded-2xl shadow-xl border border-slate-100 z-20 animate-float"
                        style="animation-delay: 1s;">
                        <div class="flex items-center gap-4">
                            <div
                                class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center text-green-500">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <div>
                                <div class="font-heading font-black text-2xl text-primary">10k+</div>
                                <div class="text-sm text-slate-500 font-medium">Scans Performed</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-1 lg:order-2">
                    <span class="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Our Mission</span>
                    <h2 class="font-heading text-4xl md:text-5xl font-black text-primary mb-6 leading-tight">Bridging
                        the Physical World with <span
                            class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">Digital
                            Identity</span></h2>
                    <p class="text-slate-600 mb-6 text-lg leading-relaxed">
                        OneQR is building India's most secure and accessible identity infrastructure. We replace
                        traditional, static ID cards and metal tags with dynamic, cloud-connected QR technology.
                    </p>
                    <p class="text-slate-600 mb-10 text-lg leading-relaxed">
                        Whether it's ensuring a lost pet finds its way home, providing instant medical data for an
                        elderly parent, or digitizing your vehicle's RC—we make vital information accessible exactly
                        when it's needed.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-6">
                        <div class="flex items-center gap-3">
                            <div
                                class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-primary border border-slate-200">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                    </path>
                                </svg>
                            </div>
                            <span class="font-semibold text-primary">AES-256 Encryption</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div
                                class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-primary border border-slate-200">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                    </path>
                                </svg>
                            </div>
                            <span class="font-semibold text-primary">100% Privacy Control</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="products" class="py-24 bg-slate-50 relative overflow-hidden">
        <div
            class="absolute top-0 right-0 w-[600px] h-[600px] bg-[#f5b11c]/5 rounded-full blur-[100px] pointer-events-none">
        </div>
        <div
            class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-[#32445a]/5 rounded-full blur-[100px] pointer-events-none">
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">

            <div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6 border-b border-slate-200 pb-6">
                <div class="max-w-2xl">
                    <span
                        class="text-[#f5b11c] font-bold uppercase tracking-widest text-sm mb-2 block flex items-center gap-2">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        Premium Hardware
                    </span>
                    <h2 class="font-heading text-4xl md:text-5xl font-black text-[#32445a]">Shop Smart Tags</h2>
                </div>
                <a href="{{ url('buy-smart-qr-keychains-india') }}"
                    class="hidden md:inline-flex items-center gap-2 text-[#32445a] font-bold hover:text-[#f5b11c] transition-colors pb-2">
                    View Full Catalog
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">

                <div
                    class="bg-white rounded-3xl p-3 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(50,68,90,0.12)] transition-all duration-300 group flex flex-col h-full border border-slate-100">
                    <div class="relative w-full h-64 rounded-2xl overflow-hidden bg-slate-100 mb-5">
                        <img src="{{ asset('assets/images/products/1.png') }}" alt="Vehicle Tag"
                            class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out">

                        <div
                            class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        </div>

                        <div
                            class="absolute top-3 left-3 bg-[#f5b11c] text-[#32445a] text-xs font-black uppercase px-3 py-1.5 rounded-lg tracking-wider shadow-md">
                            Best Seller</div>

                        <button
                            class="absolute bottom-3 right-3 w-12 h-12 bg-white rounded-full flex items-center justify-center text-[#32445a] shadow-lg translate-y-12 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 hover:bg-[#32445a] hover:text-white">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                                </path>
                            </svg>
                        </button>
                    </div>

                    <div class="px-3 pb-3 flex flex-col flex-grow">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4 text-[#f5b11c] fill-current" viewBox="0 0 20 20">
                                    <path
                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                    </path>
                                </svg>
                                <span class="text-xs text-slate-500 font-medium">4.9 (420)</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-xs text-slate-400 line-through">₹800</span>
                                <span class="font-black text-[#32445a] text-lg">₹499</span>
                            </div>
                        </div>

                        <h3 class="font-heading text-lg font-bold text-[#32445a] mb-1 line-clamp-1">Vehicle Contact Tag
                        </h3>
                        <p class="text-sm text-slate-500 mb-4 line-clamp-2">Smart parking solution. Get notified to
                            move your car securely.</p>

                        <div class="flex-grow"></div>
                        <a href="#buy"
                            class="w-full block text-center border-2 border-[#32445a] text-[#32445a] font-bold py-2.5 rounded-xl hover:bg-[#32445a] hover:text-white transition-colors">
                            Add to Cart
                        </a>
                    </div>
                </div>

                <div
                    class="bg-white rounded-3xl p-3 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(50,68,90,0.12)] transition-all duration-300 group flex flex-col h-full border border-slate-100">
                    <div class="relative w-full h-64 rounded-2xl overflow-hidden bg-slate-100 mb-5">
                        <img src="{{ asset('assets/images/products/4.png') }}" alt="Student Tag"
                            class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        </div>

                        <button
                            class="absolute bottom-3 right-3 w-12 h-12 bg-white rounded-full flex items-center justify-center text-[#32445a] shadow-lg translate-y-12 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 hover:bg-[#32445a] hover:text-white">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                                </path>
                            </svg>
                        </button>
                    </div>

                    <div class="px-3 pb-3 flex flex-col flex-grow">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4 text-[#f5b11c] fill-current" viewBox="0 0 20 20">
                                    <path
                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                    </path>
                                </svg>
                                <span class="text-xs text-slate-500 font-medium">4.8 (185)</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-xs text-slate-400 line-through">₹800</span>
                                <span class="font-black text-[#32445a] text-lg">₹499</span>
                            </div>
                        </div>

                        <h3 class="font-heading text-lg font-bold text-[#32445a] mb-1 line-clamp-1">Student Safety Tag
                        </h3>
                        <p class="text-sm text-slate-500 mb-4 line-clamp-2">Ensure child safety. Instantly share
                            emergency contacts & medical info.</p>

                        <div class="flex-grow"></div>
                        <a href="#buy"
                            class="w-full block text-center border-2 border-[#32445a] text-[#32445a] font-bold py-2.5 rounded-xl hover:bg-[#32445a] hover:text-white transition-colors">
                            Add to Cart
                        </a>
                    </div>
                </div>

                <div
                    class="bg-white rounded-3xl p-3 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(50,68,90,0.12)] transition-all duration-300 group flex flex-col h-full border border-slate-100">
                    <div class="relative w-full h-64 rounded-2xl overflow-hidden bg-slate-100 mb-5">
                        <img src="{{ asset('assets/images/products/3.png') }}" alt="Pet Tag"
                            class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        </div>

                        <div
                            class="absolute top-3 left-3 bg-red-500 text-white text-[10px] font-black uppercase px-2.5 py-1 rounded-md tracking-wider shadow-md flex items-center gap-1">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            Trending
                        </div>

                        <button
                            class="absolute bottom-3 right-3 w-12 h-12 bg-white rounded-full flex items-center justify-center text-[#32445a] shadow-lg translate-y-12 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 hover:bg-[#32445a] hover:text-white">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                                </path>
                            </svg>
                        </button>
                    </div>

                    <div class="px-3 pb-3 flex flex-col flex-grow">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4 text-[#f5b11c] fill-current" viewBox="0 0 20 20">
                                    <path
                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                    </path>
                                </svg>
                                <span class="text-xs text-slate-500 font-medium">4.7 (310)</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-xs text-slate-400 line-through">₹800</span>
                                <span class="font-black text-[#32445a] text-lg">₹499</span>
                            </div>
                        </div>

                        <h3 class="font-heading text-lg font-bold text-[#32445a] mb-1 line-clamp-1">Pet Recovery Tag
                        </h3>
                        <p class="text-sm text-slate-500 mb-4 line-clamp-2">Attach to collar. Finders can scan to view
                            contact info & trigger GPS alert.</p>

                        <div class="flex-grow"></div>
                        <a href="#buy"
                            class="w-full block text-center border-2 border-[#32445a] text-[#32445a] font-bold py-2.5 rounded-xl hover:bg-[#32445a] hover:text-white transition-colors">
                            Add to Cart
                        </a>
                    </div>
                </div>

                <div
                    class="bg-white rounded-3xl p-3 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(50,68,90,0.12)] transition-all duration-300 group flex flex-col h-full border border-slate-100">
                    <div class="relative w-full h-64 rounded-2xl overflow-hidden bg-slate-100 mb-5">
                        <img src="{{ asset('assets/images/products/2.png') }}" alt="Elder Tag"
                            class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        </div>

                        <button
                            class="absolute bottom-3 right-3 w-12 h-12 bg-white rounded-full flex items-center justify-center text-[#32445a] shadow-lg translate-y-12 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 hover:bg-[#32445a] hover:text-white">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                                </path>
                            </svg>
                        </button>
                    </div>

                    <div class="px-3 pb-3 flex flex-col flex-grow">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4 text-[#f5b11c] fill-current" viewBox="0 0 20 20">
                                    <path
                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                    </path>
                                </svg>
                                <span class="text-xs text-slate-500 font-medium">4.9 (95)</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-xs text-slate-400 line-through">₹800</span>
                                <span class="font-black text-[#32445a] text-lg">₹499</span>
                            </div>
                        </div>

                        <h3 class="font-heading text-lg font-bold text-[#32445a] mb-1 line-clamp-1">Elder Safety Tag
                        </h3>
                        <p class="text-sm text-slate-500 mb-4 line-clamp-2">Vital for seniors. Stores blood group,
                            allergies, and emergency contacts securely.</p>

                        <div class="flex-grow"></div>
                        <a href="#buy"
                            class="w-full block text-center border-2 border-[#32445a] text-[#32445a] font-bold py-2.5 rounded-xl hover:bg-[#32445a] hover:text-white transition-colors">
                            Add to Cart
                        </a>
                    </div>
                </div>

            </div>

            <div class="mt-10 text-center md:hidden">
                <a href="{{ url('/buy-smart-qr-keychains-india') }}"
                    class="inline-flex items-center gap-2 bg-[#32445a] text-white font-bold px-8 py-4 rounded-xl shadow-lg">
                    View Full Catalog
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>

        </div>
    </section>

    <section id="how-it-works" class="py-24 lg:py-32 bg-primary relative overflow-hidden">
        <div
            class="absolute right-0 top-0 w-[500px] h-[500px] bg-accent rounded-full filter blur-[100px] opacity-10 -mr-40 -mt-40">
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center max-w-3xl mx-auto mb-20">
                <span class="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Simple Process</span>
                <h2 class="font-heading text-4xl md:text-5xl font-black text-white mb-6">How Does it Work?</h2>
            </div>

            <div class="grid md:grid-cols-3 gap-12 relative">
                <div
                    class="hidden md:block absolute top-12 left-[16.66%] right-[16.66%] h-0.5 bg-gradient-to-r from-transparent via-white/20 to-transparent border-t border-dashed border-white/30">
                </div>

                <div class="relative text-center group">
                    <div
                        class="w-24 h-24 mx-auto bg-primary-light border border-white/10 shadow-2xl rounded-3xl flex items-center justify-center text-4xl font-black text-white mb-8 relative z-10 group-hover:-translate-y-2 transition-transform duration-300">
                        1
                    </div>
                    <h4 class="font-heading text-2xl font-bold mb-4 text-white">Scan with Camera</h4>
                    <p class="text-slate-400 text-base leading-relaxed max-w-xs mx-auto">Scan the code using any
                        standard smartphone camera. No special apps needed.</p>
                </div>

                <div class="relative text-center group">
                    <div
                        class="w-24 h-24 mx-auto bg-accent border border-accent-light shadow-glow rounded-3xl flex items-center justify-center text-4xl font-black text-white mb-8 relative z-10 group-hover:-translate-y-2 transition-transform duration-300">
                        2
                    </div>
                    <h4 class="font-heading text-2xl font-bold mb-4 text-white">View Profile</h4>
                    <p class="text-slate-400 text-base leading-relaxed max-w-xs mx-auto">The finder instantly sees your
                        digital profile, including emergency contacts.</p>
                </div>

                <div class="relative text-center group">
                    <div
                        class="w-24 h-24 mx-auto bg-primary-light border border-white/10 shadow-2xl rounded-3xl flex items-center justify-center text-4xl font-black text-white mb-8 relative z-10 group-hover:-translate-y-2 transition-transform duration-300">
                        3
                    </div>
                    <h4 class="font-heading text-2xl font-bold mb-4 text-white">Update Cloud</h4>
                    <p class="text-slate-400 text-base leading-relaxed max-w-xs mx-auto">Moved house? Change your
                        details anytime in the dashboard. The tag auto-updates.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="app" class="py-24 lg:py-32 overflow-hidden bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-slate-50 rounded-[3rem] p-8 lg:p-16 border border-slate-200">
                <div class="grid lg:grid-cols-2 gap-16 items-center">
                    <div class="flex flex-col justify-center order-2 lg:order-1">
                        <span class="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Mobile
                            Dashboard</span>
                        <h2 class="font-heading text-4xl md:text-5xl font-black text-primary mb-6 leading-tight">Manage
                            Your Identity<br>From Anywhere</h2>
                        <p class="text-slate-500 mb-10 text-lg leading-relaxed">
                            Take complete control of your data. Add multiple tags, update emergency contacts, and toggle
                            privacy settings instantly from your phone.
                        </p>

                        <div class="space-y-8">
                            <div class="flex gap-4">
                                <div
                                    class="w-12 h-12 rounded-2xl bg-white shadow-sm border border-slate-100 flex items-center justify-center text-accent flex-shrink-0">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-primary text-lg mb-1">Real-time Updates</h4>
                                    <p class="text-sm text-slate-500 leading-relaxed">Change a phone number in the app,
                                        and the physical QR tag is instantly updated.</p>
                                </div>
                            </div>
                            <div class="flex gap-4">
                                <div
                                    class="w-12 h-12 rounded-2xl bg-white shadow-sm border border-slate-100 flex items-center justify-center text-accent flex-shrink-0">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z">
                                        </path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-primary text-lg mb-1">Multiple Profiles</h4>
                                    <p class="text-sm text-slate-500 leading-relaxed">Manage the family car, your pet,
                                        and your child's tag all from one unified dashboard.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative flex items-center justify-center order-1 lg:order-2">
                        <div class="absolute inset-0 bg-blue-100 rounded-full blur-[80px] opacity-60"></div>

                        <div
                            class="w-[280px] sm:w-[320px] h-[600px] bg-white rounded-[3rem] shadow-2xl border-[10px] border-slate-800 relative z-10 overflow-hidden ring-1 ring-slate-900/5">
                            <div class="absolute top-0 inset-x-0 h-7 bg-slate-800 rounded-b-2xl mx-20 z-20"></div>

                            <div class="h-full bg-slate-50 flex flex-col pt-12">
                                <div class="px-6 pb-6 bg-white border-b border-slate-100">
                                    <div class="text-sm text-slate-400 font-medium mb-1">Welcome back,</div>
                                    <div class="font-heading font-black text-xl text-primary">Rahul M.</div>
                                </div>
                                <div class="p-6 flex-grow overflow-y-auto no-scrollbar">
                                    <div class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Your
                                        Active Tags</div>

                                    <div
                                        class="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 mb-4 hover:border-blue-200 transition-colors cursor-pointer">
                                        <div class="flex justify-between items-start mb-3">
                                            <div class="flex items-center gap-3">
                                                <div
                                                    class="w-10 h-10 bg-blue-50 text-blue-500 rounded-xl flex items-center justify-center">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor"
                                                        viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            stroke-width="2"
                                                            d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z">
                                                        </path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <div class="font-bold text-primary text-sm">Honda City</div>
                                                    <div class="text-xs text-slate-400">TN 09 AB 1234</div>
                                                </div>
                                            </div>
                                            <span class="relative flex h-2.5 w-2.5 mt-1">
                                                <span
                                                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                                                <span
                                                    class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
                                            </span>
                                        </div>
                                    </div>

                                    <div
                                        class="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 mb-4 hover:border-orange-200 transition-colors cursor-pointer">
                                        <div class="flex justify-between items-start mb-3">
                                            <div class="flex items-center gap-3">
                                                <div
                                                    class="w-10 h-10 bg-orange-50 text-orange-500 rounded-xl flex items-center justify-center">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor"
                                                        viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            stroke-width="2"
                                                            d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5">
                                                        </path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <div class="font-bold text-primary text-sm">Max (Dog)</div>
                                                    <div class="text-xs text-slate-400">Collar Tag</div>
                                                </div>
                                            </div>
                                            <span class="relative flex h-2.5 w-2.5 mt-1">
                                                <span
                                                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                                                <span
                                                    class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
                                            </span>
                                        </div>
                                    </div>

                                    <button
                                        class="w-full bg-slate-900 text-white font-bold rounded-xl py-3 mt-2 text-sm flex items-center justify-center gap-2 border border-slate-800 hover:bg-slate-800 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 4v16m8-8H4"></path>
                                        </svg>
                                        Activate New Tag
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-24 bg-slate-50 border-t border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="font-heading text-3xl md:text-4xl font-black text-primary mb-6">Trusted by Thousands</h2>
            </div>

            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100">
                    <div class="flex gap-1 text-accent mb-6">
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                    </div>
                    <p class="text-slate-600 italic mb-8 leading-relaxed">"Best solution for parking issues. People can
                        scan the tag to call me if I need to move my car without my number being publicly visible."</p>
                    <div class="flex items-center gap-4">
                        <div
                            class="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center font-bold text-lg">
                            V</div>
                        <div>
                            <div class="font-bold text-primary">Vikram T.</div>
                            <div class="text-sm text-slate-400">Chennai</div>
                        </div>
                    </div>
                </div>

                <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100">
                    <div class="flex gap-1 text-accent mb-6">
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                    </div>
                    <p class="text-slate-600 italic mb-8 leading-relaxed">"My dog jumped the fence. The person who
                        found him scanned the tag and I had him back within hours. Best investment ever."</p>
                    <div class="flex items-center gap-4">
                        <div
                            class="w-12 h-12 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center font-bold text-lg">
                            R</div>
                        <div>
                            <div class="font-bold text-primary">Rahul M.</div>
                            <div class="text-sm text-slate-400">Pondicherry</div>
                        </div>
                    </div>
                </div>

                <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100">
                    <div class="flex gap-1 text-accent mb-6">
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                            </path>
                        </svg>
                    </div>
                    <p class="text-slate-600 italic mb-8 leading-relaxed">"Great QR solution for my child's backpack. I
                        feel much more relaxed knowing her emergency details are easily accessible."</p>
                    <div class="flex items-center gap-4">
                        <div
                            class="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center font-bold text-lg">
                            P</div>
                        <div>
                            <div class="font-bold text-primary">Priya S.</div>
                            <div class="text-sm text-slate-400">Bangalore</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-24 bg-white">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div
                class="bg-primary rounded-[3rem] p-12 md:p-20 text-center relative overflow-hidden shadow-2xl border border-primary-light">
                <div class="absolute -top-24 -right-24 w-72 h-72 rounded-full border-4 border-white/5"></div>
                <div class="absolute -top-12 -right-12 w-48 h-48 rounded-full border-4 border-white/10"></div>
                <div class="absolute -bottom-24 -left-24 w-72 h-72 rounded-full border-4 border-accent/10"></div>

                <h2 class="font-heading text-4xl md:text-5xl font-black text-white mb-6 relative z-10">Protect What
                    Matters Most</h2>
                <p class="text-lg text-slate-300 mb-10 max-w-2xl mx-auto relative z-10 font-light">Create your secure
                    digital identity profile and link it to a smart tag in less than 2 minutes.</p>

                <div class="flex flex-col sm:flex-row justify-center gap-4 relative z-10">
                    <a href="#products"
                        class="bg-accent hover:bg-accent-light text-primary font-bold px-10 py-4 rounded-full transition-all shadow-glow transform hover:-translate-y-1">
                        Get Started Now
                    </a>
                </div>
            </div>
        </div>
    </section>

@endsection