feat: Redesign Home Page (#395)

Co-authored-by: Tushar Mathur <[email protected]> Co-authored-by: mehulmathur001 <[email protected]> Co-authored-by: mehulmathur16 <[email protected]>
tailcallhq · Aug 4, 2024 · eebac60 · eebac60
1 parent de4d947
commit eebac60
Show file tree

Hide file tree

Showing 22 changed files with 389 additions and 128 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/about/Founders.tsx b/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} />

diff --git a/src/components/home/Benefits.tsx b/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
diff --git a/src/components/home/BenefitsCard.tsx b/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
diff --git a/src/components/home/Configuration.tsx b/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>

diff --git a/src/components/home/CustomerFeedbackCard.tsx b/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
diff --git a/src/components/home/Partners.tsx b/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>

diff --git a/src/components/home/Testimonials.tsx b/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
diff --git a/src/components/home/index.tsx b/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 />

diff --git a/src/components/shared/Discover.tsx b/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">

diff --git a/src/constants/index.tsx b/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 simplifies GraphQL with a powerful configuration generator that can get thousands of APIs integrated in minutes. Configure with ease and deploy with confidence, knowing that complexities like batching, caching, error propagation and other forms of tuning are handled for you.",
+    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",
+  },
+]