...
This commit is contained in:
336
src/pages/Technology.jsx
Normal file
336
src/pages/Technology.jsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
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 images
|
||||
import techBackground from '../assets/poVm1zm8mO0y.png'; // AI Dark Mode
|
||||
import blockchainImage from '../assets/SXifMdAlG29t.png'; // Blockchain visualization
|
||||
import networkImage from '../assets/yKQ5gi1xUIrM.jpg'; // Connected lines
|
||||
import securityImage from '../assets/bjNv78U6CA3e.jpg'; // Digital privacy
|
||||
|
||||
const Technology = () => {
|
||||
const comparisonData = [
|
||||
{
|
||||
feature: "Ownership",
|
||||
hero: "Fully owned and run by the individual user",
|
||||
traditional: "Owned and operated by corporations"
|
||||
},
|
||||
{
|
||||
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",
|
||||
traditional: "Routed through centralized servers"
|
||||
},
|
||||
{
|
||||
feature: "AI Integration",
|
||||
hero: "You choose which AI agents to use",
|
||||
traditional: "You depend on closed AI services with unknown behavior"
|
||||
},
|
||||
{
|
||||
feature: "Memory",
|
||||
hero: "Dispersed, quantum-safe, cannot be lost",
|
||||
traditional: "Centralized, at risk of breaches or deletion"
|
||||
},
|
||||
{
|
||||
feature: "Identity & Reputation",
|
||||
hero: "Blockchain-authenticated and user-controlled",
|
||||
traditional: "Managed by third-party login or opaque identity providers"
|
||||
},
|
||||
{
|
||||
feature: "Sovereignty",
|
||||
hero: "Operates in a digital freezone under your legal control",
|
||||
traditional: "Bound to corporate policies and jurisdictions"
|
||||
},
|
||||
{
|
||||
feature: "Trust Layer",
|
||||
hero: "Verified through zero-knowledge proofs and peer links",
|
||||
traditional: "No built-in trust mechanism"
|
||||
}
|
||||
];
|
||||
|
||||
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: blockchainImage
|
||||
},
|
||||
{
|
||||
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",
|
||||
description: "Your data is split into encrypted fragments and stored across multiple geographic locations, ensuring it can never be lost or compromised."
|
||||
},
|
||||
{
|
||||
title: "Local AI Processing",
|
||||
description: "AI computations happen on your device or trusted infrastructure, ensuring your data never leaves your control."
|
||||
},
|
||||
{
|
||||
title: "Geographic Sovereignty",
|
||||
description: "Choose where your data is stored and processed, ensuring compliance with local laws and regulations."
|
||||
},
|
||||
{
|
||||
title: "Quantum-Resistant Encryption",
|
||||
description: "Built with post-quantum cryptographic algorithms that remain secure even against quantum computer attacks."
|
||||
},
|
||||
{
|
||||
title: "Zero-Trust Security Model",
|
||||
description: "Every interaction is verified and encrypted, with no implicit trust relationships or single points of failure."
|
||||
},
|
||||
{
|
||||
title: "Interoperable Protocols",
|
||||
description: "Open standards ensure your HERO can communicate with other systems while maintaining security and privacy."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Hero Section */}
|
||||
<HeroSection
|
||||
subtitle="The Technology Behind Digital Sovereignty"
|
||||
title="HERO Technology"
|
||||
description="Built on cutting-edge cryptography, distributed systems, and blockchain technology to deliver true digital sovereignty and privacy."
|
||||
backgroundImage={techBackground}
|
||||
ctaText="See How It Works"
|
||||
ctaLink="/how"
|
||||
showVideo={false}
|
||||
/>
|
||||
|
||||
{/* Technical Specifications Section */}
|
||||
<Section background="gradient" padding="xlarge">
|
||||
<div className="text-center mb-16">
|
||||
<motion.h2
|
||||
className="text-4xl md:text-5xl font-bold text-white mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Core <span className="text-blue-400">Technologies</span>
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-xl text-gray-300 max-w-4xl mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
HERO is built on a foundation of advanced technologies that ensure your digital sovereignty, privacy, and security
|
||||
</motion.p>
|
||||
</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}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* HERO vs Traditional Comparison */}
|
||||
<Section background="dark" padding="xlarge">
|
||||
<div className="text-center mb-16">
|
||||
<motion.h2
|
||||
className="text-4xl md:text-5xl font-bold text-white mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
HERO vs <span className="text-red-400">Traditional AI Platforms</span>
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-xl text-gray-300 max-w-4xl mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
See how HERO's Personal Agent approach compares to traditional corporate AI platforms
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="glass-effect rounded-2xl overflow-hidden"
|
||||
>
|
||||
<div className="grid grid-cols-3 bg-gray-900/50 p-4 border-b border-white/10">
|
||||
<div className="text-gray-400 font-semibold">Feature</div>
|
||||
<div className="text-green-400 font-semibold text-center">HERO (Personal Agent)</div>
|
||||
<div className="text-red-400 font-semibold text-center">Traditional AI Platforms</div>
|
||||
</div>
|
||||
|
||||
{comparisonData.map((row, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-3 p-4 border-b border-white/5 hover:bg-white/5 transition-colors duration-300"
|
||||
>
|
||||
<div className="text-white font-medium">{row.feature}</div>
|
||||
<div className="text-gray-300 text-sm px-2">{row.hero}</div>
|
||||
<div className="text-gray-400 text-sm px-2">{row.traditional}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Architecture Deep Dive */}
|
||||
<Section background="gradient" padding="xlarge">
|
||||
<div className="text-center mb-16">
|
||||
<motion.h2
|
||||
className="text-4xl md:text-5xl font-bold text-white mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Technical <span className="text-purple-400">Architecture</span>
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-xl text-gray-300 max-w-4xl mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Deep dive into the technical foundations that make HERO's digital sovereignty possible
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{architectureFeatures.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="glass-effect rounded-xl p-6 hover:border-purple-400/30 transition-all duration-300 hover-lift"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-white mb-3">{feature.title}</h3>
|
||||
<p className="text-gray-300 leading-relaxed">{feature.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Security Standards Section */}
|
||||
<Section background="dark" padding="xlarge">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
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,
|
||||
adapted for personal use to ensure your digital sovereignty.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{
|
||||
icon: <Lock size={24} />,
|
||||
title: "AES-256 Encryption",
|
||||
description: "Industry-standard encryption used by governments worldwide"
|
||||
},
|
||||
{
|
||||
icon: <Shield size={24} />,
|
||||
title: "Post-Quantum Cryptography",
|
||||
description: "Future-proof against quantum computing threats"
|
||||
},
|
||||
{
|
||||
icon: <Key size={24} />,
|
||||
title: "Zero-Knowledge Proofs",
|
||||
description: "Verify identity without revealing personal information"
|
||||
},
|
||||
{
|
||||
icon: <Globe size={24} />,
|
||||
title: "Distributed Architecture",
|
||||
description: "No single point of failure or attack"
|
||||
}
|
||||
].map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-start space-x-4"
|
||||
>
|
||||
<div className="text-cyan-400 mt-1">{item.icon}</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-1">{item.title}</h3>
|
||||
<p className="text-gray-300">{item.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative"
|
||||
>
|
||||
<img
|
||||
src={securityImage}
|
||||
alt="Security Architecture"
|
||||
className="w-full rounded-2xl shadow-2xl hover-lift"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"></div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Technology;
|
||||
|
||||
Reference in New Issue
Block a user