feat(420): integrated more reasons section (#422)

Co-authored-by: Tushar Mathur <[email protected]>

src/components/home/BenefitsCard.tsx

@@ -1,17 +1,17 @@
 import React from "react"
 import {benefits} from "@site/src/constants"
 import {ArrowRight} from "lucide-react"
+import Link from "@docusaurus/Link"
 
 const BenefitsCard = (): JSX.Element => {
   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) => (
-          <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 flex flex-col lg:flex-row"
+          <Link
+            className="group border-2 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 flex flex-col lg:flex-row"
             key={item.id}
             href={item.redirection_url}
-            target="_blank"
           >
             <div className="mr-4 md:mt-4">
               <img
@@ -29,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>
-          </a>
+          </Link>
         ))}
       </div>
     </div>

src/components/home/ChooseTailcall.tsx

@@ -1,30 +1,50 @@
 import React from "react"
-import {chooseTailcall} from "@site/src/constants"
+import {chooseTailcall, tailcallFeatures, Theme} from "@site/src/constants"
+import LinkButton from "../shared/LinkButton"
+import Link from "@docusaurus/Link"
 
 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>
       <div className="flex flex-col lg:flex-row space-y-SPACE_06 items-center justify-between lg:space-x-SPACE_06 lg:space-y-0">
         {chooseTailcall.map((item) => (
           <div
-            className="border border-solid border-tailCall-border-dark-300 w-full lg:min-h-[358px] lg:max-w-md rounded-3xl p-SPACE_04 flex flex-col items-start justify-between"
+            className="border-2 border-solid border-tailCall-border-dark-300 w-full lg:min-h-[358px] lg:max-w-md rounded-3xl p-SPACE_04 flex flex-col items-start justify-between"
             key={item.id}
           >
             <div className="h-16 w-16 sm:w-full sm:h-full">
               <img src={item.image} alt="Image Describing Why Tailcall" className="max-w-[72px] sm:max-w-[110px]" />
             </div>
 
             <div>
-              <p className="text-title-small sm:text-title-large mt-SPACE_10 mb-SPACE_02 sm:mb-0">{item.title}</p>
+              <p className="text-title-small sm:text-title-large mt-SPACE_10 mb-SPACE_03">{item.title}</p>
               <p className="text-content-tiny sm:text-content-small text-tailCall-light-600">{item.description}</p>
             </div>
           </div>
         ))}
       </div>
-    </>
+      <div className="flex py-10 gap-y-SPACE_04 gap-x-SPACE_04 md:gap-y-SPACE_06 md:gap-x-SPACE_06 flex-wrap md:items-center md:justify-center">
+        {tailcallFeatures.map((item) => (
+          <Link
+            to={item.redirection_url}
+            className="flex w-fit p-6 border-2 border-solid border-tailCall-border-dark-300 rounded-xl md:items-center md:justify-center cursor-pointer hover:no-underline text-tailCall-light-300 hover:text-tailCall-light-300 hover:border-[#FDEA2E] benefits-drop-shadow"
+            key={item.id}
+          >
+            <img src={item.image} alt={`${item.title} Image`} height={24} width={24} />
+            <span className="text-content-small lg:text-title-tiny ml-2">{item.title}</span>
+          </Link>
+        ))}
+      </div>
+      <LinkButton
+        width={"medium"}
+        theme={Theme.Gray}
+        href={"/docs/graphql-configuration-generation-with-tailcall/"}
+        title="View More"
+      />
+    </div>
   )
 }
 

src/components/home/GraphContainer.tsx

@@ -43,7 +43,7 @@ const GraphContainer = ({
   }, [])
 
   return (
-    <div className="border border-solid border-tailCall-border-dark-300 h-[300px] lg:h-[400px] w-[95%] sm:w-[680px] rounded-3xl sm:rounded-[32px] flex flex-col relative">
+    <div className="border-2 border-solid border-tailCall-border-dark-300 h-[300px] lg:h-[400px] w-[95%] sm:w-[680px] rounded-3xl sm:rounded-[32px] flex flex-col relative overflow-hidden">
       <div className="flex flex-col px-SPACE_06 py-SPACE_04 lg:px-SPACE_12 lg:py-SPACE_08 z-10">
         <span className="text-content-small sm:text-content-medium text-tailCall-light-100">{metricTitle}</span>
 

src/components/shared/LinkButton.tsx

@@ -58,7 +58,7 @@ const LinkButton = ({title, Icon, theme, onClick, href, width = "auto", disabled
   }
 
   const renderBackgroundElements = (buttonTheme: Theme) => {
-    if (buttonTheme === Theme.Dark) {
+    if (buttonTheme === Theme.Dark || buttonTheme === Theme.Gray) {
       return (
         <>
           {/* Dark theme background */}
@@ -96,7 +96,7 @@ const LinkButton = ({title, Icon, theme, onClick, href, width = "auto", disabled
       {renderBackgroundElements(theme)}
 
       {/* Render Icon if provided */}
-      {Icon && <Icon className="w-6 h-6 sm:w-7 sm:h-7 lg:h-8 lg:w-8 text-white" />}
+      {Icon && <Icon className="w-6 h-6 sm:w-7 sm:h-7 lg:h-8 lg:w-8 text-white z-[1]" />}
 
       {/* Render title if provided */}
       {title && <span className="z-20"> {title}</span>}

src/constants/index.tsx

@@ -223,6 +223,57 @@ export const chooseTailcall: ChooseTailcall[] = [
   },
 ]
 
+export const tailcallFeatures: TailcallFeatures[] = [
+  {
+    id: 1,
+    title: "Powerful Batching Primitive",
+    image: require("@site/static/images/choose-tailcall/rocket.png").default,
+    redirection_url: "/docs/graphql-n-plus-one-problem-solved-tailcall/#using-batch-apis",
+  },
+  {
+    id: 2,
+    title: "Extensions with plugins and JS support",
+    image: require("@site/static/images/choose-tailcall/grid.png").default,
+    redirection_url: "/docs/graphql-javascript-customization/",
+  },
+  {
+    id: 3,
+    title: "Field based Authentication & Authorisation",
+    image: require("@site/static/images/choose-tailcall/shield-tick.png").default,
+    redirection_url: "/docs/field-level-access-control-graphql-authentication/",
+  },
+  {
+    id: 4,
+    title: "Protocol agnostic",
+    image: require("@site/static/images/choose-tailcall/check-done.png").default,
+    redirection_url: "/docs/graphql-grpc-tailcall/",
+  },
+  {
+    id: 5,
+    title: "Performance",
+    image: require("@site/static/images/choose-tailcall/line-chart-up.png").default,
+    redirection_url: "https://github.com/tailcallhq/graphql-benchmarks",
+  },
+  {
+    id: 6,
+    title: "Security",
+    image: require("@site/static/images/choose-tailcall/lock.png").default,
+    redirection_url: "/docs/field-level-access-control-graphql-authentication/",
+  },
+  {
+    id: 7,
+    title: "Edge Compatible",
+    image: require("@site/static/images/choose-tailcall/puzzle-piece.png").default,
+    redirection_url: "/docs/deploy-graphql-github-actions/",
+  },
+  {
+    id: 8,
+    title: "Compile time checks",
+    image: require("@site/static/images/choose-tailcall/clock-stopwatch.png").default,
+    redirection_url: "/docs/tailcall-graphql-cli/#check",
+  },
+]
+
 export const benefits: Benefits[] = [
   {
     id: 1,

src/types/index.d.ts

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