Initial commit

2025-09-30 05:14:15 +03:00
commit 3446641911
35 changed files with 4166 additions and 0 deletions
--- a/src/components/Foundations.jsx
+++ b/src/components/Foundations.jsx
@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+import legal from '../assets/legal.png';
+import collective from '../assets/collective.png';
+import sovereign from '../assets/sovereign.png';
+
+const Foundations = () => {
+
+  
+  const [activeImage, setActiveImage] = useState(legal);
+  const [hoveredIndex, setHoveredIndex] = useState(0); // Start with first item highlighted
+
+  const foundations = [
+    {
+      title: 'Legal Framework',
+      line1: 'Operate as a sovereign legal entity within our digital free zone. Form businesses, manage compliance, and handle taxation, all within a transparent, compliant system designed for digital sovereignty.',
+      image: legal,
+    },
+    {
+      title: 'Collective Direction',
+      line1: 'Members guide the roadmap. Every voice counts, every vote matters.',
+      line2: 'Together, we decide which tools replace corporate dependencies.',
+      image: collective,
+    },
+    {
+      title: 'Sovereign Infrastructure',
+      line1: 'A decentralized cloud, peer-to-peer networking protocols, and a legally recognized digital free zone. Your systems, your control, hosted on networks that cannot be shut down.',
+      image: sovereign,
+    },
+  ];
+
+  return (
+    <section className="bg-gradient-to-b from-gray-900 to-black py-20 text-white">
+      <div className="max-w-7xl mx-auto px-6">
+        {/* Header */}
+        <div className="mb-16 text-center">
+          <h2 className="text-5xl font-bold text-center">
+            The <span className="text-cyan-400">Foundations</span> of the
+          </h2>
+          <h2 className="text-5xl font-bold text-center">Mycelium Society</h2>
+        </div>
+
+        {/* Two Column Container - Using Inline Styles for Absolute Control */}
+        <div style={{ display: 'flex', flexDirection: 'row', gap: '6rem', alignItems: 'center', justifyContent: 'center' }} className="flex-col lg:flex-row">
+          {/* Left Column - Image */}
+          <div style={{ width: '280px', flexShrink: 0 }} className="w-full lg:w-auto mb-12 lg:mb-0">
+            <div className="lg:sticky lg:top-24">
+              <AnimatePresence mode="wait">
+                <motion.img
+                  key={activeImage}
+                  src={activeImage}
+                  alt="Foundation illustration"
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
+                  style={{ width: '100%', height: 'auto', display: 'block' }}
+                />
+              </AnimatePresence>
+            </div>
+          </div>
+
+          {/* Right Column - Text Content */}
+          <div style={{ flex: 1, minWidth: 0, maxWidth: '60ch' }} className="w-full">
+            <div className="space-y-8">
+              {foundations.map((foundation, index) => (
+                <motion.div
+                  key={index}
+                  onMouseEnter={() => {
+                    setActiveImage(foundation.image);
+                    setHoveredIndex(index);
+                  }}
+                  onMouseLeave={() => {
+                    setActiveImage(mushroom);
+                    setHoveredIndex(null);
+                  }}
+                  className="relative group cursor-pointer"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.1 }}
+                >
+                  <div className={`
+                    p-6 pb-8 rounded-lg transition-all duration-300 text-center
+                    ${hoveredIndex === index
+                      ? 'bg-gray-800/50 backdrop-blur-sm'
+                      : 'bg-transparent'
+                    }
+                  `}>
+                    <motion.div
+                      className="absolute left-0 top-0 bottom-0 w-1 bg-cyan-400"
+                      initial={{ scaleY: 0 }}
+                      animate={{ scaleY: hoveredIndex === index ? 1 : 0 }}
+                      transition={{ duration: 0.3 }}
+                    />
+                    
+                    <h3 className={`
+                      text-2xl lg:text-3xl font-bold mb-2 transition-colors duration-300
+                      ${hoveredIndex === index ? 'text-cyan-400' : 'text-white'}
+                    `}>
+                      {foundation.title}
+                    </h3>
+                    
+                    <p className={`
+                      text-base lg:text-lg leading-relaxed transition-all duration-300
+                      ${hoveredIndex === index ? 'text-gray-100' : 'text-gray-400'}
+                    `}>
+                      {foundation.line1}
+                    </p>
+                    <p className={`
+                      text-base lg:text-lg leading-relaxed transition-all duration-300 mt-2 mb-12
+                      ${hoveredIndex === index ? 'text-gray-100' : 'text-gray-400'}
+                    `}>
+                      {foundation.line2}
+                    </p>
+                  </div>
+
+                  {index < foundations.length - 1 && (
+                    <div className="mt-6 h-px bg-gradient-to-r from-gray-700 via-gray-600 to-transparent" />
+                  )}
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Foundations;