File size: 5,891 Bytes
cf06662 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | class CustomFeatures extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.feature-icon {
width: 60px;
height: 60px;
}
</style>
<section id="features" class="py-16 bg-gray-50 dark:bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Powerful Features</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Discover the cutting-edge capabilities of our quantum-enhanced AI platform
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
<div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
<i data-feather="zap" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Quantum Cognition</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">
Leveraging quantum computing principles for parallel thought processing and complex problem solving.
</p>
</div>
<div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
<div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
<i data-feather="search" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Deep Web Search</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">
Comprehensive internet exploration with semantic understanding and context-aware results.
</p>
</div>
<div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
<div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
<i data-feather="layers" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Multi-Layer Analysis</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">
Simultaneous processing of data across multiple abstraction layers for deeper insights.
</p>
</div>
<div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
<div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
<i data-feather="clock" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Real-Time Learning</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">
Continuous adaptation and knowledge expansion from user interactions and new data.
</p>
</div>
<div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
<div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
<i data-feather="shield" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Secure Framework</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">
Quantum-resistant encryption and privacy-focused architecture for all operations.
</p>
</div>
<div class="feature-card bg-white dark:bg-gray-700 p-8 rounded-xl shadow-md transition duration-300">
<div class="feature-icon gradient-bg rounded-full flex items-center justify-center mb-6 mx-auto">
<i data-feather="users" class="text-white w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 text-center">Collaborative AI</h3>
<p class="text-gray-600 dark:text-gray-300 text-center">
Seamless integration with human teams for enhanced decision-making and creativity.
</p>
</div>
</div>
</div>
</section>
`;
}
}
customElements.define('custom-features', CustomFeatures); |