нужно доработать контент сайта

components/navigation.js

@@ -78,13 +78,17 @@ class CustomNavigation extends HTMLElement {
                             </a>
                             <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-lg hover:bg-gray-800/50 transition-all duration-200">
                                 <i data-feather="book" class="w-4 h-4 inline mr-2"></i>
-                                Library
+                                Research Papers
                             </a>
                             <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-lg hover:bg-gray-800/50 transition-all duration-200">
                                 <i data-feather="users" class="w-4 h-4 inline mr-2"></i>
-                                Community
+                                Research Team
+                            </a>
+                            <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-lg hover:bg-gray-800/50 transition-all duration-200">
+                                <i data-feather="bar-chart-2" class="w-4 h-4 inline mr-2"></i>
+                                Data Portal
                             </a>
-                            <button class="px-5 py-2 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 rounded-full font-medium text-sm transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-primary-500/30">
+<button class="px-5 py-2 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 rounded-full font-medium text-sm transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-primary-500/30">
                                 Join Exploration
                             </button>
                         </div>

index.html

@@ -52,15 +52,15 @@
     <!-- Hero Section -->
     <main class="container mx-auto px-4 py-12 md:py-20">
         <div class="max-w-6xl mx-auto">
-            <div class="text-center mb-16">
-                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary-400 via-secondary-400 to-primary-300">
-                    MysticVibe Explorer 🌀
-                </h1>
-                <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">
-                    Dive into the unknown and discover mystical insights from across the universe. 
-                    Where curiosity meets cosmic wonder.
-                </p>
-                <div class="flex flex-wrap justify-center gap-4">
+                <div class="text-center mb-16">
+                    <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary-400 via-secondary-400 to-primary-300">
+                        MysticVibe Explorer 🌀
+                    </h1>
+                    <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">
+                        Unlock the secrets of the cosmos with our interactive exploration tools. 
+                        Discover celestial patterns, quantum phenomena, and mystical energies.
+                    </p>
+<div class="flex flex-wrap justify-center gap-4">
                     <a href="#explore" class="px-8 py-4 bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 rounded-full font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                         <i data-feather="compass" class="inline mr-2"></i> Start Exploring
                     </a>
@@ -79,19 +79,20 @@
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     <!-- Insight Card 1 -->
                     <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-6 border border-gray-700 hover:border-primary-500 transition-all duration-300 hover:shadow-2xl hover:shadow-primary-500/20">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
-                                <i data-feather="moon" class="w-6 h-6"></i>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-xl font-bold">Lunar Mysteries</h3>
-                                <p class="text-gray-400 text-sm">Celestial Patterns</p>
+                            <div class="flex items-center mb-4">
+                                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
+                                    <i data-feather="moon" class="w-6 h-6"></i>
+                                </div>
+                                <div class="ml-4">
+                                    <h3 class="text-xl font-bold">Lunar Alignments</h3>
+                                    <p class="text-gray-400 text-sm">Celestial Synchronization</p>
+                                </div>
                             </div>
-                        </div>
-                        <p class="text-gray-300 mb-6">
-                            Discover the hidden patterns of lunar cycles and their mystical influence on cosmic energy flows.
-                        </p>
-                        <div class="flex justify-between items-center">
+                            <p class="text-gray-300 mb-6">
+                                Explore how lunar phases influence energy fields and spiritual connections. 
+                                Our research reveals 8 distinct patterns of lunar impact.
+                            </p>
+<div class="flex justify-between items-center">
                             <span class="text-primary-400 font-semibold">Active Research</span>
                             <button class="text-secondary-400 hover:text-secondary-300 transition-colors">
                                 <i data-feather="arrow-right" class="w-5 h-5"></i>
@@ -101,19 +102,20 @@
 
                     <!-- Insight Card 2 -->
                     <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-6 border border-gray-700 hover:border-secondary-500 transition-all duration-300 hover:shadow-2xl hover:shadow-secondary-500/20">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-gradient-to-r from-secondary-500 to-primary-500 flex items-center justify-center">
-                                <i data-feather="wind" class="w-6 h-6"></i>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-xl font-bold">Quantum Echoes</h3>
-                                <p class="text-gray-400 text-sm">Energy Waves</p>
+                            <div class="flex items-center mb-4">
+                                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-secondary-500 to-primary-500 flex items-center justify-center">
+                                    <i data-feather="wind" class="w-6 h-6"></i>
+                                </div>
+                                <div class="ml-4">
+                                    <h3 class="text-xl font-bold">Quantum Resonance</h3>
+                                    <p class="text-gray-400 text-sm">Interdimensional Phenomena</p>
+                                </div>
                             </div>
-                        </div>
-                        <p class="text-gray-300 mb-6">
-                            Explore the quantum vibrations that connect all matter in the universe through harmonic resonance.
-                        </p>
-                        <div class="flex justify-between items-center">
+                            <p class="text-gray-300 mb-6">
+                                Our quantum sensors detect multidimensional vibrations across 12 frequencies. 
+                                These form the foundation of our reality's holographic nature.
+                            </p>
+<div class="flex justify-between items-center">
                             <span class="text-secondary-400 font-semibold">New Discovery</span>
                             <button class="text-primary-400 hover:text-primary-300 transition-colors">
                                 <i data-feather="arrow-right" class="w-5 h-5"></i>
@@ -123,19 +125,20 @@
 
                     <!-- Insight Card 3 -->
                     <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-6 border border-gray-700 hover:border-primary-400 transition-all duration-300 hover:shadow-2xl hover:shadow-primary-400/20">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary-400 to-secondary-400 flex items-center justify-center">
-                                <i data-feather="zap" class="w-6 h-6"></i>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-xl font-bold">Cosmic Symphony</h3>
-                                <p class="text-gray-400 text-sm">Universal Harmony</p>
+                            <div class="flex items-center mb-4">
+                                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary-400 to-secondary-400 flex items-center justify-center">
+                                    <i data-feather="zap" class="w-6 h-6"></i>
+                                </div>
+                                <div class="ml-4">
+                                    <h3 class="text-xl font-bold">Plasma Vortices</h3>
+                                    <p class="text-gray-400 text-sm">Energy Dynamics</p>
+                                </div>
                             </div>
-                        </div>
-                        <p class="text-gray-300 mb-6">
-                            Listen to the symphony of celestial bodies as they create harmonic patterns across the cosmos.
-                        </p>
-                        <div class="flex justify-between items-center">
+                            <p class="text-gray-300 mb-6">
+                                Cosmic plasma formations create energy vortices that influence consciousness. 
+                                We've mapped over 200 active vortex points globally.
+                            </p>
+<div class="flex justify-between items-center">
                             <span class="text-primary-300 font-semibold">Ongoing Study</span>
                             <button class="text-secondary-300 hover:text-secondary-200 transition-colors">
                                 <i data-feather="arrow-right" class="w-5 h-5"></i>
@@ -154,9 +157,9 @@
                                 Interactive Cosmic Explorer
                             </h2>
                             <p class="text-gray-300 mb-8 text-lg">
-                                Generate unique cosmic insights and mystical patterns in real-time. 
-                                Each exploration reveals new connections between celestial phenomena.
-                            </p>
+                                Our advanced algorithms analyze cosmic energy patterns in real-time. 
+                                Receive personalized mystical insights based on planetary alignments and quantum fluctuations.
+</p>
                             <div class="space-y-4">
                                 <div class="flex items-center">
                                     <i data-feather="check-circle" class="w-6 h-6 text-green-400 mr-3"></i>
@@ -184,8 +187,9 @@
                                 <div id="insightDisplay" class="text-center py-8">
                                     <div class="text-6xl mb-4">🌀</div>
                                     <p class="text-gray-300 text-lg">
-                                        The cosmic veil is thin today. Quantum echoes suggest heightened spiritual connectivity.
-                                    </p>
+                                    Current cosmic alignment indicates peak manifestation energy (87% intensity). 
+                                    The Jupiter-Pluto conjunction amplifies transformation potential.
+</p>
                                 </div>
                                 <div class="text-center text-gray-400 text-sm">
                                     <i data-feather="clock" class="inline w-4 h-4 mr-1"></i>
@@ -205,39 +209,97 @@
                 </h2>
                 <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                     <div class="relative overflow-hidden rounded-xl group cursor-pointer">
-                        <img src="http://static.photos/abstract/640x360/1" alt="Abstract Cosmic Pattern" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
+                        <img src="http://static.photos/abstract/640x360/1" alt="Quantum Field Pattern" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
+                            <span class="text-white font-semibold">Torus Field (Type-3)</span>
+                        </div>
+                    </div>
+                    <div class="relative overflow-hidden rounded-xl group cursor-pointer">
+                        <img src="http://static.photos/blue/640x360/2" alt="Plasma Vortex" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
-                            <span class="text-white font-semibold">Quantum Field</span>
+                            <span class="text-white font-semibold">Ionized Plasma Vortex</span>
                         </div>
                     </div>
                     <div class="relative overflow-hidden rounded-xl group cursor-pointer">
-                        <img src="http://static.photos/blue/640x360/2" alt="Cosmic Blue Energy" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
+                        <img src="http://static.photos/gradient/640x360/3" alt="Ley Lines" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
-                            <span class="text-white font-semibold">Celestial Blue</span>
+                            <span class="text-white font-semibold">Earth Energy Grid</span>
                         </div>
                     </div>
                     <div class="relative overflow-hidden rounded-xl group cursor-pointer">
-                        <img src="http://static.photos/gradient/640x360/3" alt="Energy Gradient" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
+                        <img src="http://static.photos/black/640x360/4" alt="Dark Matter Web" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
-                            <span class="text-white font-semibold">Energy Flow</span>
+                            <span class="text-white font-semibold">Dark Matter Network</span>
                         </div>
                     </div>
                     <div class="relative overflow-hidden rounded-xl group cursor-pointer">
-                        <img src="http://static.photos/black/640x360/4" alt="Dark Matter" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
+                        <img src="http://static.photos/space/640x360/5" alt="Nebula Formation" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
-                            <span class="text-white font-semibold">Dark Matter</span>
+                            <span class="text-white font-semibold">Stellar Nursery</span>
+                        </div>
+                    </div>
+                    <div class="relative overflow-hidden rounded-xl group cursor-pointer">
+                        <img src="http://static.photos/energy/640x360/6" alt="Energy Portal" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
+                            <span class="text-white font-semibold">Dimensional Gateway</span>
+                        </div>
+                    </div>
+                    <div class="relative overflow-hidden rounded-xl group cursor-pointer">
+                        <img src="http://static.photos/quantum/640x360/7" alt="Quantum Strings" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
+                            <span class="text-white font-semibold">Quantum Strings</span>
+                        </div>
+                    </div>
+                    <div class="relative overflow-hidden rounded-xl group cursor-pointer">
+                        <img src="http://static.photos/light/640x360/8" alt="Light Codes" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
+                            <span class="text-white font-semibold">Sacred Geometry</span>
                         </div>
                     </div>
                 </div>
-            </section>
+</section>
         </div>
     </main>
+    <!-- Research Team Section -->
+    <section class="py-20 bg-gradient-to-br from-gray-900 to-black">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center">
+                <i data-feather="users" class="inline mr-3 text-primary-400"></i>
+                Our Cosmic Research Team
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700 hover:border-primary-500 transition-all duration-300 text-center">
+                    <img src="http://static.photos/people/200x200/1" alt="Dr. Elena Marquez" class="w-24 h-24 rounded-full mx-auto mb-4 border-2 border-primary-500">
+                    <h3 class="text-xl font-bold mb-1">Dr. Elena Marquez</h3>
+                    <p class="text-primary-400 text-sm mb-4">Quantum Physicist</p>
+                    <p class="text-gray-300 text-sm">Specializes in interdimensional quantum field theory and consciousness studies.</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700 hover:border-secondary-500 transition-all duration-300 text-center">
+                    <img src="http://static.photos/people/200x200/2" alt="Prof. Arjun Patel" class="w-24 h-24 rounded-full mx-auto mb-4 border-2 border-secondary-500">
+                    <h3 class="text-xl font-bold mb-1">Prof. Arjun Patel</h3>
+                    <p class="text-secondary-400 text-sm mb-4">Astrophysicist</p>
+                    <p class="text-gray-300 text-sm">Studies cosmic plasma formations and their effects on human biofields.</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700 hover:border-primary-500 transition-all duration-300 text-center">
+                    <img src="http://static.photos/people/200x200/3" alt="Dr. Sofia Chen" class="w-24 h-24 rounded-full mx-auto mb-4 border-2 border-primary-500">
+                    <h3 class="text-xl font-bold mb-1">Dr. Sofia Chen</h3>
+                    <p class="text-primary-400 text-sm mb-4">Mystical Anthropologist</p>
+                    <p class="text-gray-300 text-sm">Researches ancient cosmic knowledge and its modern applications.</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-700 hover:border-secondary-500 transition-all duration-300 text-center">
+                    <img src="http://static.photos/people/200x200/4" alt="Dr. Kwame Johnson" class="w-24 h-24 rounded-full mx-auto mb-4 border-2 border-secondary-500">
+                    <h3 class="text-xl font-bold mb-1">Dr. Kwame Johnson</h3>
+                    <p class="text-secondary-400 text-sm mb-4">Bioenergetics Specialist</p>
+                    <p class="text-gray-300 text-sm">Studies human energy fields in relation to cosmic phenomena.</p>
+                </div>
+            </div>
+        </div>
+    </section>
 
     <!-- Footer Component -->
     <script src="components/footer.js"></script>
     <custom-footer></custom-footer>
-
-    <!-- Scripts -->
+<!-- Scripts -->
     <script src="script.js"></script>
     <script>
         feather.replace();

script.js

@@ -9,43 +9,49 @@ document.addEventListener('DOMContentLoaded', function() {
     // Generate Insight Button Functionality
     const generateInsightBtn = document.getElementById('generateInsight');
     const insightDisplay = document.getElementById('insightDisplay');
-    
-    const cosmicInsights = [
-        {
-            emoji: "🌌",
-            text: "The cosmic alignment suggests heightened intuition and spiritual awareness today."
-        },
-        {
-            emoji: "⚡",
-            text: "Quantum fluctuations indicate a period of rapid transformation and growth."
-        },
-        {
-            emoji: "🌀",
-            text: "Energy vortices are forming, creating opportunities for synchronicity."
-        },
-        {
-            emoji: "🌠",
-            text: "Stellar winds carry messages of hope and cosmic connection."
-        },
-        {
-            emoji: "💫",
-            text: "The universe whispers secrets of balance and harmony through celestial patterns."
-        },
-        {
-            emoji: "🌙",
-            text: "Lunar energies enhance dream states and subconscious exploration."
-        },
-        {
-            emoji: "☀️",
-            text: "Solar flares amplify creative energy and manifestation power."
-        },
-        {
-            emoji: "🌪️",
-            text: "Cosmic storms bring cleansing energy and fresh perspectives."
-        }
-    ];
-
-    if (generateInsightBtn && insightDisplay) {
+const cosmicInsights = [
+    {
+        emoji: "🌌",
+        text: "Cosmic alignment (87% intensity) enhances manifestation potential. Current planetary index: 9.2/10"
+    },
+    {
+        emoji: "⚡",
+        text: "Quantum flux detected at 12.8Hz - ideal for consciousness expansion. Recommended meditation window: 32 minutes"
+    },
+    {
+        emoji: "🌀",
+        text: "3 major energy vortices active today - coordinates: 34.5°N, 118.2°W | 19.7°S, 47.8°E | 56.1°N, 10.2°E"
+    },
+    {
+        emoji: "🌠",
+        text: "Meteor shower (Eta Lyrids) peaks tonight - cosmic download window opens at 22:34 local time"
+    },
+    {
+        emoji: "💫",
+        text: "Sacred geometry patterns detected in solar winds - activating 5D consciousness grid points"
+    },
+    {
+        emoji: "🌙",
+        text: "Waning gibbous moon (68% illumination) - optimal for releasing limiting patterns"
+    },
+    {
+        emoji: "☀️",
+        text: "Solar activity: M2.4 class flare - amplifying creative frequencies by 22%"
+    },
+    {
+        emoji: "🌪️", 
+        text: "Cosmic storm system approaching - expect heightened synchronicities (+47% probability)"
+    },
+    {
+        emoji: "🔭",
+        text: "Jupiter-Pluto conjunction exact at 14° Capricorn - transformation energy peaking"
+    },
+    {
+        emoji: "🧿",
+        text: "Earth's Schumann resonance spiking at 7.83Hz - global consciousness shift detected"
+    }
+];
+if (generateInsightBtn && insightDisplay) {
         generateInsightBtn.addEventListener('click', function() {
             // Add loading state
             const originalText = this.innerHTML;
@@ -58,9 +64,32 @@ document.addEventListener('DOMContentLoaded', function() {
 
             // Simulate API call with timeout
             setTimeout(() => {
-                const randomInsight = cosmicInsights[Math.floor(Math.random() * cosmicInsights.length)];
-                
-                // Add fade out effect
+        // Get current hour for time-based insights
+        const now = new Date();
+        const hour = now.getHours();
+        
+        // Choose appropriate insight based on time and random factor
+        let randomInsight;
+        if (hour >= 4 && hour < 8) {
+            // Morning insights
+            randomInsight = cosmicInsights.filter(i => ['🌙', '☀️', '🌌'].includes(i.emoji))[
+                Math.floor(Math.random() * 3)
+            ];
+        } else if (hour >= 8 && hour < 12) {
+            // Midday insights
+            randomInsight = cosmicInsights.filter(i => ['⚡', '💫', '🔭'].includes(i.emoji))[
+                Math.floor(Math.random() * 3)
+            ];
+        } else if (hour >= 12 && hour < 16) {
+            // Afternoon insights
+            randomInsight = cosmicInsights.filter(i => ['🌀', '🌠', '🧿'].includes(i.emoji))[
+                Math.floor(Math.random() * 3)
+            ];
+        } else {
+            // Evening/Night insights
+            randomInsight = cosmicInsights[Math.floor(Math.random() * cosmicInsights.length)];
+        }
+// Add fade out effect
                 insightDisplay.style.opacity = '0';
                 
                 setTimeout(() => {