design-proposals.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nayari AI - Design Proposals</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B5CF6',
                    }
                }
            }
        }
    </script>
    <link href="https://unpkg.com/lucide-static@0.321.0/font/lucide.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="p-8">
        <h1 class="text-3xl font-bold mb-8 text-center">Nayari AI - Design Proposals</h1>

        <!-- Proposal 1: Cyber Neon -->
        <div class="mb-16">
            <h2 class="text-2xl font-semibold mb-4">1. Cyber Neon Theme</h2>
            <div class="min-h-[600px] bg-gradient-to-b from-black via-gray-900 to-purple-950 rounded-xl overflow-hidden">
                <div class="container mx-auto px-4 pt-20 pb-32 text-center">
                    <div class="relative mb-8">
                        <h1 class="text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600 mb-4">
                            Nayari AI Assistant
                        </h1>
                        <p class="text-gray-400 text-xl mb-8">Your Advanced AI Companion</p>
                        <div class="absolute -z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-purple-500/30 rounded-full blur-3xl"></div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
                        <div class="group hover:scale-105 transition-all">
                            <div class="p-6 rounded-xl bg-black/40 border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-all">
                                <i class="lucide-book text-4xl text-purple-400 mb-4"></i>
                                <h3 class="text-xl font-semibold text-white mb-2">Documentation</h3>
                                <p class="text-gray-400 text-sm">Explore guides and API references</p>
                            </div>
                        </div>

                        <div class="group hover:scale-105 transition-all">
                            <div class="p-6 rounded-xl bg-black/40 border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-all">
                                <i class="lucide-terminal text-4xl text-purple-400 mb-4"></i>
                                <h3 class="text-xl font-semibold text-white mb-2">Terminal</h3>
                                <p class="text-gray-400 text-sm">Access advanced features</p>
                            </div>
                        </div>

                        <div class="group hover:scale-105 transition-all">
                            <div class="p-6 rounded-xl bg-black/40 border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-all">
                                <i class="lucide-message-square text-4xl text-purple-400 mb-4"></i>
                                <h3 class="text-xl font-semibold text-white mb-2">Chat with AI</h3>
                                <p class="text-gray-400 text-sm">Start a conversation</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Proposal 2: Minimalist Professional -->
        <div class="mb-16">
            <h2 class="text-2xl font-semibold mb-4">2. Minimalist Professional</h2>
            <div class="min-h-[600px] bg-gradient-to-b from-zinc-950 to-zinc-900 rounded-xl overflow-hidden">
                <div class="container mx-auto px-4 pt-16">
                    <div class="max-w-3xl mx-auto text-center mb-16">
                        <h1 class="text-5xl font-bold text-white mb-6">Nayari AI Assistant</h1>
                        <p class="text-zinc-400 text-lg">Empowering your workflow with advanced AI capabilities</p>
                    </div>

                    <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                        <div class="group">
                            <div class="p-8 rounded-lg bg-zinc-900 border border-zinc-800 hover:border-zinc-700 transition-all">
                                <div class="mb-4 p-3 rounded-full bg-zinc-800 w-fit group-hover:bg-zinc-700 transition-all">
                                    <i class="lucide-book text-2xl text-white"></i>
                                </div>
                                <h2 class="text-xl font-semibold text-white mb-2">Documentation</h2>
                                <p class="text-zinc-400">Comprehensive guides and API documentation</p>
                            </div>
                        </div>

                        <div class="group">
                            <div class="p-8 rounded-lg bg-zinc-900 border border-zinc-800 hover:border-zinc-700 transition-all">
                                <div class="mb-4 p-3 rounded-full bg-zinc-800 w-fit group-hover:bg-zinc-700 transition-all">
                                    <i class="lucide-terminal text-2xl text-white"></i>
                                </div>
                                <h2 class="text-xl font-semibold text-white mb-2">Terminal</h2>
                                <p class="text-zinc-400">Access advanced features and commands</p>
                            </div>
                        </div>

                        <div class="group">
                            <div class="p-8 rounded-lg bg-zinc-900 border border-zinc-800 hover:border-zinc-700 transition-all">
                                <div class="mb-4 p-3 rounded-full bg-zinc-800 w-fit group-hover:bg-zinc-700 transition-all">
                                    <i class="lucide-message-square text-2xl text-white"></i>
                                </div>
                                <h2 class="text-xl font-semibold text-white mb-2">Chat with AI</h2>
                                <p class="text-zinc-400">Start an intelligent conversation</p>
                            </div>
                        </div>
                    </div>

                    <div class="mt-16 py-4 border-t border-zinc-800">
                        <div class="flex items-center justify-center gap-2 text-zinc-400">
                            <div class="w-2 h-2 rounded-full bg-green-500"></div>
                            Connected to AI agents
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Proposal 3: Modern Glassmorphism -->
        <div class="mb-16">
            <h2 class="text-2xl font-semibold mb-4">3. Modern Glassmorphism</h2>
            <div class="min-h-[600px] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900 via-gray-900 to-black rounded-xl overflow-hidden">
                <div class="container mx-auto px-4 py-20">
                    <div class="text-center mb-20">
                        <h1 class="text-7xl font-bold text-white mb-6 relative">
                            <span class="absolute -inset-1 blur-2xl bg-purple-500/30"></span>
                            <span class="relative">Nayari AI</span>
                        </h1>
                        <p class="text-gray-300 text-xl">Next-Generation AI Assistant</p>
                    </div>

                    <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8">
                        <div class="relative group">
                            <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-30 group-hover:opacity-100 transition duration-1000"></div>
                            <div class="relative p-8 bg-black/40 backdrop-blur-xl rounded-lg border border-white/10">
                                <div class="flex flex-col items-center">
                                    <i class="lucide-book text-4xl text-purple-400 mb-4"></i>
                                    <h3 class="text-xl font-medium text-white mb-2">Documentation</h3>
                                    <p class="text-gray-400 text-center">Access comprehensive guides</p>
                                </div>
                            </div>
                        </div>

                        <div class="relative group">
                            <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-30 group-hover:opacity-100 transition duration-1000"></div>
                            <div class="relative p-8 bg-black/40 backdrop-blur-xl rounded-lg border border-white/10">
                                <div class="flex flex-col items-center">
                                    <i class="lucide-terminal text-4xl text-purple-400 mb-4"></i>
                                    <h3 class="text-xl font-medium text-white mb-2">Terminal</h3>
                                    <p class="text-gray-400 text-center">Access advanced features</p>
                                </div>
                            </div>
                        </div>

                        <div class="relative group">
                            <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-30 group-hover:opacity-100 transition duration-1000"></div>
                            <div class="relative p-8 bg-black/40 backdrop-blur-xl rounded-lg border border-white/10">
                                <div class="flex flex-col items-center">
                                    <i class="lucide-message-square text-4xl text-purple-400 mb-4"></i>
                                    <h3 class="text-xl font-medium text-white mb-2">Chat with AI</h3>
                                    <p class="text-gray-400 text-center">Start a conversation</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-20 text-center">
                        <div class="inline-flex items-center px-4 py-2 rounded-full bg-black/30 backdrop-blur-sm border border-white/10">
                            <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
                            <span class="text-gray-300">Connected to AI Network</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>