...
This commit is contained in:
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user