index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TimeTracker Pro - Work Hours Wizard</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
</head>
<body class="min-h-screen flex flex-col">
    <custom-navbar></custom-navbar>
    
    <main class="flex-1">
        <!-- Hero Section with Vanta.js Background -->
        <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
            <div class="absolute inset-0 z-0" id="vanta-bg"></div>
            <div class="relative z-10 text-center text-white px-4 max-w-4xl mx-auto">
                <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
                    WorkTrack Pro
                </h1>
                <p class="text-xl md:text-2xl mb-8 text-gray-200">
                    Track your work hours like a wizard with our magical time management app
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="/dashboard.html" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
                        <i data-feather="play" class="inline mr-2"></i>
                        Start Tracking
                    </a>
                    <a href="/features.html" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300">
                        <i data-feather="info" class="inline mr-2"></i>
                        Learn More
                    </a>
                </div>
            </div>
        </section>

        <!-- Features Preview -->
        <section class="py-20 bg-gray-50">
            <div class="container mx-auto px-4">
                <h2 class="text-4xl font-bold text-center mb-16 text-gray-800">Magical Features</h2>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
                        <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="clock" class="text-blue-600 w-8 h-8"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">Smart Time Tracking</h3>
                        <p class="text-gray-600">Automatically record your work hours with intelligent time in/out functionality</p>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
                        <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="map-pin" class="text-purple-600 w-8 h-8"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">Location Magic</h3>
                        <p class="text-gray-600">GPS-based location tracking with manual entry options for maximum flexibility</p>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
                        <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="check-square" class="text-green-600 w-8 h-8"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-800">Task Wizardry</h3>
                        <p class="text-gray-600">Create, track, and complete tasks with powerful categorization and filtering</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
        // Initialize Vanta.js background
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x3b82f6,
            backgroundColor: 0x111827,
            size: 1.00
        });
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>