293 lines
12 KiB
JavaScript
293 lines
12 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, MessageSquare, Lightbulb, Globe, Code, Share2, DollarSign } 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 home content markdown files and images
|
|
const homeModules = import.meta.glob('../content/home/*.md', { as: 'raw', eager: true });
|
|
const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
|
|
const iconComponents = {
|
|
Shield, Brain, Users, Lock, Zap, Heart, MessageSquare, Lightbulb, Globe, Code, Share2, DollarSign
|
|
};
|
|
|
|
const Home = () => {
|
|
const [homeContent, setHomeContent] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadHomeContent = async () => {
|
|
try {
|
|
const loadedHomeContent = [];
|
|
|
|
for (const path in homeModules) {
|
|
const content = homeModules[path];
|
|
const { data: frontmatter } = matter(content);
|
|
|
|
const IconComponent = iconComponents[frontmatter.iconname];
|
|
const imagePath = `../assets/${frontmatter.image}`; // Construct full path
|
|
const importedImage = imageModules[imagePath];
|
|
|
|
loadedHomeContent.push({
|
|
icon: IconComponent ? <IconComponent size={32} /> : <Lightbulb size={32} />, // Default icon
|
|
title: frontmatter.title,
|
|
description: frontmatter.description,
|
|
image: importedImage,
|
|
order: frontmatter.order || 999,
|
|
slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
|
|
});
|
|
}
|
|
|
|
// Sort by order
|
|
loadedHomeContent.sort((a, b) => a.order - b.order);
|
|
setHomeContent(loadedHomeContent);
|
|
} catch (error) {
|
|
console.error('Error loading home content:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
loadHomeContent();
|
|
}, []);
|
|
|
|
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-6xl 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-5xl 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>
|
|
))
|
|
) : (
|
|
homeContent.map((item, index) => (
|
|
<Link key={index} to={`/home/${item.slug}`} className="block">
|
|
<FeatureCard
|
|
icon={item.icon}
|
|
title={item.title}
|
|
description={item.description}
|
|
image={item.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-5xl 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;
|
|
|