350 lines
14 KiB
JavaScript
350 lines
14 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Link } from 'react-router-dom';
|
|
import { Shield, Brain, Users, Lock, Zap, Heart } from 'lucide-react';
|
|
import HeroSection from '../components/HeroSection';
|
|
import Section from '../components/Section';
|
|
import FeatureCard from '../components/FeatureCard';
|
|
import { Button } from '@/components/ui/button';
|
|
import matter from 'gray-matter';
|
|
|
|
// Import images
|
|
import networkImage from '../assets/discover.jpg'; // Connected lines
|
|
import heartTechImage from '../assets/heart.jpg'; // Technology heart
|
|
import humanConnectionImage from '../assets/myherozoom.png'; // Digital human connection
|
|
import privacyImage from '../assets/share.jpg'; // Digital privacy
|
|
import transactImage from '../assets/transact.jpg'; // Digital transaction
|
|
import developImage from '../assets/develop.jpg'; // Development scene
|
|
import communicateImage from '../assets/communicate.jpg'; // Communication scene
|
|
|
|
// Use Vite's import.meta.glob to import all capability markdown files
|
|
const capabilityModules = import.meta.glob('../blogs/capability_*.md', { as: 'raw', eager: true });
|
|
|
|
const Home = () => {
|
|
const [capabilities, setCapabilities] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadCapabilities = async () => {
|
|
try {
|
|
const loadedCapabilities = [];
|
|
|
|
for (const path in capabilityModules) {
|
|
const content = capabilityModules[path];
|
|
const { data: frontmatter } = matter(content);
|
|
|
|
// Map icon strings to actual components
|
|
const iconMap = {
|
|
'Brain': <Brain size={32} />,
|
|
'Zap': <Zap size={32} />,
|
|
'Shield': <Shield size={32} />,
|
|
'Users': <Users size={32} />,
|
|
'Lock': <Lock size={32} />,
|
|
'Heart': <Heart size={32} />
|
|
};
|
|
|
|
// Map image paths to actual imports
|
|
const imageMap = {
|
|
'/src/assets/communicate.jpg': communicateImage,
|
|
'/src/assets/heart.jpg': heartTechImage,
|
|
'/src/assets/discover.jpg': networkImage,
|
|
'/src/assets/develop.jpg': developImage,
|
|
'/src/assets/share.jpg': privacyImage,
|
|
'/src/assets/transact.jpg': transactImage
|
|
};
|
|
|
|
loadedCapabilities.push({
|
|
icon: iconMap[frontmatter.icon] || <Brain size={32} />,
|
|
title: frontmatter.title,
|
|
description: frontmatter.description,
|
|
image: imageMap[frontmatter.image] || heartTechImage,
|
|
order: frontmatter.order || 999,
|
|
slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
|
|
});
|
|
}
|
|
|
|
// Sort by order
|
|
loadedCapabilities.sort((a, b) => a.order - b.order);
|
|
setCapabilities(loadedCapabilities);
|
|
} catch (error) {
|
|
console.error('Error loading capabilities:', error);
|
|
// Fallback to static data if loading fails
|
|
setCapabilities([
|
|
{
|
|
icon: <Brain size={32} />,
|
|
title: "Communicate",
|
|
description: "Secure messaging, voice, and video chat — all managed privately by your Personal Agent",
|
|
image: communicateImage,
|
|
slug: "communicate"
|
|
},
|
|
{
|
|
icon: <Zap size={32} />,
|
|
title: "Create",
|
|
description: "Build documents, videos, and creative assets collaboratively with AI assistance",
|
|
image: heartTechImage,
|
|
slug: "create"
|
|
},
|
|
{
|
|
icon: <Shield size={32} />,
|
|
title: "Discover",
|
|
description: "Browse and search using authentic sources and AI assistance while maintaining privacy",
|
|
image: networkImage,
|
|
slug: "discover"
|
|
},
|
|
{
|
|
icon: <Users size={32} />,
|
|
title: "Develop",
|
|
description: "Build and deploy applications faster with local AI and secure storage",
|
|
image: developImage,
|
|
slug: "develop"
|
|
},
|
|
{
|
|
icon: <Lock size={32} />,
|
|
title: "Share",
|
|
description: "Distribute content without central platforms — sovereignly and securely",
|
|
image: privacyImage,
|
|
slug: "share"
|
|
},
|
|
{
|
|
icon: <Heart size={32} />,
|
|
title: "Transact",
|
|
description: "Send and receive digital value safely and without intermediaries",
|
|
image: transactImage,
|
|
slug: "transact"
|
|
}
|
|
]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
loadCapabilities();
|
|
}, []);
|
|
|
|
const benefits = [
|
|
"Your memory can never be lost, stolen, or corrupted",
|
|
"Authentic information flow between real, verified people",
|
|
"Equal access to knowledge and collaboration",
|
|
"Enhanced personal productivity with local AI support",
|
|
"Legal identity and digital autonomy through sovereign zones",
|
|
"Full control of your assets and data — for you and your children"
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Hero Section */}
|
|
<HeroSection
|
|
subtitle="Take Back Control of Your Digital Life"
|
|
title={
|
|
<span>
|
|
Your <span className="hero-text-gradient">Personal Agent</span>
|
|
</span>
|
|
}
|
|
description="HERO is not just another app — it's your trusted digital extension that works for you and no one else. Own your data, decide who accesses what, and preserve your memory in a way that can never be corrupted, lost, or hacked."
|
|
showVideo={true}
|
|
videoEmbed={
|
|
<iframe
|
|
src="https://player.vimeo.com/video/1106821376?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&background=1&muted=1&loop=1"
|
|
frameBorder="0"
|
|
allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", objectFit: "cover"}}
|
|
title="HERO BACK 2"
|
|
/>
|
|
}
|
|
ctaText="Start Your Journey"
|
|
ctaLink="/get-started"
|
|
/>
|
|
|
|
{/* What is HERO Section */}
|
|
<Section background="gradient" 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">
|
|
What is a <span className="text-blue-400">HERO</span>?
|
|
</h2>
|
|
<p className="text-xl text-gray-300 mb-6 leading-relaxed">
|
|
A <strong className="text-white">HERO</strong> is your <strong className="text-blue-400">Personal Agent (PA)</strong> —
|
|
a secure piece of software that acts entirely on your behalf.
|
|
</p>
|
|
<div className="space-y-4 text-lg text-gray-300">
|
|
<div className="flex items-start space-x-3">
|
|
<Shield className="text-blue-400 mt-1 flex-shrink-0" size={20} />
|
|
<span>Fully owned and controlled by you</span>
|
|
</div>
|
|
<div className="flex items-start space-x-3">
|
|
<Brain className="text-blue-400 mt-1 flex-shrink-0" size={20} />
|
|
<span>Capable of managing your digital life: data, identity, communication, AI, and transactions</span>
|
|
</div>
|
|
<div className="flex items-start space-x-3">
|
|
<Lock className="text-blue-400 mt-1 flex-shrink-0" size={20} />
|
|
<span>Designed for privacy, security, and sovereignty</span>
|
|
</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={humanConnectionImage}
|
|
alt="Digital Human Connection"
|
|
className="w-full rounded-2xl shadow-2xl hover-lift"
|
|
/>
|
|
<div className="absolute inset-0 rounded-2xl"></div>
|
|
</motion.div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Why HEROs Matter Section */}
|
|
<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 }}
|
|
>
|
|
Why <span className="text-purple-400">HEROs</span> Matter
|
|
</motion.h2>
|
|
<motion.p
|
|
className="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
Today, most AI tools are owned by corporations. They process your data, monitor your interactions,
|
|
and store your digital memory in centralized systems. <strong className="text-white">HERO flips that model.</strong>
|
|
</motion.p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
|
{benefits.map((benefit, 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:glow-blue transition-all duration-300"
|
|
>
|
|
<div className="flex items-start space-x-3">
|
|
<Heart className="text-purple-400 mt-1 flex-shrink-0" size={20} />
|
|
<p className="text-gray-300">{benefit}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* HERO Capabilities 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 }}
|
|
>
|
|
HERO <span className="text-cyan-400">Capabilities</span>
|
|
</motion.h2>
|
|
<motion.p
|
|
className="text-xl text-gray-300 max-w-3xl mx-auto"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
Your Personal Agent empowers you with comprehensive digital capabilities
|
|
</motion.p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{loading ? (
|
|
// Loading skeleton
|
|
Array.from({ length: 6 }).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>
|
|
))
|
|
) : (
|
|
capabilities.map((capability, index) => (
|
|
<Link key={index} to={`/capability/${capability.slug}`} className="block">
|
|
<FeatureCard
|
|
icon={capability.icon}
|
|
title={capability.title}
|
|
description={capability.description}
|
|
image={capability.image}
|
|
delay={index * 0.1}
|
|
/>
|
|
</Link>
|
|
))
|
|
)}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Call to Action Section */}
|
|
<Section background="dark" padding="xlarge">
|
|
<div className="text-center">
|
|
<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 }}
|
|
>
|
|
Ready to Take Control?
|
|
</motion.h2>
|
|
<motion.p
|
|
className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
This is not just better tech. This is <strong className="text-blue-400">freedom through infrastructure</strong>.
|
|
</motion.p>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 pulse-glow"
|
|
onClick={() => window.location.href = '/get-started'}
|
|
>
|
|
Get Started Today
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
</Section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|
|
|