249 lines
14 KiB
React
249 lines
14 KiB
React
import { Link } from 'react-router-dom';
|
||
import { ArrowRight, Shield, Zap, Smartphone, Users, Package, Activity, Cpu, Globe } from 'lucide-react';
|
||
import { motion } from 'framer-motion';
|
||
import { useState, useEffect } from 'react';
|
||
import axios from 'axios';
|
||
import ArcReactor from '../components/ArcReactor';
|
||
import Iphone from '../components/Iphone';
|
||
import Fingerprint from '../components/Fingerprint';
|
||
import OsCore from '../components/OsCore'; // <--- НОВЫЙ ИМПОРТ
|
||
|
||
const Home = () => {
|
||
const [stats, setStats] = useState({ users: 0, products: 0, orders: 0 });
|
||
|
||
useEffect(() => {
|
||
const fetchStats = async () => {
|
||
try {
|
||
const [u, p, o] = await Promise.all([
|
||
axios.get('https://diplomnexus.aptcloud.ru/users', { headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }}),
|
||
axios.get('https://diplomnexus.aptcloud.ru/products'),
|
||
axios.get('https://diplomnexus.aptcloud.ru/orders', { headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }})
|
||
]);
|
||
setStats({ users: u.data.length, products: p.data.length, orders: o.data.length });
|
||
} catch (e) {
|
||
// Fallback данные для красоты, если бэк не отвечает
|
||
setStats({ users: 1240, products: 48, orders: 8900 });
|
||
}
|
||
};
|
||
fetchStats();
|
||
}, []);
|
||
|
||
// Анимация для контейнеров
|
||
const containerVariants = {
|
||
hidden: { opacity: 0 },
|
||
visible: { opacity: 1, transition: { staggerChildren: 0.2 } }
|
||
};
|
||
|
||
const itemVariants = {
|
||
hidden: { y: 20, opacity: 0 },
|
||
visible: { y: 0, opacity: 1 }
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen relative overflow-x-hidden">
|
||
|
||
{/* ФОНОВАЯ СЕТКА (Grid Background) */}
|
||
<div className="fixed inset-0 pointer-events-none z-0">
|
||
<div className="absolute inset-0 bg-[var(--bg-color)]" />
|
||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
|
||
<div className="absolute left-0 right-0 top-0 -z-10 m-auto h-[310px] w-[310px] rounded-full bg-[var(--accent-color)] opacity-20 blur-[100px]" />
|
||
</div>
|
||
|
||
{/* === HERO SECTION === */}
|
||
<section className="relative z-10 min-h-screen flex items-center pt-20 px-6">
|
||
<div className="max-w-[1600px] mx-auto grid lg:grid-cols-2 gap-12 items-center w-full">
|
||
|
||
{/* Левая часть: Текст */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-center lg:text-left"
|
||
>
|
||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--accent-color)]/30 bg-[var(--accent-color)]/10 text-[var(--accent-color)] text-xs font-bold tracking-[0.2em] mb-8 shadow-[0_0_15px_rgba(0,243,255,0.2)]">
|
||
<span className="relative flex h-2 w-2">
|
||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-color)] opacity-75"></span>
|
||
<span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--accent-color)]"></span>
|
||
</span>
|
||
SYSTEM NEXUS V.5.0
|
||
</div>
|
||
|
||
<h1 className="text-6xl md:text-8xl font-black mb-6 leading-[0.9] text-[var(--text-color)] tracking-tighter">
|
||
УМНЫЙ <br/>
|
||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[var(--accent-color)] via-purple-500 to-pink-500 animate-gradient">ДОМ</span>
|
||
</h1>
|
||
|
||
<p className="text-xl text-[var(--text-color)] opacity-60 mb-10 max-w-xl mx-auto lg:mx-0 leading-relaxed">
|
||
Мы не просто автоматизируем рутину. Мы создаем цифровую нервную систему вашего жилища, которая чувствует, думает и защищает.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-6 justify-center lg:justify-start">
|
||
<Link to="/products" className="btn-neon px-10 py-5 text-lg flex items-center justify-center gap-3 group">
|
||
ОТКРЫТЬ КАТАЛОГ
|
||
<ArrowRight className="group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
<Link to="/about" className="px-10 py-5 text-lg font-bold text-[var(--text-color)] border border-[var(--glass-border)] rounded-xl hover:bg-white/5 transition-colors flex items-center justify-center gap-2">
|
||
<Globe size={20} />
|
||
О СИСТЕМЕ
|
||
</Link>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Правая часть: Реактор */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 1, delay: 0.2 }}
|
||
className="flex justify-center relative"
|
||
>
|
||
{/* Декоративные круги */}
|
||
<div className="absolute inset-0 bg-gradient-to-tr from-[var(--accent-color)]/20 to-transparent blur-3xl rounded-full opacity-30 animate-pulse" />
|
||
<div className="relative z-10 scale-125 md:scale-150 drop-shadow-[0_0_60px_var(--accent-color)]">
|
||
<ArcReactor />
|
||
</div>
|
||
</motion.div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* === STATS SECTION === */}
|
||
<motion.section
|
||
variants={containerVariants}
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true }}
|
||
className="py-20 relative z-10"
|
||
>
|
||
<div className="max-w-7xl mx-auto px-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{/* Card 1 */}
|
||
<motion.div variants={itemVariants} className="glass p-8 rounded-[2rem] border border-[var(--glass-border)] flex items-center justify-between group hover:border-[var(--accent-color)]/50 transition-colors">
|
||
<div>
|
||
<h3 className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300 mb-2">{stats.users}</h3>
|
||
<p className="text-sm text-[var(--text-color)] opacity-60 font-bold uppercase tracking-widest">Пользователей</p>
|
||
</div>
|
||
<div className="p-4 bg-blue-500/10 rounded-2xl group-hover:scale-110 transition-transform">
|
||
<Users size={32} className="text-blue-400" />
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Card 2 */}
|
||
<motion.div variants={itemVariants} className="glass p-8 rounded-[2rem] border border-[var(--glass-border)] flex items-center justify-between group hover:border-purple-500/50 transition-colors">
|
||
<div>
|
||
<h3 className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-300 mb-2">{stats.products}</h3>
|
||
<p className="text-sm text-[var(--text-color)] opacity-60 font-bold uppercase tracking-widest">Модулей</p>
|
||
</div>
|
||
<div className="p-4 bg-purple-500/10 rounded-2xl group-hover:scale-110 transition-transform">
|
||
<Cpu size={32} className="text-purple-400" />
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Card 3 */}
|
||
<motion.div variants={itemVariants} className="glass p-8 rounded-[2rem] border border-[var(--glass-border)] flex items-center justify-between group hover:border-green-500/50 transition-colors">
|
||
<div>
|
||
<h3 className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-300 mb-2">{stats.orders}+</h3>
|
||
<p className="text-sm text-[var(--text-color)] opacity-60 font-bold uppercase tracking-widest">Установок</p>
|
||
</div>
|
||
<div className="p-4 bg-green-500/10 rounded-2xl group-hover:scale-110 transition-transform">
|
||
<Activity size={32} className="text-green-400" />
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</motion.section>
|
||
|
||
{/* === SHOWCASE SECTION (Компоненты) === */}
|
||
<section className="py-32 relative z-10">
|
||
<div className="max-w-[1600px] mx-auto px-6">
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-24"
|
||
>
|
||
<h2 className="text-4xl md:text-6xl font-black text-[var(--text-color)] mb-4">ТЕХНОЛОГИЧЕСКИЙ СТЕК</h2>
|
||
<div className="w-24 h-1 bg-[var(--accent-color)] mx-auto rounded-full" />
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
|
||
|
||
{/* 1. MOBILE APP */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
className="glass p-8 rounded-[3rem] border border-[var(--glass-border)] flex flex-col items-center text-center group h-full relative overflow-hidden"
|
||
>
|
||
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-[var(--accent-color)] to-transparent opacity-50" />
|
||
|
||
<div className="h-[300px] flex items-center justify-center w-full mb-8">
|
||
<div className="transform scale-75 group-hover:scale-90 transition-transform duration-500">
|
||
<Iphone />
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-[var(--text-color)] mb-2 group-hover:text-[var(--accent-color)] transition-colors">Мобильный Контроль</h3>
|
||
<p className="text-sm opacity-60 text-[var(--text-color)]">Управление домом из любой точки мира. Полная синхронизация в реальном времени.</p>
|
||
</motion.div>
|
||
|
||
{/* 2. CORE SYSTEM (OS CORE) - CENTER */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
className="glass p-2 rounded-[3rem] border border-[var(--glass-border)] flex flex-col items-center text-center group h-full relative overflow-hidden shadow-[0_0_50px_rgba(0,0,0,0.3)]"
|
||
>
|
||
{/* Glowing bg */}
|
||
<div className="absolute inset-0 bg-[var(--accent-color)]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||
|
||
<div className="w-full flex items-center justify-center py-12 px-4 flex-grow">
|
||
{/* НОВЫЙ КОМПОНЕНТ OS CORE */}
|
||
<div className="transform scale-100 md:scale-125 transition-transform duration-500">
|
||
<OsCore />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pb-8 px-8 relative z-10">
|
||
<h3 className="text-2xl font-bold text-[var(--text-color)] mb-2 group-hover:text-purple-400 transition-colors">Ядро Системы (OS)</h3>
|
||
<p className="text-sm opacity-60 text-[var(--text-color)]">Интеллектуальная операционная система, объединяющая все устройства в единый организм.</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 3. BIOMETRICS */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
className="glass p-8 rounded-[3rem] border border-[var(--glass-border)] flex flex-col items-center text-center group h-full relative overflow-hidden"
|
||
>
|
||
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-green-500 to-transparent opacity-50" />
|
||
|
||
<div className="h-[300px] flex items-center justify-center w-full mb-8">
|
||
<div className="transform scale-100 group-hover:scale-110 transition-transform duration-500">
|
||
<Fingerprint />
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-[var(--text-color)] mb-2 group-hover:text-green-400 transition-colors">Биометрия</h3>
|
||
<p className="text-sm opacity-60 text-[var(--text-color)]">Бесключевой доступ и персональные сценарии на основе отпечатка пальца.</p>
|
||
</motion.div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FOOTER CTA */}
|
||
<section className="py-20 text-center relative z-10">
|
||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 h-px bg-gradient-to-r from-transparent via-[var(--accent-color)] to-transparent" />
|
||
<h2 className="text-3xl font-bold text-[var(--text-color)] mb-8">Готовы к будущему?</h2>
|
||
<Link to="/contact" className="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-[var(--text-color)] text-[var(--bg-color)] font-black hover:scale-105 transition-transform">
|
||
СВЯЗАТЬСЯ С НАМИ <ArrowRight size={18} />
|
||
</Link>
|
||
</section>
|
||
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Home; |