...

src/pages/Home.jsx

@@ -0,0 +1,253 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+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 images
+import heroBackground from '../assets/47WALTyZu0ep.jpg'; // Cyberpunk city
+import networkImage from '../assets/yKQ5gi1xUIrM.jpg'; // Connected lines
+import heartTechImage from '../assets/LubjiSy2yrT2.jpg'; // Technology heart
+import humanConnectionImage from '../assets/htZtx22e5QlA.jpg'; // Digital human connection
+import privacyImage from '../assets/wD5nv0lVwg3i.jpg'; // Digital privacy
+import blockchainImage from '../assets/iQoW0Ohet4Cz.jpg'; // Blockchain visualization
+
+const Home = () => {
+  const capabilities = [
+    {
+      icon: <Brain size={32} />,
+      title: "Communicate",
+      description: "Secure messaging, voice, and video chat — all managed privately by your Personal Agent",
+      image: humanConnectionImage
+    },
+    {
+      icon: <Zap size={32} />,
+      title: "Create", 
+      description: "Build documents, videos, and creative assets collaboratively with AI assistance",
+      image: heartTechImage
+    },
+    {
+      icon: <Shield size={32} />,
+      title: "Discover",
+      description: "Browse and search using authentic sources and AI assistance while maintaining privacy",
+      image: networkImage
+    },
+    {
+      icon: <Users size={32} />,
+      title: "Develop",
+      description: "Build and deploy applications faster with local AI and secure storage",
+      image: blockchainImage
+    },
+    {
+      icon: <Lock size={32} />,
+      title: "Share",
+      description: "Distribute content without central platforms — sovereignly and securely",
+      image: privacyImage
+    },
+    {
+      icon: <Heart size={32} />,
+      title: "Transact",
+      description: "Send and receive digital value safely and without intermediaries",
+      image: networkImage
+    }
+  ];
+
+  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."
+        backgroundImage={heroBackground}
+        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 bg-gradient-to-t from-black/50 to-transparent 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">
+          {capabilities.map((capability, index) => (
+            <FeatureCard
+              key={index}
+              icon={capability.icon}
+              title={capability.title}
+              description={capability.description}
+              image={capability.image}
+              delay={index * 0.1}
+            />
+          ))}
+        </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;
+