From 3769e4131e510d03a160933c7ccdb35201b5c96d Mon Sep 17 00:00:00 2001 From: despiegk Date: Sun, 3 Aug 2025 08:34:03 +0200 Subject: [PATCH] ... --- src/App.jsx | 1 + .../component_ai-agents-on-your-terms.md | 22 +++ src/blogs/component_personal-agent.md | 22 +++ src/blogs/component_private-ledger.md | 23 +++ .../component_secure-unbreakable-memory.md | 22 +++ src/pages/BlogPost.jsx | 13 +- src/pages/How.jsx | 165 +++++++++++++----- 7 files changed, 222 insertions(+), 46 deletions(-) create mode 100644 src/blogs/component_ai-agents-on-your-terms.md create mode 100644 src/blogs/component_personal-agent.md create mode 100644 src/blogs/component_private-ledger.md create mode 100644 src/blogs/component_secure-unbreakable-memory.md diff --git a/src/App.jsx b/src/App.jsx index 9e707ea..72a7394 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -23,6 +23,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/blogs/component_ai-agents-on-your-terms.md b/src/blogs/component_ai-agents-on-your-terms.md new file mode 100644 index 0000000..462b10f --- /dev/null +++ b/src/blogs/component_ai-agents-on-your-terms.md @@ -0,0 +1,22 @@ +--- +title: "AI Agents on Your Terms" +author: "HERO Team" +date: "2023-10-26" +readTime: "7 min read" +image: "/src/assets/itworks.jpg" +tags: ["components", "ai-agents", "how-it-works"] +cat: component +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. \ No newline at end of file diff --git a/src/blogs/component_personal-agent.md b/src/blogs/component_personal-agent.md new file mode 100644 index 0000000..0ded4a0 --- /dev/null +++ b/src/blogs/component_personal-agent.md @@ -0,0 +1,22 @@ +--- +title: "Your Personal Agent" +author: "HERO Team" +date: "2023-10-26" +readTime: "5 min read" +image: "/src/assets/balls.jpg" +tags: ["components", "personal-agent", "how-it-works"] +cat: component +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. \ No newline at end of file diff --git a/src/blogs/component_private-ledger.md b/src/blogs/component_private-ledger.md new file mode 100644 index 0000000..74d1408 --- /dev/null +++ b/src/blogs/component_private-ledger.md @@ -0,0 +1,23 @@ +--- +title: "A Private Ledger Just for You" +author: "HERO Team" +date: "2023-10-26" +readTime: "8 min read" +image: "/src/assets/tech.jpg" +tags: ["components", "ledger", "how-it-works"] +cat: component +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. \ No newline at end of file diff --git a/src/blogs/component_secure-unbreakable-memory.md b/src/blogs/component_secure-unbreakable-memory.md new file mode 100644 index 0000000..2c40169 --- /dev/null +++ b/src/blogs/component_secure-unbreakable-memory.md @@ -0,0 +1,22 @@ +--- +title: "Secure, Unbreakable Memory" +author: "HERO Team" +date: "2023-10-26" +readTime: "6 min read" +image: "/src/assets/white_keyb.jpg" +tags: ["components", "memory", "how-it-works"] +cat: component +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. \ No newline at end of file diff --git a/src/pages/BlogPost.jsx b/src/pages/BlogPost.jsx index 2172a67..5294b3a 100644 --- a/src/pages/BlogPost.jsx +++ b/src/pages/BlogPost.jsx @@ -17,10 +17,17 @@ const BlogPost = () => { const loadPost = async () => { try { const allModules = import.meta.glob('../blogs/*.md', { as: 'raw', eager: true }); - const filePath = `../blogs/capability_${slug}.md`; + let foundContent = null; + + for (const path in allModules) { + if (path.endsWith(`_${slug}.md`)) { + foundContent = allModules[path]; + break; + } + } - if (allModules[filePath]) { - const content = allModules[filePath]; + if (foundContent) { + const content = foundContent; const { data: frontmatter, content: markdownContent } = matter(content); setPost({ diff --git a/src/pages/How.jsx b/src/pages/How.jsx index 3fa428c..7a58e99 100644 --- a/src/pages/How.jsx +++ b/src/pages/How.jsx @@ -1,9 +1,11 @@ -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 @@ -12,33 +14,91 @@ 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 +// Use Vite's import.meta.glob to import all component markdown files +const componentModules = import.meta.glob('../blogs/component_*.md', { as: 'raw', eager: true }); + const How = () => { - const howItWorks = [ - { - icon: , - 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: , - 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: , - 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: , - 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); + + // Map icon strings to actual components + const iconMap = { + 'User': , + 'Database': , + 'Brain': , + 'Key': + }; + + // 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 + }; + + loadedComponents.push({ + icon: iconMap[frontmatter.icon] || , + title: frontmatter.title, + description: frontmatter.description, + image: imageMap[frontmatter.image] || agentImage, + 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); + // Fallback to static data if loading fails (optional, but good for robustness) + setComponents([ + { + icon: , + 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: , + 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: , + 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: , + 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); + } + }; + + loadComponents(); + }, []); const technicalFeatures = [ { @@ -46,7 +106,7 @@ const How = () => { description: "Your data is encrypted and dispersed using advanced cryptographic techniques that ensure even we cannot access your information." }, { - title: "Quantum-Safe Security", + title: "Quantum-Safe Security", description: "Built with post-quantum cryptography to protect against future quantum computing threats." }, { @@ -83,7 +143,7 @@ const How = () => { {/* How It Works Section */}
- { > The Four Core Components - {
- {howItWorks.map((item, index) => ( - - ))} + {loading ? ( + // Loading skeleton + Array.from({ length: 4 }).map((_, index) => ( + +
+
+
+
+ + )) + ) : ( + components.map((item, index) => ( + + + + )) + )}
@@ -170,7 +249,7 @@ const How = () => { {/* Process Flow Section */}
- { description: "Create your Personal Agent with secure identity verification and choose your data sovereignty preferences." }, { - step: "02", + step: "02", title: "Connect Your Digital Life", description: "Migrate your data, connect your accounts, and configure your AI preferences while maintaining complete control." },