ourworld_web/hero_web_try1
26
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk 2025-08-03 08:40:05 +02:00
parent 3769e4131e
commit 6db344c62f
10 changed files with 228 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.jsx
View File

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

1
src/blogs/component_ai-agents-on-your-terms.md
View File

@ -4,6 +4,7 @@ author: "HERO Team"
date: "2023-10-26"
readTime: "7 min read"
image: "/src/assets/itworks.jpg"
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

1
src/blogs/component_personal-agent.md
View File

@ -4,6 +4,7 @@ author: "HERO Team"
date: "2023-10-26"
readTime: "5 min read"
image: "/src/assets/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
slug: personal-agent

1
src/blogs/component_private-ledger.md
View File

@ -4,6 +4,7 @@ author: "HERO Team"
date: "2023-10-26"
readTime: "8 min read"
image: "/src/assets/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
slug: private-ledger

1
src/blogs/component_secure-unbreakable-memory.md
View File

@ -4,6 +4,7 @@ author: "HERO Team"
date: "2023-10-26"
readTime: "6 min read"
image: "/src/assets/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
slug: secure-unbreakable-memory

24
src/blogs/tech_blockchain-identity.md Normal file
View File

@ -0,0 +1,24 @@
---
title: "Blockchain Identity"
author: "HERO Team"
date: "2023-10-26"
readTime: "7 min read"
image: "/src/assets/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
---
## Your Sovereign Digital Identity
HERO leverages blockchain technology to provide you with a cryptographically verified and user-controlled digital identity. This empowers you to manage your reputation and trust relationships without relying on centralized authorities.
### Key Features:
* **Self-Sovereign Identity**: You own and control your digital identity, not a corporation or government.
* **Cryptographic Verification**: Your identity is secured and verified using advanced cryptographic techniques on a blockchain.
* **Reputation Management**: Build and manage your reputation based on verifiable interactions and attestations.
* **Decentralized Trust**: Establish trust directly with other HEROs, fostering a more secure and transparent digital ecosystem.
* **Privacy-Preserving**: Share only the necessary information to verify your identity, maintaining your privacy.
This blockchain-based identity system is a fundamental pillar of your digital sovereignty within the HERO ecosystem.

23
src/blogs/tech_peer-to-peer-network.md Normal file
View File

@ -0,0 +1,23 @@
---
title: "Peer-to-Peer Network"
author: "HERO Team"
date: "2023-10-26"
readTime: "6 min read"
image: "/src/assets/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
---
## Direct Connections, Uninterrupted Privacy
HERO's Peer-to-Peer Network enables direct communication between Personal Agents, eliminating the need for centralized servers and intermediaries. This architecture is fundamental to ensuring your privacy and digital sovereignty.
### Key Benefits:
* **Decentralized Communication**: Messages, calls, and data transfers occur directly between HEROs, bypassing corporate servers that could monitor or censor your interactions.
* **Enhanced Privacy**: Without central points of control, your communication remains private and secure, known only to the participants.
* **Resilience and Robustness**: The network is highly resilient to outages and attacks, as there's no single point of failure.
* **Scalability**: As more HEROs join, the network's capacity and reach grow, fostering a truly distributed digital ecosystem.
This peer-to-peer foundation empowers you with direct, secure, and private interactions in the digital realm.

23
src/blogs/tech_quantum-safe-storage.md Normal file
View File

@ -0,0 +1,23 @@
---
title: "Quantum-Safe Storage"
author: "HERO Team"
date: "2023-10-26"
readTime: "8 min read"
image: "/src/assets/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
---
## Future-Proofing Your Digital Legacy
HERO's Quantum-Safe Storage ensures your data is protected not just against current threats, but also against the immense computational power of future quantum computers.
### Key Aspects:
* **Post-Quantum Cryptography**: Implements cryptographic algorithms that are resistant to attacks from quantum computers, safeguarding your data for decades to come.
* **Dispersed Memory**: Your data is fragmented and distributed across multiple nodes, eliminating any single point of failure and enhancing resilience.
* **Immutable Storage**: Once stored, your data cannot be tampered with or altered, providing an unchangeable record.
* **Decentralized Control**: You retain full control over your data, even as it's securely stored across a distributed network.
This technology provides an unparalleled level of security and longevity for your most valuable digital assets.

23
src/blogs/tech_zero-knowledge-architecture.md Normal file
View File

@ -0,0 +1,23 @@
---
title: "Zero-Knowledge Architecture"
author: "HERO Team"
date: "2023-10-26"
readTime: "7 min read"
image: "/src/assets/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
---
## Privacy by Design: The Zero-Knowledge Foundation
HERO's Zero-Knowledge Architecture is a cornerstone of its privacy-first approach. This advanced cryptographic technique ensures that your data remains private and secure, even from HERO itself.
### How it Works:
* **Data Encryption**: Your information is encrypted on your device before it ever leaves your control.
* **Proof, Not Data**: Instead of sharing your actual data, zero-knowledge proofs allow you to verify information without revealing the underlying data.
* **Enhanced Security**: This architecture minimizes the attack surface, as there's no central repository of unencrypted user data to target.
* **Trustless Verification**: You can prove ownership, identity, or other attributes without needing to trust a third party with your sensitive information.
This fundamental technology ensures that your digital interactions are private, secure, and truly sovereign.

181
src/pages/Technology.jsx
View File

