Initial commit

components/blocks-renderer.tsx

@@ -0,0 +1,37 @@
+import type { Page, PageBlocks } from "../tina/__generated__/types";
+import { Content } from "./blocks/content";
+import { Features } from "./blocks/features";
+import { Hero } from "./blocks/hero";
+import { Testimonial } from "./blocks/testimonial";
+import { tinaField } from "tinacms/dist/react";
+
+export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
+  return (
+    <>
+      {props.blocks
+        ? props.blocks.map(function (block, i) {
+            return (
+              <div key={i} data-tina-field={tinaField(block)}>
+                <Block {...block} />
+              </div>
+            );
+          })
+        : null}
+    </>
+  );
+};
+
+const Block = (block: PageBlocks) => {
+  switch (block.__typename) {
+    case "PageBlocksContent":
+      return <Content data={block} />;
+    case "PageBlocksHero":
+      return <Hero data={block} />;
+    case "PageBlocksFeatures":
+      return <Features data={block} />;
+    case "PageBlocksTestimonial":
+      return <Testimonial data={block} />;
+    default:
+      return null;
+  }
+};

components/blocks/content.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+import type { TinaTemplate } from "tinacms";
+import { PageBlocksContent } from "../../tina/__generated__/types";
+import { tinaField } from "tinacms/dist/react";
+
+export const Content = ({ data }: { data: PageBlocksContent }) => {
+  return (
+    <Section color={data.color}>
+      <Container
+        className={`prose prose-lg ${
+          data.color === "primary" ? `prose-primary` : `dark:prose-dark`
+        }`}
+        data-tina-field={tinaField(data, "body")}
+        size="large"
+        width="medium"
+      >
+        <TinaMarkdown content={data.body} />
+      </Container>
+    </Section>
+  );
+};
+
+export const contentBlockSchema: TinaTemplate = {
+  name: "content",
+  label: "Content",
+  ui: {
+    previewSrc: "/blocks/content.png",
+    defaultItem: {
+      body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.",
+    },
+  },
+  fields: [
+    {
+      type: "rich-text",
+      label: "Body",
+      name: "body",
+    },
+    {
+      type: "string",
+      label: "Color",
+      name: "color",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Tint", value: "tint" },
+        { label: "Primary", value: "primary" },
+      ],
+    },
+  ],
+};

components/blocks/features.tsx

