featurescapsule link

Author: 4lb

src/pages/_home/components/FeatureCapsules.astro

@@ -4,6 +4,9 @@ interface Feature {
   title: string;
   description: string;
   icon?: string; // LineIcons icon name (e.g., "lni-shield")
+  linkText?: string; // Optional link text
+  linkUrl?: string;  // Optional link URL
+  linkTarget?: string; // Optional link target, defaults to '_self'
 }
 
 interface Props {
@@ -31,6 +34,18 @@ const { features, header } = Astro.props;
         <p>
           {feature.description}
         </p>
+        {feature.linkText && feature.linkUrl && (
+          <div class="feature-link-container">
+            <a
+              href={feature.linkUrl}
+              class="feature-link"
+              target={feature.linkTarget ?? '_self'}
+              rel="noopener"
+            >
+              {feature.linkText}
+            </a>
+          </div>
+        )}
       </div>
     ))}
   </div>
@@ -54,6 +69,8 @@ const { features, header } = Astro.props;
     transition: all 0.2s ease-in-out;
     width: 100%;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
 
     &:hover {
       transform: translateY(-1px);
@@ -81,6 +98,14 @@ const { features, header } = Astro.props;
     p {
       @include typography(paragraph);
       margin-bottom: 1rem;
+      text-align: justify;
+      flex: 1 1 auto;
+    }
+    .feature-link-container {
+      width: 100%;
+      text-align: right;
+      margin-top: auto;
+      padding-top: 0.5rem;
     }
   }
 
@@ -101,5 +126,24 @@ const { features, header } = Astro.props;
   margin-bottom: 2rem;
   text-align: center;
 }
+
+.feature-link-container {
+  width: 100%;
+  text-align: right;
+}
+
+.feature-link {
+  @include typography(paragraph);
+  display: inline-block;
+  margin-top: 0.5rem;
+  text-decoration: underline;
+  font-size: 1rem;
+  transition: color 0.2s;
+  // Removed text-align: right;
+
+  &:hover {
+    color: var(--primary-button);
+  }
+}
 </style>
 

src/pages/index.astro

@@ -95,33 +95,46 @@ const tags = [
           title: "Enterprise integrations", 
           description: 
           "External OpenID providers; Google, Microsoft, Zitadel, Keycloak, Okta, JumpCloud and more. Integrates with LDAP, Active Directory and Microsoft Entra ID.", 
-          icon: "lni-apartment" 
+          icon: "lni-apartment",
+          linkText: "Learn more",
+          linkUrl: "https://example.com",
+          linkTarget: "_blank"
         },
         { 
           title: "Privacy and Transparency", 
           description: 
           "No third-party dependencies required, no metadata leaves your infrastructure, full control over deployment and configuration.", 
-          icon: "lni-lock" 
+          icon: "lni-lock",
+          linkText: "Learn more",
+          linkUrl: "https://example.com"
         },
         { 
           title: "Ultimate Security", 
           description: "Written in Rust, built around WireGuard® and with components designed to be secure, fully auditable with open source code on GitHub" ,
-          icon: "lni-shield" 
+          icon: "lni-shield",
+          linkText: "Learn more",
+          linkUrl: "https://example.com"
         }, 
         { 
           title: "Enables NIS2 compliance", 
           description: "True VPN MFA built into the WireGuard® protocol layer, easy to use with defguad vpn desktop client. Defguard is NIS2 compliant.", 
-          icon: "lni-certificate" 
+          icon: "lni-certificate",
+          linkText: "Learn more",
+          linkUrl: "https://example.com" 
         },
         { 
           title: "Easy to deploy anywhere", 
           description: "Run and evaluate with few command lines then scale to production with Terraform we deliver. Deploy on-prem or in your private cloud.", 
-          icon: "lni-rocket" 
+          icon: "lni-rocket",
+          linkText: "Learn more",
+          linkUrl: "https://example.com"
         },
         { 
           title: "European", 
           description: "Based in Poland and backed by European investors, Defguard operates entirely under EU law — ensuring full compliance with European security standards and zero foreign legal exposure.", 
-          icon: "lni-world" 
+          icon: "lni-world",
+          linkText: "Learn more",
+          linkUrl: "https://example.com"
         }
       ]}
     />