apply a neutrosophic gris layout style

components/culture-grid.js

@@ -1,23 +1,31 @@
+
 class CustomCultureGrid extends HTMLElement {
     connectedCallback() {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.innerHTML = `
             <style>
                 .culture-item {
-                    transition: transform 0.3s ease;
+                    transition: all 0.4s ease;
+                    background: white;
+                    border: 1px solid rgba(148, 163, 184, 0.2);
                 }
                 .culture-item:hover {
-                    transform: scale(1.03);
+                    transform: translateY(-5px);
+                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                 }
                 .culture-overlay {
                     transition: opacity 0.3s ease;
+                    background: rgba(255, 255, 255, 0.95);
+                }
+                .culture-item:hover .culture-overlay {
+                    opacity: 1;
                 }
             </style>
-            <section class="py-16 px-4 md:px-8 lg:px-16 bg-black">
+            <section class="py-16 px-4 md:px-8 lg:px-16 bg-slate-100 neutrosophic-grid">
                 <div class="container mx-auto max-w-7xl">
-                    <h2 class="text-4xl font-bold text-center mb-12 text-yellow-500 px-4">African Cultural Heritage</h2>
+                    <h2 class="text-4xl font-bold text-center mb-12 text-slate-700 px-4 tracking-tight">African Cultural Heritage</h2>
                     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
-${this.generateCultureItems()}
+                        ${this.generateCultureItems()}
                     </div>
                 </div>
             </section>
@@ -26,24 +34,27 @@ ${this.generateCultureItems()}
 
     generateCultureItems() {
         const cultures = [
-            { title: 'Adinkra Symbols', desc: 'Ancient wisdom encoded in visual language', img: 'http://static.photos/black/640x360/1' },
-            { title: 'Griot Storytelling', desc: 'Oral traditions preserving history', img: 'http://static.photos/people/640x360/2' },
+            { title: 'Adinkra Symbols', desc: 'Ancient wisdom encoded in visual language', img: 'http://static.photos/monochrome/640x360/1' },
+            { title: 'Griot Storytelling', desc: 'Oral traditions preserving history', img: 'http://static.photos/minimal/640x360/2' },
             { title: 'Kente Cloth', desc: 'Vibrant patterns with deep meaning', img: 'http://static.photos/textures/640x360/3' },
-            { title: 'Maasai Beadwork', desc: 'Colorful communication through art', img: 'http://static.photos/education/640x360/4' },
+            { title: 'Maasai Beadwork', desc: 'Colorful communication through art', img: 'http://static.photos/indoor/640x360/4' },
             { title: 'Yoruba Mythology', desc: 'Cosmology of the Orishas', img: 'http://static.photos/abstract/640x360/5' },
             { title: 'Ndebele Art', desc: 'Geometric expressions of identity', img: 'http://static.photos/craft/640x360/6' }
         ];
 
         return cultures.map(culture => `
-            <div class="culture-item relative rounded-xl overflow-hidden glow-hover h-full">
-                <img src="${culture.img}" alt="${culture.title}" class="w-full h-64 object-cover">
-<div class="culture-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 p-4">
-                    <h3 class="text-2xl font-bold text-yellow-500 mb-2">${culture.title}</h3>
-                    <p class="text-white text-center">${culture.desc}</p>
-                    <button class="mt-4 bg-yellow-500 text-black px-4 py-2 rounded-full text-sm font-bold">Learn More</button>
+            <div class="culture-item relative rounded-lg overflow-hidden h-full group">
+                <img src="${culture.img}" alt="${culture.title}" class="w-full h-64 object-cover grayscale hover:grayscale-0 transition-all duration-500">
+                <div class="culture-overlay absolute inset-0 flex flex-col justify-center items-center opacity-0 p-6 backdrop-blur-sm">
+                    <h3 class="text-2xl font-bold text-slate-800 mb-2">${culture.title}</h3>
+                    <p class="text-slate-600 text-center text-sm leading-relaxed">${culture.desc}</p>
+                    <button class="mt-4 bg-slate-700 text-white px-6 py-2 rounded-md text-sm font-medium hover:bg-slate-800 transition-colors">Learn More</button>
+                </div>
+                <div class="p-4 bg-white border-t border-slate-100">
+                    <h3 class="text-lg font-semibold text-slate-700">${culture.title}</h3>
                 </div>
             </div>
         `).join('');
     }
 }
-customElements.define('custom-culture-grid', CustomCultureGrid);
+customElements.define('custom-culture-grid', CustomCultureGrid);

components/footer.js

@@ -1,44 +1,55 @@
+
 class CustomFooter extends HTMLElement {
     connectedCallback() {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.innerHTML = `
             <style>
                 .footer-link:hover {
-                    color: #FACC15;
+                    color: #475569;
                     transform: translateX(5px);
                 }
+                .footer-link {
+                    transition: all 0.3s ease;
+                }
+                .social-icon {
+                    transition: all 0.3s ease;
+                }
+                .social-icon:hover {
+                    color: #475569;
+                    transform: translateY(-2px);
+                }
             </style>
-            <footer class="bg-black border-t border-yellow-500 py-12 px-4 md:px-8">
+            <footer class="bg-slate-50 border-t border-slate-200 py-12 px-4 md:px-8">
                 <div class="container mx-auto max-w-7xl">
                     <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
-<div>
-                            <h3 class="text-xl font-bold text-yellow-500 mb-4">AfroFuturAI</h3>
-                            <p class="text-gray-400">Bridging tradition and technology for a brighter African future.</p>
+                        <div>
+                            <h3 class="text-xl font-bold text-slate-700 mb-4 tracking-tight">AfroFuturAI</h3>
+                            <p class="text-slate-500 text-sm leading-relaxed">Bridging tradition and technology for a brighter African future.</p>
                         </div>
                         <div>
-                            <h4 class="text-lg font-semibold text-white mb-4">Explore</h4>
-                            <ul class="space-y-2">
+                            <h4 class="text-lg font-semibold text-slate-700 mb-4">Explore</h4>
+                            <ul class="space-y-3">
                                 ${this.generateLinks(['Home', 'Traditions', 'Innovations', 'Community'])}
                             </ul>
                         </div>
                         <div>
-                            <h4 class="text-lg font-semibold text-white mb-4">Resources</h4>
-                            <ul class="space-y-2">
+                            <h4 class="text-lg font-semibold text-slate-700 mb-4">Resources</h4>
+                            <ul class="space-y-3">
                                 ${this.generateLinks(['Research Papers', 'API Docs', 'Case Studies', 'Open Source'])}
                             </ul>
                         </div>
                         <div>
-                            <h4 class="text-lg font-semibold text-white mb-4">Connect</h4>
+                            <h4 class="text-lg font-semibold text-slate-700 mb-4">Connect</h4>
                             <div class="flex space-x-4 mb-4">
-                                <a href="#" class="text-gray-400 hover:text-yellow-500"><i data-feather="twitter"></i></a>
-                                <a href="#" class="text-gray-400 hover:text-yellow-500"><i data-feather="instagram"></i></a>
-                                <a href="#" class="text-gray-400 hover:text-yellow-500"><i data-feather="linkedin"></i></a>
-                                <a href="#" class="text-gray-400 hover:text-yellow-500"><i data-feather="github"></i></a>
+                                <a href="#" class="social-icon text-slate-400"><i data-feather="twitter" class="w-5 h-5"></i></a>
+                                <a href="#" class="social-icon text-slate-400"><i data-feather="instagram" class="w-5 h-5"></i></a>
+                                <a href="#" class="social-icon text-slate-400"><i data-feather="linkedin" class="w-5 h-5"></i></a>
+                                <a href="#" class="social-icon text-slate-400"><i data-feather="github" class="w-5 h-5"></i></a>
                             </div>
-                            <p class="text-gray-400">contact@afrofuturai.org</p>
+                            <p class="text-slate-500 text-sm">contact@afrofuturai.org</p>
                         </div>
                     </div>
-                    <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
+                    <div class="border-t border-slate-200 mt-8 pt-8 text-center text-slate-400 text-sm">
                         <p>© 2023 AfroFuturAI Nexus. All rights reserved.</p>
                     </div>
                 </div>
@@ -49,11 +60,11 @@ class CustomFooter extends HTMLElement {
     generateLinks(links) {
         return links.map(link => `
             <li>
-                <a href="#" class="footer-link text-gray-400 transition-all duration-300 flex items-center">
+                <a href="#" class="footer-link text-slate-500 text-sm flex items-center hover:text-slate-700">
                     <i data-feather="chevron-right" class="w-4 h-4 mr-1"></i> ${link}
                 </a>
             </li>
         `).join('');
     }
 }
-customElements.define('custom-footer', CustomFooter);
+customElements.define('custom-footer', CustomFooter);

components/hero.js

@@ -1,33 +1,69 @@
+
 class CustomHero extends HTMLElement {
     connectedCallback() {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.innerHTML = `
             <style>
                 .hero-bg {
-                    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
-                                url('http://static.photos/technology/1200x630/10');
+                    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%);
                     background-size: cover;
                     background-position: center;
+                    position: relative;
+                }
+                .hero-bg::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-image: 
+                        linear-gradient(rgba(100, 116, 139, 0.03) 1px, transparent 1px),
+                        linear-gradient(90deg, rgba(100, 116, 139, 0.03) 1px, transparent 1px);
+                    background-size: 60px 60px;
+                    pointer-events: none;
+                }
+                .geometric-accent {
+                    position: absolute;
+                    width: 200px;
+                    height: 200px;
+                    border: 2px solid rgba(100, 116, 139, 0.2);
+                    border-radius: 50%;
+                    top: 10%;
+                    right: 10%;
+                    pointer-events: none;
+                }
+                .geometric-accent-2 {
+                    position: absolute;
+                    width: 100px;
+                    height: 100px;
+                    border: 1px solid rgba(100, 116, 139, 0.15);
+                    bottom: 20%;
+                    left: 10%;
+                    transform: rotate(45deg);
+                    pointer-events: none;
                 }
             </style>
-            <section class="hero-bg min-h-screen flex items-center justify-center text-center px-4 md:px-8">
-                <div class="max-w-4xl mx-auto px-4">
-                    <h1 class="text-5xl md:text-7xl font-bold mb-6 text-yellow-500 text-outline leading-tight">AfroFuturAI Nexus</h1>
-                    <p class="text-xl md:text-2xl mb-8 text-white max-w-2xl mx-auto">Where Ancient Wisdom Meets Artificial Intelligence</p>
-<div class="flex flex-col sm:flex-row justify-center gap-4">
-                        <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105">
+            <section class="hero-bg min-h-screen flex items-center justify-center text-center px-4 md:px-8 relative overflow-hidden">
+                <div class="geometric-accent"></div>
+                <div class="geometric-accent-2"></div>
+                <div class="max-w-4xl mx-auto px-4 relative z-10">
+                    <h1 class="text-5xl md:text-7xl font-bold mb-6 text-slate-700 text-outline leading-tight tracking-tight">AfroFuturAI Nexus</h1>
+                    <p class="text-xl md:text-2xl mb-8 text-slate-500 max-w-2xl mx-auto font-light">Where Ancient Wisdom Meets Artificial Intelligence</p>
+                    <div class="flex flex-col sm:flex-row justify-center gap-4">
+                        <button class="bg-slate-700 hover:bg-slate-800 text-white font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-lg">
                             Explore Traditions
                         </button>
-                        <button class="border-2 border-yellow-500 hover:bg-yellow-500 hover:text-black text-yellow-500 font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105">
+                        <button class="border-2 border-slate-400 hover:bg-slate-200 hover:border-slate-500 text-slate-600 font-semibold py-3 px-8 rounded-lg transition-all transform hover:scale-105 bg-white bg-opacity-50">
                             Discover AI
                         </button>
                     </div>
                     <div class="mt-16 float-animation">
-                        <i data-feather="chevron-down" class="text-yellow-500 w-12 h-12"></i>
+                        <i data-feather="chevron-down" class="text-slate-400 w-12 h-12"></i>
                     </div>
                 </div>
             </section>
         `;
     }
 }
-customElements.define('custom-hero', CustomHero);
+customElements.define('custom-hero', CustomHero);

components/navbar.js

@@ -1,3 +1,4 @@
+
 class CustomNavbar extends HTMLElement {
     connectedCallback() {
         this.attachShadow({ mode: 'open' });
@@ -13,27 +14,27 @@ class CustomNavbar extends HTMLElement {
                     height: 2px;
                     bottom: -2px;
                     left: 0;
-                    background-color: #FACC15;
+                    background-color: #64748b;
                     transition: width 0.3s ease;
                 }
                 .nav-link:hover::after {
                     width: 100%;
                 }
             </style>
-            <nav class="bg-black border-b border-yellow-500 py-4 px-4 md:px-8 sticky top-0 z-50 backdrop-blur-sm bg-opacity-90">
+            <nav class="bg-white border-b border-slate-300 py-4 px-4 md:px-8 sticky top-0 z-50 backdrop-blur-md bg-opacity-95">
                 <div class="container mx-auto max-w-7xl flex justify-between items-center">
-<div class="flex items-center space-x-2">
-                        <i data-feather="globe" class="text-yellow-500"></i>
-                        <span class="text-xl font-bold text-yellow-500">AfroFuturAI</span>
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="grid" class="text-slate-600"></i>
+                        <span class="text-xl font-bold text-slate-700 tracking-tight">AfroFuturAI</span>
                     </div>
                     <div class="hidden md:flex space-x-8">
-                        <a href="#" class="nav-link text-white hover:text-yellow-500">Home</a>
-                        <a href="#" class="nav-link text-white hover:text-yellow-500">Traditions</a>
-                        <a href="#" class="nav-link text-white hover:text-yellow-500">Innovations</a>
-                        <a href="#" class="nav-link text-white hover:text-yellow-500">Community</a>
-                        <a href="#" class="nav-link text-white hover:text-yellow-500">About</a>
+                        <a href="#" class="nav-link text-slate-600 hover:text-slate-900 font-medium">Home</a>
+                        <a href="#" class="nav-link text-slate-600 hover:text-slate-900 font-medium">Traditions</a>
+                        <a href="#" class="nav-link text-slate-600 hover:text-slate-900 font-medium">Innovations</a>
+                        <a href="#" class="nav-link text-slate-600 hover:text-slate-900 font-medium">Community</a>
+                        <a href="#" class="nav-link text-slate-600 hover:text-slate-900 font-medium">About</a>
                     </div>
-                    <button class="md:hidden text-white">
+                    <button class="md:hidden text-slate-700">
                         <i data-feather="menu"></i>
                     </button>
                 </div>
@@ -41,4 +42,4 @@ class CustomNavbar extends HTMLElement {
         `;
     }
 }
-customElements.define('custom-navbar', CustomNavbar);
+customElements.define('custom-navbar', CustomNavbar);

components/tech-showcase.js

@@ -1,3 +1,4 @@
+
 class CustomTechShowcase extends HTMLElement {
     connectedCallback() {
         this.attachShadow({ mode: 'open' });
@@ -5,19 +6,25 @@ class CustomTechShowcase extends HTMLElement {
             <style>
                 .tech-card {
                     transition: all 0.3s ease;
-                    background: rgba(255, 255, 255, 0.05);
-                    backdrop-filter: blur(10px);
+                    background: rgba(255, 255, 255, 0.7);
+                    backdrop-filter: blur(12px);
+                    border: 1px solid rgba(148, 163, 184, 0.3);
                 }
                 .tech-card:hover {
-                    transform: translateY(-10px);
-                    box-shadow: 0 10px 25px rgba(250, 204, 21, 0.3);
+                    transform: translateY(-8px);
+                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+                    border-color: rgba(100, 116, 139, 0.5);
+                }
+                .icon-circle {
+                    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+                    border: 1px solid rgba(148, 163, 184, 0.3);
                 }
             </style>
-            <section class="py-16 px-4 md:px-8 afro-pattern bg-cover bg-center">
+            <section class="py-16 px-4 md:px-8 bg-white">
                 <div class="container mx-auto max-w-7xl">
-                    <h2 class="text-4xl font-bold text-center mb-12 text-yellow-500 px-4">AI Innovations</h2>
+                    <h2 class="text-4xl font-bold text-center mb-12 text-slate-700 px-4 tracking-tight">AI Innovations</h2>
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 px-4">
-${this.generateTechCards()}
+                        ${this.generateTechCards()}
                     </div>
                 </div>
             </section>
@@ -35,17 +42,17 @@ ${this.generateTechCards()}
         ];
 
         return techs.map(tech => `
-            <div class="tech-card p-6 rounded-xl border border-yellow-500 h-full flex flex-col">
-<div class="text-yellow-500 mb-4">
-                    <i data-feather="${tech.icon}" class="w-10 h-10"></i>
+            <div class="tech-card p-8 rounded-xl h-full flex flex-col group">
+                <div class="icon-circle w-14 h-14 rounded-lg flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
+                    <i data-feather="${tech.icon}" class="w-6 h-6 text-slate-600"></i>
                 </div>
-                <h3 class="text-xl font-bold text-white mb-2">${tech.title}</h3>
-                <p class="text-gray-300">${tech.desc}</p>
-                <button class="mt-4 text-yellow-500 flex items-center">
-                    Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                <h3 class="text-xl font-bold text-slate-800 mb-3">${tech.title}</h3>
+                <p class="text-slate-500 leading-relaxed text-sm">${tech.desc}</p>
+                <button class="mt-6 text-slate-600 flex items-center text-sm font-medium group-hover:text-slate-900 transition-colors">
+                    Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                 </button>
             </div>
         `).join('');
     }
 }
-customElements.define('custom-tech-showcase', CustomTechShowcase);
+customElements.define('custom-tech-showcase', CustomTechShowcase);

index.html

@@ -30,8 +30,8 @@
         }
     </script>
 </head>
-<body class="bg-black text-white font-sans">
-    <custom-navbar></custom-navbar>
+<body class="bg-slate-50 text-slate-800 font-sans">
+<custom-navbar></custom-navbar>
     <custom-hero></custom-hero>
     <custom-culture-grid></custom-culture-grid>
     <custom-tech-showcase></custom-tech-showcase>

style.css

@@ -1,9 +1,10 @@
+
 @keyframes pulse-glow {
     0%, 100% {
-        box-shadow: 0 0 5px rgba(250, 204, 21, 0.5);
+        box-shadow: 0 0 5px rgba(100, 116, 139, 0.4);
     }
     50% {
-        box-shadow: 0 0 20px rgba(250, 204, 21, 0.8);
+        box-shadow: 0 0 20px rgba(100, 116, 139, 0.7);
     }
 }
 
@@ -15,11 +16,33 @@
         transform: translateY(-10px);
     }
 }
+
+@keyframes grid-move {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 50px 50px;
+    }
+}
+
 .afro-pattern {
-    background-image: url('http://static.photos/abstract/1200x630/42');
-    background-size: cover;
-    background-blend-mode: overlay;
-    background-attachment: fixed;
+    background-color: #f8fafc;
+    background-image: 
+        linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
+    background-size: 50px 50px;
+    background-position: center;
+}
+
+.neutrosophic-grid {
+    background-color: #f1f5f9;
+    background-image: 
+        linear-gradient(rgba(71, 85, 105, 0.15) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(71, 85, 105, 0.15) 1px, transparent 1px),
+        linear-gradient(rgba(71, 85, 105, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(71, 85, 105, 0.05) 1px, transparent 1px);
+    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
     background-position: center;
 }
 
@@ -54,8 +77,9 @@
         max-width: 1280px;
     }
 }
+
 .glow-hover:hover {
-    animation: pulse-glow 1.5s infinite;
+    animation: pulse-glow 2s infinite;
 }
 
 .float-animation {
@@ -63,5 +87,17 @@
 }
 
 .text-outline {
-    text-shadow: 2px 2px 0 #FACC15, -2px -2px 0 #FACC15;
-}
+    text-shadow: 2px 2px 0 rgba(71, 85, 105, 0.3), -2px -2px 0 rgba(71, 85, 105, 0.1);
+}
+
+.gris-card {
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+}
+
+.gris-card:hover {
+    border-color: rgba(100, 116, 139, 0.5);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
+}