...

src/App.jsx

@@ -5,6 +5,7 @@ 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';
@@ -20,11 +21,10 @@ 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="/blog" element={<Blog />} />
-            <Route path="/blog/:slug" element={<BlogPost />} />
-            <Route path="/capability/:slug" element={<BlogPost />} />
+            <Route path="/blog/:category/:slug" element={<BlogPost />} />
             <Route path="/component/:slug" element={<BlogPost />} />
-            <Route path="/tech/:slug" element={<BlogPost />} />
           </Routes>
         </main>
       </div>

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,11 +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
-cat: "blog"
+
+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,11 +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
-cat: "blog"
+
+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/communicate.md

@@ -2,8 +2,8 @@
 title: "Communicate"
 description: "Secure messaging, voice, and video chat — all managed privately by your Personal Agent"
 icon: "Brain"
-image: "/src/assets/communicate.jpg"
-cat: "capability"
+image: "communicate.jpg"
+
 order: 1
 slug: "communicate"
 ---

src/content/blog/create.md

@@ -2,8 +2,8 @@
 title: "Create"
 description: "Build documents, videos, and creative assets collaboratively with AI assistance"
 icon: "Zap"
-image: "/src/assets/heart.jpg"
-cat: "capability"
+image: "heart.jpg"
+
 order: 2
 slug: "create"
 ---

src/content/blog/develop.md

@@ -2,8 +2,8 @@
 title: "Develop"
 description: "Build and deploy applications faster with local AI and secure storage"
 icon: "Users"
-image: "/src/assets/develop.jpg"
-cat: "capability"
+image: "develop.jpg"
+
 order: 4
 slug: "develop"
 ---

src/content/blog/discover.md

@@ -2,8 +2,8 @@
 title: "Discover"
 description: "Browse and search using authentic sources and AI assistance while maintaining privacy"
 icon: "Shield"
-image: "/src/assets/discover.jpg"
-cat: "capability"
+image: "discover.jpg"
+
 order: 3
 slug: "discover"
 ---

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

@@ -4,11 +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
-cat: "blog"
+
+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,10 +4,11 @@ author: "HERO Team"
 date: "December 1, 2024"
 readTime: "6 min read"
 tags: ["Communication", "P2P", "Privacy"]
-image: "/src/assets/heart.jpg"
+image: "heart.jpg"
 featured: false
 draft: false
-cat: "blog"
+
+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,10 +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: "balls.jpg"
 featured: false
 draft: false
-cat: "blog"
+
+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/share.md

@@ -2,8 +2,8 @@
 title: "Share"
 description: "Distribute content without central platforms — sovereignly and securely"
 icon: "Lock"
-image: "/src/assets/share.jpg"
-cat: "capability"
+image: "share.jpg"
+
 order: 5
 slug: "share"
 ---

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

@@ -4,11 +4,12 @@ author: "Emma Thompson"
 date: "December 3, 2024"
 readTime: "4 min read"
 tags: ["Economics", "Privacy", "Value"]
-image: "/src/assets/white_keyb.jpg"
+image: "white_keyb.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
-cat: "blog"
+
+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,11 +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
-cat: "blog"
+
+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/blog/transact.md

@@ -2,8 +2,8 @@
 title: "Transact"
 description: "Send and receive digital value safely and without intermediaries"
 icon: "Heart"
-image: "/src/assets/transact.jpg"
-cat: "capability"
+image: "transact.jpg"
+
 order: 6
 slug: "transact"
 ---

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

@@ -3,10 +3,10 @@ title: "AI Agents on Your Terms"
 author: "HERO Team"
 date: "2023-10-26"
 readTime: "7 min read"
-image: "/src/assets/itworks.jpg"
+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"]
-cat: component
 slug: ai-agents-on-your-terms
 ---
 

src/content/component/personal-agent.md

@@ -3,10 +3,11 @@ title: "Your Personal Agent"
 author: "HERO Team"
 date: "2023-10-26"
 readTime: "5 min read"
