feat: Redesign Home Page

src/components/about/Founders.tsx

@@ -24,7 +24,7 @@ const Founder = ({founder}: Founder): JSX.Element => {
 
       <div className="flex flex-col space-y-SPACE_02 items-start">
         <span className="text-content-small font-bold sm:text-title-small">{founder.name}</span>
-        <span className="text-content-tiny sm:text-content-small text-tailCall-dark-100">{founder.title}</span>
+        <span className="text-content-tiny sm:text-content-small text-tailCall-dark-500">{founder.title}</span>
         {/* <div className="flex items-center gap-x-SPACE_05">
           {founder.socialLinks.map((social) => (
             <SocialIcon key={social.id} social={social} />

src/components/home/Benefits.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import Heading from "@theme/Heading"
+import SectionTitle from "../shared/SectionTitle"
+import Partners from "./Partners"
+import BenefitsCard from "./BenefitsCard"
+
+const Benefits = (): JSX.Element => {
+  return (
+    <section className="w-full pt-20 p-6 md:pb-20  lg:px-SPACE_16 bg-[#1C1D1F] grid-background">
+      <div className="sm:max-w-7xl mx-SPACE_04 sm:mx-SPACE_10 lg:mx-auto  py-SPACE_08 sm:py-SPACE_20">
+        <div>
+          <SectionTitle title="Benefits" />
+          <div className=" h-fit sm:flex-row sm:items-center sm:space-x-SPACE_10 lg:space-x-SPACE_20">
+            <Heading
+              as="h3"
+              className="text-title-large sm:text-display-tiny lg:text-display-small text-white md:w-[65%]"
+            >
+              Tailcall gives you a best-practice GraphQL backend that checks all the boxes.
+            </Heading>
+          </div>
+        </div>
+        <BenefitsCard />
+        <Partners />
+      </div>
+    </section>
+  )
+}
+
+export default Benefits

src/components/home/BenefitsCard.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+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"
+            key={item.id}
+            onClick={() => handleClick(item.redirection_url)}
+          >
+            <div className="mr-4 md:mt-4">
+              <img
+                src={item.image}
+                alt="Image Describing Why Tailcall"
+                className="max-w-[72px] lg:w-[64px] sm:max-w-[110px]"
+              />
+            </div>
+            <div className="mt-4 flex flex-col">
+              <p className="text-title-small text-white sm:text-title-large mb-SPACE_02 sm:mb-0 flex flex-start">
+                {item.title}{" "}
+                <span className="ml-4 md:text-gray-400 group-hover:text-white">
+                  <ArrowRight />
+                </span>
+              </p>
+              <p className="text-content-tiny sm:text-content-small text-tailCall-light-600">{item.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default BenefitsCard

src/components/home/Configuration.tsx

@@ -13,9 +13,15 @@ const Configuration = (): JSX.Element => {
           Get <span className="rounded-lg px-SPACE_02 bg-tailCall-yellow">Started</span>
         </Heading>
         <p className="text-content-small sm:text-content-medium mb-SPACE_11">
-          Setup Tailcall via npm to build a high-performance <b>GraphQL API</b> on top of existing REST endpoints.
-          Checkout our <Link href="/docs">docs</Link> for detailed tutorials and guides.
+          Setup the Tailcall instantly via npm and unlock the power of high-performance API orchestration.
         </p>
+        <div>
+          <h5>More</h5>
+          <p className="text-content-small sm:text-content-medium mb-SPACE_11">
+            To dive deeper into TailCall checkout our <Link href="/docs">docs</Link> for detailed tutorials. Ideal for
+            devs at any level, it's packed with advanced tips, powerful operators and best practices.
+          </p>
+        </div>
       </div>
       <div>
         <CodeBlock language="bash">npm i -g @tailcallhq/tailcall</CodeBlock>

src/components/home/CustomerFeedbackCard.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+// @site/src/utils/index.ts
+
+type CustomerFeedbackCardProps = {
+  classNames?: string
+  citation: string
+  designation: string
+  name?: string
+  department?: string
+  isCenterCard: boolean
+  display: string
+}
+
+const CustomerFeedbackCard: React.FC<CustomerFeedbackCardProps> = ({
+  classNames,
+  citation,
+  designation,
+  name,
+  department,
+  isCenterCard,
+  display,
+}) => {
+  return (
+    <div
+      className={`customer-feedback-card md:w-[33%] flex flex-col items-center justify-between bg-tailCall-dark-600 tailcall-light-100 text-white py-SPACE_06 px-SPACE_06 text-center text-content-small gap-y-SPACE_06 pb-10 ${classNames} ${
+        isCenterCard && "md:!relative md:-top-10"
+      }`}
+    >
+      {display === "Show" && department && (
+        <>
+          <span className={`sm:text-content-medium lg:text-content-large !font-bold !text-title-large`}>
+            {`Loved by `}
+            <span className={isCenterCard ? `text-tailCall-yellow` : ""}>{department}</span>
+          </span>
+        </>
+      )}
+      <span className="text-content-small sm:text-content-medium">{`“${citation}”`}</span>
+      <span className="flex flex-col">
+        {display === "Show" && name && (
+          <span className="text-content-small sm:text-content-medium lg:text-content-large !font-bold">{name}</span>
+        )}
+        <span className="text-content-tiny sm:text-content-small">{designation}</span>
+      </span>
+    </div>
+  )
+}
+
+export default CustomerFeedbackCard

src/components/home/Partners.tsx

@@ -5,8 +5,12 @@ import GreaterThanUnderscoreIcon from "@site/static/icons/basic/gt-undescore-gra
 import {partnerImages} from "@site/src/constants"
 
 const Partners = (): JSX.Element => {
+  const handleClick = () => {
+    window.open("/docs/deploy-graphql-github-actions/", "_blank")
+  }
+
   return (
-    <section className="mt-SPACE_08">
+    <section className="md:mt-SPACE_16 mt-space_08 cursor-pointer" onClick={handleClick}>
       <div className="text-content-small font-bold sm:text-title-tiny lg:text-title-small text-tailCall-light-500 text-center space-x-1">
         <GreaterThanUnderscoreIcon className="h-4 w-6" />
         <span>Deploy Anywhere</span>

src/components/home/Testimonials.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import Heading from "@theme/Heading"
+import CustomerFeedbackCard from "./CustomerFeedbackCard"
+import {customerFeedbacks} from "@site/src/constants"
+
+export enum TestimonialDisplay {
+  Hide = "Hide",
+  Show = "Show",
+  Anon = "Anon",
+}
+
+interface AppConfig {
+  testimonials: TestimonialDisplay
+}
+
+const config: AppConfig = {
+  testimonials: TestimonialDisplay.Hide, // Default value
+}
+
+const Testimonials = () => {
+  if (config.testimonials === TestimonialDisplay.Hide) {
+    return null
+  }
+
+  return (
+    <section className="customer-container !bg-tailCall-dark-600 h-full w-full text-tailCall-light-100 lg:px-SPACE_16 !bg-contain md:!bg-center">
+      <div className="sm:max-w-7xl mx-SPACE_04 sm:mx-SPACE_10 lg:mx-auto sm:py-SPACE_20 py-SPACE_20 md:pt-SPACE_21 md:pb-SPACE_20">
+        <div className="flex flex-row items-center justify-center">
+          <Heading
+            as="h5"
+            className="text-title-large sm:text-display-tiny lg:text-display-medium flex flex-col items-center md:flex-row"
+          >
+            <span>Our Customers</span>
+            <span className="bg-tailCall-yellow rounded-lg text-black px-SPACE_01 ml-SPACE_02">love us!</span>
+          </Heading>
+        </div>
+        <div className="flex flex-col space-y-SPACE_10 md:flex-row md:space-x-SPACE_02 md:space-y-0 mt-SPACE_18">
+          {customerFeedbacks.map((feedback) => (
+            <CustomerFeedbackCard
+              key={feedback.id}
+              isCenterCard={feedback.id === 2}
+              citation={feedback.citation}
+              designation={feedback.designation}
+              name={feedback?.name}
+              department={feedback?.department}
+              display={config.testimonials}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Testimonials

src/components/home/index.tsx

@@ -1,24 +1,19 @@
 import React from "react"
 
 import Banner from "./Banner"
-import Features from "./Features"
 import Graph from "./Graph"
-import LegacyGateway from "./TheProblem"
-import MoreFeatures from "./MoreFeatures"
-import Partners from "./Partners"
+import Benefits from "./Benefits"
 import Discover from "../shared/Discover"
 import Configuration from "./Configuration"
 import Playground from "./Playground"
-
+import Testimonials from "./Testimonials"
 const HomePage = (): JSX.Element => {
   return (
     <div className="">
       <Banner />
       <Configuration />
-      <Partners />
-      <LegacyGateway />
-      <Features />
-      <MoreFeatures />
+      <Testimonials />
+      <Benefits />
       <Graph />
       {/* <Playground /> */}
       <Discover />

src/components/shared/Discover.tsx

@@ -11,11 +11,11 @@ const Discover = (): JSX.Element => {
   return (
     <section>
       <div className="bg-tailCall-yellow relative flex items-center justify-center h-[208px] sm:h-[452px]">
-        <BgTailcall className="sm:w-[90%] w-full absolute -bottom-36 sm:-bottom-28 lg:-bottom-SPA16" />
+        <BgTailcall className="sm:w-[90%] w-full absolute -bottom-36 sm:-bottom-10 lg:-bottom-SPA16" />
 
         <div className="flex flex-col items-center absolute max-w-3xl space-y-SPACE_04 sm:space-y-SPACE_06">
           <Heading as="h5" className="text-title-semi-large sm:text-display-medium text-center mb-0">
-            Has this sparked your interest?
+            Discover the power of enterprise solution.
           </Heading>
 
           <div className="flex space-x-SPACE_03 sm:space-x-SPACE_06">

src/constants/index.tsx

@@ -223,6 +223,65 @@ export const chooseTailcall: ChooseTailcall[] = [
   },
 ]
 
+export const benefits: Benefits[] = [
+  {
+    id: 1,
+    title: "Secure",
+    description:
+      "Tailcaill has been validated against a comprehensive database of GraphQL vulnerabilities. Rest easy knowing your GraphQL backends are secure.",
+    image: require("@site/static/images/home/secure-icon.png").default,
+    redirection_url: "/docs/field-level-access-control-graphql-authentication/",
+  },
+  {
+    id: 2,
+    title: "High-Performance",
+    description:
+      "Tailcall performs ahead-of-time optimizations based on analysis of the schema and data dependencies. Deploy GraphQL without compromises.",
+    image: require("@site/static/images/home/performance.png").default,
+    redirection_url: "https://github.com/tailcallhq/graphql-benchmarks",
+  },
+  {
+    id: 3,
+    title: "Statically Verified",
+    description:
+      "Tailcall statically verifies that GraphQL schemas match resolvers and warns about N + 1 issues. Deploy new APIs with confidence.",
+    image: require("@site/static/images/home/statically-verified-icon.png").default,
+    redirection_url: "/docs/graphql-n-plus-one-problem-solved-tailcall/",
+  },
+  {
+    id: 4,
+    title: "Simple",
+    description:
+      "Tailcall frees you from implementing batching, caching, error propagation, cancellation, and tuning. Enjoy designing the perfect GraphQL schema.",
+    image: require("@site/static/images/home/simple-icon.png").default,
+    redirection_url: "/docs/tailcall-dsl-graphql-custom-directives/",
+  },
+  {
+    id: 5,
+    title: "Customizable",
+    description:
+      "Write custom Javascript to customize any aspect of your GraphQL backend. Leverage this escape hatch to satisfy any requirement.",
+    image: require("@site/static/images/home/customizable-icon.png").default,
+    redirection_url: "/docs/graphql-javascript-customization/",
+  },
+  {
+    id: 6,
+    title: "Plug & Play",
+    description:
+      "Engineered to stay out of your way, shipping as a single executable with no dependencies or requirements. Get started quickly and easily.",
+    image: require("@site/static/images/home/plug-play-icon.png").default,
+    redirection_url: "/docs/",
+  },
+  {
+    id: 7,
+    title: "Open Source",
+    description:
+      "Tailcall is developed and released under the Apache 2 open source license, the gold standard for OSS. Embrace a vendor-neutral solution.",
+    image: require("@site/static/images/home/open-source-icon.png").default,
+    redirection_url: "https://github.com/tailcallhq/tailcall",
+  },
+]
+
 export const enterpriseFeatures: EnterpriseFeature[] = [
   {
     id: 1,
@@ -404,3 +463,27 @@ export enum Theme {
   Dark = "dark",
   Gray = "gray",
 }
+
+export const customerFeedbacks: CustomerFeedback[] = [
+  {
+    id: 1,
+    citation: `I stopped writing orchestration code, and now I get low-latency GraphQL APIs quickly, which let me ship low-latency apps.`,
+    designation: `Sr. Frontend Engineer - Big Co. Inc.`,
+    name: "John Doe",
+    department: "Front-end",
+  },
+  {
+    id: 2,
+    citation: `I save so much time building APIs that are better than I could write by hand. Front-end engineers finally leave me alone!`,
+    designation: `Sr. Backend Engineer - Big Co. Inc.`,
+    name: "John Doe",
+    department: "Backend",
+  },
+  {
+    id: 3,
+    citation: `I get the telemetry I need to monitor our GraphQL APIs  with a runtime that’s easy to scale, which doesn’t surprise me in production.`,
+    designation: `Sr. Frontend Engineer - Big Co. Inc.`,
+    name: "John Doe",
+    department: "Ops",
+  },
+]