...

src/App.jsx

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

src/content/tech/blockchain-identity.md

@@ -6,7 +6,8 @@ readTime: "7 min read"
 image: "heartblue.jpg"
 description: "Cryptographically verified identity system built on blockchain technology. You control your reputation and trust relationships."
 tags: ["technology", "blockchain", "identity", "security"]
-
+iconname: "Key"
+order: 4
 slug: blockchain-identity
 ---
 

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

@@ -6,7 +6,8 @@ readTime: "6 min read"
 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"]
-
+iconname: "Network"
+order: 3
 slug: peer-to-peer-network
 ---
 

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

@@ -6,7 +6,8 @@ readTime: "8 min read"
 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"]
-
+iconname: "Database"
+order: 2
 slug: quantum-safe-storage
 ---
 

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

@@ -6,7 +6,8 @@ readTime: "7 min read"
 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"]
-
+iconname: "Shield"
+order: 1
 slug: zero-knowledge-architecture
 ---
 

src/pages/Technology.jsx

@@ -9,13 +9,13 @@ 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
+// Use Vite's import.meta.glob to import all tech markdown files and images
-const techModules = import.meta.glob('../content/tech/*.md', { query: '?raw', import: 'default', eager: true });
+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([]);
@@ -30,27 +30,19 @@ const Technology = () => {
           const content = techModules[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
-            'Shield': <Shield size={32} />,
+          const importedImage = imageModules[imagePath];
-            'Database': <Database size={32} />,
-            'Network': <Network size={32} />,
-            'Key': <Key size={32} />
-          };
 
-          // Map image paths to actual imports
+          console.log('Loading technology:', frontmatter.title);
-          const imageMap = {
+          console.log('IconComponent:', frontmatter.iconname, IconComponent);
-            '/src/assets/person.jpg': securityImage,
+          console.log('ImagePath:', imagePath, 'ImportedImage:', importedImage);
-            '/src/assets/swarm.jpg': swarmImage,
-            '/src/assets/sphere.jpg': networkImage,
-            '/src/assets/heartblue.jpg': blockchainImage
-          };
 
           loadedTechnologies.push({
-            icon: iconMap[frontmatter.icon] || <Shield size={32} />,
+            icon: IconComponent ? <IconComponent size={32} /> : <Shield size={32} />,
             title: frontmatter.title,
             description: frontmatter.description,
-            image: imageMap[frontmatter.image] || securityImage,
+            image: importedImage,
             order: frontmatter.order || 999,
             slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
           });
@@ -61,37 +53,9 @@ const Technology = () => {
         setTechnologies(loadedTechnologies);
       } catch (error) {
         console.error('Error loading technologies:', error);
-        // Fallback to static data if loading fails (optional, but good for robustness)
+        setTechnologies([]); // Ensure technologies is empty on error
-        setTechnologies([
+        // Optionally, set an error state to display a message to the user
-          {
+        // setError('Failed to load technologies. Please try again later.');
-            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,
-            slug: "zero-knowledge-architecture"
-          },
-          {
-            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,
-            slug: "quantum-safe-storage"
-          },
-          {
-            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,
-            slug: "peer-to-peer-network"
-          },
-          {
-            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,
-            slug: "blockchain-identity"
-          }
-        ]);
       } finally {
         setLoading(false);
       }
@@ -223,9 +187,9 @@ const Technology = () => {
                 <div className="h-32 bg-gray-600 rounded-lg"></div>
               </motion.div>
             ))
-          ) : (
+          ) : technologies.length > 0 ? (
             technologies.map((spec, index) => (
-              <Link key={index} to={`/blog/tech/${spec.slug}`} className="block">
+              <Link key={index} to={`/technology/${spec.slug}`} className="block">
                 <FeatureCard
                   icon={spec.icon}
                   title={spec.title}
@@ -235,6 +199,10 @@ const Technology = () => {
                 />
               </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>
@@ -400,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"
             />