...

build.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+cd "$(dirname "$0")"
+
+PREFIX="ourhero"
+
+echo "building for folder: /$PREFIX/"
+export VITE_APP_BASE_URL="/$PREFIX"
+
+pnpm install --frozen-lockfile
+pnpm run build
+
+# local mirror (optional)
+rsync -rav --delete dist/ "${HOME}/hero/var/www/$PREFIX/"
+
+# deploy to threefold server
+rsync -avz --delete dist/ "root@threefold.info:/root/hero/www/info/$PREFIX/"

src/App.css

@@ -278,3 +278,34 @@ html {
   transition: transform 0.3s ease;
 }
 
+/* Markdown table and list enhancements */
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid oklch(1 0 0 / 20%); /* Use a slightly lighter border for dark theme */
+  padding: 0.75rem;
+  text-align: left;
+}
+
+.prose th {
+  background-color: oklch(0.205 0 0); /* Darker background for headers */
+  font-weight: bold;
+}
+
+.prose tr:nth-child(even) {
+  background-color: oklch(0.175 0 0); /* Slightly different background for even rows */
+}
+
+.prose ul,
+.prose ol {
+  padding-left: 1.5em; /* Ensure consistent indentation for lists */
+}
+
+.prose li {
+  margin-bottom: 0.5em;
+}

src/App.jsx

@@ -5,13 +5,14 @@ import Home from './pages/Home';
 import How from './pages/How';
 import GetStarted from './pages/GetStarted';
 import Technology from './pages/Technology';
