i need complete redesign of bento cards style , this design is very simple, make it more beautiful, more original and more professional using latest tendencies

index.html

@@ -27,56 +27,53 @@
             </div>
         </section>
 <div class="bento-grid">
-    <div class="bento-row">
-        <a href="/car-wash.html" class="bento-card" style="background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);">
-            <div class="gradient-overlay"></div>
-            <div class="card-content">
-                <i data-feather="droplet" class="card-icon"></i>
-                <h3>Car Wash</h3>
-                <p>Spotless exterior cleaning with nanotechnology protection</p>
+            <!-- Row 1 -->
+            <div class="bento-row">
+                <a href="/car-wash.html" class="bento-card bg-gradient-to-br from-blue-500 to-indigo-600">
+                    <div class="card-content">
+                        <i data-feather="droplet" class="card-icon"></i>
+                        <h3>Car Wash</h3>
+                        <p>Spotless exterior cleaning</p>
+                    </div>
+                </a>
+                
+                <a href="/detailing.html" class="bento-card bg-gradient-to-br from-purple-500 to-pink-500">
+                    <div class="card-content">
+                        <i data-feather="star" class="card-icon"></i>
+                        <h3>Detailing</h3>
+                        <p>Showroom perfection</p>
+                    </div>
+                </a>
             </div>
-        </a>
-        
-        <a href="/detailing.html" class="bento-card" style="background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);">
-            <div class="gradient-overlay"></div>
-            <div class="card-content">
-                <i data-feather="star" class="card-icon"></i>
-                <h3>Detailing</h3>
-                <p>Showroom-perfect finish with ceramic coatings</p>
+            
+            <!-- Row 2 -->
+            <div class="bento-row">
+                <a href="/polarization.html" class="bento-card bg-gradient-to-br from-amber-500 to-orange-500">
+                    <div class="card-content">
+                        <i data-feather="sun" class="card-icon"></i>
+                        <h3>Polarization</h3>
+                        <p>UV protection & privacy</p>
+                    </div>
+                </a>
+                
+                <a href="/carpet-care.html" class="bento-card bg-gradient-to-br from-emerald-500 to-teal-600">
+                    <div class="card-content">
+                        <i data-feather="layers" class="card-icon"></i>
+                        <h3>Carpet Care</h3>
+                        <p>Deep clean interior fabrics</p>
+                    </div>
+                </a>
+                
+                <a href="/store.html" class="bento-card bg-gradient-to-br from-rose-500 to-red-500">
+                    <div class="card-content">
+                        <i data-feather="shopping-bag" class="card-icon"></i>
+                        <h3>Store</h3>
+                        <p>Premium car care products</p>
+                    </div>
+                </a>
             </div>
-        </a>
-    </div>
-    
-    <div class="bento-row">
-        <a href="/polarization.html" class="bento-card" style="background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);">
-            <div class="gradient-overlay"></div>
-            <div class="card-content">
-                <i data-feather="sun" class="card-icon"></i>
-                <h3>Polarization</h3>
-                <p>Advanced UV protection & privacy technology</p>
-            </div>
-        </a>
-        
-        <a href="/carpet-care.html" class="bento-card" style="background: linear-gradient(135deg, #10B981 0%, #059669 100%);">
-            <div class="gradient-overlay"></div>
-            <div class="card-content">
-                <i data-feather="layers" class="card-icon"></i>
-                <h3>Carpet Care</h3>
-                <p>Deep clean with eco-friendly solutions</p>
-            </div>
-        </a>
-        
-        <a href="/store.html" class="bento-card" style="background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);">
-            <div class="gradient-overlay"></div>
-            <div class="card-content">
-                <i data-feather="shopping-bag" class="card-icon"></i>
-                <h3>Store</h3>
-                <p>Premium car care products for professionals</p>
-            </div>
-        </a>
-    </div>
-</div>
-</main>
+        </div>
+    </main>
 
     <custom-footer></custom-footer>
 

script.js

@@ -1,4 +1,16 @@
 
