...

src/App.jsx

@@ -26,6 +26,7 @@ function App() {
             <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/content/home/create.md

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

src/pages/BlogPost.jsx

@@ -44,7 +44,12 @@ const BlogPost = () => {
           contentType = 'freezone';
           currentSlug = pathSegments[1];
           basePath = '../content/freezone/';
-        } else {
+        } 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;
@@ -108,6 +113,8 @@ const BlogPost = () => {
         return '/technology';
       case 'freezone':
         return '/freezone';
+      case 'home':
+        return '/'; // Or a more specific home content listing page if it exists
       default:
         return '/';
     }

src/pages/Home.jsx

@@ -1,7 +1,7 @@
 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 { 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';
@@ -17,108 +17,51 @@ 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
+// Use Vite's import.meta.glob to import all home content markdown files and images
-const capabilityModules = import.meta.glob('../blogs/capability_*.md', { as: 'raw', eager: true });
+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, setCapabilities] = useState([]);
+  const [homeContent, setHomeContent] = useState([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const loadCapabilities = async () => {
+    const loadHomeContent = async () => {
       try {
-        const loadedCapabilities = [];
+        const loadedHomeContent = [];
         
-        for (const path in capabilityModules) {
+        for (const path in homeModules) {
-          const content = capabilityModules[path];
+          const content = homeModules[path];
           const { data: frontmatter } = matter(content);
           
-          // Map icon strings to actual components
+          const IconComponent = iconComponents[frontmatter.iconname];
-          const iconMap = {
+          const imagePath = `../assets/${frontmatter.image}`; // Construct full path
-            'Brain': <Brain size={32} />,
+          const importedImage = imageModules[imagePath];
-            '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
+          loadedHomeContent.push({
-          const imageMap = {
+            icon: IconComponent ? <IconComponent size={32} /> : <Lightbulb size={32} />, // Default icon
-            '/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,
+            image: importedImage,
             order: frontmatter.order || 999,
             slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
           });
         }
 
         // Sort by order
-        loadedCapabilities.sort((a, b) => a.order - b.order);
+        loadedHomeContent.sort((a, b) => a.order - b.order);
-        setCapabilities(loadedCapabilities);
+        setHomeContent(loadedHomeContent);
       } catch (error) {
-        console.error('Error loading capabilities:', error);
+        console.error('Error loading home content:', 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();
+    loadHomeContent();
   }, []);
 
   const benefits = [
@@ -289,13 +232,13 @@ const Home = () => {
               </motion.div>
             ))
           ) : (
-            capabilities.map((capability, index) => (
+            homeContent.map((item, index) => (
-              <Link key={index} to={`/capability/${capability.slug}`} className="block">
+              <Link key={index} to={`/home/${item.slug}`} className="block">
                 <FeatureCard
-                  icon={capability.icon}
+                  icon={item.icon}
-                  title={capability.title}
+                  title={item.title}
-                  description={capability.description}
+                  description={item.description}
-                  image={capability.image}
+                  image={item.image}
                   delay={index * 0.1}
                 />
               </Link>