
<section id="contact"
         class="py-24 bg-gradient-to-r from-blue-700 via-teal-600 to-green-500 relative overflow-hidden"
         aria-labelledby="cta-heading">

    
    <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
        <div class="absolute -top-24 -left-24 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse"
             style="animation-delay: 1.5s"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-white/5 rounded-full blur-3xl"></div>
        
        <svg class="absolute inset-0 w-full h-full opacity-10" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="cta-dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
                    <circle cx="2" cy="2" r="1.5" fill="white"/>
                </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#cta-dots)"/>
        </svg>
    </div>

    <div class="container mx-auto px-4 lg:px-6 relative z-10">

        
        <div class="flex flex-wrap items-center justify-center gap-6 mb-12 text-white/80 text-sm">
            <span class="flex items-center gap-2">
                <i class="fa-solid fa-shield-halved text-green-300" aria-hidden="true"></i>
                Trusted by Health Professionals
            </span>
            <span class="hidden sm:block w-px h-4 bg-white/30" aria-hidden="true"></span>
            <span class="flex items-center gap-2">
                <i class="fa-solid fa-globe text-blue-300" aria-hidden="true"></i>
                National &amp; International Reach
            </span>
            <span class="hidden sm:block w-px h-4 bg-white/30" aria-hidden="true"></span>
            <span class="flex items-center gap-2">
                <i class="fa-solid fa-certificate text-yellow-300" aria-hidden="true"></i>
                Certified Capacity Building
            </span>
            <span class="hidden sm:block w-px h-4 bg-white/30" aria-hidden="true"></span>
            <span class="flex items-center gap-2">
                <i class="fa-solid fa-handshake text-teal-300" aria-hidden="true"></i>
                Active Partnerships
            </span>
        </div>

        
        <div class="text-center text-white max-w-4xl mx-auto">

            
            <div class="inline-flex items-center gap-2 bg-white/15 backdrop-blur-sm border border-white/25
                        rounded-full px-4 py-1.5 text-sm font-medium mb-6">
                <i class="fa-solid fa-star text-yellow-300 text-xs" aria-hidden="true"></i>
                Join South Sudan's Digital Health Community
            </div>

            
            <h2 id="cta-heading"
                class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-5 leading-tight">
                Shape the Future of<br class="hidden sm:block">
                Digital Health in South Sudan
            </h2>

            
            <p class="text-lg sm:text-xl text-white/80 max-w-5xl mx-auto mb-10 leading-relaxed">
                Become part of a growing network of health informatics professionals, researchers,
                and innovators driving digital transformation across South Sudan's health sector.
            </p>

            
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
                <a href="<?php echo e(route('register.role.member')); ?>"
                   class="inline-flex items-center gap-2 bg-white text-blue-700 hover:bg-gray-100
                          px-8 py-3.5 rounded-xl font-semibold transition-colors duration-200
                          shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-white/50
                          min-w-[200px] justify-center"
                   aria-label="Apply for SSHIA membership">
                    <i class="fa-solid fa-user-plus" aria-hidden="true"></i>
                    Become a Member
                </a>
                <a href="<?php echo e(route('pages.show', 'support')); ?>"
                   class="inline-flex items-center gap-2 border-2 border-white text-white
                          hover:bg-white/10 px-8 py-3.5 rounded-xl font-semibold
                          transition-colors duration-200 focus:outline-none focus:ring-4
                          focus:ring-white/50 min-w-[200px] justify-center"
                   aria-label="Contact SSHIA">
                    <i class="fa-solid fa-envelope" aria-hidden="true"></i>
                    Contact Us
                </a>
            </div>

            
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-3xl mx-auto">
                <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-5 text-left">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-9 h-9 rounded-lg bg-white/20 flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-graduation-cap text-white text-sm" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-semibold text-white text-sm">Capacity Building</h3>
                    </div>
                    <p class="text-white/70 text-xs leading-relaxed">
                        Access certification courses and professional development programs.
                    </p>
                </div>

                <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-5 text-left">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-9 h-9 rounded-lg bg-white/20 flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-network-wired text-white text-sm" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-semibold text-white text-sm">Professional Network</h3>
                    </div>
                    <p class="text-white/70 text-xs leading-relaxed">
                        Connect with health informatics experts locally and internationally.
                    </p>
                </div>

                <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-5 text-left">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-9 h-9 rounded-lg bg-white/20 flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-bullhorn text-white text-sm" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-semibold text-white text-sm">Policy Advocacy</h3>
                    </div>
                    <p class="text-white/70 text-xs leading-relaxed">
                        Influence digital health policies and standards at the national level.
                    </p>
                </div>
            </div>

        </div>
    </div>
</section><?php /**PATH /home/www/sshia.org/sshia/resources/views/components/home/cta.blade.php ENDPATH**/ ?>