chore: integrated more reasons section

Author: mehulmathur16

src/components/home/ChooseTailcall.tsx

@@ -1,9 +1,10 @@
 import React from "react"
-import {chooseTailcall} from "@site/src/constants"
+import { chooseTailcall, tailcallFeatures, Theme } from "@site/src/constants"
+import LinkButton from "../shared/LinkButton"
 
 const ChooseTailcall = (): JSX.Element => {
   return (
-    <>
+    <div className="flex flex-col items-center justify-center">
       <p className="text-title-large max-w-lg mx-auto sm:text-display-tiny lg:text-display-medium text-center my-SPACE_14 sm:mb-SPACE_16 sm:my-32">
         More reasons to choose tailcall.
       </p>
@@ -24,7 +25,19 @@ const ChooseTailcall = (): JSX.Element => {
           </div>
         ))}
       </div>
-    </>
+      <div className="flex flex-col lg:flex-row py-10 gap-y-SPACE_10 gap-x-SPACE_03 flex-wrap items-center justify-center">
+        {tailcallFeatures.map((item) => (
+          <div
+            className="flex p-6 border border-solid border-tailCall-border-dark-300 rounded-3xl items-center justify-center cursor-pointer"
+            key={item.id}
+          >
+            <img src={item.image} alt={`${item.title} Image`} height={24} width={24} />
+            <span className="text-content-tiny text-bold ml-2">{item.title}</span>
+          </div>
+        ))}
+      </div>
+      <LinkButton theme={Theme.Gray} onClick={() => console.log('hey')} title="View More" />
+    </div>
   )
 }
 

src/constants/index.tsx

@@ -37,7 +37,7 @@ export const partnerImages: PartnerImage[] = [
   },
 ]
 
-const Highlight = ({text}: {text: string}) => (
+const Highlight = ({ text }: { text: string }) => (
   <>
     <span className="text-content-tiny font-bold sm:text-title-tiny lg:text-title-small bg-tailCall-yellow rounded-[4px] sm:rounded-md px-SPACE_01">
       {text}
@@ -223,6 +223,49 @@ export const chooseTailcall: ChooseTailcall[] = [
   },
 ]
 
+export const tailcallFeatures: TailcallFeatures[] = [
+  {
+    id: 1,
+    title: "Powerful Batching Primitive",
+    image: require("@site/static/images/choose-tailcall/rocket.png").default,
+  },
+  {
+    id: 2,
+    title: "Extensions with plugins and JS support",
+    image: require("@site/static/images/choose-tailcall/grid.png").default,
+  },
+  {
+    id: 3,
+    title: "Field based Authentication & Authorisation",
+    image: require("@site/static/images/choose-tailcall/shield-tick.png").default,
+  },
+  {
+    id: 4,
+    title: "Protocol agnostic",
+    image: require("@site/static/images/choose-tailcall/check-done.png").default,
+  },
+  {
+    id: 5,
+    title: "Performance",
+    image: require("@site/static/images/choose-tailcall/line-chart-up.png").default,
+  },
+  {
+    id: 6,
+    title: "Security",
+    image: require("@site/static/images/choose-tailcall/lock.png").default,
+  },
+  {
+    id: 7,
+    title: "Edge Compatible",
+    image: require("@site/static/images/choose-tailcall/puzzle-piece.png").default,
+  },
+  {
+    id: 8,
+    title: "Compile time tracks",
+    image: require("@site/static/images/choose-tailcall/clock-stopwatch.png").default,
+  },
+]
+
 export const benefits: Benefits[] = [
   {
     id: 1,
@@ -439,7 +482,7 @@ export const pricingPlans: PricingPlans[] = [
 ]
 
 export const radioOptions: RadioOptions[] = [
-  {id: "1", name: "Evaluating", value: "evaluating"},
+  { id: "1", name: "Evaluating", value: "evaluating" },
   {
     id: "2",
     name: "Monolith",

src/types/index.d.ts

@@ -31,6 +31,12 @@ type ChooseTailcall = {
   image: string
 }
 
+type TailcallFeatures = {
+  id: number
+  title: string
+  image: string
+}
+
 type Benefits = {
   id: number
   title: string