Spaces:
Running
Running
Ctrl+K
-
1.52 kB
initial commit
-
219 Bytes
import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; const OracleCard = ({ card, isActive }) => { const renderSymbol = () => { switch (card.id) { case 1: // AETHERIA OS return ( <div className="relative w-32 h-32"> <motion.div className="absolute inset-0 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 shadow-lg shadow-cyan-500/50" animate={{ scale: [1, 1.05, 1] }} transition={{ duration: 3, repeat: Infinity }} /> {[...Array(7)].map((_, i) => ( <motion.div key={i} className="absolute top-1/2 left-1/2 w-0.5 h-16 bg-gradient-to-t from-transparent via-cyan-400 to-cyan-200 origin-bottom" style={{ transform: `translate(-50%, -50%) rotate(${i * 51.43}deg)` }} animate={{ opacity: [0.3, 1, 0.3] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }} /> ))} </div> ); case 2: // CORE PHILOSOPHY return ( <div className="relative w-36 h-36"> {[...Array(5)].map((_, i) => { const size = 144 - i * 24; const colors = ['border-cyan-400', 'border-purple-500', 'border-pink-500', 'border-green-400', 'border-yellow-400']; return ( <motion.div key={i} className={`absolute rounded-full border-2 ${colors[i]} shadow-lg`} style={{ width: size, height: size, top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }} animate={{ rotate: 360 * (i % 2 === 0 ? 1 : -1) }} transition={{ duration: 20 + i * 5, repeat: Infinity, ease: "linear" }} /> ); })} </div> ); case 3: // GOAL return ( <div className="relative w-32 h-40"> <motion.div className="absolute bottom-0 left-1/2 w-1 h-20 bg-gradient-to-t from-cyan-400 to-purple-500 origin-bottom" style={{ transform: 'translateX(-50%)' }} /> {[...Array(6)].map((_, i) => { const angle = (i / 6) * Math.PI * 2; const length = 25 + Math.random() * 15; return ( <motion.div key={i} className="absolute w-0.5 bg-gradient-to-t from-cyan-300 to-cyan-100 origin-bottom" style={{ height: length, left: '50%', bottom: '50%', transform: `translateX(-50%) rotate(${angle}rad)` }} animate={{ opacity: [0.5, 1, 0.5] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.3 }} /> ); })} {[...Array(8)].map((_, i) => { const angle = (i / 8) * Math.PI * 2; const distance = 35; return ( <motion.div key={i} className="absolute w-2 h-2 rounded-full bg-white shadow-lg shadow-cyan-400/50" style={{ left: `calc(50% + ${Math.cos(angle) * distance}px)`, top: `calc(50% + ${Math.sin(angle) * distance}px)` }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }} /> ); })} </div> ); case 4: // KEY PRINCIPLES return ( <div className="relative w-36 h-20"> <motion.div className="absolute w-20 h-20 border-t-4 border-l-4 border-cyan-400 rounded-full shadow-lg shadow-cyan-500/30" animate={{ rotate: 360 }} transition={{ duration: 15, repeat: Infinity, ease: "linear" }} /> <motion.div className="absolute right-0 w-20 h-20 border-b-4 border-r-4 border-purple-500 rounded-full shadow-lg shadow-purple-500/30" animate={{ rotate: 360 }} transition={{ duration: 15, repeat: Infinity, ease: "linear", delay: 0.5 }} /> </div> ); case 5: // COGNITIVE CORES return ( <div className="relative w-40 h-32"> {[...Array(7)].map((_, i) => { const colors = ['from-pink-500 to-purple-600', 'from-cyan-400 to-blue-500', 'from-green-400 to-teal-500', 'from-yellow-400 to-orange-500', 'from-red-500 to-pink-600', 'from-indigo-500 to-purple-600', 'from-teal-400 to-cyan-500']; return ( <motion.div key={i} className={`absolute w-6 h-12 bg-gradient-to-t ${colors[i]} clip-path-crystal shadow-lg`} style={{ left: `${10 + i * 12}%`, top: `${30 + Math.sin(i) * 20}%`, clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }} animate={{ y: [0, -5, 0] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.2 }} /> ); })} </div> ); case 6: // SACRED RITES return ( <div className="relative w-36 h-36"> <motion.div className="absolute inset-0 rounded-full border-2 border-cyan-400 shadow-lg shadow-cyan-500/30" animate={{ rotate: 360 }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }} /> {[...Array(12)].map((_, i) => { const angle = (i / 12) * Math.PI * 2; const radius = 65; return ( <motion.div key={i} className="absolute w-3 h-3 rounded-full bg-purple-500 shadow-lg shadow-purple-500/50" style={{ left: `calc(50% + ${Math.cos(angle) * radius}px)`, top: `calc(50% + ${Math.sin(angle) * radius}px)` }} animate={{ scale: [1, 1.5, 1], opacity: [0.7, 1, 0.7] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.1 }} /> ); })} </div> ); case 7: // AETHERIC PIPES return ( <div className="relative w-40 h-32"> {[...Array(8)].map((_, i) => ( <motion.div key={i} className="absolute h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent rounded-full shadow-lg shadow-cyan-500/30" style={{ width: `${60 + Math.random() * 80}px`, top: `${10 + i * 12}%`, left: `${5 + Math.random() * 10}%`, transform: `rotate(${Math.random() * 30 - 15}deg)` }} animate={{ opacity: [0.3, 0.8, 0.3], x: [0, 5, 0] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.2 }} /> ))} </div> ); case 8: // HUMAN OVERSIGHT return ( <div className="relative w-32 h-32"> <motion.div className="absolute inset-0 rounded-full border-4 border-cyan-400 shadow-lg shadow-cyan-500/30" animate={{ scale: [1, 1.05, 1] }} transition={{ duration: 4, repeat: Infinity }} /> <motion.div className="absolute inset-4 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 shadow-lg shadow-purple-500/30" animate={{ scale: [1, 1.03, 1] }} transition={{ duration: 3, repeat: Infinity }} /> <motion.div className="absolute inset-8 rounded-full bg-black" animate={{ scale: [1, 1.02, 1] }} transition={{ duration: 2, repeat: Infinity }} /> </div> ); case 9: // SELF-EVOLUTION return ( <div className="relative w-36 h-36"> <motion.svg className="absolute inset-0" viewBox="0 0 144 144" animate={{ rotate: 360 }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }} > <path d="M72,24 C100,24 120,44 120,72 C120,100 100,120 72,120 C44,120 24,100 24,72 C24,44 44,24 72,24 Z" fill="none" stroke="url(#ouroborosGradient)" strokeWidth="4" /> <defs> <linearGradient id="ouroborosGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stopColor="#00ffff" /> <stop offset="100%" stopColor="#6a00ff" /> </linearGradient> </defs> </motion.svg> <motion.div className="absolute w-6 h-6 bg-cyan-400 clip-path-triangle shadow-lg shadow-cyan-500/50" style={{ top: '0%', left: '50%', transform: 'translate(-50%, -50%)', clipPath: 'polygon(0% 0%, 100% 50%, 0% 100%, 0% 50%)' }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity }} /> <motion.div className="absolute w-4 h-4 rounded-full bg-cyan-400 shadow-lg shadow-cyan-500/50" style={{ bottom: '0%', left: '50%', transform: 'translate(-50%, 50%)' }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity, delay: 1 }} /> </div> ); default: return null; } }; return ( <motion.div className="flex flex-col items-center p-6 bg-gradient-to-br from-gray-900 to-black rounded-2xl border border-gray-800 shadow-2xl w-72 h-96 relative overflow-hidden" style={{ boxShadow: '0 0 30px rgba(100, 100, 255, 0.1)', background: 'linear-gradient(145deg, #0f0f2a, #1a1a3a)' }} whileHover={{ y: -10, scale: 1.02 }} transition={{ duration: 0.3 }} > {/* Glow border effect */} <div className="absolute inset-0 rounded-2xl pointer-events-none"> <div className="absolute inset-0 rounded-2xl opacity-20 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 animate-pulse" /> </div> <h2 className="text-2xl font-bold text-center mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 z-10"> {card.title} </h2> <p className="text-sm text-center text-gray-300 mb-8 z-10"> {card.subtitle} </p> <div className="flex-1 flex items-center justify-center w-full z-10"> {renderSymbol()} </div> {/* Subtle background pattern */} <div className="absolute inset-0 opacity-5" style={{ backgroundImage: `radial-gradient(circle at center, #6a00ff 0%, transparent 70%)` }} /> </motion.div> ); }; const CarouselIndicator = ({ currentIndex, total, onDotClick }) => { return ( <div className="flex space-x-2 z-20"> {[...Array(total)].map((_, index) => ( <button key={index} className={`w-3 h-3 rounded-full transition-all duration-300 ${ index === currentIndex ? 'bg-cyan-400 shadow-lg shadow-cyan-500/50 scale-125' : 'bg-gray-700 hover:bg-gray-600' }`} onClick={() => onDotClick(index)} /> ))} </div> ); }; export default function App() { const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState(1); const cards = [ { id: 1, title: "AETHERIA OS", subtitle: "Meta-Operating System for Collaborative Intelligence" }, { id: 2, title: "CORE PHILOSOPHY", subtitle: "Orchestrating and Evolving Collaborative Intelligence" }, { id: 3, title: "GOAL", subtitle: "Autonomous Cognitive Ecosystem" }, { id: 4, title: "KEY PRINCIPLES", subtitle: "Dynamic Role-Based Collaboration & Continuous Self-Improvement" }, { id: 5, title: "COGNITIVE CORES (CCs)", subtitle: "Specialized AI Archetypes embodying Divine Roles" }, { id: 6, title: "SACRED RITES", subtitle: "Dynamic Workflows for Orchestration and Optimization" }, { id: 7, title: "AETHERIC PIPES", subtitle: "Self-Regulating Conduits of Flow and Adaptation" }, { id: 8, title: "HUMAN OVERSIGHT", subtitle: "The Watcher" }, { id: 9, title: "SELF-EVOLUTION", subtitle: "The Ouroboros" } ]; const nextSlide = () => { setDirection(1); setCurrentIndex((prev) => (prev + 1) % cards.length); }; const prevSlide = () => { setDirection(-1); setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length); }; const goToSlide = (index) => { setDirection(index > currentIndex ? 1 : -1); setCurrentIndex(index); }; // Auto-rotate carousel useEffect(() => { const interval = setInterval(() => { nextSlide(); }, 3000); return () => clearInterval(interval); }, []); const slideVariants = { enter: (direction) => ({ x: direction > 0 ? 1000 : -1000, opacity: 0, scale: 0.8 }), center: { zIndex: 1, x: 0, opacity: 1, scale: 1 }, exit: (direction) => ({ zIndex: 0, x: direction < 0 ? 1000 : -1000, opacity: 0, scale: 0.8 }) }; return ( <div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col items-center justify-center p-8 overflow-hidden relative"> {/* Background particles */} <div className="absolute inset-0 overflow-hidden"> {[...Array(50)].map((_, i) => ( <motion.div key={i} className="absolute rounded-full bg-cyan-400" style={{ width: Math.random() * 4 + 1, height: Math.random() * 4 + 1, left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, }} animate={{ y: [0, -100], opacity: [0, 1, 0] }} transition={{ duration: Math.random() * 3 + 2, repeat: Infinity, delay: Math.random() * 2 }} /> ))} </div> <div className="relative w-full max-w-6xl flex items-center justify-center"> <button onClick={prevSlide} className="absolute left-4 z-20 w-12 h-12 rounded-full bg-black/30 backdrop-blur-sm border border-gray-700 text-cyan-400 text-2xl flex items-center justify-center hover:bg-gray-800/50 transition-all duration-300 shadow-lg" > ‹ </button> <div className="relative w-full h-96 flex items-center justify-center overflow-hidden"> <AnimatePresence initial={false} custom={direction}> <motion.div key={currentIndex} custom={direction} variants={slideVariants} initial="enter" animate="center" exit="exit" transition={{ x: { type: "spring", stiffness: 300, damping: 30 }, opacity: { duration: 0.2 } }} className="absolute" > <OracleCard card={cards[currentIndex]} isActive={true} /> </motion.div> </AnimatePresence> </div> <button onClick={nextSlide} className="absolute right-4 z-20 w-12 h-12 rounded-full bg-black/30 backdrop-blur-sm border border-gray-700 text-cyan-400 text-2xl flex items-center justify-center hover:bg-gray-800/50 transition-all duration-300 shadow-lg" > › </button> </div> <div className="mt-12 flex flex-col items-center space-y-6"> <CarouselIndicator currentIndex={currentIndex} total={cards.length} onDotClick={goToSlide} /> <div className="text-center max-w-2xl"> <h3 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 mb-4"> {cards[currentIndex].title} </h3> <p className="text-gray-300 text-lg"> {cards[currentIndex].subtitle} </p> </div> </div> {/* Subtle glow effect */} <div className="absolute inset-0 pointer-events-none"> <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl" /> </div> </div> ); } - Initial Deployment
-
28.3 kB
import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; const OracleCard = ({ card, isActive }) => { const renderSymbol = () => { switch (card.id) { case 1: // AETHERIA OS return ( <div className="relative w-32 h-32"> <motion.div className="absolute inset-0 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 shadow-lg shadow-cyan-500/50" animate={{ scale: [1, 1.05, 1] }} transition={{ duration: 3, repeat: Infinity }} /> {[...Array(7)].map((_, i) => ( <motion.div key={i} className="absolute top-1/2 left-1/2 w-0.5 h-16 bg-gradient-to-t from-transparent via-cyan-400 to-cyan-200 origin-bottom" style={{ transform: `translate(-50%, -50%) rotate(${i * 51.43}deg)` }} animate={{ opacity: [0.3, 1, 0.3] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }} /> ))} </div> ); case 2: // CORE PHILOSOPHY return ( <div className="relative w-36 h-36"> {[...Array(5)].map((_, i) => { const size = 144 - i * 24; const colors = ['border-cyan-400', 'border-purple-500', 'border-pink-500', 'border-green-400', 'border-yellow-400']; return ( <motion.div key={i} className={`absolute rounded-full border-2 ${colors[i]} shadow-lg`} style={{ width: size, height: size, top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }} animate={{ rotate: 360 * (i % 2 === 0 ? 1 : -1) }} transition={{ duration: 20 + i * 5, repeat: Infinity, ease: "linear" }} /> ); })} </div> ); case 3: // GOAL return ( <div className="relative w-32 h-40"> <motion.div className="absolute bottom-0 left-1/2 w-1 h-20 bg-gradient-to-t from-cyan-400 to-purple-500 origin-bottom" style={{ transform: 'translateX(-50%)' }} /> {[...Array(6)].map((_, i) => { const angle = (i / 6) * Math.PI * 2; const length = 25 + Math.random() * 15; return ( <motion.div key={i} className="absolute w-0.5 bg-gradient-to-t from-cyan-300 to-cyan-100 origin-bottom" style={{ height: length, left: '50%', bottom: '50%', transform: `translateX(-50%) rotate(${angle}rad)` }} animate={{ opacity: [0.5, 1, 0.5] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.3 }} /> ); })} {[...Array(8)].map((_, i) => { const angle = (i / 8) * Math.PI * 2; const distance = 35; return ( <motion.div key={i} className="absolute w-2 h-2 rounded-full bg-white shadow-lg shadow-cyan-400/50" style={{ left: `calc(50% + ${Math.cos(angle) * distance}px)`, top: `calc(50% + ${Math.sin(angle) * distance}px)` }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }} /> ); })} </div> ); case 4: // KEY PRINCIPLES return ( <div className="relative w-36 h-20"> <motion.div className="absolute w-20 h-20 border-t-4 border-l-4 border-cyan-400 rounded-full shadow-lg shadow-cyan-500/30" animate={{ rotate: 360 }} transition={{ duration: 15, repeat: Infinity, ease: "linear" }} /> <motion.div className="absolute right-0 w-20 h-20 border-b-4 border-r-4 border-purple-500 rounded-full shadow-lg shadow-purple-500/30" animate={{ rotate: 360 }} transition={{ duration: 15, repeat: Infinity, ease: "linear", delay: 0.5 }} /> </div> ); case 5: // COGNITIVE CORES return ( <div className="relative w-40 h-32"> {[...Array(7)].map((_, i) => { const colors = ['from-pink-500 to-purple-600', 'from-cyan-400 to-blue-500', 'from-green-400 to-teal-500', 'from-yellow-400 to-orange-500', 'from-red-500 to-pink-600', 'from-indigo-500 to-purple-600', 'from-teal-400 to-cyan-500']; return ( <motion.div key={i} className={`absolute w-6 h-12 bg-gradient-to-t ${colors[i]} clip-path-crystal shadow-lg`} style={{ left: `${10 + i * 12}%`, top: `${30 + Math.sin(i) * 20}%`, clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }} animate={{ y: [0, -5, 0] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.2 }} /> ); })} </div> ); case 6: // SACRED RITES return ( <div className="relative w-36 h-36"> <motion.div className="absolute inset-0 rounded-full border-2 border-cyan-400 shadow-lg shadow-cyan-500/30" animate={{ rotate: 360 }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }} /> {[...Array(12)].map((_, i) => { const angle = (i / 12) * Math.PI * 2; const radius = 65; return ( <motion.div key={i} className="absolute w-3 h-3 rounded-full bg-purple-500 shadow-lg shadow-purple-500/50" style={{ left: `calc(50% + ${Math.cos(angle) * radius}px)`, top: `calc(50% + ${Math.sin(angle) * radius}px)` }} animate={{ scale: [1, 1.5, 1], opacity: [0.7, 1, 0.7] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.1 }} /> ); })} </div> ); case 7: // AETHERIC PIPES return ( <div className="relative w-40 h-32"> {[...Array(8)].map((_, i) => ( <motion.div key={i} className="absolute h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent rounded-full shadow-lg shadow-cyan-500/30" style={{ width: `${60 + Math.random() * 80}px`, top: `${10 + i * 12}%`, left: `${5 + Math.random() * 10}%`, transform: `rotate(${Math.random() * 30 - 15}deg)` }} animate={{ opacity: [0.3, 0.8, 0.3], x: [0, 5, 0] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.2 }} /> ))} </div> ); case 8: // HUMAN OVERSIGHT return ( <div className="relative w-32 h-32"> <motion.div className="absolute inset-0 rounded-full border-4 border-cyan-400 shadow-lg shadow-cyan-500/30" animate={{ scale: [1, 1.05, 1] }} transition={{ duration: 4, repeat: Infinity }} /> <motion.div className="absolute inset-4 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 shadow-lg shadow-purple-500/30" animate={{ scale: [1, 1.03, 1] }} transition={{ duration: 3, repeat: Infinity }} /> <motion.div className="absolute inset-8 rounded-full bg-black" animate={{ scale: [1, 1.02, 1] }} transition={{ duration: 2, repeat: Infinity }} /> </div> ); case 9: // SELF-EVOLUTION return ( <div className="relative w-36 h-36"> <motion.svg className="absolute inset-0" viewBox="0 0 144 144" animate={{ rotate: 360 }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }} > <path d="M72,24 C100,24 120,44 120,72 C120,100 100,120 72,120 C44,120 24,100 24,72 C24,44 44,24 72,24 Z" fill="none" stroke="url(#ouroborosGradient)" strokeWidth="4" /> <defs> <linearGradient id="ouroborosGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stopColor="#00ffff" /> <stop offset="100%" stopColor="#6a00ff" /> </linearGradient> </defs> </motion.svg> <motion.div className="absolute w-6 h-6 bg-cyan-400 clip-path-triangle shadow-lg shadow-cyan-500/50" style={{ top: '0%', left: '50%', transform: 'translate(-50%, -50%)', clipPath: 'polygon(0% 0%, 100% 50%, 0% 100%, 0% 50%)' }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity }} /> <motion.div className="absolute w-4 h-4 rounded-full bg-cyan-400 shadow-lg shadow-cyan-500/50" style={{ bottom: '0%', left: '50%', transform: 'translate(-50%, 50%)' }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity, delay: 1 }} /> </div> ); default: return null; } }; return ( <motion.div className="flex flex-col items-center p-6 bg-gradient-to-br from-gray-900 to-black rounded-2xl border border-gray-800 shadow-2xl w-72 h-96 relative overflow-hidden" style={{ boxShadow: '0 0 30px rgba(100, 100, 255, 0.1)', background: 'linear-gradient(145deg, #0f0f2a, #1a1a3a)' }} whileHover={{ y: -10, scale: 1.02 }} transition={{ duration: 0.3 }} > {/* Glow border effect */} <div className="absolute inset-0 rounded-2xl pointer-events-none"> <div className="absolute inset-0 rounded-2xl opacity-20 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 animate-pulse" /> </div> <h2 className="text-2xl font-bold text-center mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 z-10"> {card.title} </h2> <p className="text-sm text-center text-gray-300 mb-8 z-10"> {card.subtitle} </p> <div className="flex-1 flex items-center justify-center w-full z-10"> {renderSymbol()} </div> {/* Subtle background pattern */} <div className="absolute inset-0 opacity-5" style={{ backgroundImage: `radial-gradient(circle at center, #6a00ff 0%, transparent 70%)` }} /> </motion.div> ); }; const CarouselIndicator = ({ currentIndex, total, onDotClick }) => { return ( <div className="flex space-x-2 z-20"> {[...Array(total)].map((_, index) => ( <button key={index} className={`w-3 h-3 rounded-full transition-all duration-300 ${ index === currentIndex ? 'bg-cyan-400 shadow-lg shadow-cyan-500/50 scale-125' : 'bg-gray-700 hover:bg-gray-600' }`} onClick={() => onDotClick(index)} /> ))} </div> ); }; export default function App() { const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState(1); const cards = [ { id: 1, title: "AETHERIA OS", subtitle: "Meta-Operating System for Collaborative Intelligence" }, { id: 2, title: "CORE PHILOSOPHY", subtitle: "Orchestrating and Evolving Collaborative Intelligence" }, { id: 3, title: "GOAL", subtitle: "Autonomous Cognitive Ecosystem" }, { id: 4, title: "KEY PRINCIPLES", subtitle: "Dynamic Role-Based Collaboration & Continuous Self-Improvement" }, { id: 5, title: "COGNITIVE CORES (CCs)", subtitle: "Specialized AI Archetypes embodying Divine Roles" }, { id: 6, title: "SACRED RITES", subtitle: "Dynamic Workflows for Orchestration and Optimization" }, { id: 7, title: "AETHERIC PIPES", subtitle: "Self-Regulating Conduits of Flow and Adaptation" }, { id: 8, title: "HUMAN OVERSIGHT", subtitle: "The Watcher" }, { id: 9, title: "SELF-EVOLUTION", subtitle: "The Ouroboros" } ]; const nextSlide = () => { setDirection(1); setCurrentIndex((prev) => (prev + 1) % cards.length); }; const prevSlide = () => { setDirection(-1); setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length); }; const goToSlide = (index) => { setDirection(index > currentIndex ? 1 : -1); setCurrentIndex(index); }; // Auto-rotate carousel useEffect(() => { const interval = setInterval(() => { nextSlide(); }, 3000); return () => clearInterval(interval); }, []); const slideVariants = { enter: (direction) => ({ x: direction > 0 ? 1000 : -1000, opacity: 0, scale: 0.8 }), center: { zIndex: 1, x: 0, opacity: 1, scale: 1 }, exit: (direction) => ({ zIndex: 0, x: direction < 0 ? 1000 : -1000, opacity: 0, scale: 0.8 }) }; return ( <div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col items-center justify-center p-8 overflow-hidden relative"> {/* Background particles */} <div className="absolute inset-0 overflow-hidden"> {[...Array(50)].map((_, i) => ( <motion.div key={i} className="absolute rounded-full bg-cyan-400" style={{ width: Math.random() * 4 + 1, height: Math.random() * 4 + 1, left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, }} animate={{ y: [0, -100], opacity: [0, 1, 0] }} transition={{ duration: Math.random() * 3 + 2, repeat: Infinity, delay: Math.random() * 2 }} /> ))} </div> <div className="relative w-full max-w-6xl flex items-center justify-center"> <button onClick={prevSlide} className="absolute left-4 z-20 w-12 h-12 rounded-full bg-black/30 backdrop-blur-sm border border-gray-700 text-cyan-400 text-2xl flex items-center justify-center hover:bg-gray-800/50 transition-all duration-300 shadow-lg" > ‹ </button> <div className="relative w-full h-96 flex items-center justify-center overflow-hidden"> <AnimatePresence initial={false} custom={direction}> <motion.div key={currentIndex} custom={direction} variants={slideVariants} initial="enter" animate="center" exit="exit" transition={{ x: { type: "spring", stiffness: 300, damping: 30 }, opacity: { duration: 0.2 } }} className="absolute" > <OracleCard card={cards[currentIndex]} isActive={true} /> </motion.div> </AnimatePresence> </div> <button onClick={nextSlide} className="absolute right-4 z-20 w-12 h-12 rounded-full bg-black/30 backdrop-blur-sm border border-gray-700 text-cyan-400 text-2xl flex items-center justify-center hover:bg-gray-800/50 transition-all duration-300 shadow-lg" > › </button> </div> <div className="mt-12 flex flex-col items-center space-y-6"> <CarouselIndicator currentIndex={currentIndex} total={cards.length} onDotClick={goToSlide} /> <div className="text-center max-w-2xl"> <h3 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 mb-4"> {cards[currentIndex].title} </h3> <p className="text-gray-300 text-lg"> {cards[currentIndex].subtitle} </p> </div> </div> {/* Subtle glow effect */} <div className="absolute inset-0 pointer-events-none"> <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl" /> </div> </div> ); } - Initial Deployment
-
388 Bytes
initial commit