Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Murugu Blockchain - Parambaraiyum Parambariyamum</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', 'Noto Sans Tamil', sans-serif; | |
| background-color: #f8f5f2; | |
| } | |
| .tamil-font { | |
| font-family: 'Noto Sans Tamil', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #4a148c 0%, #880e4f 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .family-tree { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="20" r="8" fill="none" stroke="%234a148c" stroke-width="2"/><circle cx="30" cy="50" r="8" fill="none" stroke="%234a148c" stroke-width="2"/><circle cx="70" cy="50" r="8" fill="none" stroke="%234a148c" stroke-width="2"/><path d="M50 28 L30 42" stroke="%234a148c" stroke-width="2"/><path d="M50 28 L70 42" stroke="%234a148c" stroke-width="2"/></svg>'); | |
| background-size: 100px 100px; | |
| } | |
| .kulatheivam-icon { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%234a148c" d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm-1.06 13.54L7.4 12l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41-5.64 5.66z"/></svg>'); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <nav 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-shrink-0 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center text-white font-bold text-xl">மு</div> | |
| <span class="ml-2 text-xl font-bold text-purple-900">Murugu</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#features" class="border-purple-900 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a> | |
| <a href="#technology" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Technology</a> | |
| <a href="#modules" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Modules</a> | |
| <a href="#impact" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Impact</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-purple-900 hover:bg-purple-800 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Join Waitlist</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-900" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl font-bold leading-tight mb-4"> | |
| <span class="tamil-font">பரம்பரையும் பாரம்பரியமும்</span><br> | |
| Murugu Blockchain | |
| </h1> | |
| <p class="text-xl mb-8">A Sacred Tech Revolution for Family, Faith, and Future</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-purple-900 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold transition duration-300">Explore Features</button> | |
| <button class="border-2 border-white hover:bg-white hover:text-purple-900 px-6 py-3 rounded-md text-lg font-semibold transition duration-300">Watch Demo</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-yellow-400 rounded-full opacity-20"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-400 rounded-full opacity-20"></div> | |
| <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden"> | |
| <div class="bg-purple-900 p-4 text-white flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-white text-purple-900 flex items-center justify-center font-bold">மு</div> | |
| <span class="ml-2 font-semibold">Murugu Family Dashboard</span> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-gray-800 font-semibold">Family Chain View</h3> | |
| <span class="text-xs bg-purple-100 text-purple-900 px-2 py-1 rounded-full">Updated 2h ago</span> | |
| </div> | |
| <div class="family-tree bg-repeat h-48 mb-6"></div> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="text-center"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-home text-purple-900"></i> | |
| </div> | |
| <p class="text-xs text-gray-600">Properties</p> | |
| <p class="font-semibold">12</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-users text-purple-900"></i> | |
| </div> | |
| <p class="text-xs text-gray-600">Members</p> | |
| <p class="font-semibold">87</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-temple text-purple-900"></i> | |
| </div> | |
| <p class="text-xs text-gray-600">Kulatheivam</p> | |
| <p class="font-semibold">3</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tagline Section --> | |
| <section class="bg-yellow-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-4">"Memorable the Missed (W)ONE"</h2> | |
| <p class="text-xl text-gray-700">Family. Faith. Forever.</p> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" 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-3xl font-bold text-purple-900 mb-4">Preserving Your Heritage with Blockchain</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Digitally safeguarding Tamil family lineages, cultural heritage, property rights, and spiritual identities for generations to come.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-sitemap text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Family Chain View</h3> | |
| <p class="text-gray-600 mb-4">Tree-based ancestry tracking that connects generations with birthdays, dates of passing, and native village information.</p> | |
| <div class="flex items-center text-purple-900 font-medium"> | |
| <span>Explore lineage</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-file-contract text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Property Blockchain Ledger</h3> | |
| <p class="text-gray-600 mb-4">Tamper-proof property records with ownership timelines and heirship verification to prevent disputes.</p> | |
| <div class="flex items-center text-purple-900 font-medium"> | |
| <span>Secure assets</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 kulatheivam-icon"> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Kulatheivam Connect</h3> | |
| <p class="text-gray-600 mb-4">Maintain ritual history, temple information, and receive yearly alerts for family deity worship ceremonies.</p> | |
| <div class="flex items-center text-purple-900 font-medium"> | |
| <span>Honor traditions</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-map-marked-alt text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Relationship Map</h3> | |
| <p class="text-gray-600 mb-4">Visual representation of native villages, contact networks, and relationship statuses across the family.</p> | |
| <div class="flex items-center text-purple-900 font-medium"> | |
| <span>Connect globally</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-birthday-cake text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Daily Wishes Feed</h3> | |
| <p class="text-gray-600 mb-4">Auto-generated family celebration wishes for birthdays, anniversaries, and memorial alerts for departed souls.</p> | |
| <div class="flex items-center text-purple-900 font-medium"> | |
| <span>Celebrate together</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-certificate text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Blockchain Certificates</h3> | |
| <p class="text-gray-600 mb-4">Verifiable birth, death, and heirship proofs stored immutably on the blockchain for legal recognition.</p> | |
| <div class="flex items-center text-purple-900 font-medium"> | |
| <span>Verify documents</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Stack Section --> | |
| <section id="technology" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-4">Robust Technology Stack</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Modern decentralized technology integrated with age-old traditions</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Tech 1 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-mobile-alt text-purple-900 text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Frontend</h3> | |
| <p class="text-gray-600">Flutter (Mobile), React (Web)</p> | |
| </div> | |
| <!-- Tech 2 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-server text-purple-900 text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Backend</h3> | |
| <p class="text-gray-600">Node.js with Firebase / MongoDB</p> | |
| </div> | |
| <!-- Tech 3 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-link text-purple-900 text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Blockchain</h3> | |
| <p class="text-gray-600">Polygon or Substrate</p> | |
| </div> | |
| <!-- Tech 4 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-file-signature text-purple-900 text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Smart Contracts</h3> | |
| <p class="text-gray-600">Solidity / Ink!</p> | |
| </div> | |
| <!-- Tech 5 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-database text-purple-900 text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Document Storage</h3> | |
| <p class="text-gray-600">IPFS + Cloud</p> | |
| </div> | |
| <!-- Tech 6 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user-shield text-purple-900 text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Authentication</h3> | |
| <p class="text-gray-600">Firebase OTP + Role-based</p> | |
| </div> | |
| <!-- Tech 7 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-map-marked-alt text-purple-900 text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Native Village</h3> | |
| <p class="text-gray-600">GIS Mapping Integration</p> | |
| </div> | |
| <!-- Tech 8 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-robot text-purple-900 text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Future AI</h3> | |
| <p class="text-gray-600">Ancestry Assistant</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mobile App Modules Section --> | |
| <section id="modules" 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-3xl font-bold text-purple-900 mb-4">Mobile App Modules</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive features designed for family heritage management</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Module 1 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">1</div> | |
| <h3 class="text-lg font-semibold ml-3">Login via OTP</h3> | |
| </div> | |
| <p class="text-gray-600">Secure authentication with one-time password for easy access across generations.</p> | |
| </div> | |
| <!-- Module 2 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">2</div> | |
| <h3 class="text-lg font-semibold ml-3">Family Dashboard</h3> | |
| </div> | |
| <p class="text-gray-600">Centralized view of family tree, upcoming events, and recent updates.</p> | |
| </div> | |
| <!-- Module 3 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">3</div> | |
| <h3 class="text-lg font-semibold ml-3">Kulatheivam Shrine</h3> | |
| </div> | |
| <p class="text-gray-600">Dedicated space for family deity information, rituals, and puja schedules.</p> | |
| </div> | |
| <!-- Module 4 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">4</div> | |
| <h3 class="text-lg font-semibold ml-3">Property Chain</h3> | |
| </div> | |
| <p class="text-gray-600">Blockchain-verified ownership timeline and documentation for all family assets.</p> | |
| </div> | |
| <!-- Module 5 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">5</div> | |
| <h3 class="text-lg font-semibold ml-3">Member Profiles</h3> | |
| </div> | |
| <p class="text-gray-600">Detailed profiles for each family member with lineage connections and milestones.</p> | |
| </div> | |
| <!-- Module 6 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">6</div> | |
| <h3 class="text-lg font-semibold ml-3">Village Map View</h3> | |
| </div> | |
| <p class="text-gray-600">Interactive map showing native villages and ancestral locations with family history.</p> | |
| </div> | |
| <!-- Module 7 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">7</div> | |
| <h3 class="text-lg font-semibold ml-3">Events Feed</h3> | |
| </div> | |
| <p class="text-gray-600">Celebrations, memorials, and festival alerts with auto-generated wishes.</p> | |
| </div> | |
| <!-- Module 8 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">8</div> | |
| <h3 class="text-lg font-semibold ml-3">Admin Panel</h3> | |
| </div> | |
| <p class="text-gray-600">Add/update family data, manage certificates, and approve new members.</p> | |
| </div> | |
| <!-- Module 9 --> | |
| <div class="bg-gray-50 rounded-xl p-6 border border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-purple-900 text-white rounded-full flex items-center justify-center font-bold">9</div> | |
| <h3 class="text-lg font-semibold ml-3">Media Gallery</h3> | |
| </div> | |
| <p class="text-gray-600">Photos and videos of ancestral rituals, ceremonies, and family gatherings.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Value Impact Section --> | |
| <section id="impact" class="py-20 bg-purple-900 text-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-3xl font-bold mb-4">Transformative Value Impact</h2> | |
| <p class="text-xl opacity-90 max-w-3xl mx-auto">How Murugu Blockchain revolutionizes family heritage preservation</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Impact 1 --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-gavel"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Avoid Legal Disputes</h3> | |
| <p class="opacity-90">Verified blockchain entries for property and heirship prevent conflicts.</p> | |
| </div> | |
| <!-- Impact 2 --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-seedling"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Honor Roots</h3> | |
| <p class="opacity-90">Encourage youth to know and value their ancestral heritage.</p> | |
| </div> | |
| <!-- Impact 3 --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-temple"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Empower Temples</h3> | |
| <p class="opacity-90">Tech-enabled support systems for Kulatheivam worship traditions.</p> | |
| </div> | |
| <!-- Impact 4 --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-globe-asia"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Global Connections</h3> | |
| <p class="opacity-90">Bridge diaspora to native lands through digital heritage mapping.</p> | |
| </div> | |
| <!-- Impact 5 --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Spiritual Identity</h3> | |
| <p class="opacity-90">Preserve and pass down customs and rituals to future generations.</p> | |
| </div> | |
| <!-- Impact 6 --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-history"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Cultural Continuity</h3> | |
| <p class="opacity-90">Maintain Tamil traditions in an increasingly digital world.</p> | |
| </div> | |
| <!-- Impact 7 --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-hands-helping"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Community Building</h3> | |
| <p class="opacity-90">Strengthen family bonds across geographical boundaries.</p> | |
| </div> | |
| <!-- Impact 8 --> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Data Security</h3> | |
| <p class="opacity-90">Immutable blockchain storage protects sensitive family information.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Revenue Model Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-4">Sustainable Revenue Model</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Ensuring long-term viability while serving families</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-6"> | |
| <!-- Revenue 1 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-users text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Family Plans</h3> | |
| <p class="text-gray-600">1-time or annual subscriptions for family access</p> | |
| </div> | |
| <!-- Revenue 2 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-temple text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Temple Services</h3> | |
| <p class="text-gray-600">Listing and spiritual service coordination</p> | |
| </div> | |
| <!-- Revenue 3 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-file-certificate text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Verification</h3> | |
| <p class="text-gray-600">Legal/document verification fees</p> | |
| </div> | |
| <!-- Revenue 4 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-tree text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Custom Trees</h3> | |
| <p class="text-gray-600">Digital family tree creation service</p> | |
| </div> | |
| <!-- Revenue 5 --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-praying-hands text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Puja Subscriptions</h3> | |
| <p class="text-gray-600">Annual Kulatheivam worship packages</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sample Celebrations Section --> | |
| <section 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-3xl font-bold text-purple-900 mb-4">Sample Celebrations</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Daily Wishes Module keeps families connected</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Celebration 1 --> | |
| <div class="bg-purple-50 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-birthday-cake text-purple-900 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Birthdays</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Auto-generated birthday greetings sent to the family group with personalized messages.</p> | |
| <div class="bg-white p-4 rounded-lg border border-purple-100"> | |
| <p class="text-sm italic text-purple-900">"Happy birthday to our beloved uncle! May you be blessed with health and happiness. From your Murugu family."</p> | |
| </div> | |
| </div> | |
| <!-- Celebration 2 --> | |
| <div class="bg-purple-50 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-cross text-purple-900 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Memorials</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Respectful remembrance alerts for departed souls with family tributes.</p> | |
| <div class="bg-white p-4 rounded-lg border border-purple-100"> | |
| <p class="text-sm italic text-purple-900">"In loving memory of our grandmother on her 10th remembrance day. Her legacy lives on in our hearts."</p> | |
| </div> | |
| </div> | |
| <!-- Celebration 3 --> | |
| <div class="bg-purple-50 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-temple text-purple-900 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Kulatheivam Puja</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Annual deity worship dates with reminders and live streaming options.</p> | |
| <div class="bg-white p-4 rounded-lg border border-purple-100"> | |
| <p class="text-sm italic text-purple-900">"Annual puja at our Kulatheivam temple next week. Join in person or virtually at 9 AM."</p> | |
| </div> | |
| </div> | |
| <!-- Celebration 4 --> | |
| <div class="bg-purple-50 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-fire text-purple-900 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Festivals</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Regional Tamil festival alerts with traditional greetings and customs.</p> | |
| <div class="bg-white p-4 rounded-lg border border-purple-100"> | |
| <p class="text-sm italic text-purple-900">"Pongal wishes to all! Share your celebration photos with the family."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upcoming Modules Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-4">Future Innovations</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Exciting upcoming modules to enhance your heritage experience</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Future 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-3 bg-purple-900"></div> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-robot text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-900 mb-3">AI Ancestry Assistant</h3> | |
| <p class="text-gray-600 text-center">Intelligent system to answer questions about family history and suggest connections.</p> | |
| </div> | |
| </div> | |
| <!-- Future 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-3 bg-purple-900"></div> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-microphone text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-900 mb-3">Voice Memories</h3> | |
| <p class="text-gray-600 text-center">Archive of voice-recorded family stories and memories from elders.</p> | |
| </div> | |
| </div> | |
| <!-- Future 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-3 bg-purple-900"></div> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <span class="tamil-font text-purple-900 text-2xl font-bold">த</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-900 mb-3">Tamil Speech-to-Text</h3> | |
| <p class="text-gray-600 text-center">Convert spoken Tamil from senior members into written records automatically.</p> | |
| </div> | |
| </div> | |
| <!-- Future 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-3 bg-purple-900"></div> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-coins text-purple-900 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-gray-900 mb-3">NFT Heritage Deeds</h3> | |
| <p class="text-gray-600 text-center">Digitally unique certificates for ancestral properties and heirlooms as NFTs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Preserve Your Family Legacy?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Join the sacred tech revolution that bridges generations through blockchain technology.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="bg-white text-purple-900 hover:bg-gray-100 px-8 py-4 rounded-md text-lg font-semibold transition duration-300">Get Early Access</button> | |
| <button class="border-2 border-white hover:bg-white hover:text-purple-900 px-8 py-4 rounded-md text-lg font-semibold transition duration-300">Schedule Demo</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center text-white font-bold text-xl">மு</div> | |
| <span class="ml-2 text-xl font-bold">Murugu</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">"Memorable the Missed (W)ONE" – Family. Faith. Forever.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Features</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Family Chain</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Property Ledger</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Kulatheivam Connect</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Relationship Map</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Daily Wishes</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Modules</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Mobile App</li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Admin Panel</li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Temple Portal</li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Legal Verification</li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Media Gallery</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> support@murugu.com</li> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-phone-alt mr-2"></i> +91 98765 43210</li> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> Chennai, Tamil Nadu</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Murugu Blockchain. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple script for mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| // This would toggle a mobile menu in a real implementation | |
| alert('Mobile menu would open here in a complete implementation'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=oneaddteam/murugu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |