From 7667bcb6672d4f36deb869eae4a0a9cf3578801e Mon Sep 17 00:00:00 2001
From: Ezhil Shanmugham <ezhil930@gmail.com>
Date: Sun, 11 Aug 2024 16:17:48 +0530
Subject: [PATCH] fix: use anchor tags in the benefits section (#434)

---
 src/components/home/BenefitsCard.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/home/BenefitsCard.tsx b/src/components/home/BenefitsCard.tsx
index bf717ed581..8410441a10 100644
--- a/src/components/home/BenefitsCard.tsx
+++ b/src/components/home/BenefitsCard.tsx
@@ -3,18 +3,15 @@ import {benefits} from "@site/src/constants"
 import {ArrowRight} from "lucide-react"
 
 const BenefitsCard = (): JSX.Element => {
-  const handleClick = (url: string) => {
-    window.open(url, "_blank")
-  }
-
   return (
     <div className="mt-16 md:mb-0 mb-10">
       <div className="md:flex md:flex-wrap justify-center gap-10 w-[100%]">
         {benefits.map((item) => (
-          <div
-            className="group border border-solid border-tailCall-border-dark-300 rounded-3xl md:w-[40%] lg:w-[45%] md:px-10 px-4 py-2 pt-4 lg:flex benefits-drop-shadow hover:border-[#FDEA2E] md:mb-0 mb-6 cursor-pointer"
+          <a
+            className="group border border-solid border-tailCall-border-dark-300 rounded-3xl md:w-[40%] lg:w-[45%] md:px-10 px-4 py-2 pt-4 lg:flex benefits-drop-shadow hover:border-[#FDEA2E] md:mb-0 mb-6 cursor-pointer hover:no-underline"
             key={item.id}
-            onClick={() => handleClick(item.redirection_url)}
+            href={item.redirection_url}
+            target="_blank"
           >
             <div className="mr-4 md:mt-4">
               <img
@@ -32,7 +29,7 @@ const BenefitsCard = (): JSX.Element => {
               </p>
               <p className="text-content-tiny sm:text-content-small text-tailCall-light-600">{item.description}</p>
             </div>
-          </div>
+          </a>
         ))}
       </div>
     </div>