OKay now you can add links to all of the 15 services, and , let each service be open on a new tab

components/service-card.js

@@ -1,9 +1,24 @@
+
 class ServiceCard extends HTMLElement {
     connectedCallback() {
         const icon = this.getAttribute('icon') || 'code';
         const title = this.getAttribute('title') || 'Service';
         const description = this.getAttribute('description') || 'Professional service description';
+        const link = this.getAttribute('link');
+        const target = this.getAttribute('target') || '_self';
         
+        const content = `
+            <div class="card bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all-300 animate-on-scroll">
+                <div class="p-8">
+                    <div class="icon-container w-16 h-16 rounded-lg bg-primary-100 text-primary-500 flex items-center justify-center mb-6">
+                        <i data-feather="${icon}" class="w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-gray-800">${title}</h3>
+                    <p class="text-gray-600">${description}</p>
+                </div>
+            </div>
+        `;
+
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.innerHTML = `
             <style>
@@ -21,17 +36,14 @@ class ServiceCard extends HTMLElement {
                     background-color: #10b981;
                     color: white;
                 }
+                a {
+                    display: block;
+                    text-decoration: none;
+                    color: inherit;
+                }
             </style>
-            <div class="card bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all-300 animate-on-scroll">
-                <div class="p-8">
-                    <div class="icon-container w-16 h-16 rounded-lg bg-primary-100 text-primary-500 flex items-center justify-center mb-6">
-                        <i data-feather="${icon}" class="w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-3 text-gray-800">${title}</h3>
-                    <p class="text-gray-600">${description}</p>
-                </div>
-            </div>
-        `;
+            ${link ? `<a href="${link}" target="${target}">${content}</a>` : content}
+`;
         
         // Initialize feather icons after component is rendered
         setTimeout(() => {

index.html

@@ -74,92 +74,122 @@
                         icon="globe" 
                         title="Web Design" 
                         description="Beautiful, intuitive interfaces that engage users and reflect your brand identity."
+                        link="https://codecraftcomplex.com/web-design" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="code" 
                         title="Web Development" 
                         description="Robust, scalable websites built with modern technologies and best practices."
+                        link="https://codecraftcomplex.com/web-development" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="cpu" 
                         title="Software Development" 
                         description="Custom software solutions designed to streamline your business operations."
+                        link="https://codecraftcomplex.com/software-development" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="joystick" 
                         title="Game Development" 
                         description="Immersive gaming experiences across multiple platforms and devices."
+                        link="https://codecraftcomplex.com/game-development" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="activity" 
                         title="AI Integration" 
                         description="Smart automation and intelligence infused into your digital products."
+                        link="https://codecraftcomplex.com/ai-integration" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="brain" 
                         title="AI Engineering" 
                         description="Custom AI models and machine learning solutions for your specific needs."
+                        link="https://codecraftcomplex.com/ai-engineering" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="link" 
                         title="API Integration" 
                         description="Seamless connectivity between your systems and third-party services."
+                        link="https://codecraftcomplex.com/api-integration" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="shield" 
                         title="Cybersecurity" 
                         description="Comprehensive protection for your digital assets and user data."
+                        link="https://codecraftcomplex.com/cybersecurity" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="cloud" 
                         title="Cloud Services" 
                         description="Migration, setup, and management of cloud infrastructure."
+                        link="https://codecraftcomplex.com/cloud-services" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="zap" 
                         title="WebAssembly" 
                         description="High-performance web applications with near-native speed."
+                        link="https://codecraftcomplex.com/webassembly" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="trending-up" 
                         title="Performance Optimization" 
                         description="Faster loading, better SEO, and improved user experience."
+                        link="https://codecraftcomplex.com/performance-optimization" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="repeat" 
                         title="Business Automation" 
                         description="Streamline workflows with no-code/low-code solutions."
+                        link="https://codecraftcomplex.com/business-automation" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="globe" 
                         title="Localization" 
                         description="Multi-language support for global audience reach."
+                        link="https://codecraftcomplex.com/localization" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="tool" 
                         title="Maintenance Plans" 
                         description="Ongoing support to keep your digital products running smoothly."
+                        link="https://codecraftcomplex.com/maintenance-plans" 
+                        target="_blank"
                     ></service-card>
                     
                     <service-card 
                         icon="smartphone" 
                         title="App Development" 
                         description="Cross-platform mobile applications for iOS and Android."
+                        link="https://codecraftcomplex.com/app-development" 
+                        target="_blank"
                     ></service-card>
-                </div>
+</div>
             </div>
         </section>