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:34:03 +02:00
parent 5d07f57e32
commit 3769e4131e
7 changed files with 222 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.jsx
View File

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

22
src/blogs/component_ai-agents-on-your-terms.md Normal file
View File

@ -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.

22
src/blogs/component_personal-agent.md Normal file
View File

@ -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.

23
src/blogs/component_private-ledger.md Normal file
View File

@ -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.

22
src/blogs/component_secure-unbreakable-memory.md Normal file
View File

@ -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.

13
src/pages/BlogPost.jsx
View File

@ -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({

165
src/pages/How.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 { 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: <User size={32} />,
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: <Database size={32} />,
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: <Brain size={32} />,
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: <Key size={32} />,
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': <User size={32} />,
'Database': <Database size={32} />,
'Brain': <Brain size={32} />,
'Key': <Key size={32} />
};
// 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] || <User size={32} />,
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: <User size={32} />,
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: <Database size={32} />,
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: <Brain size={32} />,
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: <Key size={32} />,
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 */}
<Section 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 }}
@ -92,7 +152,7 @@ const How = () => {
>
The Four <span className="text-blue-400">Core Components</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 }}
@ -104,17 +164,36 @@ const How = () => {
</div>
<div className="grid md:grid-cols-2 gap-8">
{howItWorks.map((item, index) => (
<FeatureCard
key={index}
icon={item.icon}
title={item.title}
description={item.description}
image={item.image}
delay={index * 0.2}
className="lg:col-span-1"
/>
))}
{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>
))
) : (
components.map((item, index) => (
<Link key={index} to={`/component/${item.slug}`} className="block">
<FeatureCard
icon={item.icon}
title={item.title}
description={item.description}
image={item.image}
delay={index * 0.2}
className="lg:col-span-1"
/>
</Link>
))
)}
</div>
</Section>
@ -170,7 +249,7 @@ const How = () => {
{/* Process Flow 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 }}
@ -190,7 +269,7 @@ const How = () => {
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."
},