-image: "/src/assets/balls.jpg"
+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"]
-cat: component
+iconname: "User"
+order: 1
 slug: personal-agent
 ---
 

src/content/component/private-ledger.md

@@ -3,10 +3,11 @@ title: "A Private Ledger Just for You"
 author: "HERO Team"
 date: "2023-10-26"
 readTime: "8 min read"
-image: "/src/assets/tech.jpg"
+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"]
-cat: component
+iconname: "Key"
+order: 4
 slug: private-ledger
 ---
 

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

@@ -3,10 +3,11 @@ title: "Secure, Unbreakable Memory"
 author: "HERO Team"
 date: "2023-10-26"
 readTime: "6 min read"
-image: "/src/assets/white_keyb.jpg"
+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"]
-cat: component
+iconname: "Database"
+order: 2
 slug: secure-unbreakable-memory
 ---
 

src/content/freezone/dispute-resolution.md

@@ -0,0 +1,17 @@
+---
+title: Dispute Resolution (AI & People)
+slug: dispute-resolution-ai-and-people
+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-now-and-in-future
+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-in-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/tech/blockchain-identity.md

@@ -3,10 +3,10 @@ title: "Blockchain Identity"
 author: "HERO Team"
 date: "2023-10-26"
 readTime: "7 min read"
-image: "/src/assets/heartblue.jpg"
+image: "heartblue.jpg"
 description: "Cryptographically verified identity system built on blockchain technology. You control your reputation and trust relationships."
 tags: ["technology", "blockchain", "identity", "security"]
-cat: tech
+
 slug: blockchain-identity
 ---
 

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

@@ -3,10 +3,10 @@ title: "Peer-to-Peer Network"
 author: "HERO Team"
 date: "2023-10-26"
 readTime: "6 min read"
-image: "/src/assets/sphere.jpg"
+image: "sphere.jpg"
 description: "Direct communication between HEROs without central servers. Built on distributed protocols that ensure privacy and resilience."
 tags: ["technology", "p2p", "network", "communication"]
-cat: tech
+
 slug: peer-to-peer-network
 ---
 

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

@@ -3,10 +3,10 @@ title: "Quantum-Safe Storage"
 author: "HERO Team"
 date: "2023-10-26"
 readTime: "8 min read"
-image: "/src/assets/swarm.jpg"
+image: "swarm.jpg"
 description: "Post-quantum cryptography protects your data against future quantum computing threats. Memory is dispersed across multiple nodes with no single point of failure."
 tags: ["technology", "quantum-safe", "storage", "security"]
-cat: tech
+
 slug: quantum-safe-storage
 ---
 

src/content/tech/zero-knowledge-architecture.md

@@ -3,10 +3,10 @@ title: "Zero-Knowledge Architecture"
 author: "HERO Team"
 date: "2023-10-26"
 readTime: "7 min read"
-image: "/src/assets/person.jpg"
+image: "person.jpg"
 description: "Advanced cryptographic techniques ensure that even HERO cannot access your data. Your information is encrypted before it leaves your device."
 tags: ["technology", "zero-knowledge", "security"]
-cat: tech
+
 slug: zero-knowledge-architecture
 ---
 

src/pages/Blog.jsx

@@ -10,9 +10,10 @@ 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', { query: '?raw', import: 'default', eager: true });
 
 const Blog = () => {
   const [posts, setPosts] = useState([]);
@@ -30,13 +31,11 @@ const Blog = () => {
           // Extract slug from filename
           const slug = path.split('/').pop().replace('.md', '');
 
-          // Only include posts that are not drafts and have cat="blog"
-          if (frontmatter.draft !== true && frontmatter.cat === 'blog') {
+          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 ? new URL(frontmatter.image, import.meta.url).href : defaultPostImage
             });
           }
         }
