{% extends "base.html" %}

{% block title %}Savly - Group Savings Management Platform{% endblock %}

{% block content %}
<div class="min-h-screen bg-white">
    <!-- Navigation -->
    <nav class="bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-200 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 via-purple-600 to-indigo-700 rounded-xl flex items-center justify-center shadow-lg transform hover:scale-105 transition-transform duration-200">
                            <i class="fas fa-coins text-white text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-black text-gray-900 tracking-tight">Savly</h1>
                            <p class="text-xs text-blue-600 font-semibold uppercase tracking-wider">Group Savings Platform</p>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <button onclick="window.location.href='/admin/login'" 
                       class="inline-flex items-center px-6 py-2.5 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                        <i class="fas fa-user-shield mr-2 h-4 w-4"></i>
                        Admin Portal
                    </button>
                    <button onclick="window.location.href='/member/login'" 
                       class="inline-flex items-center px-6 py-2.5 border border-gray-300 text-sm font-semibold rounded-xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                        <i class="fas fa-user mr-2 h-4 w-4"></i>
                        Member Login
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="relative bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
        <!-- Background Pattern -->
        <div class="absolute inset-0 opacity-30">
            <svg class="absolute inset-0 w-full h-full" viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.1" />
                        <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:0.1" />
                    </linearGradient>
                </defs>
                <circle cx="200" cy="200" r="100" fill="url(#heroGrad)" class="animate-pulse">
                    <animateTransform attributeName="transform" type="translate" values="0,0; 30,20; 0,0" dur="6s" repeatCount="indefinite"/>
                </circle>
                <circle cx="800" cy="300" r="80" fill="url(#heroGrad)" class="animate-pulse" style="animation-delay: 2s">
                    <animateTransform attributeName="transform" type="translate" values="0,0; -20,30; 0,0" dur="5s" repeatCount="indefinite"/>
                </circle>
                <circle cx="1000" cy="150" r="60" fill="url(#heroGrad)" class="animate-pulse" style="animation-delay: 4s">
                    <animateTransform attributeName="transform" type="translate" values="0,0; 15,-25; 0,0" dur="7s" repeatCount="indefinite"/>
                </circle>
            </svg>
        </div>

        <div class="max-w-7xl mx-auto">
            <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
                <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
                    <div class="sm:text-center lg:text-left">
                        <!-- Main Heading with Animation -->
                        <div class="animate-fade-in-up">
                            <h1 class="text-5xl tracking-tight font-black text-gray-900 sm:text-6xl md:text-7xl lg:text-6xl">
                                <span class="block">Build Your</span>
                                <span class="block bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">Financial Future</span>
                                <span class="block">Together</span>
                            </h1>
                        </div>
                        
                        <!-- Subtitle with delay animation -->
                        <div class="animate-fade-in-up" style="animation-delay: 0.2s;">
                            <p class="mt-6 text-xl text-gray-600 sm:text-2xl sm:max-w-xl sm:mx-auto lg:mx-0 leading-relaxed">
                                The most powerful collaborative savings platform. Track contributions, achieve goals, and build wealth together with friends and family.
                            </p>
                        </div>
                        
                        <!-- Stats Bar -->
                        <div class="mt-8 animate-fade-in-up" style="animation-delay: 0.4s;">
                            <div class="flex flex-wrap gap-6 sm:justify-center lg:justify-start">
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                                    <span class="text-sm font-semibold text-gray-700">23 Active Members</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
                                    <span class="text-sm font-semibold text-gray-700">৳28L+ Total Saved</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-purple-500 rounded-full animate-pulse" style="animation-delay: 2s;"></div>
                                    <span class="text-sm font-semibold text-gray-700">389 Contributions</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- CTA Buttons -->
                        <div class="mt-10 sm:flex sm:justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4 animate-fade-in-up" style="animation-delay: 0.6s;">
                            <button onclick="window.location.href='/member/login'" 
                                   class="group w-full sm:w-auto flex items-center justify-center px-8 py-4 border border-transparent text-lg font-bold rounded-2xl text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all duration-300 shadow-xl hover:shadow-2xl transform hover:-translate-y-1">
                                <i class="fas fa-rocket mr-3 h-5 w-5 group-hover:animate-bounce"></i>
                                Start Saving Now
                                <i class="fas fa-arrow-right ml-3 h-5 w-5 group-hover:translate-x-1 transition-transform duration-300"></i>
                            </button>
                            <button onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})" 
                                   class="w-full sm:w-auto flex items-center justify-center px-8 py-4 border-2 border-gray-300 text-lg font-bold rounded-2xl text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-400 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                                <i class="fas fa-play mr-3 h-4 w-4"></i>
                                Watch Demo
                            </button>
                        </div>
                        
                        <!-- Portal Access Links -->
                        <div class="mt-8 flex flex-wrap gap-3 justify-center lg:justify-start animate-fade-in-up" style="animation-delay: 0.8s;">
                            <button onclick="window.location.href='/admin/login'" 
                                    style="position: relative; z-index: 50; cursor: pointer;"
                                    class="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                <i class="fas fa-user-shield mr-2"></i>
                                Admin Portal
                            </button>
                            <button onclick="window.location.href='/member/login'" 
                                    style="position: relative; z-index: 50; cursor: pointer;"
                                    class="bg-green-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-green-700 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                <i class="fas fa-user mr-2"></i>
                                Member Portal
                            </button>
                            <button onclick="window.location.href='/superadmin/login'" 
                                    style="position: relative; z-index: 50; cursor: pointer;"
                                    class="bg-gradient-to-r from-red-500 to-pink-600 text-white px-6 py-2 rounded-lg font-semibold hover:from-red-600 hover:to-pink-700 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                <i class="fas fa-crown mr-2"></i>
                                Superadmin
                            </button>
                        </div>
                        
                        <!-- New Organization Signup -->
                        <div class="mt-6 text-center lg:text-left animate-fade-in-up" style="animation-delay: 1.0s;">
                            <div class="bg-gradient-to-r from-emerald-50 to-blue-50 rounded-xl p-4 border border-emerald-200">
                                <p class="text-sm text-gray-600 mb-3">
                                    <i class="fas fa-sparkles text-emerald-500 mr-1"></i>
                                    Don't have an organization yet?
                                </p>
                                <button onclick="window.location.href='/signup'" 
                                        style="position: relative; z-index: 50; cursor: pointer;"
                                        class="bg-gradient-to-r from-emerald-600 to-blue-600 hover:from-emerald-700 hover:to-blue-700 text-white font-bold py-3 px-6 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-1 inline-flex items-center">
                                    <i class="fas fa-plus-circle mr-2"></i>
                                    Create Your Organization
                                    <i class="fas fa-arrow-right ml-2 text-sm"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
        
        <!-- Hero Image/Illustration -->
        <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
            <div class="h-64 w-full sm:h-72 md:h-96 lg:w-full lg:h-full flex items-center justify-center relative overflow-hidden">
                <!-- 3D Isometric Dashboard -->
                <div class="relative transform rotate-12 hover:rotate-6 transition-transform duration-500">
                    <!-- Main Dashboard -->
                    <div class="w-80 h-64 bg-white rounded-3xl shadow-2xl border border-gray-200 relative overflow-hidden">
                        <!-- Header -->
                        <div class="h-16 bg-gradient-to-r from-blue-600 to-purple-600 flex items-center px-6">
                            <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-chart-line text-white"></i>
                            </div>
                            <div>
                                <div class="text-white font-bold">Savly Dashboard</div>
                                <div class="text-blue-100 text-xs">Group Analytics</div>
                            </div>
                        </div>
                        
                        <!-- Content Area -->
                        <div class="p-6 space-y-4">
                            <!-- Chart Area -->
                            <div class="flex items-end space-x-2 h-20">
                                <div class="w-6 bg-blue-400 rounded-t animate-pulse" style="height: 60%;"></div>
                                <div class="w-6 bg-purple-400 rounded-t animate-pulse" style="height: 80%; animation-delay: 0.5s;"></div>
                                <div class="w-6 bg-green-400 rounded-t animate-pulse" style="height: 45%; animation-delay: 1s;"></div>
                                <div class="w-6 bg-yellow-400 rounded-t animate-pulse" style="height: 70%; animation-delay: 1.5s;"></div>
                                <div class="w-6 bg-red-400 rounded-t animate-pulse" style="height: 90%; animation-delay: 2s;"></div>
                            </div>
                            
                            <!-- Stats Row -->
                            <div class="grid grid-cols-3 gap-2">
                                <div class="bg-gray-50 rounded-lg p-2 text-center">
                                    <div class="text-lg font-bold text-blue-600">23</div>
                                    <div class="text-xs text-gray-500">Members</div>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-2 text-center">
                                    <div class="text-lg font-bold text-green-600">৳28L</div>
                                    <div class="text-xs text-gray-500">Saved</div>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-2 text-center">
                                    <div class="text-lg font-bold text-purple-600">389</div>
                                    <div class="text-xs text-gray-500">Records</div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Floating Elements -->
                        <div class="absolute -top-4 -right-4 w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center animate-bounce shadow-lg">
                            <i class="fas fa-coins text-white"></i>
                        </div>
                        <div class="absolute -bottom-4 -left-4 w-10 h-10 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center animate-pulse shadow-lg">
                            <i class="fas fa-check text-white text-sm"></i>
                        </div>
                    </div>
                    
                    <!-- Additional floating cards -->
                    <div class="absolute -top-8 left-16 w-32 h-20 bg-white rounded-xl shadow-xl border border-gray-100 p-3 transform rotate-12 animate-float">
                        <div class="text-xs text-gray-500">Monthly Goal</div>
                        <div class="text-lg font-bold text-green-600">৳5,000</div>
                        <div class="w-full bg-gray-200 rounded-full h-1 mt-1">
                            <div class="bg-green-500 h-1 rounded-full" style="width: 75%"></div>
                        </div>
                    </div>
                    
                    <div class="absolute -bottom-8 right-16 w-32 h-20 bg-white rounded-xl shadow-xl border border-gray-100 p-3 transform -rotate-12 animate-float-reverse" style="animation-delay: 1s;">
                        <div class="text-xs text-gray-500">This Month</div>
                        <div class="text-lg font-bold text-blue-600">৳45,000</div>
                        <div class="text-xs text-green-500">+15% vs last month</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Trust Section -->
    <div class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Trusted by Groups Worldwide</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
                    Join thousands of people who have already saved millions together using our platform
                </p>
            </div>
            
            <!-- Stats Grid -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div class="text-center animate-fade-in-up" style="animation-delay: 0.1s;">
                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
                        <i class="fas fa-users text-white text-2xl"></i>
                    </div>
                    <div class="text-4xl font-black text-gray-900 mb-2">23+</div>
                    <div class="text-gray-600 font-semibold">Active Members</div>
                </div>
                
                <div class="text-center animate-fade-in-up" style="animation-delay: 0.2s;">
                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
                        <i class="fas fa-chart-line text-white text-2xl"></i>
                    </div>
                    <div class="text-4xl font-black text-gray-900 mb-2">৳28L+</div>
                    <div class="text-gray-600 font-semibold">Total Saved</div>
                </div>
                
                <div class="text-center animate-fade-in-up" style="animation-delay: 0.3s;">
                    <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
                        <i class="fas fa-handshake text-white text-2xl"></i>
                    </div>
                    <div class="text-4xl font-black text-gray-900 mb-2">389</div>
                    <div class="text-gray-600 font-semibold">Contributions</div>
                </div>
                
                <div class="text-center animate-fade-in-up" style="animation-delay: 0.4s;">
                    <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
                        <i class="fas fa-trophy text-white text-2xl"></i>
                    </div>
                    <div class="text-4xl font-black text-gray-900 mb-2">100%</div>
                    <div class="text-gray-600 font-semibold">Success Rate</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div id="features" class="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <div class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-800 text-sm font-semibold mb-6">
                    <i class="fas fa-star mr-2"></i>
                    Premium Features
                </div>
                <h2 class="text-5xl font-black text-gray-900 mb-6">
                    Everything You Need to
                    <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Succeed Together</span>
                </h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
                    Powerful tools designed for modern financial collaboration. Build wealth, track progress, and achieve your goals as a team.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Member Management -->
                <div class="group relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full -mr-16 -mt-16"></div>
                    <div class="relative">
                        <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-users text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Smart Member Management</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Advanced member profiles with custom IDs, role-based permissions, and automated onboarding workflows for seamless team management.
                        </p>
                        <div class="mt-6 flex items-center text-blue-600 font-semibold">
                            <span class="mr-2">Learn more</span>
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform duration-300"></i>
                        </div>
                    </div>
                </div>

                <!-- Analytics -->
                <div class="group relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-full -mr-16 -mt-16"></div>
                    <div class="relative">
                        <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-chart-line text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Real-time Analytics</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Interactive dashboards with live charts, contribution tracking, goal monitoring, and detailed financial insights for data-driven decisions.
                        </p>
                        <div class="mt-6 flex items-center text-green-600 font-semibold">
                            <span class="mr-2">Learn more</span>
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform duration-300"></i>
                        </div>
                    </div>
                </div>

                <!-- Notifications -->
                <div class="group relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-full -mr-16 -mt-16"></div>
                    <div class="relative">
                        <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-bell text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Smart Notifications</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Intelligent payment reminders, goal alerts, and real-time updates that keep your entire team synchronized and motivated.
                        </p>
                        <div class="mt-6 flex items-center text-purple-600 font-semibold">
                            <span class="mr-2">Learn more</span>
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform duration-300"></i>
                        </div>
                    </div>
                </div>

                <!-- Events -->
                <div class="group relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-orange-500/10 to-red-500/10 rounded-full -mr-16 -mt-16"></div>
                    <div class="relative">
                        <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-calendar-alt text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Special Campaigns</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Create time-bound savings challenges, special collection events, and group goals with progress tracking and milestone rewards.
                        </p>
                        <div class="mt-6 flex items-center text-orange-600 font-semibold">
                            <span class="mr-2">Learn more</span>
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform duration-300"></i>
                        </div>
                    </div>
                </div>

                <!-- Security -->
                <div class="group relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 rounded-full -mr-16 -mt-16"></div>
                    <div class="relative">
                        <div class="w-16 h-16 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-shield-alt text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Bank-level Security</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Enterprise-grade security with encrypted data, audit trails, role-based access, and comprehensive backup systems for peace of mind.
                        </p>
                        <div class="mt-6 flex items-center text-indigo-600 font-semibold">
                            <span class="mr-2">Learn more</span>
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform duration-300"></i>
                        </div>
                    </div>
                </div>

                <!-- Mobile -->
                <div class="group relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-teal-500/10 to-cyan-500/10 rounded-full -mr-16 -mt-16"></div>
                    <div class="relative">
                        <div class="w-16 h-16 bg-gradient-to-r from-teal-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-mobile-alt text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Mobile-first Design</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Beautiful, responsive interface optimized for all devices. Access your savings data anywhere, anytime with a seamless mobile experience.
                        </p>
                        <div class="mt-6 flex items-center text-teal-600 font-semibold">
                            <span class="mr-2">Learn more</span>
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform duration-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- How It Works Section -->
    <div class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-900 mb-4">How Savly Works</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Get started in minutes with our simple three-step process
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                <!-- Step 1 -->
                <div class="text-center animate-slide-in-left" style="animation-delay: 0.2s;">
                    <div class="relative mb-8">
                        <div class="w-24 h-24 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto shadow-2xl">
                            <i class="fas fa-user-plus text-white text-3xl"></i>
                        </div>
                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
                            <span class="text-sm font-bold text-gray-900">1</span>
                        </div>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Create Your Group</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Set up your savings group, invite members, and define your collective financial goals with our intuitive setup wizard.
                    </p>
                </div>
                
                <!-- Step 2 -->
                <div class="text-center animate-fade-in-up" style="animation-delay: 0.4s;">
                    <div class="relative mb-8">
                        <div class="w-24 h-24 bg-gradient-to-r from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto shadow-2xl">
                            <i class="fas fa-chart-bar text-white text-3xl"></i>
                        </div>
                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
                            <span class="text-sm font-bold text-gray-900">2</span>
                        </div>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Track Contributions</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Members contribute regularly while the system automatically tracks payments, calculates balances, and monitors progress toward goals.
                    </p>
                </div>
                
                <!-- Step 3 -->
                <div class="text-center animate-slide-in-right" style="animation-delay: 0.6s;">
                    <div class="relative mb-8">
                        <div class="w-24 h-24 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center mx-auto shadow-2xl">
                            <i class="fas fa-trophy text-white text-3xl"></i>
                        </div>
                        <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
                            <span class="text-sm font-bold text-gray-900">3</span>
                        </div>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Achieve Goals</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Celebrate milestones, view detailed analytics, and watch your collective wealth grow with real-time dashboards and reports.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="relative bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-700 overflow-hidden">
        <!-- Background Pattern -->
        <div class="absolute inset-0 opacity-20">
            <div class="absolute inset-0" style="background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 0%, transparent 50%);"></div>
        </div>
        
        <div class="relative max-w-4xl mx-auto text-center py-20 px-4 sm:py-24 sm:px-6 lg:px-8">
            <h2 class="text-4xl md:text-5xl font-black text-white mb-6">
                Ready to Build Your
                <span class="block bg-gradient-to-r from-yellow-300 to-orange-300 bg-clip-text text-transparent">Financial Future?</span>
            </h2>
            <p class="text-xl md:text-2xl text-blue-100 mb-8 leading-relaxed max-w-3xl mx-auto">
                Join thousands of successful savers who have already transformed their financial lives through collaborative savings.
            </p>
            
            <!-- CTA Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <button onclick="window.location.href='/member/login'" 
                       class="group px-8 py-4 bg-white text-blue-600 rounded-2xl font-bold text-lg shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 flex items-center">
                    <i class="fas fa-rocket mr-3 group-hover:animate-bounce"></i>
                    Start Your Journey Today
                    <i class="fas fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform duration-300"></i>
                </button>
                <button onclick="window.location.href='/admin/login'" 
                       class="px-8 py-4 border-2 border-white text-white rounded-2xl font-bold text-lg hover:bg-white hover:text-blue-600 transition-all duration-300 flex items-center">
                    <i class="fas fa-crown mr-3"></i>
                    Admin Access
                </button>
            </div>
            
            <!-- Trust Indicators -->
            <div class="mt-12 flex flex-wrap justify-center items-center gap-8 text-blue-200">
                <div class="flex items-center">
                    <i class="fas fa-shield-alt mr-2"></i>
                    <span class="text-sm font-semibold">Bank-level Security</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-clock mr-2"></i>
                    <span class="text-sm font-semibold">2-minute Setup</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-heart mr-2"></i>
                    <span class="text-sm font-semibold">100% Success Rate</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Brand Section -->
                <div class="col-span-1 md:col-span-2">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 via-purple-600 to-indigo-700 rounded-xl flex items-center justify-center">
                            <i class="fas fa-coins text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-black tracking-tight">Savly</h3>
                            <p class="text-blue-400 text-sm font-semibold uppercase tracking-wider">Group Savings Platform</p>
                        </div>
                    </div>
                    <p class="text-gray-400 leading-relaxed max-w-md mb-6">
                        Empowering friends and families to build wealth together through collaborative savings, smart tracking, and transparent financial management.
                    </p>
                    <div class="flex space-x-4">
                        <div class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors duration-200 cursor-pointer">
                            <i class="fab fa-facebook-f text-sm"></i>
                        </div>
                        <div class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors duration-200 cursor-pointer">
                            <i class="fab fa-twitter text-sm"></i>
                        </div>
                        <div class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors duration-200 cursor-pointer">
                            <i class="fab fa-linkedin-in text-sm"></i>
                        </div>
                        <div class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors duration-200 cursor-pointer">
                            <i class="fab fa-instagram text-sm"></i>
                        </div>
                    </div>
                </div>
                
                <!-- Quick Links -->
                <div>
                    <h4 class="text-lg font-bold mb-4">Platform</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#features" class="hover:text-white transition-colors duration-200">Features</a></li>
                        <li><a href="/member/login" class="hover:text-white transition-colors duration-200">Member Portal</a></li>
                        <li><a href="/admin/login" class="hover:text-white transition-colors duration-200">Admin Access</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">API Documentation</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">Mobile App</a></li>
                    </ul>
                </div>
                
                <!-- Support -->
                <div>
                    <h4 class="text-lg font-bold mb-4">Support</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors duration-200">Help Center</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">Getting Started</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">Community</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">Contact Us</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Bottom Bar -->
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col sm:flex-row justify-between items-center">
                <div class="text-gray-400 text-sm mb-4 sm:mb-0">
                    © 2025 Savly. Built with ❤️ using Flask and TailwindCSS.
                </div>
                <div class="flex items-center space-x-6 text-gray-400 text-sm">
                    <span class="flex items-center">
                        <i class="fas fa-shield-alt mr-2 text-green-400"></i>
                        Secure & Encrypted
                    </span>
                    <span class="flex items-center">
                        <div class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></div>
                        All Systems Operational
                    </span>
                </div>
            </div>
        </div>
    </footer>
</div>
{% endblock %}