index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#4f46e5">
    <title>Link Saver | Your Personal Collection</title>
    <link rel="manifest" href="/manifest.json">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8fafc;
        }
        .theme-option {
            transition: all 0.3s ease;
        }
        .theme-option:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
</head>
<body class="min-h-screen">
    <div class="container mx-auto px-4 py-12">
        <header class="text-center mb-16" data-aos="fade-down">
            <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-500 to-purple-600 gradient-text">
                My Link Shelf
            </h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                Your personal collection of favorite websites, organized beautifully.
            </p>
        </header>

        <main class="max-w-4xl mx-auto">
            <section class="mb-16" data-aos="fade-up">
                <h2 class="text-2xl font-semibold text-center mb-8 text-gray-800">Choose Your Theme</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Theme 1 -->
                    <div class="theme-option rounded-xl overflow-hidden shadow-lg bg-white cursor-pointer" data-aos="zoom-in">
                        <div class="h-40 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
                            <i data-feather="bookmark" class="text-white w-12 h-12"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">Minimal Blue</h3>
                            <p class="text-gray-600">Clean and professional look with blue accents</p>
                        </div>
                    </div>

                    <!-- Theme 2 -->
                    <div class="theme-option rounded-xl overflow-hidden shadow-lg bg-white cursor-pointer" data-aos="zoom-in" data-aos-delay="100">
                        <div class="h-40 bg-gradient-to-r from-purple-400 to-pink-600 flex items-center justify-center">
                            <i data-feather="heart" class="text-white w-12 h-12"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">Vibrant Purple</h3>
                            <p class="text-gray-600">Energetic and creative theme with purple tones</p>
                        </div>
                    </div>

                    <!-- Theme 3 -->
                    <div class="theme-option rounded-xl overflow-hidden shadow-lg bg-white cursor-pointer" data-aos="zoom-in" data-aos-delay="200">
                        <div class="h-40 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center">
                            <i data-feather="leaf" class="text-white w-12 h-12"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">Natural Green</h3>
                            <p class="text-gray-600">Calming and organic feel with green palette</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="text-center" data-aos="fade-up" data-aos-delay="300">
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-8 rounded-full shadow-md transition-all duration-300 transform hover:scale-105 flex items-center mx-auto">
                    <i data-feather="plus" class="mr-2"></i>
                    Create Your Link Shelf
                </button>
            </section>
        </main>

        <footer class="mt-24 text-center text-gray-500 text-sm">
            <p>© 2023 Link Saver. All rights reserved.</p>
        </footer>
    </div>

    <script>
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });
        feather.replace();

        // Register Service Worker for PWA
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => {
                        console.log('ServiceWorker registration successful');
                    })
                    .catch(err => {
                        console.log('ServiceWorker registration failed: ', err);
                    });
            });
        }
    </script>
</body>
</html>