+import Freezone from './pages/Freezone';
 import Blog from './pages/Blog';
 import BlogPost from './pages/BlogPost';
 import './App.css';
 
 function App() {
   return (
-    <Router>
+    <Router basename={import.meta.env.VITE_APP_BASE_URL}>
       <div className="dark min-h-screen bg-black text-white">
         <Navigation />
         <main className="pt-20">
@@ -20,8 +21,13 @@ function App() {
             <Route path="/how" element={<How />} />
             <Route path="/get-started" element={<GetStarted />} />
             <Route path="/technology" element={<Technology />} />
+            <Route path="/freezone" element={<Freezone />} />
+            <Route path="/freezone/:slug" element={<BlogPost />} />
             <Route path="/blog" element={<Blog />} />
-            <Route path="/blog/:slug" element={<BlogPost />} />
+            <Route path="/blog/:category/:slug" element={<BlogPost />} />
+            <Route path="/component/:slug" element={<BlogPost />} />
+            <Route path="/technology/:slug" element={<BlogPost />} />
+            <Route path="/home/:slug" element={<BlogPost />} />
           </Routes>
         </main>
       </div>

src/components/HeroSection.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router-dom';
 
 const HeroSection = ({
   title,
@@ -12,6 +13,7 @@ const HeroSection = ({
   showVideo = false,
   videoEmbed = null
 }) => {
+  const navigate = useNavigate();
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
       {/* Background Image/Video */}
@@ -82,7 +84,7 @@ const HeroSection = ({
             <Button 
               size="lg" 
               className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105"
-              onClick={() => window.location.href = ctaLink}
+              onClick={() => navigate(ctaLink)}
             >
               {ctaText}
             </Button>

src/components/Navigation.jsx

@@ -19,6 +19,7 @@ const Navigation = () => {
     { path: '/how', label: 'HOW' },
     { path: '/get-started', label: 'GET STARTED' },
     { path: '/technology', label: 'TECHNOLOGY' },
+    { path: '/freezone', label: 'FREEZONE' },
     { path: '/blog', label: 'BLOG' },
   ];
 

src/content/blog/ai-that-serves-you-the-personal-agent-revolution.md

@@ -4,9 +4,12 @@ author: "HERO Team"
 date: "December 8, 2024"
 readTime: "7 min read"
 tags: ["AI", "Personal Agents", "Technology"]
-image: "/src/assets/heart.jpg"
+image: "heart.jpg"
+description: "Unlike corporate AI that serves shareholders, Personal Agents work exclusively for you. Learn how this changes everything about AI interaction."
 featured: false
 draft: false
+
+slug: "ai-that-serves-you-the-personal-agent-revolution"
 ---
 
 Unlike corporate AI that serves shareholders, Personal Agents work exclusively for you. Learn how this changes everything about AI interaction.

src/content/blog/building-trust-in-a-zero-knowledge-world.md

@@ -4,9 +4,12 @@ author: "Dr. Sarah Chen"
 date: "December 12, 2024"
 readTime: "6 min read"
 tags: ["Cryptography", "Zero-Knowledge", "Security"]
-image: "/src/assets/balls.jpg"
+image: "balls.jpg"
+description: "How HERO's zero-knowledge architecture enables trust without compromising privacy. A deep dive into the cryptographic foundations of digital sovereignty."
 featured: false
 draft: false
+
+slug: "building-trust-in-a-zero-knowledge-world"
 ---
 
 How HERO's zero-knowledge architecture enables trust without compromising privacy. A deep dive into the cryptographic foundations of digital sovereignty.

src/content/blog/from-centralized-to-sovereign-the-evolution-of-digital-identity.md

@@ -4,9 +4,12 @@ author: "Alex Rodriguez"
 date: "December 10, 2024"
 readTime: "5 min read"
 tags: ["Identity", "Blockchain", "Sovereignty"]
-image: "/src/assets/white_keyb.jpg"
+image: "white_keyb.jpg"
+description: "Tracing the journey from corporate-controlled identities to blockchain-verified, user-owned digital personas. The future is sovereign."
 featured: false
 draft: false
+
+slug: "from-centralized-to-sovereign-the-evolution-of-digital-identity"
 ---
 
 Tracing the journey from corporate-controlled identities to blockchain-verified, user-owned digital personas. The future is sovereign.

src/content/blog/peer-to-peer-communication-cutting-out-the-middleman.md

@@ -4,9 +4,11 @@ author: "HERO Team"
 date: "December 1, 2024"
 readTime: "6 min read"
 tags: ["Communication", "P2P", "Privacy"]
-image: "/src/assets/heart.jpg"
+image: "city_digital.jpg"
 featured: false
 draft: false
+
+slug: "peer-to-peer-communication-cutting-out-the-middleman"
 ---
 
 How HERO enables direct communication between Personal Agents without corporate intermediaries. The future of private messaging is here.

src/content/blog/quantum-safe-storage-protecting-your-digital-legacy.md

@@ -4,9 +4,11 @@ author: "Dr. Michael Park"
 date: "December 5, 2024"
 readTime: "9 min read"
 tags: ["Quantum Computing", "Storage", "Security"]
-image: "/src/assets/balls.jpg"
+image: "swarm.jpg"
 featured: false
 draft: false
+
+slug: "quantum-safe-storage-protecting-your-digital-legacy"
 ---
 
 As quantum computing threatens traditional encryption, HERO's quantum-safe storage ensures your data remains secure for generations.

src/content/blog/the-economics-of-digital-sovereignty.md

@@ -4,9 +4,12 @@ author: "Emma Thompson"
 date: "December 3, 2024"
 readTime: "4 min read"
 tags: ["Economics", "Privacy", "Value"]
-image: "/src/assets/white_keyb.jpg"
+image: "pathforward.jpg"
+description: "Why paying $20/month for digital freedom is the best investment you'll ever make. Breaking down the true cost of corporate data harvesting."
 featured: false
 draft: false
+
+slug: "the-economics-of-digital-sovereignty"
 ---
 
 Why paying $20/month for digital freedom is the best investment you'll ever make. Breaking down the true cost of corporate data harvesting.

src/content/blog/the-future-of-digital-sovereignty-why-personal-agents-matter.md

@@ -4,9 +4,12 @@ author: "HERO Team"
 date: "December 15, 2024"
 readTime: "8 min read"
 tags: ["Digital Sovereignty", "Privacy", "AI"]
-image: "/src/assets/heart.jpg"
+image: "heart.jpg"
+description: "In an era where tech giants control our digital lives, Personal Agents represent a fundamental shift toward individual sovereignty and privacy. Discover how HERO is leading this revolution."
 featured: true
 draft: false
+
+slug: "the-future-of-digital-sovereignty-why-personal-agents-matter"
 ---
 
 In an era where tech giants control our digital lives, Personal Agents represent a fundamental shift toward individual sovereignty and privacy. Discover how HERO is leading this revolution.

src/content/component/ai-agents-on-your-terms.md

@@ -0,0 +1,23 @@
+---
+title: "AI Agents on Your Terms"
+author: "HERO Team"
+date: "2025-7-26"
+readTime: "7 min read"
+image: "itworks.jpg"
+iconname: "Brain"
+description: "HERO connects with a wide range of AI agents for research, content creation, and task automation. All computation is done locally or via trusted partners."
+tags: ["components", "ai-agents", "how-it-works"]
+slug: ai-agents-on-your-terms
+---
+
+## AI That Works For You, Not Against You
+
+HERO redefines your relationship with Artificial Intelligence by putting you in control. Instead of relying on centralized, opaque AI services, HERO enables you to connect with and manage AI agents on your own terms.
+
+### Key Aspects:
+*   **Local Computation**: Many AI computations can happen directly on your device or trusted infrastructure, ensuring your data never leaves your control.
+*   **Diverse AI Integration**: Connect with a wide range of AI agents for various tasks, including research, content creation, data analysis, and automation.
+*   **Privacy-Preserving AI**: Your interactions with AI are designed to be private, with zero-knowledge principles applied where possible.
+*   **User-Selected Agents**: You choose which AI agents to use, giving you the freedom to select tools that align with your values and needs.
+
+This approach ensures that AI serves you, enhancing your productivity and capabilities without compromising your privacy or sovereignty.

src/content/component/personal-agent.md

@@ -0,0 +1,24 @@
+---
+title: "Your Personal Agent"
+author: "HERO Team"
+date: "2025-7-26"
+readTime: "5 min read"
+image: "balls.jpg"
+description: "Your HERO acts as your digital assistant, managing messaging, meetings, calendar, documents, tasks, AI interactions, personal identity, credentials, and financial transactions."
+tags: ["components", "personal-agent", "how-it-works"]
+iconname: "User"
+order: 1
+slug: personal-agent
+---
+
+## The Core of Your Digital Sovereignty
+
+Your Personal Agent (HERO) is the central hub for your digital life. It's a secure, private software entity that acts entirely on your behalf, managing your data, communications, and interactions with the digital world.
+
+### Key Functions:
+*   **Digital Assistant**: Manages your messaging, meetings, calendar, documents, and tasks.
+*   **AI Interactions**: Orchestrates your interactions with various AI agents, ensuring privacy and control.
+*   **Identity & Credentials**: Securely manages your personal identity and digital credentials.
+*   **Financial Transactions**: Facilitates secure and private financial transactions.
+
+Your Personal Agent is designed to be fully owned and controlled by you, ensuring that your digital life remains sovereign and private.

src/content/component/private-ledger.md

@@ -0,0 +1,25 @@
+---
+title: "A Private Ledger Just for You"
+author: "HERO Team"
+date: "2025-7-26"
+readTime: "8 min read"
+image: "tech.jpg"
+description: "Every HERO maintains a private blockchain ledger that verifies identity, manages access control, tracks interactions, and can communicate securely with other ledgers."
+tags: ["components", "ledger", "how-it-works"]
+iconname: "Key"
+order: 4
+slug: private-ledger
+---
+
+## Your Personal, Immutable Record
+
+Every HERO maintains a private blockchain ledger, a secure and immutable record of your digital interactions, identity, and assets. This ledger is designed to provide you with unparalleled control and transparency over your digital life.
+
+### Key Benefits:
+*   **Verified Identity**: Cryptographically verifies your identity, allowing you to establish trust relationships without relying on third parties.
+*   **Access Control**: Manages access to your data and resources, ensuring only authorized entities can interact with your digital presence.
+*   **Interaction Tracking**: Securely tracks your digital interactions, providing an auditable and tamper-proof history.
+*   **Secure Communication**: Enables secure and private communication with other ledgers, facilitating trusted exchanges.
+*   **Sovereign Assets**: Provides a secure foundation for managing your digital assets and financial transactions.
+
+This private ledger empowers you with true digital autonomy, giving you complete ownership and control over your digital footprint.

src/content/component/secure-unbreakable-memory.md

@@ -0,0 +1,24 @@
+---
+title: "Secure, Unbreakable Memory"
+author: "HERO Team"
+date: "2025-7-26"
+readTime: "6 min read"
+image: "white_keyb.jpg"
+description: "Uses a zero-knowledge, quantum-safe dispersal algorithm. Memory is stored across multiple nodes with no single point of failure. You control the geographic placement of your data."
+tags: ["components", "memory", "how-it-works"]
+iconname: "Database"
+order: 2
+slug: secure-unbreakable-memory
+---
+
+## Your Data, Always Available, Always Private
+
+HERO employs a revolutionary approach to data storage, ensuring your digital memory is not only secure but also virtually indestructible.
+
+### Key Features:
+*   **Zero-Knowledge Dispersal**: Your data is encrypted and fragmented, then dispersed across multiple nodes. No single node holds enough information to reconstruct your data, ensuring ultimate privacy.
+*   **Quantum-Safe Cryptography**: Built with post-quantum algorithms to protect your data against future threats from quantum computing.
+*   **No Single Point of Failure**: With data spread across multiple locations, the loss or compromise of a single node does not affect the integrity or availability of your memory.
+*   **Geographic Sovereignty**: You have the power to choose the geographic locations where your data fragments are stored, ensuring compliance with local regulations and personal preferences.
+
+This system guarantees that your digital memory is always accessible to you, and only you, regardless of external circumstances.

src/content/freezone/dispute-resolution.md

@@ -0,0 +1,17 @@
+---
+title: Dispute Resolution (AI & People)
+slug: dispute-resolution
+description: Explore the innovative dispute resolution mechanisms available within a digital freezone, combining AI efficiency with human oversight.
+image: disputeresolution.jpg
+---
+
+Disputes are an inevitable part of any business or personal interaction. A digital freezone introduces a novel approach to dispute resolution, integrating the efficiency of artificial intelligence with the nuanced judgment of human experts, ensuring fair and swift outcomes.
+
+**Hybrid Resolution System:**
+
+*   **AI-Powered Mediation:** Initial stages of dispute resolution are handled by advanced AI algorithms that analyze facts, identify common ground, and propose equitable solutions. This accelerates the process and reduces costs.
+*   **Human Arbitration:** For complex or unresolved disputes, cases are escalated to a panel of independent human arbitrators, selected for their expertise and impartiality.
+*   **Transparent and Immutable Records:** All dispute proceedings and resolutions are recorded on a secure, immutable ledger, providing transparency and preventing tampering.
+*   **Globally Accessible Justice:** Access dispute resolution services from anywhere in the world, bypassing traditional jurisdictional complexities and delays.
+
+This hybrid model ensures that disputes are resolved efficiently, fairly, and with the highest degree of integrity, fostering a trustworthy environment for all participants within the digital freezone.

src/content/freezone/keep-your-assets-safe.md

@@ -0,0 +1,17 @@
+---
+title: Keep Your Assets Safe Now and in Future
+slug: keep-your-assets-safe
+description: Discover how a digital freezone provides robust protection for your assets against current and future threats.
+image: world.jpg
+---
+
+In an era of increasing digital threats and economic uncertainties, securing your assets is more critical than ever. A digital freezone offers a fortified environment designed to protect your digital wealth, ensuring its safety both today and in the years to come.
+
+**Advanced Security Measures:**
+
+*   **Quantum-Safe Cryptography:** Employ cutting-edge encryption techniques that are resistant to even the most powerful future computing threats, including quantum attacks.
+*   **Decentralized Storage:** Distribute your data across a resilient, decentralized network, eliminating single points of failure and enhancing data integrity.
+*   **Immutable Records:** Leverage blockchain technology to create unchangeable records of ownership and transactions, providing irrefutable proof of your assets.
+*   **Sovereign Control:** Maintain complete control over your digital identity and assets, free from the interference of third parties or centralized authorities.
+
+By embracing the security features of a digital freezone, you can rest assured that your valuable digital assets are shielded from evolving risks, preserving your wealth and legacy for the long term.

src/content/freezone/legal-and-financial-sovereignty.md

@@ -0,0 +1,17 @@
+---
+title: Legal and Financial Sovereignty
+slug: legal-and-financial-sovereignty
+description: Understand how a digital freezone provides unparalleled legal and financial sovereignty for your operations.
+image: freezone.jpg
+---
+
+In an increasingly interconnected world, maintaining legal and financial sovereignty is paramount for individuals and businesses alike. Digital freezones offer a revolutionary approach to achieving this, providing a secure and independent environment for your digital assets and operations.
+
+**Why Digital Freezones?**
+
+*   **Jurisdictional Independence:** Operate under a legal framework designed for digital entities, minimizing exposure to volatile or restrictive national regulations.
+*   **Asset Protection:** Safeguard your digital wealth from arbitrary seizures, capital controls, and unforeseen economic shifts.
+*   **Privacy and Security:** Benefit from advanced cryptographic measures and privacy-preserving technologies that protect your data and transactions.
+*   **Global Accessibility:** Conduct business and manage assets from anywhere in the world, with seamless access to a global network of services and opportunities.
+
+By leveraging the unique advantages of a digital freezone, you can establish a robust foundation for your digital future, ensuring your legal and financial autonomy in a rapidly evolving landscape.

src/content/freezone/ultimate-convenience-and-features.md

@@ -0,0 +1,18 @@
+---
+title: Ultimate in Convenience and Features
+slug: ultimate-convenience-and-features
+description: Experience unparalleled convenience and a rich suite of features designed to make your business life fun again within a digital freezone.
+image: stresssfree.jpg
+---
+
+Imagine a business environment where every tool you need is at your fingertips, processes are streamlined, and innovation thrives. A digital freezone delivers this reality, offering an ultimate blend of convenience and advanced features that transform the way you work.
+
+**Key Features for a Better Business Life:**
+
+*   **Integrated Digital Tools:** Access a comprehensive suite of integrated tools for communication, collaboration, project management, and financial operations, all within a secure ecosystem.
+*   **Automated Compliance:** Leverage AI-driven systems that automate compliance checks and regulatory filings, significantly reducing administrative burden and ensuring adherence to digital freezone laws.
+*   **Seamless Global Transactions:** Conduct international transactions with ease, benefiting from low fees, rapid settlements, and support for various digital currencies.
+*   **Personalized AI Agents:** Utilize intelligent AI agents that learn your preferences and automate routine tasks, freeing up your time to focus on strategic initiatives and creative endeavors.
+*   **Vibrant Community and Ecosystem:** Connect with a global community of innovators, entrepreneurs, and digital nomads, fostering collaboration and new opportunities.
+
+A digital freezone is more than just a legal framework; it's a dynamic ecosystem designed to enhance productivity, reduce stress, and inject enjoyment back into your business life.

src/content/home/communicate.md

@@ -0,0 +1,33 @@
+---
+title: "Communicate"
+description: "Secure messaging, voice, and video chat — all managed privately by your Personal Agent"
+icon: "Brain"
+image: "communicate.jpg"
+
+order: 1
+slug: "communicate"
+---
+
+# Communicate with Privacy and Freedom
+
+Your Personal Agent enables secure, private communication without corporate surveillance. Every message, voice call, and video chat is encrypted end-to-end and stored only on your devices.
+
+## Key Features
+
+- **End-to-End Encryption**: All communications are encrypted with keys you control
+- **No Central Servers**: Messages route directly between Personal Agents
+- **Multi-Modal**: Text, voice, video, and file sharing in one interface
+- **Offline Capability**: Continue communicating even without internet
+- **Cross-Platform**: Seamlessly sync across all your devices
+
+## How It Works
+
+Your Personal Agent creates secure communication channels with other Personal Agents. No third parties, no data mining, no surveillance. Just pure, private communication between people who trust each other.
+
+## Use Cases
+
+- Private family conversations
+- Secure business communications
+- Anonymous support groups
+- Confidential consultations
+- Private creative collaborations

src/content/home/create.md

@@ -0,0 +1,33 @@
+---
+title: "Create"
+description: "Build documents, videos, and creative assets collaboratively with AI assistance"
+icon: "Zap"
+image: "create.jpg"
+
+order: 2
+slug: "create"
+---
+
+# Create Without Limits
+
+Transform your ideas into reality with AI-powered creation tools that work entirely for you. Your Personal Agent helps you create documents, videos, music, code, and more — all while keeping your creative work private and under your control.
+
+## Key Features
+
+- **AI-Assisted Creation**: Local AI models help you create faster and better
+- **Multi-Media Support**: Documents, videos, audio, code, and more
+- **Collaborative Tools**: Work with others without compromising privacy
+- **Version Control**: Track changes and revert to any previous version
+- **Export Freedom**: Your creations, your formats, your rules
+
+## Creative Capabilities
+
+- **Document Creation**: Rich text, presentations, spreadsheets
+- **Media Production**: Video editing, audio processing, image creation
+- **Code Development**: Programming assistance and debugging
+- **Design Tools**: Graphics, layouts, and user interfaces
+- **Content Management**: Organize and manage all your creative work
+
+## Your Creative Process
+
+Unlike cloud-based tools that analyze your work, your Personal Agent's AI runs locally. Your creative process, your ideas, and your content remain completely private. Create without surveillance, publish without gatekeepers.

src/content/home/develop.md

@@ -0,0 +1,33 @@
+---
+title: "Develop"
+description: "Build and deploy applications faster with local AI and secure storage"
+icon: "Users"
+image: "develop.jpg"
+
+order: 4
+slug: "develop"
+---
+
+# Develop Without Barriers
+
+Build applications faster with AI that understands your codebase and goals. Your Personal Agent provides intelligent development assistance while keeping your code, data, and intellectual property completely private.
+
+## Key Features
+
+- **Local AI Assistance**: Code completion, debugging, and architecture advice
+- **Secure Storage**: Encrypted version control and backup
+- **Multi-Language Support**: Assistance for any programming language
+- **Collaborative Tools**: Work with teams without exposing code
+- **Deployment Freedom**: Deploy anywhere without vendor lock-in
+
+## Development Capabilities
+
+- **Code Generation**: AI helps write boilerplate and complex algorithms
+- **Testing Assistance**: Generate tests and validate functionality
+- **Documentation**: Auto-generate docs from your code
+- **Performance Optimization**: Identify bottlenecks and suggest improvements
+- **Security Auditing**: Scan for vulnerabilities and suggest fixes
+
+## Your Code, Your Rules
+
+Unlike cloud development platforms that analyze your code, your Personal Agent processes everything locally. Your intellectual property remains yours alone. Build commercial software, personal projects, or contribute to open source — all without surveillance or data harvesting.

src/content/home/discover.md

@@ -0,0 +1,33 @@
+---
+title: "Discover"
+description: "Browse and search using authentic sources and AI assistance while maintaining privacy"
+icon: "Shield"
+image: "discover.jpg"
+
+order: 3
+slug: "discover"
+---
+
+# Discover Truth Without Manipulation
+
+Search, browse, and discover information using AI that works for you — not advertisers. Your Personal Agent helps you find authentic sources, verify information, and build knowledge without surveillance or manipulation.
+
+## Key Features
+
+- **Private Search**: No tracking, no profiling, no filter bubbles
+- **Source Verification**: AI helps verify authenticity and credibility
+- **Offline Knowledge**: Build your personal knowledge base
+- **Multi-Source**: Aggregate information from diverse, trusted sources
+- **Fact-Checking**: Real-time verification of claims and sources
+
+## Discovery Tools
+
+- **Smart Search**: Natural language queries with context understanding
+- **Source Analysis**: Evaluate credibility and bias of information sources
+- **Knowledge Graphs**: Visualize connections between concepts and facts
+- **Trend Tracking**: Monitor topics over time without surveillance
+- **Research Assistance**: AI helps synthesize information from multiple sources
+
+## Your Knowledge, Your Control
+
+Unlike search engines that build profiles of your interests, your Personal Agent keeps your research private. Your questions, interests, and discoveries belong to you — not data brokers or advertisers.

src/content/home/share.md

@@ -0,0 +1,33 @@
+---
+title: "Share"
+description: "Distribute content without central platforms — sovereignly and securely"
+icon: "Lock"
+image: "share.jpg"
+
+order: 5
+slug: "share"
+---
+
+# Share Without Surveillance
+
+Distribute your content to the world without corporate platforms or surveillance. Your Personal Agent helps you share documents, media, and ideas directly with your audience while maintaining complete control.
+
+## Key Features
+
+- **Direct Distribution**: Share content without platform intermediaries
+- **Privacy Controls**: Decide exactly who can access what
+- **No Algorithms**: Your content reaches your audience without manipulation
+- **Multiple Formats**: Documents, videos, audio, images, and more
+- **Access Tracking**: Monitor who accesses your content without surveillance
+
+## Sharing Capabilities
+
+- **Peer-to-Peer Sharing**: Direct content distribution to other Personal Agents
+- **Time-Limited Access**: Grant temporary access that expires automatically
+- **Geographic Controls**: Restrict access by location
+- **Usage Analytics**: Understand how your content is used without compromising privacy
+- **Monetization Options**: Direct payment for access without platform fees
+
+## Your Content, Your Audience
+
+Unlike social media platforms that monetize your content and audience, your Personal Agent lets you build direct relationships. Share with individuals, groups, or the public — all on your terms. No algorithms deciding what your audience sees, no data harvesting, no platform lock-in.

src/content/home/transact.md

@@ -0,0 +1,33 @@
+---
+title: "Transact"
+description: "Send and receive digital value safely and without intermediaries"
+icon: "Heart"
+image: "transact.jpg"
+
+order: 6
+slug: "transact"
+---
+
+# Transact Without Intermediaries
+
+Send, receive, and manage digital value directly with others. Your Personal Agent handles cryptocurrencies, digital assets, and smart contracts while keeping your financial privacy intact.
+
+## Key Features
+
+- **Direct Transfers**: Send value peer-to-peer without banks or payment processors
+- **Multi-Asset Support**: Cryptocurrencies, tokens, NFTs, and digital assets
+- **Privacy Protection**: Transaction details remain private and secure
+- **Smart Contracts**: Automate agreements without trusted third parties
+- **Global Access**: Transact with anyone, anywhere, anytime
+
+## Transaction Capabilities
+
+- **Multi-Currency Wallet**: Store and manage multiple cryptocurrencies
+- **Atomic Swaps**: Exchange assets directly with others
+- **Smart Contract Deployment**: Create and manage programmable agreements
+- **Payment Channels**: Instant, low-cost transactions
+- **Privacy Coins**: Enhanced privacy for sensitive transactions
+
+## Financial Sovereignty
+
+Unlike traditional banking or crypto exchanges that require identity verification and can freeze funds, your Personal Agent gives you complete control over your digital assets. Your keys, your coins, your rules. Transact freely without permission from anyone.

src/content/tech/aci.md

@@ -0,0 +1,101 @@
+---
+title: "Augmented Collective Intelligence"
+author: "HERO Team"
+date: "2025-7-26"
+readTime: "7 min read"
+image: "heartblue.jpg"
+description: "How HERO combines human expertise with AI to create a new era of knowledge sharing and collaboration."
+tags: ["technology", "blockchain", "identity", "security"]
+iconname: "Key"
+order: 2
+slug: aci
+---
+
+
+## Augmented Collective Intelligence — the next frontier  
+
+At its core, **Augmented Collective Intelligence (ACI)** refers to the emergent intelligence that arises when humans and AI systems collaborate as peers—each contributing complementary strengths. Humans bring creativity, values, and lived experience. AI contributes scale, memory, pattern recognition, and tireless assistance. When these layers interact intentionally, they give rise to a new form of intelligence that is dynamic, decentralized, and greater than the sum of its parts.
+
+ACI is not just about automation or AI replacing human labor. It’s about enhancing human cognition, enabling new forms of collaboration, and solving complex problems through hybrid teams of people and machines working together. This model depends on communication, trust, shared context, and transparent governance. It offers the potential to reshape learning, decision-making, innovation, and governance across every domain of society.
+
+Research and experiments in ACI have shown that hybrid groups—human and AI working together—consistently outperform either humans or machines alone. But to make this vision work at scale, we need infrastructure that respects individual agency, secures data, and facilitates seamless cooperation across networks of individuals and machines.
+
+---
+
+
+## HERO’s Personal Agent: the foundation for collective intelligence  
+
+At the heart of HERO’s architecture is the **Personal Agent (PA)**: a software agent that works solely on your behalf and under your full control. This agent evolves over time by learning your preferences, absorbing your knowledge, and reflecting your values. It remembers your past decisions, conversations, and content, forming a coherent digital memory that is always at your service.
+
+Each HERO Personal Agent:
+
+- Runs locally or in a trusted environment you control
+- Maintains encrypted memory and interactions
+- Collaborates only when and how you allow
+- Represents your interests in digital conversations
+
+This personal agent becomes a **knowledge node**—a sovereign participant in a network of collective intelligence. When many PAs interact securely, guided by protocols for identity, context, and proof-of-authenticity, they can pool knowledge, resolve disputes, generate proposals, and help humans make better, faster, and more ethical decisions.
+
+In HERO’s design, AI is not centralized or corporate-owned. Instead, intelligence lives **at the edge**, with each person—cooperating, not competing.
+
+---
+
+## Why this matters  
+
+1. **Amplified Knowledge Sharing**  
+   Every user’s PA becomes a source of curated, contextualized, and authentic insight. Shared across the network, this creates a powerful knowledge mesh where wisdom can travel faster and with more meaning.
+
+2. **Trust and Identity**  
+   Because PAs are tied to verified human identities, contributions are attributable, credible, and anchored in accountability. This reduces misinformation and strengthens reliability across the network.
+
+3. **Scalable Learning and Mentorship**  
+   PAs enable lifelong learning by offering personalized support, suggesting resources, and connecting users with others who have relevant knowledge or experience—building a dynamic web of mentorship.
+
+4. **Resilient, Decentralized Intelligence**  
+   Unlike centralized AI systems that are vulnerable to misuse, HERO distributes intelligence across personal agents. This decentralized architecture is more robust, adaptive, and aligned with human sovereignty.
+
+---
+
+## A scenario in action  
+
+Imagine a global team working on sustainability solutions.  
+
+- Alice’s PA specializes in environmental policy.  
+- Bob’s PA tracks technical innovations in green energy.  
+- Carol’s PA focuses on local community engagement.
+
+Each PA contributes curated, real-time insights to a shared project. Together, they generate proposals that integrate policy, technology, and human impact—faster than traditional teams could ever manage.  
+
+As the team works, each PA learns from the others—becoming smarter, more nuanced, and better aligned with its human’s goals. The team benefits not just from each member’s skills, but from the synergy of their agents collaborating behind the scenes.
+
+---
+
+## The path forward  
+
+Augmented Collective Intelligence is not science fiction—it’s a design principle for the next phase of human development. But to realize it, we must equip every person with tools that uphold their privacy, protect their identity, and enhance their agency.
+
+HERO does exactly that.
+
+By giving each individual a powerful Personal Agent that can learn, act, and collaborate securely, HERO lays the foundation for a new kind of society—one where intelligence is not extracted and centralized, but empowered and shared.
+
+This is the promise of HERO:  **A world where humans and AI grow wiser together.**
+
+---
+
+## Compare with Artificial General Intelligence (AGI)
+
+| Feature                          | HERO's Augmented Collective Intelligence (ACI)      | Centralized AGI Model                         |
+|----------------------------------|------------------------------------------------------|-----------------------------------------------|
+| **Control**                      | Each person controls their own Personal Agent        | Controlled by a central organization or lab    |
+| **Architecture**                 | Decentralized, peer-to-peer network of agents        | Centralized model trained and deployed globally|
+| **Data Ownership**               | Users own and encrypt their own data                 | User data is often collected, stored, and used centrally |
+| **Security & Privacy**          | Built-in zero-knowledge and encryption mechanisms    | Privacy depends on policies and enforcement    |
+| **Identity & Authenticity**     | Verified human-linked agents with proof mechanisms   | Lacks individual provenance or source tagging  |
+| **Collaboration**               | Agents collaborate across humans, guided by consent  | AGI may act autonomously without human input   |
+| **Bias & Alignment**            | Human-in-the-loop ensures local cultural alignment   | Risks misalignment with human values at scale  |
+| **Scalability**                 | Grows as more humans and agents join the network     | Scaling limited by compute and central capacity|
+| **Adaptability**                | Continuously adapts through human feedback loops     | Harder to adapt without retraining large models|
+| **Resilience**                  | No single point of failure, locally sovereign agents | High risk if centralized AGI is compromised    |
+| **Goal**                        | Empower humans, augment decision-making              | Simulate or surpass human intelligence         |
+| **Ethical Framework**           | Cooperative and accountable by design                | Undefined or externally imposed ethics         |
+

src/content/tech/peer-to-peer-network.md

@@ -0,0 +1,103 @@
+---
+title: "Peer-to-Peer Network: What It Actually Means for You"
+author: "HERO Team"
+date: "2024-06-15"
+readTime: "5 min read"
+image: "swarm.jpg"
+description: "Real-world explanation of how Mycelium's P2P network solves everyday internet problems. No jargon, just clear benefits."
+tags: ["technology", "p2p", "network", "communication"]
+iconname: "Network"
+order: 3
+slug: peer-to-peer-network
+---
+
+## Why Your Internet Sometimes Just... Sucks
+
+You know that moment when:
+- Your video call drops because "server is unreachable"
+- Your files upload to a cloud service, then download again just to share with someone nearby
+- Your messages take weird, indirect routes across continents
+- A single company's outage breaks half the internet
+
+This isn't your imagination. It's how the traditional internet works.
+
+## The Invisible Middleman Problem
+
+Right now, even when you message your neighbor, your data likely travels like this:
+**Your Device → ISP → Data Center → ISP → Their Device**
+
+Why? Because we're all using centralized services that need to see, store, and control everything we do online. It's like mailing a letter to your next-door neighbor via a post office in another country.
+
+## Here's What Mycelium Actually Changes
+
+Mycelium doesn't replace your internet connection—**it works with it**. Think of it as adding a smart routing layer on top of your existing internet, like GPS for your data.
+
+**What stays the same:**
+- Your regular internet connection
+- Your familiar apps and interfaces
+- Normal internet speeds
+
+**What changes:**
+- Your messages, calls, and files take the shortest path available
+- No corporate middleman storing everything
+- Works even when parts of the internet fail
+- Private by design—your data isn't analyzed or sold
+
+## Real Benefits You Can Feel
+
+**The "Why Didn't We Always Have This?" Moments:**
+
+- **No more upload-then-download dance**
+    - Share a 2GB file with your colleague? Direct transfer.
+    - No waiting for upload to finish before they can start downloading.
+- **Your conversations stay yours**
+    - Messages route directly between devices
+    - No corporation storing years of your private conversations
+    - Even metadata (who you talk to) isn't collected
+- **It just works, even when the internet doesn't**
+    - If your ISP has issues, find alternate routes automatically
+    - No single company can take down the network
+- **Better performance for what you care about**
+    - Gaming: Lower ping because data takes efficient paths
+    - Video calls: More stable because there's no single server that can fail
+    - Sharing: Faster because data travels the shortest route
+
+## How Does This Actually Work?
+
+**The Simple Version:**
+
+1. Mycelium creates an encrypted tunnel between apps, humans, mobile phones, and computers
+2. It finds the fastest route (could be direct WiFi, your local network, or the internet)
+3. It uses existing internet infrastructure, just smarter
+4. All data is encrypted end-to-end, so only you and the person you're communicating with can read it
+
+**What you see:**
+- Your apps work exactly the same
+- You might notice faster file transfers and more stable connections
+- No accounts to create, no new software to learn
+
+## The Comparison That Makes Sense
+
+| Situation                       | Traditional Internet             | With Mycelium               |
+|---------------------------------|----------------------------------|-----------------------------|
+| **Two neighbors sharing files** | Upload to cloud, then download   | Direct faster transfer   |
+| **Power outage at data center** | Everything breaks                | Routes around automatically |
+| **Your private messages**       | Stored on server indefinitely    | Never stored, just delivered|
+| **Gaming with friends nearby**  | 50ms ping to server              | Direct 1ms connection       |
+| **Sharing vacation photos**     | 20 minutes of uploading          | 2 minutes direct transfer   |
+
+## It Uses the Internet, Just Smarter
+
+You're not getting separate internet. Think of Mycelium as the difference between:
+- **Traditional:** Mailing all packages through a central warehouse
+- **Mycelium:** Delivering directly, but using existing roads
+
+Your internet stays the same. Your experience gets dramatically better.
+
+## The Bottom Line
+
+This isn't about replacing the internet—it's about fixing the part that's been fundamentally broken since the 1990s: **the unnecessary centralization of human communication**. 
+
+With Mycelium, the shortest path between two humans isn't always through a corporate server anymore. Sometimes, it's just the direct route.
+
+That's why this matters.

src/content/tech/quantum-safe-storage.md

@@ -0,0 +1,77 @@
+---
+title: "Quantum-Safe Storage: Your Files, Future-Proofed"
+author: "HERO Team"
+date: "2025-06-25"
+readTime: "7 min read"
+image: "sphere.jpg"
+description: "How ThreeFold keeps photos, documents and business records readable even when today’s passwords and data centers no longer exist."
+tags: ["storage", "security", "quantum-safe", "data sovereignty"]
+iconname: "Database"
+order: 4
+slug: quantum-safe-storage
+---
+
+### 1. The Gap Between “Upload” and “Still There in 20 Years”
+
+| What happens with mainstream cloud | What owners usually discover too late |
+| --- | --- |
+| A single provider keeps three copies in one jurisdiction. | One new law, outage or ransom-attack and access can vanish overnight. |
+| Data is protected by RSA/AES keys. | New quantum computers can break those keys in hours. |
+| Replication is fixed at 3× size. | 200 % extra space you pay for even if you don’t need it. |
+
+---
+
+### 2. How Quantum-Safe Storage Works in Plain Language
+
+Think of your file as a jigsaw puzzle that is never kept in one box.
+
+1. **Encryption** – The file is locked with AES-256.  
+2. **Fragmentation & Equations** – Instead of storing the file, the system creates 20 unique math equations whose *solution* is the file.  
+3. **Spread** – These equations are written to 20 separate devices you can pin to **Sweden only**, “no US soil”, “EU only”, etc.  
+4. **Resilience** – Only 16 of 20 equations are required to re-solve the puzzle, so four complete sites can disappear and the file still opens.  
+5. **Heal** – Devices silently check each equation every few weeks; any error is auto-repaired from surviving pieces.
+
+You keep using normal drag-and-drop, S3 apps or phone backups—none of this math is visible in daily life.
+
+---
+
+### 3. Side-by-Side Comparison
+
+| Everyday risk | Dropbox / OneDrive / S3 block storage | Quantum-Safe Storage |
+| --- | --- | --- |
+| Hard-drive dies in one data-center | You wait for human repair or restore from backup | Storage layer notices, recreates missing piece in < 1 s. |
+| National firewall or court order | Whole account frozen in that country | 16 surviving fragments in other countries still serve the file. |
+| Tomorrow’s quantum computer leaks universal password | All data decipherable | Attacker must retrieve and break 16 separate keys stored on different hardware, in different legal systems. |
+| Storage cost overhead | Always 2–3× raw size | 20 % overhead for 5-site failure tolerance. |
+
+---
+
+### 4. Nothing Changes on Your Network
+
+The technology rides the same internet you already have:
+
+- Up- and downloads still go over IPv4, IPv6, fiber, 5G or your home Wi-Fi.  
+- Apps that understand the S3 API (most backup software, Nextcloud, mobile photo apps) talk to the system without extra plugins.  
+- Browser links keep working because a small gateway translates HTTPS requests into the low-level fragment fetches.
+
+Only *where* the bytes sleep is different—scattered across independent “ThreeFold nodes” instead of a single cloud warehouse.
+
+---
+
+### 5. Why Geographic Sovereignty Matters
+
+When a photographer hands wedding photos to a Swiss client or a clinic stores EU medical records, the question appears:  
+**“Which country can legally force access to this data?”**
+
+With Quantum-Safe Storage the answer is explicit:  
+- “The file is mathematically split. The re-combination map never leaves my machine, eight fragments sit in Swiss homes, twelve in German households—none in the US cloud.”  
+That turns compliance from a promise into a verifiable fact and keeps the file reachable even if trans-Atlantic cables fail.
+
+---
+
+### 6. For Tech-Minded Readers
+
+- **Encoding**: Forward looking code over AES-256-GCM gives 20 % redundancy, detect-and-repair bit-rot, and 50 MB/s sustained throughput.  
+- **Metadata**: filename-to-fragment mapping stored in its own ZDB (append-only, history kept).  
+- **Proof-of-Storage**: Nodes prove fragment integrity via zero-knowledge checksums every heartbeat.  
+- **Post-Quantum Upgrade Path**: Retro-fits Kyber or similar post-quantum ciphers once industrialized, without user action.  

src/content/tech/trust-all-architecture.md

@@ -0,0 +1,75 @@
+---
+title: "Trust-All Architecture"
+author: "HERO Team"
+date: "2025-6-26"
+readTime: "7 min read"
+image: "person.jpg"
+description: "At the heart of the original internet was a bold assumption: we trust each other. It wasn’t about surveillance, profiling, or control—it was about openness, sharing, and freedom. Today, as we build a new digital foundation for knowledge and collaboration, it’s time to return to that core philosophy—but with stronger protections.
+"
+tags: ["technology", "zero-knowledge", "security"]
+iconname: "Shield"
+order: 1
+slug: trust-all-architecture
+---
+
+
+# Privacy by Design: The Trust All Foundation
+
+At the heart of the original internet was a bold assumption: **we trust each other**.
+
+It wasn’t about surveillance, profiling, or control—it was about openness, sharing, and freedom. Today, as we build a new digital foundation for knowledge and collaboration, it’s time to **return to that core philosophy—but with stronger protections**.
+
+## A New Trust Architecture
+
+We call this the **Trust All Foundation**. It’s a radical yet rational decision: we choose to trust people *by default*, while protecting everyone through strong technology, cryptographic verification, and AI-supported authenticity.
+
+In a world clouded by misinformation, manipulation, and centralized power, we don’t solve the problem with more gatekeepers. Instead, we flip the model:
+
+> **Don’t trust because of stars or likes. Trust because of proof.**
+
+### Authenticity Over Ratings
+
+AI plays a critical role—not by scoring content or judging users, but by helping humans **identify what is real**:
+
+* **Proof of Human**: You’re not interacting with a bot army—you’re engaging with verified people.
+* **Proof of Authenticity**: AI helps validate the source and integrity of content.
+* **Proof of Knowledge**: Claims can be traced to verifiable expertise, not empty reputation metrics.
+
+We’re building a **knowledge economy** where trust is earned and verified, not sold or gamed.
+
+## HERO's Zero-Knowledge Architecture
+
+A cornerstone of this privacy-first internet is **HERO’s Zero-Knowledge Architecture**. Inspired by cutting-edge cryptography, this system ensures your data is private and sovereign—*even from us*.
+
+### How It Works:
+
+* **Client-Side Encryption**: Your data is encrypted *before* it leaves your device.
+* **Zero-Knowledge Proofs**: Others can verify that something is true (e.g. you're over 18, you're the owner of a document) *without seeing your actual data*.
+* **No Central Honey Pot**: We don’t store sensitive user data. That means there’s nothing central to breach or abuse.
+* **Trustless Verification**: You can prove your identity, ownership, or credentials—without ever revealing more than necessary.
+
+This isn’t just privacy—it’s **digital sovereignty**.
+
+## Rebuilding Trust, Together
+
+Trust isn’t something we outsource anymore. It’s something we build—with **transparent systems**, **verifiable claims**, and **respect for individual privacy**.
+
+The Trust All Foundation doesn’t mean being naive. It means choosing to believe in people again—**while protecting everyone with smart architecture and honest AI**.
+
+Together, we can create an internet where knowledge flows freely, identity remains sovereign, and **trust is both a human and technological act**.
+
+
+## 🔍 Comparison: Today’s Web vs Trust All Foundation
+
+| Aspect                     | Centralized Platforms (Today)                              | Trust All Foundation (HERO)                              |
+|---------------------------|-------------------------------------------------------------|-----------------------------------------------------------|
+| **Trust Model**           | Trust companies, ratings, and algorithms                    | Trust people by default, verify with cryptography         |
+| **Identity**              | Managed by platforms, tied to accounts                      | Self-owned identity, verified with zero-knowledge proofs  |
+| **Content Authenticity**  | Stars, likes, follows                                       | Cryptographic proof of origin, authorship, & integrity    |
+| **Privacy**               | Data collected, profiled, sold                              | Data encrypted at source, never leaves your control       |
+| **Verification**          | Central authority decides truth                             | Peer-to-peer & AI-assisted authenticity checks            |
+| **AI Role**               | Curate, rank, manipulate feeds                              | Assist human understanding, verify sources                |
+| **Data Storage**          | Central servers (high-risk honeypots)                       | Distributed & encrypted, zero central storage of secrets  |
+| **Surveillance Risk**     | High — behavior tracked and analyzed                        | Minimal — nothing shared unless proven & permitted        |
+| **User Control**          | Limited, often opt-out                                      | Full, transparent, consent-based                          |
+| **Economic Model**        | Monetize attention and data                                 | Empower knowledge creation and cooperation                |

src/pages/Blog.jsx

@@ -10,9 +10,11 @@ import { Buffer } from 'buffer'; // Explicitly import Buffer
 
 // Import images
 import blogBackground from '../assets/myhero.jpg';
+import defaultPostImage from '../assets/myhero.jpg'; // Using an existing image as a fallback
 
 // Use Vite's import.meta.glob to import all markdown files
-const modules = import.meta.glob('../blogs/*.md', { as: 'raw', eager: true });
+const modules = import.meta.glob('../content/blog/*.md', { as: 'raw', eager: true });
+const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
 
 const Blog = () => {
   const [posts, setPosts] = useState([]);
@@ -30,13 +32,11 @@ const Blog = () => {
           // Extract slug from filename
           const slug = path.split('/').pop().replace('.md', '');
 
-          // Only include posts that are not drafts
           if (frontmatter.draft !== true) {
             loadedPosts.push({
               ...frontmatter,
               slug,
-              // Ensure image path is correct for Vite
-              image: frontmatter.image ? new URL(frontmatter.image, import.meta.url).href : '/src/assets/default.jpg'
+              image: frontmatter.image ? imageModules[`../assets/${frontmatter.image}`] : defaultPostImage
             });
           }
         }
@@ -154,13 +154,13 @@ const Blog = () => {
             </motion.h2>
           </div>
 
-          <Link to={`/blog/${displayFeaturedPost.slug}`} className="block">
+          <Link to={`/blog/blog/${displayFeaturedPost.slug}`} className="block">
             <motion.article
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8 }}
               viewport={{ once: true }}
-              className="max-w-4xl mx-auto glass-effect rounded-2xl overflow-hidden hover:border-blue-400/30 transition-all duration-300 hover-lift"
+              className="max-w-6xl mx-auto glass-effect rounded-2xl overflow-hidden hover:border-blue-400/30 transition-all duration-300 hover-lift"
             >
               <div className="md:flex">
                 <div className="md:w-1/2">
@@ -187,7 +187,7 @@ const Blog = () => {
                   </h3>
                   
                   <p className="text-gray-300 mb-6 leading-relaxed">
-                    {displayFeaturedPost.excerpt}
+                    {displayFeaturedPost.description}
                   </p>
                   
                   <div className="flex items-center justify-between text-sm text-gray-400 mb-6">
@@ -251,13 +251,12 @@ const Blog = () => {
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {blogPosts.map((post, index) => (
-            <Link to={`/blog/${post.slug}`} className="block">
+          {blogPosts.map((post) => (
+            <Link to={`/blog/blog/${post.slug}`} className="block" key={post.slug}>
               <motion.article
-                key={index}
                 initial={{ opacity: 0, y: 30 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: index * 0.1 }}
+                transition={{ duration: 0.6, delay: blogPosts.indexOf(post) * 0.1 }}
                 viewport={{ once: true }}
                 className="glass-effect rounded-xl overflow-hidden hover:border-purple-400/30 transition-all duration-300 hover-lift group"
               >
@@ -269,10 +268,9 @@ const Blog = () => {
                   />
                   <div className="absolute inset-0"></div>
                 </div>
-                
                 <div className="p-6">
                   <div className="flex flex-wrap gap-2 mb-3">
-                    {post.tags.slice(0, 2).map((tag) => (
+                    {post.tags?.slice(0, 2).map((tag) => (
                       <span
                         key={tag}
                         className="px-2 py-1 bg-purple-600/20 text-purple-400 text-xs rounded-full"
@@ -287,7 +285,7 @@ const Blog = () => {
                   </h3>
                   
                   <p className="text-gray-300 text-sm mb-4 leading-relaxed">
-                    {post.excerpt}
+                    {post.description}
                   </p>
                   
                   <div className="flex items-center justify-between text-xs text-gray-400">
@@ -312,7 +310,7 @@ const Blog = () => {
 
       {/* Newsletter Signup */}
       <Section background="gradient" padding="xlarge" id="subscribe">
-        <div className="max-w-2xl mx-auto text-center">
+        <div className="max-w-4xl mx-auto text-center">
           <motion.h2 
             className="text-4xl md:text-5xl font-bold text-white mb-6"
             initial={{ opacity: 0, y: 20 }}
@@ -366,3 +364,4 @@ const Blog = () => {
 
 export default Blog;
 
+

src/pages/BlogPost.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useLocation } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import matter from 'gray-matter';
@@ -7,8 +7,11 @@ import { ArrowLeft, Calendar, User, Tag } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Buffer } from 'buffer'; // Explicitly import Buffer
 
+const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
+
 const BlogPost = () => {
-  const { slug } = useParams();
+  const { category, slug } = useParams(); // category will be undefined for /component/:slug
+  const location = useLocation();
   const [post, setPost] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -16,17 +19,60 @@ const BlogPost = () => {
   useEffect(() => {
     const loadPost = async () => {
       try {
-        const response = await fetch(`/src/blogs/${slug}.md`);
-        if (!response.ok) {
-          throw new Error('Post not found');
-        }
-        const content = await response.text();
-        const { data: frontmatter, content: markdownContent } = matter(content);
+        let contentModule;
+        let basePath;
+        let currentSlug = slug; // Use slug from useParams
 
-        setPost({
-          frontmatter,
-          content: markdownContent
-        });
+        // Determine content type based on pathname
+        const pathSegments = location.pathname.split('/').filter(Boolean);
+        let contentType = '';
+
+        if (pathSegments[0] === 'blog' && pathSegments.length >= 3) {
+          contentType = 'blog';
+          // For blog posts, category is the second segment, slug is the third
+          currentSlug = pathSegments[2];
+          basePath = `../content/blog/`; // blog/:category/:slug
+        } else if (pathSegments[0] === 'component' && pathSegments.length >= 2) {
+          contentType = 'component';
+          currentSlug = pathSegments[1]; // component/:slug
+          basePath = '../content/component/';
+        } else if (pathSegments[0] === 'technology' && pathSegments.length >= 2) {
+          contentType = 'tech';
+          currentSlug = pathSegments[1];
+          basePath = '../content/tech/';
+        } else if (pathSegments[0] === 'freezone' && pathSegments.length >= 2) {
+          contentType = 'freezone';
+          currentSlug = pathSegments[1];
+          basePath = '../content/freezone/';
+        } else if (pathSegments[0] === 'home' && pathSegments.length >= 2) {
+          contentType = 'home';
+          currentSlug = pathSegments[1];
+          basePath = '../content/home/';
+        }
+        else {
+          setError('Invalid URL path for content.');
+          setLoading(false);
+          return;
+        }
+
+        try {
+          const modules = import.meta.glob('../content/**/*.md', { as: 'raw', eager: true });
+          const fullPath = `${basePath}${currentSlug}.md`;
+          contentModule = modules[fullPath];
+
+          if (!contentModule) {
+            throw new Error(`Markdown file not found at ${fullPath}`);
+          }
+
+          const { data: frontmatter, content: markdownContent } = matter(contentModule);
+          
+          // Resolve image path
+          const resolvedImage = frontmatter.image ? imageModules[`../assets/${frontmatter.image}`] : null;
+
+          setPost({ frontmatter: { ...frontmatter, image: resolvedImage }, content: markdownContent, contentType }); // Store contentType and resolved image with post
+        } catch (err) {
+          setError(`Failed to load content: ${err.message}. Please ensure the file exists and is correctly formatted.`);
+        }
       } catch (err) {
         setError(err.message);
       } finally {
@@ -35,7 +81,7 @@ const BlogPost = () => {
     };
 
     loadPost();
-  }, [slug]);
+  }, [location.pathname, slug]); // Depend on pathname and slug
 
   if (loading) {
     return (
@@ -53,15 +99,38 @@ const BlogPost = () => {
     );
   }
 
+  const getBackLink = () => {
+    // Use post.contentType to determine the back link
+    if (!post || !post.contentType) {
+      return '/'; // Default to home if content type is unknown
+    }
+    switch (post.contentType) {
+      case 'component':
+        return '/how';
+      case 'blog':
+        return '/blog';
+      case 'tech':
+        return '/technology';
+      case 'freezone':
+        return '/freezone';
+      case 'home':
+        return '/'; // Or a more specific home content listing page if it exists
+      default:
+        return '/';
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gray-900">
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
-        <Link to="/blog">
-          <Button className="mb-8 bg-gray-800 hover:bg-gray-700 text-white">
+      <div className="container mx-auto px-4 py-8 max-w-6xl">
+        <div className="mb-8">
+          <Link to={getBackLink()}>
+            <Button className="bg-gray-800 hover:bg-gray-700 text-white">
               <ArrowLeft className="mr-2 h-4 w-4" />
-            Back to Blog
+              Back to {post?.contentType ? post.contentType.charAt(0).toUpperCase() + post.contentType.slice(1) : 'Previous Page'}
             </Button>
           </Link>
+        </div>
 
         {post.frontmatter.image && (
           <div className="mb-8">

src/pages/Freezone.jsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { Gavel, Wallet, ShieldCheck, Smile, BookOpen, Landmark, Scale } from 'lucide-react'; // Appropriate icons for Freezone
+import HeroSection from '../components/HeroSection';
+import Section from '../components/Section';
+import FeatureCard from '../components/FeatureCard';
+import matter from 'gray-matter';
+
+// Import images
+const freezoneBackground = new URL('../assets/inthezone.png', import.meta.url).href;
+
+// Use Vite's import.meta.glob to import all freezone markdown files and images
+const freezoneModules = import.meta.glob('../content/freezone/*.md', { as: 'raw', eager: true });
+const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
+const iconComponents = { Gavel, Wallet, ShieldCheck, Smile, BookOpen, Landmark, Scale };
+
+const Freezone = () => {
+  const [articles, setArticles] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadArticles = async () => {
+      try {
+        const loadedArticles = [];
+        
+        for (const path in freezoneModules) {
+          const content = freezoneModules[path];
+          const { data: frontmatter } = matter(content);
+          
+          const IconComponent = iconComponents[frontmatter.iconname];
+          const imagePath = `../assets/${frontmatter.image}`; // Construct full path
+          const importedImage = imageModules[imagePath];
+
+          loadedArticles.push({
+            icon: IconComponent ? <IconComponent size={32} /> : <Gavel size={32} />, // Default icon
+            title: frontmatter.title,
+            description: frontmatter.description,
+            image: importedImage,
+            order: frontmatter.order || 999,
+            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/&/g, 'and').replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-').replace(/^-+|-+$/g, '')
+          });
+        }
+
+        // Sort by order (if order is defined in frontmatter)
+        loadedArticles.sort((a, b) => a.order - b.order);
+        setArticles(loadedArticles);
+      } catch (error) {
+        console.error('Error loading freezone articles:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadArticles();
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <HeroSection
+        subtitle="Operate from a Digital Freezone"
+        title="HERO Freezone"
+        description="A secure and independent environment for your digital assets and operations, with legal dispute resolution."
+        backgroundImage={freezoneBackground}
+        ctaText="Learn More"
+        ctaLink="/freezone" // Link to the freezone page itself, or a sub-section if applicable
+        showVideo={false}
+      />
+
+      {/* Freezone Articles Section */}
+      <Section background="gradient" padding="xlarge">
+        <div className="text-center mb-16">
+          <motion.h2
+            className="text-4xl md:text-5xl font-bold text-white mb-6"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            viewport={{ once: true }}
+          >
+            Why a Digital <span className="text-green-400">Freezone?</span>
+          </motion.h2>
+          <motion.p
+            className="text-xl text-gray-300 max-w-6xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            viewport={{ once: true }}
+          >
+            Explore the core benefits of operating your HERO from a digital freezone.
+          </motion.p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {loading ? (
+            // Loading skeleton
+            Array.from({ length: 4 }).map((_, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3, delay: index * 0.05 }}
+                className="glass-effect rounded-xl p-6 animate-pulse"
+              >
+                <div className="h-8 w-8 bg-gray-600 rounded mb-4"></div>
+                <div className="h-6 bg-gray-600 rounded mb-3"></div>
+                <div className="h-4 bg-gray-600 rounded mb-4"></div>
+                <div className="h-32 bg-gray-600 rounded-lg"></div>
+              </motion.div>
+            ))
+          ) : (
+            articles.map((article, index) => (
+              <Link key={index} to={`/freezone/${article.slug}`} className="block">
+                <FeatureCard
+                  icon={article.icon}
+                  title={article.title}
+                  description={article.description}
+                  image={article.image}
+                  delay={index * 0.2}
+                />
+              </Link>
+            ))
+          )}
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default Freezone;

src/pages/GetStarted.jsx

@@ -11,18 +11,19 @@ import securityImage from '../assets/sphere.jpg'; // Digital privacy
 
 const GetStarted = () => {
   const features = [
+    "Operate in the Freezone with complete digital sovereignty",
+    "Own and control your digital assets",
+    "Collaborate with built-in dispute resolution mechanisms",
+    "Collaborate globally without intermediaries",
     "Complete digital sovereignty and data ownership",
     "Quantum-safe memory storage across multiple nodes",
     "Private AI agent access and local processing",
     "Secure peer-to-peer communication",
-    "Blockchain-verified identity and reputation",
     "Geographic data placement control",
-    "Zero-knowledge architecture",
     "24/7 Personal Agent assistance",
     "Unlimited secure storage",
     "Cross-platform compatibility",
-    "Regular security updates",
-    "Community support and resources"
+  
   ];
 
   const steps = [
@@ -56,7 +57,7 @@ const GetStarted = () => {
         title="Get Started with HERO"
         description="Join the revolution and take back control of your digital life. Your Personal Agent is waiting to serve you with complete privacy and security."
         backgroundImage={startImage}
-        ctaText="Start Free Trial"
+        ctaText="Get Started Now"
         ctaLink="#pricing"
         showVideo={false}
       />
@@ -74,7 +75,7 @@ const GetStarted = () => {
             Simple, <span className="text-green-400">Transparent</span> Pricing
           </motion.h2>
           <motion.p 
-            className="text-xl text-gray-300 max-w-3xl mx-auto"
+            className="text-xl text-gray-300 max-w-5xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -84,7 +85,7 @@ const GetStarted = () => {
           </motion.p>
         </div>
 
-        <div className="max-w-2xl mx-auto">
+        <div className="max-w-4xl mx-auto">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -126,7 +127,7 @@ const GetStarted = () => {
                 size="lg" 
                 className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 w-full md:w-auto"
               >
-                Start Your 7-Day Free Trial
+                Become a member of our Cooperative
               </Button>
               <p className="text-gray-400 text-sm mt-4">No credit card required • Cancel anytime</p>
             </div>
@@ -147,7 +148,7 @@ const GetStarted = () => {
             How to <span className="text-blue-400">Get Started</span>
           </motion.h2>
           <motion.p 
-            className="text-xl text-gray-300 max-w-3xl mx-auto"
+            className="text-xl text-gray-300 max-w-5xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -252,7 +253,7 @@ const GetStarted = () => {
             Ready to Reclaim Your <span className="text-green-400">Digital Freedom</span>?
           </motion.h2>
           <motion.p 
-            className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"
+            className="text-xl text-gray-300 mb-8 max-w-5xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -271,7 +272,7 @@ const GetStarted = () => {
               size="lg" 
               className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 pulse-glow"
             >
-              Start Your Free Trial Now
+              Become a member of our Cooperative
             </Button>
             <p className="text-gray-400">7-day free trial • $20/month after • Cancel anytime</p>
           </motion.div>

src/pages/Home.jsx

@@ -1,59 +1,62 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
-import { Shield, Brain, Users, Lock, Zap, Heart } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Shield, Brain, Users, Lock, Zap, Heart, MessageSquare, Lightbulb, Globe, Code, Share2, DollarSign } from 'lucide-react';
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import FeatureCard from '../components/FeatureCard';
 import { Button } from '@/components/ui/button';
+import matter from 'gray-matter';
 
 // Import images
-import networkImage from '../assets/discover.jpg'; // Connected lines
-import heartTechImage from '../assets/heart.jpg'; // Technology heart
 import humanConnectionImage from '../assets/myherozoom.png'; // Digital human connection
-import privacyImage from '../assets/share.jpg'; // Digital privacy
-import transactImage from '../assets/transact.jpg'; // Digital transaction
-import developImage from '../assets/develop.jpg'; // Development scene
-import communicateImage from '../assets/communicate.jpg'; // Communication scene
+
+// Use Vite's import.meta.glob to import all home content markdown files and images
+const homeModules = import.meta.glob('../content/home/*.md', { as: 'raw', eager: true });
+const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
+const iconComponents = {
+  Shield, Brain, Users, Lock, Zap, Heart, MessageSquare, Lightbulb, Globe, Code, Share2, DollarSign
+};
 
 const Home = () => {
-  const capabilities = [
-    {
-      icon: <Brain size={32} />,
-      title: "Communicate",
-      description: "Secure messaging, voice, and video chat — all managed privately by your Personal Agent",
-      image: communicateImage
-    },
-    {
-      icon: <Zap size={32} />,
-      title: "Create", 
-      description: "Build documents, videos, and creative assets collaboratively with AI assistance",
-      image: heartTechImage
-    },
-    {
-      icon: <Shield size={32} />,
-      title: "Discover",
-      description: "Browse and search using authentic sources and AI assistance while maintaining privacy",
-      image: networkImage
-    },
-    {
-      icon: <Users size={32} />,
-      title: "Develop",
-      description: "Build and deploy applications faster with local AI and secure storage",
-      image: developImage
-    },
-    {
-      icon: <Lock size={32} />,
-      title: "Share",
-      description: "Distribute content without central platforms — sovereignly and securely",
-      image: privacyImage
-    },
-    {
-      icon: <Heart size={32} />,
-      title: "Transact",
-      description: "Send and receive digital value safely and without intermediaries",
-      image: transactImage
+  const [homeContent, setHomeContent] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadHomeContent = async () => {
+      try {
+        const loadedHomeContent = [];
+        
+        for (const path in homeModules) {
+          const content = homeModules[path];
+          const { data: frontmatter } = matter(content);
+          
+          const IconComponent = iconComponents[frontmatter.iconname];
+          const imagePath = `../assets/${frontmatter.image}`; // Construct full path
+          const importedImage = imageModules[imagePath];
+
+          loadedHomeContent.push({
+            icon: IconComponent ? <IconComponent size={32} /> : <Lightbulb size={32} />, // Default icon
+            title: frontmatter.title,
+            description: frontmatter.description,
+            image: importedImage,
+            order: frontmatter.order || 999,
+            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
+          });
         }
-  ];
+
+        // Sort by order
+        loadedHomeContent.sort((a, b) => a.order - b.order);
+        setHomeContent(loadedHomeContent);
+      } catch (error) {
+        console.error('Error loading home content:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadHomeContent();
+  }, []);
 
   const benefits = [
     "Your memory can never be lost, stolen, or corrupted",
@@ -86,8 +89,6 @@ const Home = () => {
             title="HERO BACK 2"
           />
         }
-        ctaText="Start Your Journey"
-        ctaLink="/get-started"
       />
 
       {/* What is HERO Section */}
@@ -152,7 +153,7 @@ const Home = () => {
             Why <span className="text-purple-400">HEROs</span> Matter
           </motion.h2>
           <motion.p 
-            className="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"
+            className="text-xl text-gray-300 max-w-6xl mx-auto leading-relaxed"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -195,7 +196,7 @@ const Home = () => {
             HERO <span className="text-cyan-400">Capabilities</span>
           </motion.h2>
           <motion.p 
-            className="text-xl text-gray-300 max-w-3xl mx-auto"
+            className="text-xl text-gray-300 max-w-5xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -206,16 +207,35 @@ const Home = () => {
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {capabilities.map((capability, index) => (
-            <FeatureCard
+          {loading ? (
+            // Loading skeleton
+            Array.from({ length: 6 }).map((_, index) => (
+              <motion.div
                 key={index}
-              icon={capability.icon}
-              title={capability.title}
-              description={capability.description}
-              image={capability.image}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3, delay: index * 0.05 }}
+                className="glass-effect rounded-xl p-6 animate-pulse"
+              >
+                <div className="h-8 w-8 bg-gray-600 rounded mb-4"></div>
+                <div className="h-6 bg-gray-600 rounded mb-3"></div>
+                <div className="h-4 bg-gray-600 rounded mb-4"></div>
+                <div className="h-32 bg-gray-600 rounded-lg"></div>
+              </motion.div>
+            ))
+          ) : (
+            homeContent.map((item, index) => (
+              <Link key={index} to={`/home/${item.slug}`} className="block">
+                <FeatureCard
+                  icon={item.icon}
+                  title={item.title}
+                  description={item.description}
+                  image={item.image}
                   delay={index * 0.1}
                 />
-          ))}
+              </Link>
+            ))
+          )}
         </div>
       </Section>
 
@@ -232,7 +252,7 @@ const Home = () => {
             Ready to Take Control?
           </motion.h2>
           <motion.p 
-            className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"
+            className="text-xl text-gray-300 mb-8 max-w-5xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -246,13 +266,14 @@ const Home = () => {
             transition={{ duration: 0.6, delay: 0.4 }}
             viewport={{ once: true }}
           >
+            <Link to="/get-started">
               <Button
                 size="lg"
                 className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 pulse-glow"
-              onClick={() => window.location.href = '/get-started'}
               >
                 Get Started Today
               </Button>
+            </Link>
           </motion.div>
         </div>
       </Section>

src/pages/How.jsx

@@ -1,44 +1,60 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom'; // Import Link
 import { User, Shield, Brain, Network, Database, Key } from 'lucide-react';
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import FeatureCard from '../components/FeatureCard';
+import matter from 'gray-matter'; // Import matter
 
 // Import images
-import agentImage from '../assets/balls.jpg'; // AI Agent Creation
-import memoryImage from '../assets/white_keyb.jpg'; // Digital privacy/memory
-import ledgerImage from '../assets/tech.jpg'; // Blockchain visualization
-import networkImage from '../assets/itworks.jpg'; // Main background image
 import itworksTechImage from '../assets/itworks_tech.jpg'; // Maximum security section image
+import networkImage from '../assets/itworks.jpg'; // Main background image
+
+// Use Vite's import.meta.glob to import all component markdown files and images
+const componentModules = import.meta.glob('../content/component/*.md', { as: 'raw', eager: true });
+const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
+const iconComponents = { User, Shield, Brain, Network, Database, Key };
 
 const How = () => {
-  const howItWorks = [
-    {
-      icon: <User size={32} />,
-      title: "Your Personal Agent",
-      description: "Your HERO acts as your digital assistant, managing messaging, meetings, calendar, documents, tasks, AI interactions, personal identity, credentials, and financial transactions.",
-      image: agentImage
-    },
-    {
-      icon: <Database size={32} />,
-      title: "Secure, Unbreakable Memory", 
-      description: "Uses a zero-knowledge, quantum-safe dispersal algorithm. Memory is stored across multiple nodes with no single point of failure. You control the geographic placement of your data.",
-      image: memoryImage
-    },
-    {
-      icon: <Brain size={32} />,
-      title: "AI Agents on Your Terms",
-      description: "HERO connects with a wide range of AI agents for research, content creation, and task automation. All computation is done locally or via trusted partners.",
-      image: networkImage
-    },
-    {
-      icon: <Key size={32} />,
-      title: "A Private Ledger Just for You",
-      description: "Every HERO maintains a private blockchain ledger that verifies identity, manages access control, tracks interactions, and can communicate securely with other ledgers.",
-      image: ledgerImage
+  const [components, setComponents] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadComponents = async () => {
+      try {
+        const loadedComponents = [];
+        
+        for (const path in componentModules) {
+          const content = componentModules[path];
+          const { data: frontmatter } = matter(content);
+          
+          const IconComponent = iconComponents[frontmatter.iconname];
+          const imagePath = `../assets/${frontmatter.image}`; // Construct full path
+          const importedImage = imageModules[imagePath];
+
+          loadedComponents.push({
+            icon: IconComponent ? <IconComponent size={32} /> : <User size={32} />,
+            title: frontmatter.title,
+            description: frontmatter.description,
+            image: importedImage,
+            order: frontmatter.order || 999,
+            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
+          });
         }
-  ];
+
+        // Sort by order
+        loadedComponents.sort((a, b) => a.order - b.order);
+        setComponents(loadedComponents);
+      } catch (error) {
+        console.error('Error loading components:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadComponents();
+  }, []);
 
   const technicalFeatures = [
     {
@@ -93,7 +109,7 @@ const How = () => {
             The Four <span className="text-blue-400">Core Components</span>
           </motion.h2>
           <motion.p
-            className="text-xl text-gray-300 max-w-4xl mx-auto"
+            className="text-xl text-gray-300 max-w-6xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -104,9 +120,26 @@ const How = () => {
         </div>
 
         <div className="grid md:grid-cols-2 gap-8">
-          {howItWorks.map((item, index) => (
-            <FeatureCard
+          {loading ? (
+            // Loading skeleton
+            Array.from({ length: 4 }).map((_, index) => (
+              <motion.div
                 key={index}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3, delay: index * 0.05 }}
+                className="glass-effect rounded-xl p-6 animate-pulse"
+              >
+                <div className="h-8 w-8 bg-gray-600 rounded mb-4"></div>
+                <div className="h-6 bg-gray-600 rounded mb-3"></div>
+                <div className="h-4 bg-gray-600 rounded mb-4"></div>
+                <div className="h-32 bg-gray-600 rounded-lg"></div>
+              </motion.div>
+            ))
+          ) : (
+            components.map((item, index) => (
+              <Link key={index} to={`/component/${item.slug}`} className="block">
+                <FeatureCard
                   icon={item.icon}
                   title={item.title}
                   description={item.description}
@@ -114,7 +147,9 @@ const How = () => {
                   delay={index * 0.2}
                   className="lg:col-span-1"
                 />
-          ))}
+              </Link>
+            ))
+          )}
         </div>
       </Section>
 
@@ -181,7 +216,7 @@ const How = () => {
           </motion.h2>
         </div>
 
-        <div className="max-w-4xl mx-auto">
+        <div className="max-w-6xl mx-auto">
           <div className="space-y-8">
             {[
               {

src/pages/Technology.jsx

@@ -1,18 +1,69 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom'; // Import Link
 import { Shield, Database, Network, Key, Cpu, Globe, Lock, Zap } from 'lucide-react';
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import FeatureCard from '../components/FeatureCard';
+import matter from 'gray-matter'; // Import matter
 
 // Import images
 import techBackground from '../assets/herotech.jpg'; // HERO Technology background
-import blockchainImage from '../assets/heartblue.jpg'; // Blockchain visualization
-import networkImage from '../assets/sphere.jpg'; // sphere
-import securityImage from '../assets/person.jpg'; // Digital privacy
-import swarmImage from '../assets/swarm.jpg'; // AI Agent Creation
+
+// Use Vite's import.meta.glob to import all tech markdown files and images
+const techModules = import.meta.glob('../content/tech/*.md', { as: 'raw', eager: true });
+const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
+const iconComponents = { Shield, Database, Network, Key, Cpu, Globe, Lock, Zap };
+
+console.log('Tech Modules:', techModules);
 
 const Technology = () => {
+  const [technologies, setTechnologies] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadTechnologies = async () => {
+      try {
+        const loadedTechnologies = [];
+        
+        for (const path in techModules) {
+          const content = techModules[path];
+          const { data: frontmatter } = matter(content);
+          
+          const IconComponent = iconComponents[frontmatter.iconname];
+          const imagePath = `../assets/${frontmatter.image}`; // Construct full path
+          const importedImage = imageModules[imagePath];
+
+          console.log('Loading technology:', frontmatter.title);
+          console.log('IconComponent:', frontmatter.iconname, IconComponent);
+          console.log('ImagePath:', imagePath, 'ImportedImage:', importedImage);
+
+          loadedTechnologies.push({
+            icon: IconComponent ? <IconComponent size={32} /> : <Shield size={32} />,
+            title: frontmatter.title,
+            description: frontmatter.description,
+            image: importedImage,
+            order: frontmatter.order || 999,
+            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
+          });
+        }
+
+        // Sort by order
+        loadedTechnologies.sort((a, b) => a.order - b.order);
+        setTechnologies(loadedTechnologies);
+      } catch (error) {
+        console.error('Error loading technologies:', error);
+        setTechnologies([]); // Ensure technologies is empty on error
+        // Optionally, set an error state to display a message to the user
+        // setError('Failed to load technologies. Please try again later.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadTechnologies();
+  }, []);
+
   const comparisonData = [
     {
       feature: "Ownership",
@@ -56,33 +107,6 @@ const Technology = () => {
     }
   ];
 
-  const technicalSpecs = [
-    {
-      icon: <Shield size={32} />,
-      title: "Zero-Knowledge Architecture",
-      description: "Advanced cryptographic techniques ensure that even HERO cannot access your data. Your information is encrypted before it leaves your device.",
-      image: securityImage
-    },
-    {
-      icon: <Database size={32} />,
-      title: "Quantum-Safe Storage",
-      description: "Post-quantum cryptography protects your data against future quantum computing threats. Memory is dispersed across multiple nodes with no single point of failure.",
-      image: swarmImage
-    },
-    {
-      icon: <Network size={32} />,
-      title: "Peer-to-Peer Network",
-      description: "Direct communication between HEROs without central servers. Built on distributed protocols that ensure privacy and resilience.",
-      image: networkImage
-    },
-    {
-      icon: <Key size={32} />,
-      title: "Blockchain Identity",
-      description: "Cryptographically verified identity system built on blockchain technology. You control your reputation and trust relationships.",
-      image: blockchainImage
-    }
-  ];
-
   const architectureFeatures = [
     {
       title: "Distributed Memory System",
@@ -136,7 +160,7 @@ const Technology = () => {
             Core <span className="text-blue-400">Technologies</span>
           </motion.h2>
           <motion.p
-            className="text-xl text-gray-300 max-w-4xl mx-auto"
+            className="text-xl text-gray-300 max-w-6xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -147,16 +171,39 @@ const Technology = () => {
         </div>
 
         <div className="grid md:grid-cols-2 gap-8">
-          {technicalSpecs.map((spec, index) => (
-            <FeatureCard
+          {loading ? (
+            // Loading skeleton
+            Array.from({ length: 4 }).map((_, index) => (
+              <motion.div
                 key={index}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3, delay: index * 0.05 }}
+                className="glass-effect rounded-xl p-6 animate-pulse"
+              >
+                <div className="h-8 w-8 bg-gray-600 rounded mb-4"></div>
+                <div className="h-6 bg-gray-600 rounded mb-3"></div>
+                <div className="h-4 bg-gray-600 rounded mb-4"></div>
+                <div className="h-32 bg-gray-600 rounded-lg"></div>
+              </motion.div>
+            ))
+          ) : technologies.length > 0 ? (
+            technologies.map((spec, index) => (
+              <Link key={index} to={`/technology/${spec.slug}`} className="block">
+                <FeatureCard
                   icon={spec.icon}
                   title={spec.title}
                   description={spec.description}
                   image={spec.image}
                   delay={index * 0.2}
                 />
-          ))}
+              </Link>
+            ))
+          ) : (
+            <div className="col-span-full text-center text-gray-400 text-xl">
+              Failed to load technologies. Please check the console for errors.
+            </div>
+          )}
         </div>
       </Section>
 
@@ -173,7 +220,7 @@ const Technology = () => {
             HERO vs <span className="text-red-400">Traditional AI Platforms</span>
           </motion.h2>
           <motion.p
-            className="text-xl text-gray-300 max-w-4xl mx-auto"
+            className="text-xl text-gray-300 max-w-6xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -228,7 +275,7 @@ const Technology = () => {
             Technical <span className="text-purple-400">Architecture</span>
           </motion.h2>
           <motion.p
-            className="text-xl text-gray-300 max-w-4xl mx-auto"
+            className="text-xl text-gray-300 max-w-6xl mx-auto"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
@@ -321,7 +368,7 @@ const Technology = () => {
             className="relative"
           >
             <img
-              src={securityImage} 
+              src={imageModules['../assets/person.jpg']}
               alt="Security Architecture"
               className="w-full rounded-2xl shadow-2xl hover-lift"
             />

vite.config.js

@@ -5,7 +5,9 @@ import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
+  base: process.env.VITE_APP_BASE_URL || '/',
   plugins: [react(),tailwindcss()],
+  assetsInclude: ['**/*.md'],
   define: {
     global: 'window',
     'process.env': {}, // Define process.env as an empty object