оптимизация

components/api-connector.js

@@ -1,3 +1,4 @@
+
 class ApiConnector extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
@@ -12,6 +13,10 @@ class ApiConnector extends HTMLElement {
           border-radius: 8px;
           padding: 1rem;
           background: #f9fafb;
+          transition: box-shadow 0.2s;
+        }
+        .connector:hover {
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         }
         .header {
           display: flex;
@@ -22,6 +27,7 @@ class ApiConnector extends HTMLElement {
           width: 24px;
           height: 24px;
           margin-right: 0.5rem;
+          flex-shrink: 0;
         }
         h3 {
           margin: 0;
@@ -38,20 +44,31 @@ class ApiConnector extends HTMLElement {
           font-size: 0.875rem;
           border-radius: 4px;
           cursor: pointer;
+          transition: all 0.15s;
         }
         .connect {
           background: #3b82f6;
           color: white;
           border: none;
         }
+        .connect:hover {
+          background: #2563eb;
+        }
         .docs {
           background: white;
           border: 1px solid #e5e7eb;
         }
+        .docs:hover {
+          background: #f3f4f6;
+        }
       </style>
       <div class="connector">
         <div class="header">
-          <img src="http://static.photos/technology/200x200/${Math.floor(Math.random() * 100)}" class="icon">
+          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2">
+            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+            <path d="M2 17l10 5 10-5"/>
+            <path d="M2 12l10 5 10-5"/>
+          </svg>
           <h3><slot name="name">API Connector</slot></h3>
         </div>
         <div><slot name="description">Connect to external APIs</slot></div>
@@ -64,4 +81,4 @@ class ApiConnector extends HTMLElement {
   }
 }
 
-customElements.define('api-connector', ApiConnector);
+customElements.define('api-connector', ApiConnector);

components/ide-card.js

@@ -1,3 +1,4 @@
+
 class IdeCard extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
@@ -16,7 +17,7 @@ class IdeCard extends HTMLElement {
         }
         .card:hover {
           transform: translateY(-2px);
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
         .header {
           display: flex;
@@ -28,6 +29,7 @@ class IdeCard extends HTMLElement {
           height: 32px;
           margin-right: 0.5rem;
           border-radius: 4px;
+          flex-shrink: 0;
         }
         h3 {
           margin: 0;
@@ -50,21 +52,32 @@ class IdeCard extends HTMLElement {
           border-radius: 4px;
           text-decoration: none;
           display: inline-block;
+          transition: all 0.15s;
         }
         .primary {
           background: #3b82f6;
           color: white;
           border: none;
         }
+        .primary:hover {
+          background: #2563eb;
+        }
         .secondary {
           background: white;
           border: 1px solid #e5e7eb;
           color: #4b5563;
         }
+        .secondary:hover {
+          background: #f3f4f6;
+        }
       </style>
       <div class="card">
         <div class="header">
-          <img src="http://static.photos/technology/200x200/${Math.floor(Math.random() * 100)}" class="icon">
+          <svg class="icon" viewBox="0 0 32 32" fill="none">
+            <rect width="32" height="32" rx="4" fill="#1e293b"/>
+            <path d="M10 10l6 4v8l-6-4v-8z" fill="#3b82f6"/>
+            <path d="M16 14l6 4v8l-6-4v-8z" fill="#64748b"/>
+          </svg>
           <h3><slot name="name">IDE</slot></h3>
         </div>
         <div class="description"><slot name="description">Development environment</slot></div>
@@ -77,4 +90,4 @@ class IdeCard extends HTMLElement {
   }
 }
 
-customElements.define('ide-card', IdeCard);
+customElements.define('ide-card', IdeCard);