feat: tutorials page

docusaurus.config.ts

@@ -122,14 +122,18 @@ export default {
               to: "/docs",
               html: getNavDropdownItemHtml("/images/home/book.svg", "Docs Icon", "Docs"),
             },
-            {
-              to: "/graphql",
-              html: getNavDropdownItemHtml("/images/home/archive.svg", "Learn Icon", "Learn"),
-            },
             {
               to: "/releases",
               html: getNavDropdownItemHtml("/images/home/git-merge.svg", "Releases Icon", "Releases"),
             },
+            {
+              to: "/tutorials",
+              html: getNavDropdownItemHtml("/images/home/film.svg", "Tutorials Icon", "Tutorials"),
+            },
+            {
+              to: "/graphql",
+              html: getNavDropdownItemHtml("/images/home/archive.svg", "Learn Icon", "Learn"),
+            },
           ],
         },
         {

src/components/tutorials/TutorialCard.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import {BlogAuthor} from "@site/src/theme/BlogAuthor"
+import Link from "@docusaurus/Link"
+
+interface TutorialCardProps {
+  imgUrl: string
+  title: string
+  duration: string
+  authorName: string
+  authorImgUrl: string
+  redirectionUrl: string
+}
+
+const TutorialCard: React.FC<TutorialCardProps> = ({
+  imgUrl,
+  title,
+  duration,
+  authorName,
+  authorImgUrl,
+  redirectionUrl,
+}) => {
+  return (
+    <Link to={redirectionUrl} className="!no-underline">
+      <div className="flex flex-col rounded-md border border-solid border-tailCall-border-light-400 cursor-pointer">
+        <img src={imgUrl} />
+        <div className="flex flex-col p-6 gap-3 text-black">
+          <span className="text-content-mini">{duration}</span>
+          <span className="text-title-small line-clamp-2">{title}</span>
+          <BlogAuthor
+            author={{
+              name: authorName,
+              imageURL: authorImgUrl,
+            }}
+            containerClassName="mt-auto"
+            imgClassName="size-5"
+            textClassName="text-content-tiny"
+          />
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export default TutorialCard

src/components/tutorials/Tutorials.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import Section from "../shared/Section"
+import TutorialCard from "./TutorialCard"
+import {tutorialsList} from "@site/src/constants"
+
+const Tutorials = () => {
+  return (
+    <Section className="lg:pt-6">
+      <span className="text-display-small text-tailCall-dark-500">Tutorials</span>
+      <div className="grid grid-cols-3 gap-3 mt-6">
+        {tutorialsList.map((tutorial: TutorialItem, index: number) => {
+          const {imgUrl, title, duration, authorName, authorImgUrl, redirectionUrl} = tutorial
+          return (
+            <TutorialCard
+              key={index}
+              imgUrl={imgUrl}
+              title={title}
+              duration={duration}
+              authorName={authorName}
+              authorImgUrl={authorImgUrl}
+              redirectionUrl={redirectionUrl}
+            />
+          )
+        })}
+      </div>
+    </Section>
+  )
+}
+
+export default Tutorials

src/components/tutorials/index.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import Tutorials from "./Tutorials"
+
+const TutorialsPage = (): JSX.Element => {
+  return (
+    <>
+      <Tutorials />
+    </>
+  )
+}
+
+export default TutorialsPage

src/constants/index.tsx

@@ -639,3 +639,30 @@ export const footerLinks: FooterLink[] = [
     link: pageLinks.privacyPolicy,
   },
 ]
+
+export const tutorialsList: TutorialItem[] = [
+  {
+    imgUrl: require("@site/static/images/tutorials/infra.png").default,
+    title: "Powerful features for comprehensive protection",
+    duration: "23 : 32",
+    authorName: "Tushar Mathur",
+    authorImgUrl: "https://avatars.githubusercontent.com/u/194482?v=4",
+    redirectionUrl: "https://www.youtube.com/watch?v=ZbIVxRla6eI",
+  },
+  {
+    imgUrl: require("@site/static/images/tutorials/infra.png").default,
+    title: "Powerful features for comprehensive protection",
+    duration: "23 : 32",
+    authorName: "Tushar Mathur",
+    authorImgUrl: "https://avatars.githubusercontent.com/u/194482?v=4",
+    redirectionUrl: "https://www.youtube.com/watch?v=ZbIVxRla6eI",
+  },
+  {
+    imgUrl: require("@site/static/images/tutorials/infra.png").default,
+    title: "Powerful features for comprehensive protection",
+    duration: "23 : 32",
+    authorName: "Tushar Mathur",
+    authorImgUrl: "https://avatars.githubusercontent.com/u/194482?v=4",
+    redirectionUrl: "https://www.youtube.com/watch?v=ZbIVxRla6eI",
+  },
+]

src/constants/titles.ts

@@ -6,6 +6,7 @@ export const PageTitle = {
   ENTERPRISE: `Enterprise | ${tagline}`,
   CONTACT: `Contact | ${tagline}`,
   PLAYGROUND: `Playground | ${tagline}`,
+  TUTORIALS: `Tutorials | ${tagline}`,
 }
 
 export const PageDescription = {
@@ -15,4 +16,6 @@ export const PageDescription = {
   CONTACT: "Get in touch with us for any queries, feedback, or support. We are here to help you.",
   PLAYGROUND:
     "Play around with Tailcall's GraphQL playground to see how you can build and deploy GraphQL APIs in minutes.",
+  TUTORIALS:
+    "Master GraphQL with Tailcall's tutorials. Seamlessly integrate REST, Grpc, and GraphQL into a unified schema with hands-on examples.",
 }

src/pages/tutorials.tsx

@@ -0,0 +1,22 @@
+import React, {useEffect} from "react"
+import ReactGA from "react-ga4"
+import Layout from "@theme/Layout"
+import TutorialsPage from "../components/tutorials"
+import {useLocation} from "@docusaurus/router"
+import {PageDescription, PageTitle} from "../constants/titles"
+
+const Tutorials = () => {
+  const location = useLocation()
+
+  useEffect(() => {
+    ReactGA.send({hitType: "pageview", page: location.pathname, title: "Tutorials Page"})
+  }, [])
+
+  return (
+    <Layout title={PageTitle.TUTORIALS} description={PageDescription.TUTORIALS}>
+      <TutorialsPage />
+    </Layout>
+  )
+}
+
+export default Tutorials

src/theme/BlogAuthor/index.tsx

@@ -8,11 +8,12 @@ interface AuthorDisplayProps {
   }
   containerClassName?: string
   textClassName?: string
+  imgClassName?: string
 }
 
-export const BlogAuthor: React.FC<AuthorDisplayProps> = ({author, containerClassName, textClassName}) => (
+export const BlogAuthor: React.FC<AuthorDisplayProps> = ({author, containerClassName, textClassName, imgClassName}) => (
   <div className={clsx("flex items-center", containerClassName)}>
-    <img src={author.imageURL} alt={author.name} className="mr-2 size-6 rounded-full" />
+    <img src={author.imageURL} alt={author.name} className={clsx("mr-2 size-6 rounded-full", imgClassName)} />
     <span className={clsx("font-medium text-black", textClassName)}>{author.name}</span>
   </div>
 )

src/types/index.d.ts

@@ -157,3 +157,12 @@ type FooterLink = {
   name: string
   link: string
 }
+
+type TutorialItem = {
+  imgUrl: string
+  title: string
+  duration: string
+  authorName: string
+  authorImgUrl: string
+  redirectionUrl: string
+}