Spaces:

web3district
/

bondr2

Running

App Files Files Community

web3district commited on Aug 8, 2025

Commit

466ca82

verified ·

1 Parent(s): ecf4750

please use this logo that is in the folder of this project: bonderLOGONEWPURPLE.png - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +89 -744

index.html CHANGED Viewed

@@ -1,756 +1,101 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bondr - Smart Contract-Driven Telegram Groups</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: '#6366f1',
-                        secondary: '#8b5cf6',
-                        dark: '#0f172a',
-                        light: '#f8fafc'
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-        body {
-            font-family: 'Inter', sans-serif;
-            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-            color: #f8fafc;
-        }
-        .gradient-border {
-            background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
-            padding: 2px;
-            border-radius: 12px;
-        }
-        .card {
-            background: rgba(30, 41, 59, 0.7);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            transition: all 0.3s ease;
-        }
-        .card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
-        }
-        .feature-card {
-            background: rgba(30, 41, 59, 0.5);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        .step-card {
-            background: rgba(30, 41, 59, 0.7);
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .glow {
-            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
-        }
-        .pulse {
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0% {
-                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
-            }
-            70% {
-                box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
-            }
-            100% {
-                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
-            }
-        }
-        .hero-bg {
-            background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
-                        radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.15) 0%, transparent 40%);
-        }
-        .feature-icon {
-            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-        }
-        .terminal {
-            background: #0f172a;
-            border-radius: 12px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-        }
-        .terminal-header {
-            background: #1e293b;
-            border-top-left-radius: 12px;
-            border-top-right-radius: 12px;
-        }
-        .terminal-content {
-            font-family: 'Courier New', monospace;
-            font-size: 14px;
-            line-height: 1.5;
-        }
-        .terminal-content .comment {
-            color: #94a3b8;
-        }
-        .terminal-content .command {
-            color: #8b5cf6;
-        }
-        .terminal-content .output {
-            color: #60a5fa;
-        }
-        .terminal-content .success {
-            color: #34d399;
-        }
-        .terminal-content .error {
-            color: #ef4444;
-        }
-        .scrollbar-thin::-webkit-scrollbar {
-            width: 6px;
-        }
-        .scrollbar-thin::-webkit-scrollbar-thumb {
-            background-color: #4c51bf;
-            border-radius: 3px;
-        }
-    </style>
-</head>
-<body class="min-h-screen">
-    <!-- Navigation -->
-    <nav class="fixed w-full z-50 py-4 px-6 flex justify-between items-center backdrop-blur-md bg-slate-900/80">
-        <div class="flex items-center space-x-2">
-            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
-                <i class="fas fa-link text-white text-xl"></i>
-            </div>
-            <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-500">Bondr</span>
-        </div>
-        <div class="hidden md:flex space-x-8">
-            <a href="#features" class="text-slate-300 hover:text-white transition">Features</a>
-            <a href="#how-it-works" class="text-slate-300 hover:text-white transition">How It Works</a>
-            <a href="#technology" class="text-slate-300 hover:text-white transition">Technology</a>
-            <a href="#team" class="text-slate-300 hover:text-white transition">Team</a>
-        </div>
-        <div class="flex space-x-4">
-            <button class="px-4 py-2 rounded-lg bg-slate-800 text-slate-300 hover:text-white transition">Sign In</button>
-            <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium hover:from-indigo-600 hover:to-purple-700 transition">Get Started</button>
-        </div>
-    </nav>
-    <!-- Hero Section -->
-    <section class="hero-bg min-h-screen pt-32 pb-20 px-6 flex flex-col items-center text-center">
-        <div class="max-w-4xl">
-            <div class="inline-block px-4 py-1 mb-4 rounded-full bg-slate-800 text-slate-300 text-sm">
-                <i class="fas fa-bolt mr-2 text-indigo-400"></i>Introducing the future of group collaboration
-            </div>
-            <h1 class="text-5xl md:text-7xl font-bold mb-6">
-                <span class="block">Smart Contract-Driven</span>
-                <span class="block bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-500">Telegram Groups</span>
-            </h1>
-            <p class="text-xl text-slate-300 max-w-2xl mx-auto mb-10">
-                Bondr combines Telegram UX, smart contracts, referral logic, and payment compliance into one simple move.
-                Group chat meets programmable business trust.
-            </p>
-            <div class="flex flex-col sm:flex-row justify-center gap-4 mb-16">
-                <button class="px-8 py-4 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium text-lg hover:from-indigo-600 hover:to-purple-700 transition-all glow">
-                    Create Your Bondr Group
-                </button>
-                <button class="px-8 py-4 rounded-xl bg-slate-800 text-slate-200 font-medium text-lg hover:bg-slate-700 transition">
-                    <i class="fas fa-play-circle mr-2"></i> Watch Demo
-                </button>
-            </div>
-        </div>
-        <!-- Terminal Preview -->
-        <div class="w-full max-w-3xl mx-auto mb-16">
-            <div class="terminal">
-                <div class="terminal-header py-3 px-4 flex items-center">
-                    <div class="flex space-x-2">
-                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                    </div>
-                    <div class="text-slate-400 text-sm ml-4">Bondr Terminal</div>
-                </div>
-                <div class="p-6 terminal-content">
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="command">create-bondr-group</span> <span class="text-slate-400">--name "Project Alpha"</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="command">add-member</span> <span class="text-slate-400">--user @designer</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="command">add-member</span> <span class="text-slate-400">--user @developer</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="command">deploy-contract</span> <span class="text-slate-400">--type multi-sig</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="command">set-milestones</span> <span class="text-slate-400">--design 30% --development 50% --delivery 20%</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="command">generate-checkout</span> <span class="text-slate-400">--currency USD</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="success">✓ Group "Project Alpha" created successfully</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="success">✓ Smart contract deployed at 0x742d35Cc6634C0532925a3b844Bc454e4438f44e</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="success">✓ Multi-sig wallet generated</span></div>
-                    <div class="mb-2"><span class="text-green-400">></span> <span class="success">✓ Checkout link ready: https://bondr.link/project-alpha</span></div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Features Section -->
-    <section id="features" class="py-20 px-6">
-        <div class="max-w-6xl mx-auto">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl font-bold mb-4">How Bondr Works</h2>
-                <p class="text-xl text-slate-300 max-w-3xl mx-auto">
-                    Transform your group collaborations with programmable trust and automated compliance
-                </p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Feature 1 -->
-                <div class="card p-6">
-                    <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-6">
-                        <i class="fas fa-robot text-white text-2xl"></i>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-3">Telegram + Smart Contracts</h3>
-                    <p class="text-slate-300 mb-4">
-                        Add our Telegram bot to instantly create a multi-signature wallet and smart contract for your group.
-                    </p>
-                    <ul class="text-slate-400 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Auto-deploy Safe multi-sig wallet</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Smart contract via Thirdweb or Gnosis</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Wallet addresses for all members</span>
-                        </li>
-                    </ul>
-                </div>
-                <!-- Feature 2 -->
-                <div class="card p-6">
-                    <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-6">
-                        <i class="fas fa-sliders-h text-white text-2xl"></i>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-3">Dynamic Configuration</h3>
-                    <p class="text-slate-300 mb-4">
-                        Define roles, distribution percentages, and milestones through our AI bot.
-                    </p>
-                    <ul class="text-slate-400 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Role-based fund distribution</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Conditional release logic</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Milestone-based triggers</span>
-                        </li>
-                    </ul>
-                </div>
-                <!-- Feature 3 -->
-                <div class="card p-6">
-                    <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-6">
-                        <i class="fas fa-shield-alt text-white text-2xl"></i>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-3">Compliance & Security</h3>
-                    <p class="text-slate-300 mb-4">
-                        Auto-convert fiat to crypto with built-in compliance and penalty logic.
-                    </p>
-                    <ul class="text-slate-400 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Fiat onramps via Transak/MoonPay</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Penalty logic for off-chain payments</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Auto-compliance with regulations</span>
-                        </li>
-                    </ul>
-                </div>
-                <!-- Feature 4 -->
-                <div class="card p-6">
-                    <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-6">
-                        <i class="fas fa-link text-white text-2xl"></i>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-3">Business Link Generation</h3>
-                    <p class="text-slate-300 mb-4">
-                        Create unique sales links with referral tracking and analytics.
-                    </p>
-                    <ul class="text-slate-400 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Stripe/LemonSqueezy integration</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Referral ID for each stakeholder</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Analytics dashboard per user</span>
-                        </li>
-                    </ul>
-                </div>
-                <!-- Feature 5 -->
-                <div class="card p-6">
-                    <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-6">
-                        <i class="fas fa-chart-line text-white text-2xl"></i>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-3">Referral & Source Tracing</h3>
-                    <p class="text-slate-300 mb-4">
-                        Track revenue attribution with UTM and wallet binding.
-                    </p>
-                    <ul class="text-slate-400 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Wallet-to-Telegram mapping</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Revenue linked to unique identifiers</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Cheaper transactions via zkSync/Optimism</span>
-                        </li>
-                    </ul>
-                </div>
-                <!-- Feature 6 -->
-                <div class="card p-6">
-                    <div class="w-14 h-14 rounded-xl feature-icon flex items-center justify-center mb-6">
-                        <i class="fas fa-gavel text-white text-2xl"></i></i>
-                    </div>
-                    <h3 class="text-2xl font-bold mb-3">Legal & Risk Management</h3>
-                    <p class="text-slate-300 mb-4">
-                        Auto-generated terms and smart contract enforcement.
-                    </p>
-                    <ul class="text-slate-400 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Auto-generated legal terms</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Plain language contract summaries</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Reputation system for participants</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- How It Works -->
-    <section id="how-it-works" class="py-20 px-6 bg-slate-900/50">
-        <div class="max-w-6xl mx-auto">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl font-bold mb-4">How Bondr Works</h2>
-                <p class="text-xl text-slate-300 max-w-3xl mx-auto">
-                    A step-by-step guide to creating trust in your group collaborations
-                </p>
-            </div>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
-                <div class="space-y-8">
-                    <div class="step-card p-6 rounded-xl">
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold mr-4">1</div>
-                            <div>
-                                <h3 class="text-xl font-bold mb-2">Create Group & Add Bot</h3>
-                                <p class="text-slate-300">
-                                    Start a Telegram group and add the Bondr bot. The bot will automatically create a multi-signature wallet and deploy a smart contract for your group.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="step-card p-6 rounded-xl">
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold mr-4">2</div>
-                            <div>
-                                <h3 class="text-xl font-bold mb-2">Configure Roles & Milestones</h3>
-                                <p class="text-slate-300">
-                                    Define member roles (Designer, Developer, etc.) and set distribution percentages. Configure milestones and conditions for fund release.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="step-card p-6 rounded-xl">
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold mr-4">3</div>
-                            <div>
-                                <h3 class="text-xl font-bold mb-2">Generate Payment Infrastructure</h3>
-                                <p class="text-slate-300">
-                                    The bot generates a deposit-only wallet with fiat-to-crypto conversion. Each member gets a unique referral link and analytics dashboard.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="step-card p-6 rounded-xl">
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold mr-4">4</div>
-                            <div>
-                                <h3 class="text-xl font-bold mb-2">Execute & Track</h3>
-                                <p class="text-slate-300">
-                                    As milestones are completed, funds are automatically released. Track performance, referrals, and revenue attribution in real-time.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-slate-800 rounded-xl p-6">
-                    <div class="flex justify-between items-center mb-4">
-                        <div class="text-slate-400">Project Alpha</div>
-                        <div class="flex space-x-2">
-                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                        </div>
-                    </div>
-                    <div class="bg-slate-900 rounded-lg p-4 mb-4">
-                        <div class="text-slate-400 text-sm mb-2">Group Members</div>
-                        <div class="flex flex-wrap gap-2 mb-4">
-                            <div class="px-3 py-1 bg-indigo-900/50 text-indigo-300 rounded-full text-sm">@designer</div>
-                            <div class="px-3 py-1 bg-indigo-900/50 text-indigo-300 rounded-full text-sm">@developer</div>
-                            <div class="px-3 py-1 bg-indigo-900/50 text-indigo-300 rounded-full text-sm">@project_manager</div>
-                        </div>
-                        <div class="text-slate-400 text-sm mb-2">Milestones</div>
-                        <div class="space-y-3">
-                            <div>
-                                <div class="flex justify-between text-sm mb-1">
-                                    <span>Design Phase</span>
-                                    <span>30%</span>
-                                </div>
-                                <div class="w-full bg-slate-700 rounded-full h-2">
-                                    <div class="bg-indigo-500 h-2 rounded-full" style="width: 30%"></div>
-                                </div>
-                            </div>
-                            <div>
-                                <div class="flex justify-between text-sm mb-1">
-                                    <span>Development</span>
-                                    <span>50%</span>
-                                </div>
-                                <div class="w-full bg-slate-700 rounded-full h-2">
-                                    <div class="bg-indigo-500 h-2 rounded-full" style="width: 50%"></div>
-                                </div>
-                            </div>
-                            <div>
-                                <div class="flex justify-between text-sm mb-1">
-                                    <span>Delivery</span>
-                                    <span>20%</span>
-                                </div>
-                                <div class="w-full bg-slate-700 rounded-full h-2">
-                                    <div class="bg-indigo-500 h-2 rounded-full" style="width: 20%"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-slate-900 rounded-lg p-4">
-                        <div class="text-slate-400 text-sm mb-2">Payment Links</div>
-                        <div class="space-y-2">
-                            <div class="flex justify-between items-center p-2 bg-slate-800 rounded">
-                                <div class="text-sm">@designer</div>
-                                <div class="text-indigo-400 text-sm">https://bondr.link/dsgn123</div>
-                            </div>
-                            <div class="flex justify-between items-center p-2 bg-slate-800 rounded">
-                                <div class="text-sm">@developer</div>
-                                <div class="text-indigo-400 text-sm">https://bondr.link/dev456</div>
-                            </div>
-                            <div class="flex justify-between items-center p-2 bg-slate-800 rounded">
-                                <div class="text-sm">@project_manager</div>
-                                <div class="text-indigo-400 text-sm">https://bondr.link/pm789</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Technology Stack -->
-    <section id="technology" class="py-20 px-6">
-        <div class="max-w-6xl mx-auto">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl font-bold mb-4">Technology Stack</h2>
-                <p class="text-xl text-slate-300 max-w-3xl mx-auto">
-                    Built with cutting-edge tools for security, compliance, and performance
-                </p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <div class="feature-card p-6 rounded-xl">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mr-4">
-                            <i class="fab fa-telegram text-indigo-400 text-2xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold">Telegram Integration</h3>
-                    </div>
-                    <ul class="text-slate-300 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>BotFather + Python/Node backend</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Group management APIs</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Real-time notifications</span>
-                        </li>
-                    </ul>
-                </div>
-                <div class="feature-card p-6 rounded-xl">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mr-4">
-                            <i class="fas fa-code text-indigo-400 text-2xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold">Smart Contracts</h3>
-                    </div>
-                    <ul class="text-slate-300 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Thirdweb + Safe SDK</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Multi-sig wallet generation</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Conditional logic deployment</span>
-                        </li>
-                    </ul>
-                </div>
-                <div class="feature-card p-6 rounded-xl">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mr-4">
-                            <i class="fas fa-money-bill-wave text-indigo-400 text-2xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold">Payment Processing</h3>
-                    </div>
-                    <ul class="text-slate-300 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Transak / MoonPay / Wert</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Stripe + crypto plugin</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Auto-convert fiat to crypto</span>
-                        </li>
-                    </ul>
-                </div>
-                <div class="feature-card p-6 rounded-xl">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mr-4">
-                            <i class="fas fa-link text-indigo-400 text-2xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold">Referral System</h3>
-                    </div>
-                    <ul class="text-slate-300 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>FirstPromoter API</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Custom Webhooks</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Analytics dashboard</span>
-                        </li>
-                    </ul>
-                </div>
-                <div class="feature-card p-6 rounded-xl">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mr-4">
-                            <i class="fas fa-cogs text-indigo-400 text-2xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold">Automation</h3>
-                    </div>
-                    <ul class="text-slate-300 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Make.com / n8n</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Workflow automation</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Event triggers</span>
-                        </li>
-                    </ul>
-                </div>
-                <div class="feature-card p-6 rounded-xl">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center mr-4">
-                            <i class="fas fa-shield-alt text-indigo-400 text-2xl"></i>
-                        </div>
-                        <h3 class="text-xl font-bold">Security & Compliance</h3>
-                    </div>
-                    <ul class="text-slate-300 space-y-2">
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Fractal, Polygon ID, Web3Auth</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Reputation system</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i class="fas fa-check text-indigo-400 mt-1 mr-2"></i>
-                            <span>Penalty logic</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- CTA Section -->
-    <section class="py-20 px-6 bg-gradient-to-r from-indigo-900/30 to-purple-900/30">
-        <div class="max-w-4xl mx-auto text-center">
-            <h2 class="text-4xl font-bold mb-6">Ready to Transform Your Group Collaborations?</h2>
-            <p class="text-xl text-slate-300 mb-10 max-w-2xl mx-auto">
-                Join thousands of creators, developers, and entrepreneurs who are building trust with Bondr
-            </p>
-            <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <button class="px-8 py-4 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium text-lg hover:from-indigo-600 hover:to-purple-700 transition-all glow">
-                    Create Your First Bondr Group
-                </button>
-                <button class="px-8 py-4 rounded-xl bg-slate-800 text-slate-200 font-medium text-lg hover:bg-slate-700 transition">
-                    <i class="fas fa-book mr-2"></i> Read Documentation
-                </button>
-            </div>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer class="py-12 px-6 border-t border-slate-800">
-        <div class="max-w-6xl mx-auto">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="mb-6 md:mb-0">
-                    <div class="flex items-center space-x-2 mb-4">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
-                            <i class="fas fa-link text-white"></i>
-                        </div>
-                        <span class="text-2xl font-bold">Bondr</span>
-                    </div>
-                    <p class="text-slate-400">Smart Contract-Driven Telegram Groups</p>
-                </div>
-                <div class="flex flex-wrap justify-center gap-8">
-                    <div>
-                        <h4 class="text-slate-300 font-bold mb-3">Product</h4>
-                        <ul class="space-y-2 text-slate-400">
-                            <li><a href="#" class="hover:text-indigo-400 transition">Features</a></li>
-                            <li><a href="#" class="hover:text-indigo-400 transition">Pricing</a></li>
-                            <li><a href="#" class="hover:text-indigo-400 transition">Integrations</a></li>
-                        </ul>
-                    </div>
-                    <div>
-                        <h4 class="text-slate-300 font-bold mb-3">Resources</h4>
-                        <ul class="space-y-2 text-slate-400">
-                            <li><a href="#" class="hover:text-indigo-400 transition">Documentation</a></li>
-                            <li><a href="#" class="hover:text-indigo-400 transition">API Reference</a></li>
-                            <li><a href="#" class="hover:text-indigo-400 transition">Guides</a></li>
-                        </ul>
-                    </div>
-                    <div>
-                        <h4 class="text-slate-300 font-bold mb-3">Company</h4>
-                        <ul class="space-y-2 text-slate-400">
-                            <li><a href="#" class="hover:text-indigo-400 transition">About</a></li>
-                            <li><a href="#" class="hover:text-indigo-400 transition">Blog</a></li>
-                            <li><a href="#" class="hover:text-indigo-400 transition">Careers</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="border-t border-slate-800 mt-10 pt-6 text-center text-slate-500 text-sm">
-                <p>© 2023 Bondr. All rights reserved. Built with ❤️ for the decentralized web.</p>
-            </div>
         </div>
