🐛 Make feature cards fully clickable

[clubanderson]

Summary

The 6 feature cards in the About section were only clickable via the small "Learn more" link that appears on hover. Now the entire card is clickable.

Changes

• Added onClick and cursor-pointer to all 6 feature card divs
• Internal links (cards 1-3) use router.push()
• External links (cards 4-6) use window.open() with _blank
• Existing "Learn more" links still work as before

Test plan

• Click anywhere on each card — should navigate to the correct page
• Verify 3D tilt hover effect still works
• Verify "Learn more" link still works independently
• Test on mobile (tap anywhere on card)

[kubestellar-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign oksaumya for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[github-actions]

Thank you for your contribution! Your PR has been merged.

Check out what's new:

• KubeStellar Console — Live multi-cluster dashboard
• Marketplace — Community extensions
• Knowledge Base — Troubleshooting and how-tos

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey

[netlify]

✅ Deploy Preview for kubestellar-docs ready!

Name	Link
🔨 Latest commit	36a8516
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellar-docs/deploys/69bc3eb5b555a60008894616
😎 Deploy Preview	https://deploy-preview-1309--kubestellar-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

This PR makes the 6 “About” feature cards fully clickable by adding click handlers to the card containers, so users can navigate without needing to click the small “Learn more” link.

Changes:

• Added useRouter() and onClick handlers for internal-card navigation via router.push().
• Added onClick handlers for external-card navigation via window.open(..., "_blank").
• Added cursor-pointer styling to communicate clickability.

Comments suppressed due to low confidence (2)

src/components/master-page/AboutSection.tsx:161

• Because the card container has an onClick and it contains a nested , clicking the "Learn more" link will also bubble to the parent and trigger router.push(), causing duplicate navigation/history entries. Prevent the parent handler from running when the click originates from an anchor (e.g., stopPropagation on the Link click, or early-return in the parent handler when (e.target as HTMLElement).closest('a') is truthy), or refactor so the whole card is a single instead of mixing onClick + nested links.

          <div className="feature-card relative group perspective cursor-pointer" onClick={() => router.push("/docs/console/features/ai-features")}>
            <div className="card-3d-container relative transition-all duration-500 group-hover:rotate-y-10 w-full h-full transform-style-3d">
              <div className="absolute -inset-0.5 bg-gradient-to-r from-primary-600 to-purple-600 rounded-xl blur opacity-30 group-hover:opacity-90 transition duration-500"></div>
              <div className="relative bg-gray-800/50 backdrop-blur-md rounded-xl shadow-lg p-8 transition-all duration-300 transform group-hover:translate-y-[-8px] group-hover:shadow-xl border border-gray-700/50 h-full flex flex-col justify-between h-full">
                {/* Icon with animation */}
                <div className="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-8 w-8 text-white"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M5 12h14M12 5l7 7-7 7"
                    />
                  </svg>
                </div>

                <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-blue-400 transition-colors duration-300">
                  {t("card1Title")}
                </h3>

                <p className="text-gray-300 mb-6">{t("card1Description")}</p>

                {/* Animated arrow on hover */}
                <Link
                  href="/docs/console/features/ai-features"
                  className="block h-8 overflow-hidden"
                >

src/components/master-page/AboutSection.tsx:331

• For external cards, clicking the nested "Learn more" will also bubble to the parent onClick and call window.open(...), which can result in opening a new tab and also navigating the current tab to the external URL. Ensure clicks on the nested link don't trigger the parent handler (stopPropagation / target check), or make the entire card a single anchor element and remove the parent onClick.

          <div className="feature-card relative group perspective cursor-pointer" onClick={() => window.open("https://console.kubestellar.io/from-lens", "_blank")}>
            <div className="card-3d-container relative transition-all duration-500 group-hover:rotate-y-10 w-full h-full transform-style-3d">
              <div className="absolute -inset-0.5 bg-gradient-to-r from-primary-600 to-purple-600 rounded-xl blur opacity-30 group-hover:opacity-90 transition duration-500"></div>
              <div className="relative bg-gray-800/50 backdrop-blur-md rounded-xl shadow-lg p-8 transition-all duration-300 transform group-hover:translate-y-[-8px] group-hover:shadow-xl border border-gray-700/50 h-full flex flex-col justify-between h-full">
                {/* Icon with animation */}
                <div className="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-8 w-8 text-white"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M17.1973 9C17.0976 8.82774 16.9896 8.66089 16.8739 8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M17.811 13.5C17.2683 15.6084 15.6084 17.2683 13.5 17.811" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>

                  </svg>
                </div>

                <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-blue-400 transition-colors duration-300">
                  {t("card4Title")}
                </h3>

                <p className="text-gray-300 mb-6">{t("card4Description")}</p>
                <p className="text-gray-300 mb-6">{t("card4Details")}</p>
                {/* Animated arrow on hover */}
                <Link
                  href="https://console.kubestellar.io/from-lens"
                  className="block h-8 overflow-hidden"
                >
                  <div className="transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 text-primary-600 dark:text-primary-400 flex items-center">

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.