@ -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 { Shield, Database, Network, Key, Cpu, Globe, Lock, Zap } 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 techBackground from '../assets/herotech.jpg'; // HERO Technology background
@ -12,7 +14,92 @@ 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
const techModules = import.meta.glob('../blogs/tech_*.md', { as: 'raw', eager: true });
const Technology = () => {
const [technologies, setTechnologies] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadTechnologies = async () => {
try {
const loadedTechnologies = [];
for (const path in techModules) {
const content = techModules[path];
const { data: frontmatter } = matter(content);
// Map icon strings to actual components
const iconMap = {
'Shield': <Shield size={32} />,
'Database': <Database size={32} />,
'Network': <Network size={32} />,
'Key': <Key size={32} />
};
// Map image paths to actual imports
const imageMap = {
'/src/assets/person.jpg': securityImage,
'/src/assets/swarm.jpg': swarmImage,
'/src/assets/sphere.jpg': networkImage,
'/src/assets/heartblue.jpg': blockchainImage
};
loadedTechnologies.push({
icon: iconMap[frontmatter.icon] || <Shield size={32} />,
title: frontmatter.title,
description: frontmatter.description,
image: imageMap[frontmatter.image] || securityImage,
order: frontmatter.order || 999,
slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
});
}
// Sort by order
loadedTechnologies.sort((a, b) => a.order - b.order);
setTechnologies(loadedTechnologies);
} catch (error) {
console.error('Error loading technologies:', error);
// Fallback to static data if loading fails (optional, but good for robustness)
setTechnologies([
{
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);
}
};
loadTechnologies();
}, []);
const comparisonData = [
{
feature: "Ownership",
@ -20,13 +107,13 @@ const Technology = () => {
traditional: "Owned and operated by corporations"
},
{
feature: "Data Privacy",
feature: "Data Privacy",
hero: "Encrypted, user-controlled, and geo-sovereign",
traditional: "Stored and processed by companies, often without transparency"
},
{
feature: "Communication",
hero: "Peer-to-peer between HEROs",
hero: "Peer-to-peer between HEROs",
traditional: "Routed through centralized servers"
},
{
@ -56,33 +143,6 @@ const Technology = () => {
}
];
const technicalSpecs = [
{
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
},
{
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
},
{
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
},
{
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
}
];
const architectureFeatures = [
{
title: "Distributed Memory System",
@ -93,7 +153,7 @@ const Technology = () => {
description: "AI computations happen on your device or trusted infrastructure, ensuring your data never leaves your control."
},
{
title: "Geographic Sovereignty",
title: "Geographic Sovereignty",
description: "Choose where your data is stored and processed, ensuring compliance with local laws and regulations."
},
{
@ -126,7 +186,7 @@ const Technology = () => {
{/* Technical Specifications Section */}
<Section background="gradient" padding="xlarge">
<div className="text-center mb-16">
<motion.h2
<motion.h2
className="text-4xl md:text-5xl font-bold text-white mb-6"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@ -135,7 +195,7 @@ const Technology = () => {
>
Core <span className="text-blue-400">Technologies</span>
</motion.h2>
<motion.p
<motion.p
className="text-xl text-gray-300 max-w-4xl mx-auto"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@ -147,23 +207,42 @@ const Technology = () => {
</div>
<div className="grid md:grid-cols-2 gap-8">
{technicalSpecs.map((spec, index) => (
<FeatureCard
key={index}
icon={spec.icon}
title={spec.title}
description={spec.description}
image={spec.image}
delay={index * 0.2}
/>
))}
{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>
))
) : (
technologies.map((spec, index) => (
<Link key={index} to={`/tech/${spec.slug}`} className="block">
<FeatureCard
icon={spec.icon}
title={spec.title}
description={spec.description}
image={spec.image}
delay={index * 0.2}
/>
</Link>
))
)}
</div>
</Section>
{/* HERO vs Traditional Comparison */}
<Section background="dark" padding="xlarge">
<div className="text-center mb-16">
<motion.h2
<motion.h2
className="text-4xl md:text-5xl font-bold text-white mb-6"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@ -172,7 +251,7 @@ const Technology = () => {
>
HERO vs <span className="text-red-400">Traditional AI Platforms</span>
</motion.h2>
<motion.p
<motion.p
className="text-xl text-gray-300 max-w-4xl mx-auto"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@ -218,7 +297,7 @@ const Technology = () => {
{/* Architecture Deep Dive */}
<Section background="gradient" padding="xlarge">
<div className="text-center mb-16">
<motion.h2
<motion.h2
className="text-4xl md:text-5xl font-bold text-white mb-6"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@ -227,7 +306,7 @@ const Technology = () => {
>
Technical <span className="text-purple-400">Architecture</span>
</motion.h2>
<motion.p
<motion.p
className="text-xl text-gray-300 max-w-4xl mx-auto"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@ -268,7 +347,7 @@ const Technology = () => {
Military-Grade <span className="text-cyan-400">Security Standards</span>
</h2>
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
HERO implements the highest security standards used by governments and military organizations,
HERO implements the highest security standards used by governments and military organizations,
adapted for personal use to ensure your digital sovereignty.
</p>
@ -281,7 +360,7 @@ const Technology = () => {
},
{
icon: <Shield size={24} />,
title: "Post-Quantum Cryptography",
title: "Post-Quantum Cryptography",
description: "Future-proof against quantum computing threats"
},
{
@ -320,8 +399,8 @@ const Technology = () => {
viewport={{ once: true }}
className="relative"
>
<img
src={securityImage}
<img
src={securityImage}
alt="Security Architecture"
className="w-full rounded-2xl shadow-2xl hover-lift"
/>