+// Add particles to bento cards
+function addParticlesToCards() {
+    const cards = document.querySelectorAll('.bento-card');
+    cards.forEach(card => {
+        for (let i = 0; i < 4; i++) {
+            const particle = document.createElement('div');
+            particle.classList.add('particle');
+            card.appendChild(particle);
+        }
+    });
+}
+
 // Advanced UI Interactions
 document.addEventListener('DOMContentLoaded', () => {
     // Animate elements on scroll
@@ -31,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () => {
     tooltipTriggerList.map(function (tooltipTriggerEl) {
         return new bootstrap.Tooltip(tooltipTriggerEl);
     });
-
+    addParticlesToCards();
     console.log('SparkleMatic Auto Elegance loaded');
 });
 

style.css

@@ -59,92 +59,100 @@ h1, h2, h3, h4, h5 {
     transform: scale(1.05);
 }
 .bento-grid {
-    max-width: 1400px;
-    margin: 4rem auto;
+    max-width: 1200px;
+    margin: 6rem auto;
     padding: 0 2rem;
-    perspective: 1000px;
-}
-
-.bento-row {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
-    margin-bottom: 1.5rem;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(200px, auto);
 }
 
 .bento-card {
     position: relative;
-    border-radius: 24px;
+    border-radius: 1.5rem;
     padding: 2.5rem;
-    min-height: 280px;
     transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+    justify-content: space-between;
+    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
     border: 1px solid rgba(255, 255, 255, 0.1);
-    text-decoration: none;
-    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
     backdrop-filter: blur(16px);
-    transform-style: preserve-3d;
+    text-decoration: none;
+    z-index: 1;
 }
 
 .bento-card::before {
     content: '';
     position: absolute;
     inset: 0;
-    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 0.4s ease;
-}
-
-.bento-card::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.3), transparent 70%);
+    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
     z-index: -1;
     opacity: 0;
     transition: opacity 0.4s ease;
 }
 
 .bento-card:hover {
-    transform: translateY(-8px) rotateX(2deg) rotateY(2deg) scale(1.02);
-    box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.2);
-    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.4);
 }
 
-.bento-card:hover::before,
-.bento-card:hover::after {
+.bento-card:hover::before {
     opacity: 1;
 }
 
-.bento-card:first-child {
+.bento-card:nth-child(1) {
     grid-column: span 2;
+    grid-row: span 1;
+    background: linear-gradient(135deg, rgba(59, 113, 254, 0.2) 0%, rgba(123, 97, 255, 0.2) 100%);
+}
+
+.bento-card:nth-child(2) {
+    background: linear-gradient(135deg, rgba(167, 51, 255, 0.2) 0%, rgba(255, 92, 177, 0.2) 100%);
+}
+
+.bento-card:nth-child(3) {
+    background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(239, 68, 68, 0.2) 100%);
 }
 
 .bento-card:nth-child(4) {
-    grid-row: span 2;
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
+}
+
+.bento-card:nth-child(5) {
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
 }
 
 .card-content {
     position: relative;
     z-index: 2;
     color: white;
-    transform: translateZ(40px);
+}
+
+.card-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 1.5rem;
+    stroke-width: 1.5;
+    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
+    transition: transform 0.4s ease;
+}
+
+.bento-card:hover .card-icon {
+    transform: scale(1.1) rotate(5deg);
 }
 
 .card-content h3 {
     font-size: 1.75rem;
     font-weight: 700;
     margin-bottom: 0.75rem;
-    background: linear-gradient(90deg, #fff, rgba(255,255,255,0.7));
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(90deg, white, rgba(255,255,255,0.8));
     -webkit-background-clip: text;
-    background-clip: text;
     -webkit-text-fill-color: transparent;
-    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
 .card-content p {
@@ -152,49 +160,45 @@ h1, h2, h3, h4, h5 {
     line-height: 1.6;
     opacity: 0.9;
     margin-bottom: 1.5rem;
-    font-weight: 300;
-}
-
-.card-icon {
-    width: 56px;
-    height: 56px;
-    margin-bottom: 1.5rem;
-    stroke-width: 1.5;
-    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
-    transition: transform 0.4s ease;
-}
-
-.bento-card:hover .card-icon {
-    transform: scale(1.1) rotate(5deg);
 }
 
-.bento-card .gradient-overlay {
+.bento-card .shine {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, transparent 100%);
-    z-index: 1;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 60%);
+    z-index: 0;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.bento-card:hover .shine {
+    opacity: 1;
 }
 
 @media (max-width: 1024px) {
-    .bento-card:first-child {
-        grid-column: span 1;
+    .bento-grid {
+        grid-template-columns: repeat(2, 1fr);
     }
     
-    .bento-card:nth-child(4) {
-        grid-row: span 1;
+    .bento-card:nth-child(1) {
+        grid-column: span 2;
     }
 }
 
 @media (max-width: 768px) {
-    .bento-row {
+    .bento-grid {
         grid-template-columns: 1fr;
     }
     
+    .bento-card:nth-child(1) {
+        grid-column: span 1;
+    }
+    
     .bento-card {
-        min-height: 240px;
+        padding: 2rem;
     }
     
     .card-content h3 {
@@ -202,7 +206,7 @@ h1, h2, h3, h4, h5 {
     }
     
     .card-icon {
-        width: 48px;
-        height: 48px;
+        width: 56px;
+        height: 56px;
     }
 }