-    </footer>
-    <script>
-        // Simple animation for feature cards on scroll
-        document.addEventListener('DOMContentLoaded', function() {
-            const cards = document.querySelectorAll('.card, .feature-card, .step-card');
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.style.opacity = 1;
-                        entry.target.style.transform = 'translateY(0)';
-                    }
-                });
-            }, { threshold: 0.1 });
-            cards.forEach(card => {
-                card.style.opacity = 0;
-                card.style.transform = 'translateY(20px)';
-                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
-                observer.observe(card);
-            });
-        });
-    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/bondr2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Bondr – Smart Contract-Driven Telegram Groups</title>
+  <!-- Tailwind with extended theme -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: '#5F2EEA',
+            'primary-light': '#9C8AF5',
+            background: '#F9F9FC',
+            'ribbon-gray': '#D1CFD9',
+            'text-dark': '#1E1E24',
+            success: '#24E1A0',
+            error: '#FF6B6B',
+            'accent-blue': '#5DC9F4'
+          },
+          borderRadius: { lg: '1.5rem', xl: '2rem' },
+          boxShadow: {
+            md: '0 8px 24px rgba(0,0,0,0.06)',
+            lg: '0 12px 40px rgba(0,0,0,0.08)'
+          },
+          fontFamily: { sans: ['Poppins','sans-serif'] }
+        }
+      }
+    }
+  </script>
+  <link rel="stylesheet" href="styles.css"/>
+</head>
+<body class="antialiased">
+  <!-- NAVIGATION -->
+  <nav class="fixed w-full bg-white/30 backdrop-blur-md px-8 py-4 flex items-center justify-between z-50">
+    <div class="flex items-center gap-4">
+      <img src="bonderLOGONEWPURPLE.png" class="w-10 h-10 rounded-full" alt="Bondr Logo"/>
+      <span class="text-2xl font-bold text-primary">Bondr</span>
+    </div>
+    <ul class="hidden md:flex gap-8 text-text-dark">
+      <li><a href="#features">Features</a></li>
+      <li><a href="#how-it-works">How It Works</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+    <div class="flex gap-4">
+      <button class="btn-secondary">Sign In</button>
+      <button class="btn-primary">Get Started</button>
+    </div>
+  </nav>
+  <!-- HERO -->
+  <section class="min-h-screen flex flex-col items-center justify-center text-center px-6 bg-primary text-white pt-32">
+    <h1 class="text-5xl md:text-7xl mb-6 leading-tight">
+      Smart Contract-Driven<br/>
+      <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary-light">
+        Telegram Groups
+      </span>
+    </h1>
+    <p class="text-xl max-w-2xl mb-8 text-background/80">
+      Bondr blends Telegram UX, on-chain trust & payments into one seamless flow.
+    </p>
+    <div class="flex flex-col sm:flex-row gap-4">
+      <button class="btn-primary glow">Create Your Bondr Group</button>
+      <button class="btn-secondary flex items-center gap-2">
+        <i class="fas fa-play-circle"></i> Watch Demo
+      </button>
+    </div>
+  </section>
+  <!-- FEATURES -->
+  <section id="features" class="py-20 px-6 bg-background">
+    <div class="max-w-6xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <div class="glass-card">
+        <div class="w-12 h-12 bg-primary flex items-center justify-center rounded-lg mb-4 text-white">
+          <i class="fas fa-robot"></i>
         </div>
+        <h3 class="text-2xl mb-2">Instant Multi-Sig</h3>
+        <p class="mb-4 text-text-dark/80">
+          Add our bot, auto-deploy Gnosis Safe wallet + smart contract.
+        </p>
+        <ul class="space-y-2 text-text-dark/70">
+          <li class="flex items-start">
+            <i class="fas fa-check mr-2 text-success"></i> Safe multi-sig creation
+          </li>
+          <li class="flex items-start">
+            <i class="fas fa-check mr-2 text-success"></i> Thirdweb / Gnosis SDK
+          </li>
+        </ul>
+      </div>
+      <!-- …repeat for each feature card… -->
+    </div>
+  </section>
+  <!-- (Add How-It-Works, Technology, CTA & Footer sections similarly) -->
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/bondr2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>