...

src/App.jsx

@@ -22,6 +22,7 @@ function App() {
             <Route path="/technology" element={<Technology />} />
             <Route path="/blog" element={<Blog />} />
             <Route path="/blog/:slug" element={<BlogPost />} />
+            <Route path="/capability/:slug" element={<BlogPost />} />
           </Routes>
         </main>
       </div>

src/blogs/capability_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: "/src/assets/communicate.jpg"
+cat: "capability"
+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/blogs/capability_create.md

@@ -0,0 +1,33 @@
+---
+title: "Create"
+description: "Build documents, videos, and creative assets collaboratively with AI assistance"
+icon: "Zap"
+image: "/src/assets/heart.jpg"
+cat: "capability"
+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/blogs/capability_develop.md

@@ -0,0 +1,33 @@
+---
+title: "Develop"
+description: "Build and deploy applications faster with local AI and secure storage"
+icon: "Users"
+image: "/src/assets/develop.jpg"
+cat: "capability"
+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/blogs/capability_discover.md

@@ -0,0 +1,33 @@
+---
+title: "Discover"
+description: "Browse and search using authentic sources and AI assistance while maintaining privacy"
+icon: "Shield"
+image: "/src/assets/discover.jpg"
+cat: "capability"
+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/blogs/capability_share.md

@@ -0,0 +1,33 @@
+---
+title: "Share"
+description: "Distribute content without central platforms — sovereignly and securely"
+icon: "Lock"
+image: "/src/assets/share.jpg"
+cat: "capability"
+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/blogs/capability_transact.md

@@ -0,0 +1,33 @@
+---
+title: "Transact"
+description: "Send and receive digital value safely and without intermediaries"
+icon: "Heart"
+image: "/src/assets/transact.jpg"
+cat: "capability"
+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/pages/BlogPost.jsx

@@ -16,17 +16,20 @@ 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);
+        const allModules = import.meta.glob('../blogs/*.md', { as: 'raw', eager: true });
+        const filePath = `../blogs/capability_${slug}.md`;
         
-        setPost({
-          frontmatter,
-          content: markdownContent
-        });
+        if (allModules[filePath]) {
+          const content = allModules[filePath];
+          const { data: frontmatter, content: markdownContent } = matter(content);
+          
+          setPost({
+            frontmatter,
+            content: markdownContent
+          });
+        } else {
+          setError('Post not found');
+        }
       } catch (err) {
         setError(err.message);
       } finally {
@@ -56,12 +59,14 @@ const BlogPost = () => {
   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">
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Back to Blog
-          </Button>
-        </Link>
+        <div className="mb-8">
+          <Link to="/">
+            <Button className="bg-gray-800 hover:bg-gray-700 text-white">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back
+            </Button>
+          </Link>
+        </div>
 
         {post.frontmatter.image && (
           <div className="mb-8">

src/pages/Home.jsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
 import { Shield, Brain, Users, Lock, Zap, Heart } 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
@@ -15,45 +17,109 @@ 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 capability markdown files
+const capabilityModules = import.meta.glob('../blogs/capability_*.md', { as: 'raw', eager: true });
+
 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 [capabilities, setCapabilities] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadCapabilities = async () => {
+      try {
+        const loadedCapabilities = [];
+        
+        for (const path in capabilityModules) {
+          const content = capabilityModules[path];
+          const { data: frontmatter } = matter(content);
+          
+          // Map icon strings to actual components
+          const iconMap = {
+            'Brain': <Brain size={32} />,
+            'Zap': <Zap size={32} />,
+            'Shield': <Shield size={32} />,
+            'Users': <Users size={32} />,
+            'Lock': <Lock size={32} />,
+            'Heart': <Heart size={32} />
+          };
+
+          // Map image paths to actual imports
+          const imageMap = {
+            '/src/assets/communicate.jpg': communicateImage,
+            '/src/assets/heart.jpg': heartTechImage,
+            '/src/assets/discover.jpg': networkImage,
+            '/src/assets/develop.jpg': developImage,
+            '/src/assets/share.jpg': privacyImage,
+            '/src/assets/transact.jpg': transactImage
+          };
+
+          loadedCapabilities.push({
+            icon: iconMap[frontmatter.icon] || <Brain size={32} />,
+            title: frontmatter.title,
+            description: frontmatter.description,
+            image: imageMap[frontmatter.image] || heartTechImage,
+            order: frontmatter.order || 999,
+            slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
+          });
+        }
+
+        // Sort by order
+        loadedCapabilities.sort((a, b) => a.order - b.order);
+        setCapabilities(loadedCapabilities);
+      } catch (error) {
+        console.error('Error loading capabilities:', error);
+        // Fallback to static data if loading fails
+        setCapabilities([
+          {
+            icon: <Brain size={32} />,
+            title: "Communicate",
+            description: "Secure messaging, voice, and video chat — all managed privately by your Personal Agent",
+            image: communicateImage,
+            slug: "communicate"
+          },
+          {
+            icon: <Zap size={32} />,
+            title: "Create", 
+            description: "Build documents, videos, and creative assets collaboratively with AI assistance",
+            image: heartTechImage,
+            slug: "create"
+          },
+          {
+            icon: <Shield size={32} />,
+            title: "Discover",
+            description: "Browse and search using authentic sources and AI assistance while maintaining privacy",
+            image: networkImage,
+            slug: "discover"
+          },
+          {
+            icon: <Users size={32} />,
+            title: "Develop",
+            description: "Build and deploy applications faster with local AI and secure storage",
+            image: developImage,
+            slug: "develop"
+          },
+          {
+            icon: <Lock size={32} />,
+            title: "Share",
+            description: "Distribute content without central platforms — sovereignly and securely",
+            image: privacyImage,
+            slug: "share"
+          },
+          {
+            icon: <Heart size={32} />,
+            title: "Transact",
+            description: "Send and receive digital value safely and without intermediaries",
+            image: transactImage,
+            slug: "transact"
+          }
+        ]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadCapabilities();
+  }, []);
 
   const benefits = [
     "Your memory can never be lost, stolen, or corrupted",
@@ -206,16 +272,35 @@ const Home = () => {
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {capabilities.map((capability, index) => (
-            <FeatureCard
-              key={index}
-              icon={capability.icon}
-              title={capability.title}
-              description={capability.description}
-              image={capability.image}
-              delay={index * 0.1}
-            />
-          ))}
+          {loading ? (
+            // Loading skeleton
+            Array.from({ length: 6 }).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>
+            ))
+          ) : (
+            capabilities.map((capability, index) => (
+              <Link key={index} to={`/capability/${capability.slug}`} className="block">
+                <FeatureCard
+                  icon={capability.icon}
+                  title={capability.title}
+                  description={capability.description}
+                  image={capability.image}
+                  delay={index * 0.1}
+                />
+              </Link>
+            ))
+          )}
         </div>
       </Section>