Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MetaFoundry | Founder Mission Alignment</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=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #0f0f17; | |
| color: #e0e0e8; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .mission-card { | |
| background: rgba(30, 30, 45, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .mission-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .knowledge-graph-node { | |
| position: relative; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .node-1 { animation-delay: 0s; } | |
| .node-2 { animation-delay: 1s; } | |
| .node-3 { animation-delay: 2s; } | |
| .node-4 { animation-delay: 3s; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="border-b border-gray-800 py-4 px-6 fixed w-full bg-black bg-opacity-80 z-50"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">MetaFoundry</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#mission" class="text-gray-300 hover:text-white transition">Mission</a> | |
| <a href="#graph" class="text-gray-300 hover:text-white transition">Knowledge Graph</a> | |
| <a href="#studio" class="text-gray-300 hover:text-white transition">Founder Studio</a> | |
| <a href="#testimonials" class="text-gray-300 hover:text-white transition">Journeys</a> | |
| </div> | |
| <button class="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-2 rounded-full font-medium hover:opacity-90 transition"> | |
| Join Beta | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight"> | |
| Align Your <span class="gradient-text">Founder Journey</span> With Lifelong Purpose | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| MetaFoundry helps serial entrepreneurs connect ventures to their deeper mission through identity blueprinting, cross-venture knowledge sharing, and mission-matched opportunities. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-3 rounded-full font-medium hover:opacity-90 transition"> | |
| Discover Your Blueprint | |
| </button> | |
| <button class="border border-gray-600 px-8 py-3 rounded-full font-medium hover:bg-gray-800 transition"> | |
| <i class="fas fa-play mr-2"></i> Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative"> | |
| <div class="absolute -top-10 -left-10 w-64 h-64 rounded-full bg-purple-900 opacity-20 blur-3xl"></div> | |
| <div class="absolute -bottom-10 -right-10 w-64 h-64 rounded-full bg-blue-900 opacity-20 blur-3xl"></div> | |
| <div class="relative bg-gray-900 bg-opacity-50 rounded-2xl p-6 backdrop-filter backdrop-blur-lg border border-gray-800"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-user-astronaut text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold">Founder Identity Scan</h3> | |
| <p class="text-sm text-gray-400">Initializing...</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-xl"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Mission Alignment</span> | |
| <span class="text-sm font-medium text-blue-400">78% match</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-xl"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Knowledge Transfer</span> | |
| <span class="text-sm font-medium text-purple-400">64% utilized</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 64%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-xl"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Opportunity Fit</span> | |
| <span class="text-sm font-medium text-pink-400">3 matches</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-pink-500 to-red-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-3 rounded-xl font-medium hover:opacity-90 transition flex items-center justify-center"> | |
| <i class="fas fa-rocket mr-2"></i> Launch Full Analysis | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mission Section --> | |
| <section id="mission" class="py-20 px-6 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">From Exit-Hopping to <span class="gradient-text">Purpose-Driven Building</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| MetaFoundry helps you articulate and operationalize your founder mission across multiple ventures. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="mission-card p-8 rounded-2xl"> | |
| <div class="w-14 h-14 rounded-full bg-blue-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-dna text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Identity Blueprinting</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Discover your unique founder DNA through our proprietary mission-mapping framework. | |
| </p> | |
| <div class="flex items-center text-blue-400"> | |
| <span class="text-sm font-medium">Explore framework</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mission-card p-8 rounded-2xl"> | |
| <div class="w-14 h-14 rounded-full bg-purple-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-project-diagram text-purple-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Cross-Venture Knowledge</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Connect learnings across your entrepreneurial journey into a unified knowledge graph. | |
| </p> | |
| <div class="flex items-center text-purple-400"> | |
| <span class="text-sm font-medium">See examples</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mission-card p-8 rounded-2xl"> | |
| <div class="w-14 h-14 rounded-full bg-pink-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-handshake text-pink-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Mission-Matched Opportunities</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Join ventures at critical stages where your unique experience creates asymmetric impact. | |
| </p> | |
| <div class="flex items-center text-pink-400"> | |
| <span class="text-sm font-medium">View opportunities</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Knowledge Graph Section --> | |
| <section id="graph" class="py-20 px-6 relative overflow-hidden"> | |
| <div class="absolute -top-1/4 -right-1/4 w-1/2 h-1/2 rounded-full bg-blue-900 opacity-10 blur-3xl"></div> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h2 class="text-4xl font-bold mb-6">Your <span class="gradient-text">Entrepreneurial Knowledge Graph</span></h2> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| MetaFoundry automatically connects insights, relationships, and patterns across all your ventures into a living knowledge base that grows with you. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-900 bg-opacity-50 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-lightbulb text-blue-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Pattern Recognition</h4> | |
| <p class="text-gray-400">Identify recurring themes in your successes and failures across companies.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-900 bg-opacity-50 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-users text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Relationship Mapping</h4> | |
| <p class="text-gray-400">Visualize how your network evolves across different ventures and industries.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-pink-900 bg-opacity-50 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-random text-pink-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Transferable Insights</h4> | |
| <p class="text-gray-400">Surface relevant learnings from past ventures to apply to current challenges.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative w-full h-96"> | |
| <!-- Knowledge Graph Visualization --> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full border-2 border-blue-500 border-opacity-30"></div> | |
| <div class="knowledge-graph-node node-1 absolute top-1/4 left-1/4 bg-blue-900 bg-opacity-50 p-4 rounded-xl border border-blue-700 glow-effect"> | |
| <div class="w-10 h-10 rounded-full bg-blue-700 flex items-center justify-center mb-2 mx-auto"> | |
| <i class="fas fa-store text-blue-300"></i> | |
| </div> | |
| <p class="text-xs text-center">E-commerce 2015</p> | |
| </div> | |
| <div class="knowledge-graph-node node-2 absolute top-1/4 right-1/4 bg-purple-900 bg-opacity-50 p-4 rounded-xl border border-purple-700 glow-effect"> | |
| <div class="w-10 h-10 rounded-full bg-purple-700 flex items-center justify-center mb-2 mx-auto"> | |
| <i class="fas fa-graduation-cap text-purple-300"></i> | |
| </div> | |
| <p class="text-xs text-center">EdTech 2018</p> | |
| </div> | |
| <div class="knowledge-graph-node node-3 absolute bottom-1/4 left-1/4 bg-pink-900 bg-opacity-50 p-4 rounded-xl border border-pink-700 glow-effect"> | |
| <div class="w-10 h-10 rounded-full bg-pink-700 flex items-center justify-center mb-2 mx-auto"> | |
| <i class="fas fa-heartbeat text-pink-300"></i> | |
| </div> | |
| <p class="text-xs text-center">HealthTech 2020</p> | |
| </div> | |
| <div class="knowledge-graph-node node-4 absolute bottom-1/4 right-1/4 bg-indigo-900 bg-opacity-50 p-4 rounded-xl border border-indigo-700 glow-effect"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-700 flex items-center justify-center mb-2 mx-auto"> | |
| <i class="fas fa-robot text-indigo-300"></i> | |
| </div> | |
| <p class="text-xs text-center">AI Tools 2023</p> | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-900 bg-opacity-70 p-6 rounded-full border-2 border-white border-opacity-20 w-24 h-24 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-brain text-2xl gradient-text"></i> | |
| <p class="text-xs mt-1">Your Graph</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Founder Studio Section --> | |
| <section id="studio" class="py-20 px-6 bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">The <span class="gradient-text">Founder Studio</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| A rotating selection of mission-aligned startups where you can contribute your unique experience at critical growth stages. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> | |
| <div class="mission-card p-6 rounded-2xl"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-900 bg-opacity-50 flex items-center justify-center mr-4"> | |
| <i class="fas fa-leaf text-green-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">EcoChain</h3> | |
| <p class="text-sm text-gray-400">Blockchain for carbon markets</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4"> | |
| Seeking founder with marketplace experience to help design token incentive structures. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">Marketplaces</span> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">Tokenomics</span> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">Sustainability</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm"> | |
| <span class="text-green-400">85% match</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span>Series A</span> | |
| </div> | |
| <button class="text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mission-card p-6 rounded-2xl"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-50 flex items-center justify-center mr-4"> | |
| <i class="fas fa-graduation-cap text-blue-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">LearnLabs</h3> | |
| <p class="text-sm text-gray-400">Adaptive learning infrastructure</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4"> | |
| Needs founder with edtech background to advise on go-to-market for school districts. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">EdTech</span> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">K-12</span> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">GTM Strategy</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm"> | |
| <span class="text-blue-400">78% match</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span>Seed</span> | |
| </div> | |
| <button class="text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mission-card p-6 rounded-2xl"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-900 bg-opacity-50 flex items-center justify-center mr-4"> | |
| <i class="fas fa-microscope text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">BioForge</h3> | |
| <p class="text-sm text-gray-400">Democratizing biotech tools</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4"> | |
| Looking for founder with developer platform experience to design community programs. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">DevTools</span> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">Biotech</span> | |
| <span class="px-3 py-1 bg-gray-800 bg-opacity-50 rounded-full text-xs">Community</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm"> | |
| <span class="text-purple-400">65% match</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span>Series B</span> | |
| </div> | |
| <button class="text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="border border-gray-700 px-8 py-3 rounded-full font-medium hover:bg-gray-800 transition flex items-center mx-auto"> | |
| <i class="fas fa-bolt mr-2 text-yellow-400"></i> View All Opportunities | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Founder <span class="gradient-text">Journeys</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| How MetaFoundry helped entrepreneurs connect the dots across their ventures. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="mission-card p-8 rounded-2xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center"> | |
| <span class="text-2xl font-bold">JD</span> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Jamie Donovan</h4> | |
| <p class="text-gray-400">3 ventures | EdTech focus</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-6 italic"> | |
| "MetaFoundry helped me realize my mission wasn't just 'building education companies' but specifically 'democratizing access to technical education'. This clarity led me to join LearnCore at a pivotal moment." | |
| </p> | |
| <div class="flex items-center text-sm"> | |
| <span class="px-3 py-1 bg-blue-900 bg-opacity-30 rounded-full text-blue-400">+47% alignment</span> | |
| <span class="mx-2 text-gray-600">|</span> | |
| <span class="text-gray-400">Joined as CTO</span> | |
| </div> | |
| </div> | |
| <div class="mission-card p-8 rounded-2xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <span class="text-2xl font-bold">SR</span> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Samira Rahim</h4> | |
| <p class="text-gray-400">5 ventures | Marketplaces</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-6 italic"> | |
| "The knowledge graph revealed patterns I'd missed - all my successful ventures shared a 'trust infrastructure' component. This insight shaped how I evaluated my next opportunity at TrustLink." | |
| </p> | |
| <div class="flex items-center text-sm"> | |
| <span class="px-3 py-1 bg-purple-900 bg-opacity-30 rounded-full text-purple-400">+62% success</span> | |
| <span class="mx-2 text-gray-600">|</span> | |
| <span class="text-gray-400">Advised acquisition</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-6 bg-gradient-to-r from-blue-900 to-purple-900"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-6">Ready to Build With <span class="gradient-text">Purpose</span>?</h2> | |
| <p class="text-xl text-blue-100 mb-8"> | |
| Join MetaFoundry's beta program and start mapping your founder journey today. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-gray-900 px-8 py-3 rounded-full font-bold hover:bg-opacity-90 transition"> | |
| Apply for Beta Access | |
| </button> | |
| <button class="border border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fas fa-book-open mr-2"></i> Read Our Manifesto | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 bg-black"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">MetaFoundry</span> | |
| </div> | |
| <p class="text-gray-400 text-sm"> | |
| Aligning founder journeys with lifelong missions through identity blueprinting and knowledge mapping. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Mission Mapping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Knowledge Graph</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Founder Studio</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Mentorship Network</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Founder Stories</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Mission Frameworks</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Research</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400 text-sm"> | |
| Join our founder community | |
| </p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 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 MetaFoundry. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 transition text-sm">Privacy</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 transition text-sm">Terms</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-300 transition text-sm">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for the knowledge graph nodes on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-float'); | |
| } | |
| }); | |
| }, {threshold: 0.1}); | |
| document.querySelectorAll('.knowledge-graph-node').forEach(node => { | |
| observer.observe(node); | |
| }); | |
| // Smooth scrolling for navigation | |
| 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=LukasBe/metafoundry" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |