new project save the previous

components/pair-card.js

@@ -0,0 +1,63 @@
+class PairCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    const pair = this.getAttribute('pair') || 'BTC/USDT';
+    const image = this.getAttribute('image') || 'http://static.photos/finance/640x360/1';
+    const description = this.getAttribute('description') || 'Cryptocurrency trading pair';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          border-radius: 0.75rem;
+          overflow: hidden;
+          transition: all 0.3s ease;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        :host(:hover) {
+          transform: translateY(-4px);
+          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        a {
+          display: block;
+          text-decoration: none;
+          color: inherit;
+        }
+        .image-container {
+          height: 12rem;
+          background-size: cover;
+          background-position: center;
+          background-image: url('${image}');
+        }
+        .content {
+          padding: 1.5rem;
+          background: white;
+        }
+        h3 {
+          margin: 0 0 0.5rem 0;
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: #111827;
+        }
+        p {
+          margin: 0;
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+      </style>
+      <a href="pair-details.html?pair=${pair}">
+        <div class="image-container"></div>
+        <div class="content">
+          <h3>${pair}</h3>
+          <p>${description}</p>
+        </div>
+      </a>
+    `;
+  }
+}
+
+customElements.define('pair-card', PairCard);

index.html

@@ -24,37 +24,30 @@
             <h1 class="text-5xl font-bold text-gray-800 mb-4">CryptoPilot Pro</h1>
             <p class="text-xl text-gray-600 max-w-2xl mx-auto">Advanced cryptocurrency trading platform</p>
         </div>
-
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <a href="pair-details.html?pair=BTC/USDT" class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl block">
-                <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/finance/640x360/1')"></div>
-                <div class="p-6">
-                    <h3 class="text-xl font-semibold text-gray-800">BTC/USDT</h3>
-                    <p class="text-gray-600 mt-2">Bitcoin to Tether pair trading</p>
-                </div>
-            </a>
-            <a href="pair-details.html?pair=ETH/USDT" class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl block">
-                <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/finance/640x360/2')"></div>
-                <div class="p-6">
-                    <h3 class="text-xl font-semibold text-gray-800">ETH/USDT</h3>
-                    <p class="text-gray-600 mt-2">Ethereum to Tether pair trading</p>
-                </div>
-            </a>
-            <a href="pair-details.html?pair=SOL/USDT" class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl block">
-                <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/finance/640x360/3')"></div>
-                <div class="p-6">
-                    <h3 class="text-xl font-semibold text-gray-800">SOL/USDT</h3>
-                    <p class="text-gray-600 mt-2">Solana to Tether pair trading</p>
-                </div>
-            </a>
-</div>
+            <pair-card 
+                pair="BTC/USDT" 
+                image="http://static.photos/finance/640x360/1"
+                description="Bitcoin to Tether pair trading">
+            </pair-card>
+            <pair-card 
+                pair="ETH/USDT" 
+                image="http://static.photos/finance/640x360/2"
+                description="Ethereum to Tether pair trading">
+            </pair-card>
+            <pair-card 
+                pair="SOL/USDT" 
+                image="http://static.photos/finance/640x360/3"
+                description="Solana to Tether pair trading">
+            </pair-card>
+        </div>
 </main>
-
     <custom-footer></custom-footer>
 
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/pair-card.js"></script>
     <script src="script.js"></script>
-    <script>feather.replace();</script>
+<script>feather.replace();</script>
 </body>
 </html>