287 lines
12 KiB
JavaScript
287 lines
12 KiB
JavaScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Check, Star, Shield, Zap, Users, Crown } from 'lucide-react';
|
|
import HeroSection from '../components/HeroSection';
|
|
import Section from '../components/Section';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
// Import images
|
|
import startImage from '../assets/getstarted.jpg'; // Getting started with HERO
|
|
import securityImage from '../assets/sphere.jpg'; // Digital privacy
|
|
|
|
const GetStarted = () => {
|
|
const features = [
|
|
"Operate in the Freezone with complete digital sovereignty",
|
|
"Own and control your digital assets",
|
|
"Collaborate with built-in dispute resolution mechanisms",
|
|
"Collaborate globally without intermediaries",
|
|
"Complete digital sovereignty and data ownership",
|
|
"Quantum-safe memory storage across multiple nodes",
|
|
"Private AI agent access and local processing",
|
|
"Secure peer-to-peer communication",
|
|
"Geographic data placement control",
|
|
"24/7 Personal Agent assistance",
|
|
"Unlimited secure storage",
|
|
"Cross-platform compatibility",
|
|
|
|
];
|
|
|
|
const steps = [
|
|
{
|
|
number: "01",
|
|
title: "Create Your Account",
|
|
description: "Sign up with your email and create your secure HERO identity. Choose your preferred data sovereignty settings."
|
|
},
|
|
{
|
|
number: "02",
|
|
title: "Complete Payment",
|
|
description: "Subscribe for $20/month to access your Personal Agent and all HERO capabilities. Cancel anytime."
|
|
},
|
|
{
|
|
number: "03",
|
|
title: "Setup Your HERO",
|
|
description: "Download the HERO client, configure your preferences, and begin migrating your digital life."
|
|
},
|
|
{
|
|
number: "04",
|
|
title: "Start Living Sovereignly",
|
|
description: "Experience true digital freedom with your Personal Agent managing your secure, private digital ecosystem."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Hero Section */}
|
|
<HeroSection
|
|
subtitle="Begin Your Digital Sovereignty"
|
|
title="Get Started with HERO"
|
|
description="Join the revolution and take back control of your digital life. Your Personal Agent is waiting to serve you with complete privacy and security."
|
|
backgroundImage={startImage}
|
|
ctaText="Get Started Now"
|
|
ctaLink="#pricing"
|
|
showVideo={false}
|
|
/>
|
|
|
|
{/* Pricing Section */}
|
|
<Section background="gradient" padding="xlarge" className="scroll-mt-20" id="pricing">
|
|
<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 }}
|
|
>
|
|
Simple, <span className="text-green-400">Transparent</span> Pricing
|
|
</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 }}
|
|
>
|
|
One price, unlimited possibilities. No hidden fees, no data harvesting, no compromises.
|
|
</motion.p>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="relative bg-gradient-to-br from-gray-900/80 to-black/80 backdrop-blur-sm border border-green-400/30 rounded-2xl p-8 hover:border-green-400/50 transition-all duration-300 glow-blue"
|
|
>
|
|
<div className="absolute top-4 right-4">
|
|
<Crown className="text-green-400" size={32} />
|
|
</div>
|
|
|
|
<div className="text-center mb-8">
|
|
<h3 className="text-3xl font-bold text-white mb-2">HERO Personal Agent</h3>
|
|
<div className="flex items-center justify-center space-x-2 mb-4">
|
|
<span className="text-5xl font-bold text-green-400">$20</span>
|
|
<span className="text-xl text-gray-300">/month</span>
|
|
</div>
|
|
<p className="text-gray-300">Complete digital sovereignty for everyone</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4 mb-8">
|
|
{features.map((feature, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: index * 0.05 }}
|
|
viewport={{ once: true }}
|
|
className="flex items-start space-x-3"
|
|
>
|
|
<Check className="text-green-400 mt-1 flex-shrink-0" size={16} />
|
|
<span className="text-gray-300 text-sm">{feature}</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 w-full md:w-auto"
|
|
>
|
|
Become a member of our Cooperative
|
|
</Button>
|
|
<p className="text-gray-400 text-sm mt-4">No credit card required • Cancel anytime</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* How to Get Started 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 }}
|
|
>
|
|
How to <span className="text-blue-400">Get Started</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 }}
|
|
>
|
|
Setting up your HERO Personal Agent is simple and secure. Follow these steps to begin your journey to digital sovereignty.
|
|
</motion.p>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="space-y-12">
|
|
{steps.map((step, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8"
|
|
>
|
|
<div className="flex-shrink-0 w-20 h-20 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-xl">
|
|
{step.number}
|
|
</div>
|
|
<div className="flex-1 text-center md:text-left">
|
|
<h3 className="text-2xl font-semibold text-white mb-3">{step.title}</h3>
|
|
<p className="text-gray-300 text-lg leading-relaxed">{step.description}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Security Guarantee 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">
|
|
Your <span className="text-purple-400">Security</span> is Guaranteed
|
|
</h2>
|
|
<p className="text-xl text-gray-300 mb-6 leading-relaxed">
|
|
We use military-grade encryption and quantum-safe algorithms to ensure your data remains private and secure.
|
|
Your HERO operates under your complete control with zero-knowledge architecture.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
"End-to-end encryption for all communications",
|
|
"Zero-knowledge data storage and processing",
|
|
"Quantum-resistant cryptographic algorithms",
|
|
"Geographic data sovereignty options",
|
|
"Regular security audits and updates",
|
|
"24/7 monitoring and threat detection"
|
|
].map((item, 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="flex items-start space-x-3"
|
|
>
|
|
<Shield className="text-purple-400 mt-1 flex-shrink-0" size={20} />
|
|
<span className="text-gray-300">{item}</span>
|
|
</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="Digital Security"
|
|
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>
|
|
|
|
{/* Final CTA 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 Reclaim Your <span className="text-green-400">Digital Freedom</span>?
|
|
</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 }}
|
|
>
|
|
Join thousands of users who have already taken control of their digital lives with HERO Personal Agent.
|
|
</motion.p>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-4"
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 pulse-glow"
|
|
>
|
|
Become a member of our Cooperative
|
|
</Button>
|
|
<p className="text-gray-400">7-day free trial • $20/month after • Cancel anytime</p>
|
|
</motion.div>
|
|
</div>
|
|
</Section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GetStarted;
|
|
|