Spaces:
Running
Running
File size: 3,628 Bytes
dddb61f 54a02d3 dddb61f 54a02d3 dddb61f 54a02d3 dddb61f 54a02d3 dddb61f 54a02d3 | 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 |
class CustomFeatures extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.features-section {
background: white;
padding: 100px 0;
text-align: center;
}
.section-title {
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
color: #333;
}
.section-subtitle {
font-size: 18px;
color: #666;
max-width: 700px;
margin: 0 auto 60px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.feature-card {
background: #f9f9ff;
border-radius: 15px;
padding: 40px 30px;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
}
.feature-icon i {
color: white;
font-size: 32px;
}
.feature-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.feature-desc {
color: #666;
font-size: 16px;
line-height: 1.6;
}
</style>
<section class="features-section">
<div class="container">
<h2 class="section-title">Why Choose Tech Room Arg</h2>
<p class="section-subtitle">We provide the best mobile experience with innovative features tailored for Argentina</p>
<div class="features-grid">
<div class="feature-card animate__animated animate__fadeInUp">
<div class="feature-icon">
<i data-feather="wifi"></i>
</div>
<h3 class="feature-title">5G Network</h3>
<p class="feature-desc">Experience blazing fast speeds with our nationwide 5G coverage.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl hover-scale transition duration-300 animate-on-scroll opacity-0 translate-y-10 transition duration-500 ease-out delay-100">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="globe" class="text-green-500 w-8 h-8"></i>
</div>
<h3 class="text-xl font-bold |