@@ -0,0 +1,130 @@
+import { Section } from "../util/section";
+import { Container } from "../util/container";
+import { Icon } from "../util/icon";
+import { iconSchema } from "../util/icon";
+import {
+  PageBlocksFeatures,
+  PageBlocksFeaturesItems,
+} from "../../tina/__generated__/types";
+import { tinaField } from "tinacms/dist/react";
+
+export const Feature = ({
+  featuresColor,
+  data,
+}: {
+  featuresColor: string;
+  data: PageBlocksFeaturesItems;
+}) => {
+  return (
+    <div
+      data-tina-field={tinaField(data)}
+      className="flex-1 flex flex-col gap-6 text-center items-center lg:items-start lg:text-left max-w-xl mx-auto"
+      style={{ flexBasis: "16rem" }}
+    >
+      {data.icon && (
+        <Icon
+          tinaField={tinaField(data, "icon")}
+          parentColor={featuresColor}
+          data={{ size: "large", ...data.icon }}
+        />
+      )}
+      {data.title && (
+        <h3
+          data-tina-field={tinaField(data, "title")}
+          className="text-2xl font-semibold title-font"
+        >
+          {data.title}
+        </h3>
+      )}
+      {data.text && (
+        <p
+          data-tina-field={tinaField(data, "text")}
+          className="text-base opacity-80 leading-relaxed"
+        >
+          {data.text}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const Features = ({ data }: { data: PageBlocksFeatures }) => {
+  return (
+    <Section color={data.color}>
+      <Container
+        className={`flex flex-wrap gap-x-10 gap-y-8 text-left`}
+        size="large"
+      >
+        {data.items &&
+          data.items.map(function (block, i) {
+            return <Feature featuresColor={data.color} key={i} data={block} />;
+          })}
+      </Container>
+    </Section>
+  );
+};
+
+const defaultFeature = {
+  title: "Here's Another Feature",
+  text: "This is where you might talk about the feature, if this wasn't just filler text.",
+  icon: {
+    color: "",
+    style: "float",
+    name: "",
+  },
+};
+
+export const featureBlockSchema = {
+  name: "features",
+  label: "Features",
+  ui: {
+    previewSrc: "/blocks/features.png",
+    defaultItem: {
+      items: [defaultFeature, defaultFeature, defaultFeature],
+    },
+  },
+  fields: [
+    {
+      type: "object",
+      label: "Feature Items",
+      name: "items",
+      list: true,
+      ui: {
+        itemProps: (item) => {
+          return {
+            label: item?.title,
+          };
+        },
+        defaultItem: {
+          ...defaultFeature,
+        },
+      },
+      fields: [
+        iconSchema,
+        {
+          type: "string",
+          label: "Title",
+          name: "title",
+        },
+        {
+          type: "string",
+          label: "Text",
+          name: "text",
+          ui: {
+            component: "textarea",
+          },
+        },
+      ],
+    },
+    {
+      type: "string",
+      label: "Color",
+      name: "color",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Tint", value: "tint" },
+        { label: "Primary", value: "primary" },
+      ],
+    },
+  ],
+};

components/blocks/hero.tsx

@@ -0,0 +1,184 @@
+import * as React from "react";
+import { Actions } from "../util/actions";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+import type { TinaTemplate } from "tinacms";
+import { PageBlocksHero } from "../../tina/__generated__/types";
+import { tinaField } from "tinacms/dist/react";
+
+export const Hero = ({ data }: { data: PageBlocksHero }) => {
+  const headlineColorClasses = {
+    blue: "from-blue-400 to-blue-600",
+    teal: "from-teal-400 to-teal-600",
+    green: "from-green-400 to-green-600",
+    red: "from-red-400 to-red-600",
+    pink: "from-pink-400 to-pink-600",
+    purple: "from-purple-400 to-purple-600",
+    orange: "from-orange-300 to-orange-600",
+    yellow: "from-yellow-400 to-yellow-600",
+  };
+
+  return (
+    <Section color={data.color}>
+      <Container
+        size="large"
+        className="grid grid-cols-1 md:grid-cols-5 gap-14 items-center justify-center"
+      >
+        <div className="row-start-2 md:row-start-1 md:col-span-3 text-center md:text-left">
+          {data.tagline && (
+            <h2
+              data-tina-field={tinaField(data, "tagline")}
+              className="relative inline-block px-3 py-1 mb-8 text-md font-bold tracking-wide title-font z-20"
+            >
+              {data.tagline}
+              <span className="absolute w-full h-full left-0 top-0 rounded-full -z-1 bg-current opacity-7"></span>
+            </h2>
+          )}
+          {data.headline && (
+            <h3
+              data-tina-field={tinaField(data, "headline")}
+              className={`w-full relative	mb-10 text-5xl font-extrabold tracking-normal leading-tight title-font`}
+            >
+              <span
+                className={"bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-100"}
+              >
+                {data.headline}
+              </span>
+            </h3>
+          )}
+          {data.text && (
+            <div
+              data-tina-field={tinaField(data, "text")}
+              className={"prose prose-lg mx-auto md:mx-0 mb-10 prose-primary" }
+            >
+              <TinaMarkdown content={data.text} />
+            </div>
+          )}
+          {data.actions && (
+            <Actions
+              className="justify-center md:justify-start py-2"
+              parentColor={data.color}
+              actions={data.actions}
+            />
+          )}
+        </div>
+        {data.image && (
+          <div
+            data-tina-field={tinaField(data.image, "src")}
+            className="relative row-start-1 md:col-span-2 flex justify-center"
+          >
+            <img
+              className="absolute w-full rounded-lg max-w-xs md:max-w-none h-auto blur-2xl brightness-150 contrast-[0.9] dark:brightness-150 saturate-200 opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-hard-light"
+              src={data.image.src}
+              aria-hidden="true"
+            />
+            <img
+              className="relative z-10 w-full max-w-xs rounded-lg md:max-w-none h-auto"
+              alt={data.image.alt}
+              src={data.image.src}
+            />
+          </div>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export const heroBlockSchema: TinaTemplate = {
+  name: "hero",
+  label: "Hero",
+  ui: {
+    previewSrc: "/blocks/hero.png",
+    defaultItem: {
+      tagline: "Here's some text above the other text",
+      headline: "This Big Text is Totally Awesome",
+      text: "Phasellus scelerisque, libero eu finibus rutrum, risus risus accumsan libero, nec molestie urna dui a leo.",
+    },
+  },
+  fields: [
+    {
+      type: "string",
+      label: "Tagline",
+      name: "tagline",
+    },
+    {
+      type: "string",
+      label: "Headline",
+      name: "headline",
+    },
+    {
+      label: "Text",
+      name: "text",
+      type: "rich-text",
+    },
+    {
+      label: "Actions",
+      name: "actions",
+      type: "object",
+      list: true,
+      ui: {
+        defaultItem: {
+          label: "Action Label",
+          type: "button",
+          icon: true,
+          link: "/",
+        },
+        itemProps: (item) => ({ label: item.label }),
+      },
+      fields: [
+        {
+          label: "Label",
+          name: "label",
+          type: "string",
+        },
+        {
+          label: "Type",
+          name: "type",
+          type: "string",
+          options: [
+            { label: "Button", value: "button" },
+            { label: "Link", value: "link" },
+          ],
+        },
+        {
+          label: "Icon",
+          name: "icon",
+          type: "boolean",
+        },
+        {
+          label: "Link",
+          name: "link",
+          type: "string",
+        },
+      ],
+    },
+    {
+      type: "object",
+      label: "Image",
+      name: "image",
+      fields: [
+        {
+          name: "src",
+          label: "Image Source",
+          type: "image",
+        },
+        {
+          name: "alt",
+          label: "Alt Text",
+          type: "string",
+        },
+      ],
+    },
+    {
+      type: "string",
+      label: "Color",
+      name: "color",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Tint", value: "tint" },
+        { label: "Primary", value: "primary" },
+      ],
+    },
+  ],
+};

components/blocks/testimonial.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import type { TinaTemplate } from "tinacms";
+import { PageBlocksTestimonial } from "../../tina/__generated__/types";
+import { tinaField } from "tinacms/dist/react";
+
+export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
+  return (
+    <Section color={data.color}>
+      <Container size="large">
+        <blockquote>
+          <div
+            className={`relative z-10 max-w-3xl mx-auto text-4xl lg:text-5xl font-bold tracking-normal text-center title-font ${
+              data.color === "primary"
+                ? `text-white`
+                : `text-gray-700 dark:text-gray-50`
+            }`}
+          >
+            <span
+              className={`block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-2	-left-4 leading-4 -z-1`}
+            >
+              &ldquo;
+            </span>
+            <p
+              data-tina-field={tinaField(data, `quote`)}
+              className="relative opacity-95"
+            >
+              {data.quote}
+            </p>
+            <span
+              className={`block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-3	-right-4 leading-4 -z-1`}
+            >
+              &rdquo;
+            </span>
+          </div>
+          <div className={`my-8 flex-grow-0`}>
+            <span
+              className={`block mx-auto h-0.5 w-1/6 ${
+                data.color === "primary"
+                  ? `bg-blue-600`
+                  : `bg-gray-200 dark:bg-gray-700`
+              }`}
+            ></span>
+          </div>
+          <footer className="text-center">
+            <p
+              data-tina-field={tinaField(data, `author`)}
+              className={`tracking-wide title-font font-bold text-lg ${
+                data.color === "primary"
+                  ? `text-blue-200`
+                  : `text-blue-500 dark:text-blue-300`
+              }`}
+            >
+              {data.author}
+            </p>
+          </footer>
+        </blockquote>
+      </Container>
+    </Section>
+  );
+};
+
+export const testimonialBlockSchema: TinaTemplate = {
+  name: "testimonial",
+  label: "Testimonial",
+  ui: {
+    previewSrc: "/blocks/testimonial.png",
+    defaultItem: {
+      quote:
+        "There are only two hard things in Computer Science: cache invalidation and naming things.",
+      author: "Phil Karlton",
+      color: "primary",
+    },
+  },
+  fields: [
+    {
+      type: "string",
+      ui: {
+        component: "textarea",
+      },
+      label: "Quote",
+      name: "quote",
+    },
+    {
+      type: "string",
+      label: "Author",
+      name: "author",
+    },
+    {
+      type: "string",
+      label: "Color",
+      name: "color",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Tint", value: "tint" },
+        { label: "Primary", value: "primary" },
+      ],
+    },
+  ],
+};

components/layout/footer/footer.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import Link from "next/link";
+import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
+import { AiFillInstagram } from "react-icons/ai";
+import { Container } from "../../util/container";
+import { RawRenderer } from "./rawRenderer";
+import { Icon } from "../../util/icon";
+
+export const Footer = ({ data, icon, rawData }) => {
+  const socialIconClasses = "h-7 w-auto";
+  const socialIconColorClasses = {
+    blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300",
+    teal: "text-teal-500 dark:text-teal-400 hover:text-teal-300",
+    green: "text-green-500 dark:text-green-400 hover:text-green-300",
+    red: "text-red-500 dark:text-red-400 hover:text-red-300",
+    pink: "text-pink-500 dark:text-pink-400 hover:text-pink-300",
+    purple: "text-purple-500 dark:text-purple-400 hover:text-purple-300",
+    orange: "text-orange-500 dark:text-orange-400 hover:text-orange-300",
+    yellow: "text-yellow-500 dark:text-yellow-400 hover:text-yellow-300",
+    primary: "text-white opacity-80 hover:opacity-100",
+  };
+
+  const footerColor = {
+    default:
+      "text-gray-800 from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000",
+    primary: {
+      blue: "text-white from-blue-500 to-blue-700",
+      teal: "text-white from-teal-500 to-teal-600",
+      green: "text-white from-green-500 to-green-600",
+      red: "text-white from-red-500 to-red-600",
+      pink: "text-white from-pink-500 to-pink-600",
+      purple: "text-white from-purple-500 to-purple-600",
+      orange: "text-white from-orange-500 to-orange-600",
+      yellow: "text-white from-yellow-500 to-yellow-600",
+    },
+  };
+
+  const footerColorCss = footerColor.default;
+
+  return (
+    <footer className={`bg-gradient-to-br ${footerColorCss}`}>
+      <Container className="relative" size="small">
+        <div className="flex justify-between items-center gap-6 flex-wrap">
+          <Link
+            href="/"
+            className="group mx-2 flex items-center font-bold tracking-tight text-gray-400 dark:text-gray-300 opacity-50 hover:opacity-100 transition duration-150 ease-out whitespace-nowrap"
+          >
+            <Icon
+              parentColor={data.color}
+              data={{
+                name: icon.name,
+                color: data.color === "primary" ? "primary" : icon.color,
+                style: icon.style,
+              }}
+              className="inline-block h-10 w-auto group-hover:text-orange-500"
+            />
+          </Link>
+          <div className="flex gap-4">
+            {data.social && data.social.facebook && (
+              <a
+                className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
+                href={data.social.facebook}
+                target="_blank"
+              >
+                <FaFacebookF
+                  className={`${socialIconClasses} ${
+                    socialIconColorClasses["primary"]
+                  }`}
+                />
+              </a>
+            )}
+            {data.social && data.social.twitter && (
+              <a
+                className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
+                href={data.social.twitter}
+                target="_blank"
+              >
+                <FaTwitter
+                  className={`${socialIconClasses} ${
+                    socialIconColorClasses["primary"]
+                  }`}
+                />
+              </a>
+            )}
+            {data.social && data.social.instagram && (
+              <a
+                className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
+                href={data.social.instagram}
+                target="_blank"
+              >
+                <AiFillInstagram
+                  className={`${socialIconClasses} ${
+                    socialIconColorClasses["primary"]
+                  }`}
+                />
+              </a>
+            )}
+            {data.social && data.social.github && (
+              <a
+                className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
+                href={data.social.github}
+                target="_blank"
+              >
+                <FaGithub
+                  className={`${socialIconClasses} ${
+                    socialIconColorClasses["primary"]
+                  }`}
+                />
+              </a>
+            )}
+          </div>
+          <RawRenderer parentColor={data.color} rawData={rawData} />
+        </div>
+        <div
+          className={`absolute h-1 bg-gradient-to-r from-transparent ${
+            data.color === "primary" ? `via-white` : `via-black dark:via-white`
+          } to-transparent top-0 left-4 right-4 opacity-5`}
+        ></div>
+      </Container>
+    </footer>
+  );
+};

components/layout/footer/index.tsx

@@ -0,0 +1 @@
+export { Footer } from "./footer";

components/layout/footer/rawRenderer.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+
+export const RawRenderer = ({ rawData, parentColor }) => {
+  const buttonColorClasses = {
+    blue: "text-blue-500",
+    teal: "text-teal-500",
+    green: "text-green-500",
+    red: "text-red-500",
+    pink: "text-pink-500",
+    purple: "text-purple-500",
+    orange: "text-orange-500",
+    yellow: "text-yellow-600",
+  };
+  const [isOpen, setIsOpen] = useState(false);
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={openModal}
+        className={`z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
+          buttonColorClasses[buttonColorClasses.blue]
+        }`}
+      >
+        View Raw Data
+        <span
+          className={`absolute w-full h-full left-0 top-0 rounded -z-1 ${
+            parentColor === "primary"
+              ? `bg-white opacity-80`
+              : `bg-current opacity-15`
+          }`}
+        ></span>
+      </button>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog
+          as="div"
+          className="fixed inset-0 z-10 overflow-y-auto"
+          onClose={closeModal}
+        >
+          <div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-out duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="">
+                <Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" />
+              </div>
+            </Transition.Child>
+
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <div className="flex-1 w-full prose dark:prose-dark max-w-3xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-1000 shadow-xl rounded-xl inline-flex flex-col max-h-full">
+                <pre className="flex-1 overflow-y-auto">
+                  <code>{JSON.stringify(rawData, null, 2)}</code>
+                </pre>
+                <button
+                  type="button"
+                  className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100"
+                  onClick={closeModal}
+                >
+                  Great, thanks!
+                </button>
+              </div>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+};

components/layout/header.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Icon } from "../util/icon";
+import { tinaField } from "tinacms/dist/react";
+import { GlobalHeader } from "../../tina/__generated__/types";
+
+export const Header = ({ data }: { data: GlobalHeader }) => {
+  const router = useRouter();
+
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
+      <div className="container d-flex flex-column flex-md-row justify-content-between">
+        <div className="flex">
+            <Link
+              href="/"
+              className="navbar-brand container d-flex align-items-md-center"
+            >
+              <Icon
+                tinaField={tinaField(data, "icon")}
+                parentColor={data.color}
+                data={{
+                  name: data.icon.name,
+                  color: data.icon.color,
+                  style: data.icon.style,
+                }}
+              />
+              <span data-tina-field={tinaField(data, "name")}>{data.name}</span>
+            </Link>
+        </div>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+          <ul className="navbar-nav d-flex flex-column flex-md-row">
+            {data.nav &&
+              data.nav.map((item, i) => {
+                /*const activeItem =
+                  (item.href === ""
+                    ? router.asPath === "/"
+                    : router.asPath.includes(item.href)) && isClient;*/
+                return (
+                  <li
+                    key={`${item.label}-${i}`}
+                    className="nav-item"
+                  >
+                    <Link
+                      data-tina-field={tinaField(item, "label")}
+                      href={`/${item.href}`}
+                      className="nav-link p-2"
+                    >
+                      {item.label}
+                    </Link>
+                  </li>
+                );
+              })}
+            <li className="nav-item">
+              <a id="redirecting" className="nav-link p-2 pe-4" href="https://www.rdv360.com/psychartherapie">Rendez-vous</a>
+            </li>
+          </ul>
+        </div>
+        <div
+          className={`absolute h-1 bg-gradient-to-r from-transparent ${
+            data.color === "primary" ? `via-white` : `via-black dark:via-white`
+          } to-transparent bottom-0 left-4 right-4 -z-1 opacity-5`}
+        />
+      </div>
+    </nav>
+  );
+};

components/layout/index.tsx

@@ -0,0 +1 @@
+export { Layout } from "./layout";

components/layout/layout.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Head from "next/head";
+import { Header } from "./header";
+import { Footer } from "./footer";
+import layoutData from "../../content/global/index.json";
+import { Global } from "../../tina/__generated__/types";
+
+export const Layout = ({
+  rawData = {},
+  data = layoutData,
+  children,
+}: {
+  rawData?: object;
+  data?: Omit<Global, "id" | "_sys" | "_values">;
+  children: React.ReactNode;
+}) => {
+  return (
+    <>
+      <Head>
+        <title>Tina</title>
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <div
+        className={"min-h-screen flex flex-col font-nunito" }
+      >
+        <Header data={data?.header} />
+        <div className="flex-1 text-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000 flex flex-col">
+          {children}
+        </div>
+        <Footer
+          rawData={rawData}
+          data={data?.footer}
+          icon={data?.header.icon}
+        />
+      </div>
+    </>
+  );
+};

components/posts/index.tsx

@@ -0,0 +1 @@
+export { Posts } from "./posts";

components/posts/post.tsx

@@ -0,0 +1,210 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import format from "date-fns/format";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+import { Prism } from "tinacms/dist/rich-text/prism";
+import type { TinaMarkdownContent, Components } from "tinacms/dist/rich-text";
+import { PostType } from "../../pages/posts/[filename]";
+import { tinaField } from "tinacms/dist/react";
+
+const components: Components<{
+  BlockQuote: {
+    children: TinaMarkdownContent;
+    authorName: string;
+  };
+  DateTime: {
+    format?: string;
+  };
+  NewsletterSignup: {
+    placeholder: string;
+    buttonText: string;
+    children: TinaMarkdownContent;
+    disclaimer?: TinaMarkdownContent;
+  };
+}> = {
+  code_block: (props) => <Prism {...props} />,
+  BlockQuote: (props: {
+    children: TinaMarkdownContent;
+    authorName: string;
+  }) => {
+    return (
+      <div>
+        <blockquote>
+          <TinaMarkdown content={props.children} />
+          {props.authorName}
+        </blockquote>
+      </div>
+    );
+  },
+  DateTime: (props) => {
+    const dt = React.useMemo(() => {
+      return new Date();
+    }, []);
+
+    switch (props.format) {
+      case "iso":
+        return <span>{format(dt, "yyyy-MM-dd")}</span>;
+      case "utc":
+        return <span>{format(dt, "eee, dd MMM yyyy HH:mm:ss OOOO")}</span>;
+      case "local":
+        return <span>{format(dt, "P")}</span>;
+      default:
+        return <span>{format(dt, "P")}</span>;
+    }
+  },
+  NewsletterSignup: (props) => {
+    return (
+      <div className="bg-white">
+        <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+          <div className="">
+            <TinaMarkdown content={props.children} />
+          </div>
+          <div className="mt-8 ">
+            <form className="sm:flex">
+              <label htmlFor="email-address" className="sr-only">
+                Email address
+              </label>
+              <input
+                id="email-address"
+                name="email-address"
+                type="email"
+                autoComplete="email"
+                required
+                className="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-teal-500 focus:border-teal-500 sm:max-w-xs rounded-md"
+                placeholder={props.placeholder}
+              />
+              <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
+                <button
+                  type="submit"
+                  className="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
+                >
+                  {props.buttonText}
+                </button>
+              </div>
+            </form>
+            <div className="mt-3 text-sm text-gray-500">
+              {props.disclaimer && <TinaMarkdown content={props.disclaimer} />}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  img: (props) => (
+    <span className="flex items-center justify-center">
+      <img src={props.url} alt={props.alt} />
+    </span>
+  ),
+};
+
+export const Post = (props: PostType) => {
+  const titleColorClasses = {
+    blue: "from-blue-400 to-blue-600 dark:from-blue-300 dark:to-blue-500",
+    teal: "from-teal-400 to-teal-600 dark:from-teal-300 dark:to-teal-500",
+    green: "from-green-400 to-green-600",
+    red: "from-red-400 to-red-600",
+    pink: "from-pink-300 to-pink-500",
+    purple:
+      "from-purple-400 to-purple-600 dark:from-purple-300 dark:to-purple-500",
+    orange:
+      "from-orange-300 to-orange-600 dark:from-orange-200 dark:to-orange-500",
+    yellow:
+      "from-yellow-400 to-yellow-500 dark:from-yellow-300 dark:to-yellow-500",
+  };
+
+  const date = new Date(props.date);
+  let formattedDate = "";
+  if (!isNaN(date.getTime())) {
+    formattedDate = format(date, "MMM dd, yyyy");
+  }
+
+  return (
+    <Section className="flex-1">
+      <Container width="small" className={`flex-1 pb-2`} size="large">
+        <h2
+          data-tina-field={tinaField(props, "title")}
+          className={`w-full relative	mb-8 text-6xl font-extrabold tracking-normal text-center title-font`}
+        >
+          <span
+            className={`bg-clip-text text-transparent bg-gradient-to-r`}
+          >
+            {props.title}
+          </span>
+        </h2>
+        <div
+          data-tina-field={tinaField(props, "author")}
+          className="flex items-center justify-center mb-16"
+        >
+          {props.author && (
+            <>
+              <div className="flex-shrink-0 mr-4">
+                <img
+                  data-tina-field={tinaField(props.author, "avatar")}
+                  className="h-14 w-14 object-cover rounded-full shadow-sm"
+                  src={props.author.avatar}
+                  alt={props.author.name}
+                />
+              </div>
+              <p
+                data-tina-field={tinaField(props.author, "name")}
+                className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white"
+              >
+                {props.author.name}
+              </p>
+              <span className="font-bold text-gray-200 dark:text-gray-500 mx-2">
+                —
+              </span>
+            </>
+          )}
+          <p
+            data-tina-field={tinaField(props, "date")}
+            className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150"
+          >
+            {formattedDate}
+          </p>
+        </div>
+      </Container>
+      {props.heroImg && (
+        <div className="px-4 w-full">
+          <div
+            data-tina-field={tinaField(props, "heroImg")}
+            className="relative max-w-4xl lg:max-w-5xl mx-auto"
+          >
+            <img
+              src={props.heroImg}
+              className="absolute block rounded-lg w-full h-auto blur-2xl brightness-150 contrast-[0.9] dark:brightness-150 saturate-200 opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-hard-light"
+              aria-hidden="true"
+            />
+            <img
+              src={props.heroImg}
+              alt={props.title}
+              className="relative z-10 mb-14 block rounded-lg w-full h-auto opacity-100"
+            />
+          </div>
+        </div>
+      )}
+      <Container className={`flex-1 pt-4`} width="small" size="large">
+        <div
+          data-tina-field={tinaField(props, "_body")}
+          className="prose dark:prose-dark w-full max-w-none"
+        >
+          <TinaMarkdown components={components} content={props._body} />
+        </div>
+      </Container>
+    </Section>
+  );
+};

components/posts/posts.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import Link from "next/link";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+import { BsArrowRight } from "react-icons/bs";
+import format from "date-fns/format";
+import { PostsType } from "../../pages/posts";
+
+export const Posts = ({ data }: { data: PostsType[] }) => {
+  return (
+    <>
+      {data.map((postData) => {
+        const post = postData.node;
+        const date = new Date(post.date);
+        let formattedDate = "";
+        if (!isNaN(date.getTime())) {
+          formattedDate = format(date, "MMM dd, yyyy");
+        }
+        return (
+          <Link
+            key={post._sys.filename}
+            href={`/posts/` + post._sys.filename}
+            className="group block px-6 sm:px-8 md:px-10 py-10 mb-8 last:mb-0 bg-gray-50 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-1000 rounded-md shadow-sm transition-all duration-150 ease-out hover:shadow-md hover:to-gray-50 dark:hover:to-gray-800"
+          >
+            <h3
+              className={`text-gray-700 dark:text-white text-3xl lg:text-4xl font-semibold title-font mb-5 transition-all duration-150 ease-out`}
+            >
+              {post.title}{" "}
+              <span className="inline-block opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out">
+                <BsArrowRight className="inline-block h-8 -mt-1 ml-1 w-auto opacity-70" />
+              </span>
+            </h3>
+            <div className="prose dark:prose-dark w-full max-w-none mb-5 opacity-70">
+              <TinaMarkdown content={post.excerpt} />
+            </div>
+            <div className="flex items-center">
+              <div className="flex-shrink-0 mr-2">
+                <img
+                  className="h-10 w-10 object-cover rounded-full shadow-sm"
+                  src={post?.author?.avatar}
+                  alt={post?.author?.name}
+                />
+              </div>
+              <p className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white">
+                {post?.author?.name}
+              </p>
+              {formattedDate !== "" && (
+                <>
+                  <span className="font-bold text-gray-200 dark:text-gray-500 mx-2">
+                    —
+                  </span>
+                  <p className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150">
+                    {formattedDate}
+                  </p>
+                </>
+              )}
+            </div>
+          </Link>
+        );
+      })}
+    </>
+  );
+};

components/util/actions.tsx

@@ -0,0 +1,106 @@
+import Link from "next/link";
+import * as React from "react";
+import { BiRightArrowAlt } from "react-icons/bi";
+import { PageBlocksHeroActions } from "../../tina/__generated__/types";
+import { tinaField } from "tinacms/dist/react";
+
+export const Actions = ({
+  parentColor = "default",
+  className = "",
+  actions,
+}: {
+  parentColor: string;
+  className: string;
+  actions: PageBlocksHeroActions[];
+}) => {
+  const buttonColorClasses = {
+    blue: "text-white bg-blue-500 hover:bg-blue-600 bg-gradient-to-r from-blue-400 to-blue-600 hover:from-blue-400 hover:to-blue-500",
+    teal: "text-white bg-teal-500 hover:bg-teal-600 bg-gradient-to-r from-teal-400 to-teal-600 hover:from-teal-400 hover:to-teal-500",
+    green:
+      "text-white bg-green-500 hover:bg-green-600 bg-gradient-to-r from-green-400 to-green-600 hover:from-green-400 hover:to-green-500",
+    red: "text-white bg-red-500 hover:bg-red-600 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-400 hover:to-red-500",
+    pink: "text-white bg-pink-500 hover:bg-pink-600 bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-400 hover:to-pink-500",
+    purple:
+      "text-white bg-purple-500 hover:bg-purple-600 bg-gradient-to-r from-purple-400 to-purple-600 hover:from-purple-400 hover:to-purple-500",
+    orange:
+      "text-white bg-orange-500 hover:bg-orange-600 bg-gradient-to-r from-orange-400 to-orange-600 hover:from-orange-400 hover:to-orange-500",
+    yellow:
+      "text-gray-800 bg-yellow-500 hover:bg-yellow-600 bg-gradient-to-r from-yellow-400 to-yellow-600 hover:from-yellow-400 hover:to-yellow-500",
+  };
+
+  const invertedButtonColorClasses = {
+    blue: "text-blue-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
+    teal: "text-teal-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
+    green:
+      "text-green-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
+    red: "text-red-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
+    pink: "text-pink-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
+    purple:
+      "text-purple-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
+    orange:
+      "text-orange-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
+    yellow:
+      "text-yellow-500 bg-white hover:bg-gray-50 bg-gradient-to-r from-gray-50 to-white hover:to-gray-100",
+  };
+
+  const linkButtonColorClasses = {
+    blue: "text-blue-600 dark:text-blue-400 hover:text-blue-400 dark:hover:text-blue-200",
+    teal: "ttext-teal-600 dark:text-teal-400 hover:text-teal-400 dark:hover:text-teal-200",
+    green:
+      "text-green-600 dark:text-green-400 hover:text-green-400 dark:hover:text-green-200",
+    red: "text-red-600 dark:text-red-400 hover:text-red-400 dark:hover:text-red-200",
+    pink: "text-pink-600 dark:text-pink-400 hover:text-pink-400 dark:hover:text-pink-200",
+    purple:
+      "text-purple-600 dark:text-purple-400 hover:text-purple-400 dark:hover:text-purple-200",
+    orange:
+      "text-orange-600 dark:text-orange-400 hover:text-orange-400 dark:hover:text-orange-200",
+    yellow:
+      "text-yellow-600 dark:text-yellow-400 hover:text-yellow-400 dark:hover:text-yellow-200",
+  };
+
+  return (
+    <div className={`flex flex-wrap items-center gap-y-4 gap-x-6 ${className}`}>
+      {actions &&
+        actions.map(function (action, index) {
+          let element = null;
+          if (action.type === "button") {
+            element = (
+              <Link key={index} href={action.link ? action.link : "/"}>
+                <button
+                  data-tina-field={tinaField(action)}
+                  className={`z-10 relative flex items-center px-7 py-3 font-semibold text-lg transition duration-150 ease-out  rounded-lg transform focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 whitespace-nowrap ${
+                    invertedButtonColorClasses["blue"] }`}
+                >
+                  {action.label}
+                  {action.icon && (
+                    <BiRightArrowAlt
+                      className={`ml-1 -mr-1 w-6 h-6 opacity-80`}
+                    />
+                  )}
+                </button>
+              </Link>
+            );
+          }
+          if (action.type === "link" || action.type === "linkExternal") {
+            element = (
+              <Link
+                key={index}
+                href={action.link ? action.link : "/"}
+                data-tina-field={tinaField(action)}
+                className={"group inline-flex items-center font-semibold text-lg transition duration-150 ease-out text-white  hover:text-gray-50" }
+                style={{
+                  textShadow: "0 3px 7px rgba(var(--color-rgb-blue-400),0.2)"
+                }}
+              >
+                {action.label}
+                {action.icon && (
+                  <BiRightArrowAlt className={`ml-0 mr-0 w-6 h-6 opacity-80`} />
+                )}
+              </Link>
+            );
+          }
+          return element;
+        })}
+    </div>
+  );
+};

components/util/container.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export const Container = ({
+  children,
+  size = "medium",
+  width = "large",
+  className = "",
+  ...props
+}) => {
+  const verticalPadding = {
+    custom: "",
+    small: "py-8",
+    medium: "py-12",
+    large: "py-24",
+    default: "py-12",
+  };
+  const widthClass = {
+    small: "max-w-4xl",
+    medium: "max-w-5xl",
+    large: "max-w-7xl",
+    custom: "",
+  };
+
+  return (
+    <div
+      className={`${widthClass[width]} mx-auto px-6 sm:px-8 ${verticalPadding[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

components/util/icon.tsx

@@ -0,0 +1,157 @@
+import * as React from "react";
+import { ColorPickerInput } from "../../tina/fields/color";
+import { IconPickerInput } from "../../tina/fields/icon";
+import * as BoxIcons from "react-icons/bi";
+
+export const IconOptions = {
+  Tina: (props) => (
+    <svg
+      {...props}
+      viewBox="0 0 66 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Tina</title>
+      <path
+        d="M39.4615 36.1782C42.763 33.4475 44.2259 17.3098 45.6551 11.5091C47.0843 5.70828 52.995 6.0025 52.995 6.0025C52.995 6.0025 51.4605 8.67299 52.0864 10.6658C52.7123 12.6587 57 14.4401 57 14.4401L56.0752 16.8781C56.0752 16.8781 54.1441 16.631 52.995 18.9297C51.8459 21.2283 53.7336 43.9882 53.7336 43.9882C53.7336 43.9882 46.8271 57.6106 46.8271 63.3621C46.8271 69.1136 49.5495 73.9338 49.5495 73.9338H45.7293C45.7293 73.9338 40.1252 67.2648 38.9759 63.9318C37.8266 60.5988 38.2861 57.2658 38.2861 57.2658C38.2861 57.2658 32.1946 56.921 26.7931 57.2658C21.3915 57.6106 17.7892 62.2539 17.1391 64.8512C16.4889 67.4486 16.2196 73.9338 16.2196 73.9338H13.1991C11.3606 68.2603 9.90043 66.2269 10.6925 63.3621C12.8866 55.4269 12.4557 50.9263 11.9476 48.9217C11.4396 46.9172 8 45.1676 8 45.1676C9.68492 41.7349 11.4048 40.0854 18.8029 39.9133C26.201 39.7413 36.1599 38.9088 39.4615 36.1782Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.25 63.03C20.25 63.03 21.0305 70.2533 25.1773 73.9342H28.7309C25.1773 69.9085 24.7897 59.415 24.7897 59.415C22.9822 60.0035 20.4799 62.1106 20.25 63.03Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  ...BoxIcons,
+};
+
+const iconColorClass: {
+  [name: string]: { regular: string; circle: string };
+} = {
+  blue: {
+    regular: "text-blue-400",
+    circle: "bg-blue-400 dark:bg-blue-500 text-blue-50",
+  },
+  teal: {
+    regular: "text-teal-400",
+    circle: "bg-teal-400 dark:bg-teal-500 text-teal-50",
+  },
+  green: {
+    regular: "text-green-400",
+    circle: "bg-green-400 dark:bg-green-500 text-green-50",
+  },
+  red: {
+    regular: "text-red-400",
+    circle: "bg-red-400 dark:bg-red-500 text-red-50",
+  },
+  pink: {
+    regular: "text-pink-400",
+    circle: "bg-pink-400 dark:bg-pink-500 text-pink-50",
+  },
+  purple: {
+    regular: "text-purple-400",
+    circle: "bg-purple-400 dark:bg-purple-500 text-purple-50",
+  },
+  orange: {
+    regular: "text-orange-400",
+    circle: "bg-orange-400 dark:bg-orange-500 text-orange-50",
+  },
+  yellow: {
+    regular: "text-yellow-400",
+    circle: "bg-yellow-400 dark:bg-yellow-500 text-yellow-50",
+  },
+  white: {
+    regular: "text-white opacity-80",
+    circle: "bg-white-400 dark:bg-white-500 text-white-50",
+  },
+};
+
+const iconSizeClass = {
+  xs: "w-6 h-6 flex-shrink-0",
+  small: "w-8 h-8 flex-shrink-0",
+  medium: "w-12 h-12 flex-shrink-0",
+  large: "w-14 h-14 flex-shrink-0",
+  xl: "w-16 h-16 flex-shrink-0",
+  custom: "",
+};
+
+export const Icon = ({
+  data,
+  parentColor = "",
+  className = "",
+  tinaField = "",
+}) => {
+  if (IconOptions[data.name] === null || IconOptions[data.name] === undefined) {
+    return null;
+  }
+
+  const { name, color, size = "medium", style = "regular" } = data;
+
+  const IconSVG = IconOptions[name];
+
+  const iconSizeClasses =
+    typeof size === "string"
+      ? iconSizeClass[size]
+      : iconSizeClass[Object.keys(iconSizeClass)[size]];
+
+  const iconColor = color;
+
+  if (style == "circle") {
+    return (
+      <div
+        data-tina-field={tinaField}
+        className={`relative z-10 inline-flex items-center justify-center flex-shrink-0 ${iconSizeClasses} rounded-full ${iconColorClass[iconColor].circle} ${className}`}
+      >
+        <IconSVG className="w-2/3 h-2/3" />
+      </div>
+    );
+  } else {
+    const iconColorClasses =
+      iconColorClass[parentColor === "primary" && (iconColor === "primary") ? "white" : iconColor]?.regular || "white";
+    return (
+      <IconSVG
+        data-tina-field={tinaField}
+        className={`${iconSizeClasses} ${iconColorClasses} ${className}`}
+      />
+    );
+  }
+};
+
+export const iconSchema = {
+  type: "object",
+  label: "Icon",
+  name: "icon",
+  fields: [
+    {
+      type: "string",
+      label: "Icon",
+      name: "name",
+      ui: {
+        component: IconPickerInput,
+      },
+    },
+    {
+      type: "string",
+      label: "Color",
+      name: "color",
+      ui: {
+        component: ColorPickerInput,
+      },
+    },
+    {
+      name: "style",
+      label: "Style",
+      type: "string",
+      options: [
+        {
+          label: "Circle",
+          value: "circle",
+        },
+        {
+          label: "Float",
+          value: "float",
+        },
+      ],
+    },
+  ],
+};

components/util/section.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export const Section = ({ children, color = "", className = "" }) => {
+  const sectionColor = {
+    default:
+      "text-gray-800 dark:text-gray-50 bg-gradient-to-tl from-gray-50 dark:from-gray-900 via-transparent to-transparent",
+    tint: "text-gray-900 dark:text-gray-100 bg-gradient-to-br from-gray-100 dark:from-gray-1000 to-transparent",
+    primary: {
+      blue: "text-white bg-blue-500 bg-gradient-to-br from-blue-500 to-blue-600",
+      teal: "text-white bg-teal-500 bg-gradient-to-br from-teal-500 to-teal-600",
+      green:
+        "text-white bg-green-600 bg-gradient-to-br from-green-600 to-green-700",
+      red: "text-white bg-red-500 bg-gradient-to-br from-red-500 to-red-600",
+      pink: "text-white bg-pink-500 bg-gradient-to-br from-pink-500 to-pink-600",
+      purple:
+        "text-white bg-purple-500 bg-gradient-to-br from-purple-500 to-purple-600",
+      orange:
+        "text-white bg-orange-500 bg-gradient-to-br from-orange-500 to-orange-600",
+      yellow:
+        "text-white bg-yellow-500 bg-gradient-to-br from-yellow-500 to-yellow-600",
+    },
+  };
+  const sectionColorCss = sectionColor[color]
+      ? sectionColor[color]
+      : sectionColor.default;
+
+  return (
+    <section
+      className={`flex-1 relative transition duration-150 ease-out body-font overflow-hidden ${sectionColorCss} ${className}`}
+    >
+      {children}
+    </section>
+  );
+};