@@ -154,7 +153,7 @@ 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 }}
@@ -251,13 +250,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 +267,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"
@@ -366,3 +363,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,34 +19,54 @@ const BlogPost = () => {
   useEffect(() => {
     const loadPost = async () => {
       try {
-        const allModules = import.meta.glob('../blogs/*.md', { as: 'raw', eager: true });
-        let foundContent = null;
+        let contentModule;
+        let basePath;
+        let currentSlug = slug; // Use slug from useParams
 
-        const possibleFileNames = [
-          `capability_${slug}.md`,
-          `component_${slug}.md`,
-          `tech_${slug}.md`,
-          `${slug}.md` // For general blog posts
-        ];
+        // Determine content type based on pathname
+        const pathSegments = location.pathname.split('/').filter(Boolean);
+        let contentType = '';
 
-        for (const fileName of possibleFileNames) {
-          const filePath = `../blogs/${fileName}`;
-          if (allModules[filePath]) {
-            foundContent = allModules[filePath];
-            break;
-          }
-        }
-        
-        if (foundContent) {
-          const content = foundContent;
-          const { data: frontmatter, content: markdownContent } = matter(content);
-          
-          setPost({
-            frontmatter,
-            content: markdownContent
-          });
+        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/${pathSegments[1]}/`; // 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 {
-          setError('Post not found');
+          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);
@@ -53,7 +76,7 @@ const BlogPost = () => {
     };
 
     loadPost();
-  }, [slug]);
+  }, [location.pathname, slug]); // Depend on pathname and slug
 
   if (loading) {
     return (
@@ -71,14 +94,33 @@ 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';
+      default:
+        return '/';
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gray-900">
       <div className="container mx-auto px-4 py-8 max-w-4xl">
         <div className="mb-8">
-          <Link to="/">
+          <Link to={getBackLink()}>
             <Button className="bg-gray-800 hover:bg-gray-700 text-white">
               <ArrowLeft className="mr-2 h-4 w-4" />
-              Back
+              Back to {post?.contentType ? post.contentType.charAt(0).toUpperCase() + post.contentType.slice(1) : 'Previous Page'}
             </Button>
           </Link>
         </div>

src/pages/Freezone.jsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { Gavel, Wallet, ShieldCheck, Smile } 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;
+const freezoneImage = new URL('../assets/freezone.jpg', import.meta.url).href;
+const theworldImage = new URL('../assets/world.jpg', import.meta.url).href;
+const disputeresolutionImage = new URL('../assets/disputeresolution.jpg', import.meta.url).href;
+const stresssfreeImage = new URL('../assets/stresssfree.jpg', import.meta.url).href;
+
+// Use Vite's import.meta.glob to import all freezone markdown files
+const freezoneModules = import.meta.glob('../content/freezone/*.md', { query: '?raw', import: 'default', eager: true });
+
+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);
+          
+          // Map icon strings to actual components
+          const iconMap = {
+            'Gavel': <Gavel size={32} />,
+            'Wallet': <Wallet size={32} />,
+            'ShieldCheck': <ShieldCheck size={32} />,
+            'Smile': <Smile size={32} />
+          };
+
+          // Map image paths to actual imports
+          const imageMap = {
+            '/src/assets/freezone.jpg': freezoneImage,
+            '/src/assets/theworld.jpg': theworldImage,
+            '/src/assets/disputeresolution.jpg': disputeresolutionImage,
+            '/src/assets/stresssfree.jpg': stresssfreeImage
+          };
+
+          loadedArticles.push({
+            icon: iconMap[frontmatter.icon] || <Gavel size={32} />, // Default icon
+            title: frontmatter.title,
+            description: frontmatter.description,
+            image: imageMap[frontmatter.image] || freezoneImage, // Default image
+            order: frontmatter.order || 999,
+            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/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);
+        // Fallback to static data if loading fails (optional, but good for robustness)
+        setArticles([
+          {
+            icon: <Wallet size={32} />,
+            title: "Legal and Financial Sovereignty",
+            description: "Understand how a digital freezone provides unparalleled legal and financial sovereignty for your operations.",
+            image: freezoneImage,
+            slug: "legal-and-financial-sovereignty"
+          },
+          {
+            icon: <ShieldCheck size={32} />,
+            title: "Keep Your Assets Safe Now and in Future",
+            description: "Discover how a digital freezone provides robust protection for your assets against current and future threats.",
+            image: theworldImage,
+            slug: "keep-your-assets-safe-now-and-in-future"
+          },
+          {
+            icon: <Gavel size={32} />,
+            title: "Dispute Resolution (AI & People)",
+            description: "Explore the innovative dispute resolution mechanisms available within a digital freezone, combining AI efficiency with human oversight.",
+            image: disputeresolutionImage,
+            slug: "dispute-resolution"
+          },
+          {
+            icon: <Smile size={32} />,
+            title: "Ultimate in 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: stresssfreeImage,
+            slug: "ultimate-convenience-and-features"
+          }
+        ]);
+      } 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-4xl 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={`/blog/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/How.jsx

@@ -8,14 +8,13 @@ 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
-const componentModules = import.meta.glob('../blogs/component_*.md', { as: 'raw', eager: true });
+// 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 [components, setComponents] = useState([]);
@@ -30,27 +29,15 @@ const How = () => {
           const content = componentModules[path];
           const { data: frontmatter } = matter(content);
           
-          // Map icon strings to actual components
-          const iconMap = {
-            'User': <User size={32} />,
-            'Database': <Database size={32} />,
-            'Brain': <Brain size={32} />,
-            'Key': <Key size={32} />
-          };
-
-          // Map image paths to actual imports
-          const imageMap = {
-            '/src/assets/balls.jpg': agentImage,
-            '/src/assets/white_keyb.jpg': memoryImage,
-            '/src/assets/itworks.jpg': networkImage,
-            '/src/assets/tech.jpg': ledgerImage
-          };
+          const IconComponent = iconComponents[frontmatter.iconname];
+          const imagePath = `../assets/${frontmatter.image}`; // Construct full path
+          const importedImage = imageModules[imagePath];
 
           loadedComponents.push({
-            icon: iconMap[frontmatter.icon] || <User size={32} />,
+            icon: IconComponent ? <IconComponent size={32} /> : <User size={32} />,
             title: frontmatter.title,
             description: frontmatter.description,
-            image: imageMap[frontmatter.image] || agentImage,
+            image: importedImage,
             order: frontmatter.order || 999,
             slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
           });
@@ -61,37 +48,6 @@ const How = () => {
         setComponents(loadedComponents);
       } catch (error) {
         console.error('Error loading components:', error);
-        // Fallback to static data if loading fails (optional, but good for robustness)
-        setComponents([
-          {
-            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,
-            slug: "personal-agent"
-          },
-          {
-            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,
-            slug: "secure-unbreakable-memory"
-          },
-          {
-            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,
-            slug: "ai-agents-on-your-terms"
-          },
-          {
-            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,
-            slug: "private-ledger"
-          }
-        ]);
       } finally {
         setLoading(false);
       }

src/pages/Technology.jsx

@@ -15,7 +15,7 @@ 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
-const techModules = import.meta.glob('../blogs/tech_*.md', { as: 'raw', eager: true });
+const techModules = import.meta.glob('../content/tech/*.md', { query: '?raw', import: 'default', eager: true });
 
 const Technology = () => {
   const [technologies, setTechnologies] = useState([]);
@@ -225,7 +225,7 @@ const Technology = () => {
             ))
           ) : (
             technologies.map((spec, index) => (
-              <Link key={index} to={`/tech/${spec.slug}`} className="block">
+              <Link key={index} to={`/blog/tech/${spec.slug}`} className="block">
                 <FeatureCard
                   icon={spec.icon}
                   title={spec.title}

vite.config.js

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