Initial commit

2023-08-28 13:12:21 +02:00
commit 52134c91ef
78 changed files with 13869 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,28 @@
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.idea
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.tina/__generated__
--- a/201
+++ b/201
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   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.
--- a/4
+++ b/4
@@ -0,0 +1,4 @@
+Tina Cloud Starter
+Copyright 2021 Forestry.io Holdings, Inc.
+
+This product includes software developed at Forestry.io Holdings, Inc. (http://www.forestry.io/).
--- a/README.md
+++ b/README.md
@@ -0,0 +1,82 @@
+# Tina Starter 🦙
+
+![tina-cloud-starter-demo](https://user-images.githubusercontent.com/103008/130587027-995ccc45-a852-4f90-b658-13e8e0517339.gif)
+
+This Next.js starter is powered by [TinaCMS](https://app.tina.io) for you and your team to visually live edit the structured content of your website. ✨
+
+The content is managed through Markdown and JSON files stored in your GitHub repository, and queried through Tina GraphQL API.
+
+### Features
+
+- [Tina Headless CMS](https://app.tina.io) for authentication, content modeling, visual editing and team management.
+- [Vercel](https://vercel.com) deployment to visually edit your site from the `/admin` route.
+- Local development workflow from the filesystem with a local GraqhQL server.
+
+## Requirements
+
+- Git, [Node.js Active LTS](https://nodejs.org/en/about/releases/), Yarn installed for local development.
+- A [TinaCMS](https://app.tina.io) account for live editing.
+
+## Local Development
+
+Install the project's dependencies:
+
+```
+yarn install
+```
+
+Run the project locally:
+
+```
+yarn dev
+```
+
+### Local URLs
+
+- http://localhost:3000 : browse the website
+- http://localhost:3000/admin : connect to Tina Cloud and go in edit mode
+- http://localhost:3000/exit-admin : log out of Tina Cloud
+- http://localhost:4001/altair/ : GraphQL playground to test queries and browse the API documentation
+
+### Building the Starter Locally (Using the hosted content API)
+
+Replace the `.env.example`, with `.env`
+
+```
+NEXT_PUBLIC_TINA_CLIENT_ID=<get this from the project you create at app.tina.io>
+TINA_TOKEN=<get this from the project you create at app.tina.io>
+NEXT_PUBLIC_TINA_BRANCH=<Specify the branch with Tina configured>
+```
+
+Build the project:
+
+```bash
+yarn build
+```
+
+## Getting Help
+
+To get help with any TinaCMS challenges you may have:
+
+- Visit the [documentation](https://tina.io/docs/) to learn about Tina.
+- [Join our Discord](https://discord.gg/zumN63Ybpf) to share feedback.
+- Visit the [community forum](https://community.tinacms.org/) to ask questions.
+- Get support through the chat widget on the TinaCMS Dashboard
+- [Email us](mailto:support@tina.io) to schedule a call with our team and share more about your context and what you're trying to achieve.
+- [Search or open an issue](https://github.com/tinacms/tinacms/issues) if something is not working.
+- Reach out on Twitter at [@tina_cms](https://twitter.com/tina_cms).
+
+## Development tips
+
+### Visual Studio Code GraphQL extension
+
+[Install the GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) to benefit from type auto-completion.
+
+### Typescript
+
+A good way to ensure your components match the shape of your data is to leverage the auto-generated TypeScript types.
+These are rebuilt when your `tina` config changes.
+
+## LICENSE
+
+Licensed under the [Apache 2.0 license](./LICENSE).
--- a/assets/img/scores/lighthouse.svg
+++ b/assets/img/scores/lighthouse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="20" role="img" aria-label="lighthouse: 88%"><title>lighthouse: 88%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="102" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="67" height="20" fill="#555"/><rect x="67" width="35" height="20" fill="#a4a61d"/><rect width="102" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="345" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="570">lighthouse</text><text x="345" y="140" transform="scale(.1)" fill="#fff" textLength="570">lighthouse</text><text aria-hidden="true" x="835" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="250">88%</text><text x="835" y="140" transform="scale(.1)" fill="#fff" textLength="250">88%</text></g></svg>
--- a/assets/img/scores/lighthouse_accessibility.svg
+++ b/assets/img/scores/lighthouse_accessibility.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180" height="20" role="img" aria-label="lighthouse accessibility: 100%"><title>lighthouse accessibility: 100%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="180" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="137" height="20" fill="#555"/><rect x="137" width="43" height="20" fill="#4c1"/><rect width="180" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="695" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1270">lighthouse accessibility</text><text x="695" y="140" transform="scale(.1)" fill="#fff" textLength="1270">lighthouse accessibility</text><text aria-hidden="true" x="1575" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">100%</text><text x="1575" y="140" transform="scale(.1)" fill="#fff" textLength="330">100%</text></g></svg>
--- a/assets/img/scores/lighthouse_best-practices.svg
+++ b/assets/img/scores/lighthouse_best-practices.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" height="20" role="img" aria-label="lighthouse best-practices: 100%"><title>lighthouse best-practices: 100%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="192" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="149" height="20" fill="#555"/><rect x="149" width="43" height="20" fill="#4c1"/><rect width="192" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="755" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1390">lighthouse best-practices</text><text x="755" y="140" transform="scale(.1)" fill="#fff" textLength="1390">lighthouse best-practices</text><text aria-hidden="true" x="1695" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">100%</text><text x="1695" y="140" transform="scale(.1)" fill="#fff" textLength="330">100%</text></g></svg>
--- a/assets/img/scores/lighthouse_performance.svg
+++ b/assets/img/scores/lighthouse_performance.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="184" height="20" role="img" aria-label="lighthouse performance: 100%"><title>lighthouse performance: 100%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="184" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="141" height="20" fill="#555"/><rect x="141" width="43" height="20" fill="#4c1"/><rect width="184" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="715" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1310">lighthouse performance</text><text x="715" y="140" transform="scale(.1)" fill="#fff" textLength="1310">lighthouse performance</text><text aria-hidden="true" x="1615" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">100%</text><text x="1615" y="140" transform="scale(.1)" fill="#fff" textLength="330">100%</text></g></svg>
--- a/assets/img/scores/lighthouse_pwa.svg
+++ b/assets/img/scores/lighthouse_pwa.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="20" role="img" aria-label="lighthouse pwa: 42%"><title>lighthouse pwa: 42%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="128" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="35" height="20" fill="#fe7d37"/><rect width="128" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">lighthouse pwa</text><text x="475" y="140" transform="scale(.1)" fill="#fff" textLength="830">lighthouse pwa</text><text aria-hidden="true" x="1095" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="250">42%</text><text x="1095" y="140" transform="scale(.1)" fill="#fff" textLength="250">42%</text></g></svg>
--- a/assets/img/scores/lighthouse_seo.svg
+++ b/assets/img/scores/lighthouse_seo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="20" role="img" aria-label="lighthouse seo: 100%"><title>lighthouse seo: 100%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="132" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="89" height="20" fill="#555"/><rect x="89" width="43" height="20" fill="#4c1"/><rect width="132" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="455" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="790">lighthouse seo</text><text x="455" y="140" transform="scale(.1)" fill="#fff" textLength="790">lighthouse seo</text><text aria-hidden="true" x="1095" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">100%</text><text x="1095" y="140" transform="scale(.1)" fill="#fff" textLength="330">100%</text></g></svg>
--- a/components/blocks-renderer.tsx
+++ b/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;
+  }
+};
--- a/components/blocks/content.tsx
+++ b/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" },
+      ],
+    },
+  ],
+};
--- a/components/blocks/features.tsx
+++ b/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" },
+      ],
+    },
+  ],
+};
--- a/components/blocks/hero.tsx
+++ b/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" },
+      ],
+    },
+  ],
+};
--- a/components/blocks/testimonial.tsx
+++ b/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" },
+      ],
+    },
+  ],
+};
--- a/components/layout/footer/footer.tsx
+++ b/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>
+  );
+};
--- a/components/layout/footer/index.tsx
+++ b/components/layout/footer/index.tsx
@@ -0,0 +1 @@
+export { Footer } from "./footer";
--- a/components/layout/footer/rawRenderer.tsx
+++ b/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>
+    </>
+  );
+};
--- a/components/layout/header.tsx
+++ b/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>
+  );
+};
--- a/components/layout/index.tsx
+++ b/components/layout/index.tsx
@@ -0,0 +1 @@
+export { Layout } from "./layout";
--- a/components/layout/layout.tsx
+++ b/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>
+    </>
+  );
+};
--- a/components/posts/index.tsx
+++ b/components/posts/index.tsx
@@ -0,0 +1 @@
+export { Posts } from "./posts";
--- a/components/posts/post.tsx
+++ b/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>
+  );
+};
--- a/components/posts/posts.tsx
+++ b/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>
+        );
+      })}
+    </>
+  );
+};
--- a/components/util/actions.tsx
+++ b/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>
+  );
+};
--- a/components/util/container.tsx
+++ b/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>
+  );
+};
--- a/components/util/icon.tsx
+++ b/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",
+        },
+      ],
+    },
+  ],
+};
--- a/components/util/section.tsx
+++ b/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>
+  );
+};
--- a/content/authors/napolean.md
+++ b/content/authors/napolean.md
@@ -0,0 +1,7 @@
+---
+name: Napolean
+avatar: /uploads/llama-2.avif
+---
+
+
+
--- a/content/authors/pedro.md
+++ b/content/authors/pedro.md
@@ -0,0 +1,5 @@
+---
+name: Pedro
+avatar: /uploads/llama-6.avif
+---
+
--- a/content/global/index.json
+++ b/content/global/index.json
@@ -0,0 +1,38 @@
+{
+  "header": {
+    "icon": {
+      "name": "Tina",
+      "color": "orange",
+      "style": "float"
+    },
+    "name": "Tina Starter",
+    "color": "default",
+    "nav": [
+      {
+        "href": "",
+        "label": "Home"
+      },
+      {
+        "href": "about",
+        "label": "About"
+      },
+      {
+        "href": "posts",
+        "label": "Blog"
+      }
+    ]
+  },
+  "footer": {
+    "color": "default",
+    "social": {
+      "facebook": "/",
+      "twitter": "/",
+      "instagram": "/"
+    }
+  },
+  "theme": {
+    "color": "blue",
+    "font": "sans",
+    "darkMode": "system"
+  }
+}
--- a/content/pages/about.md
+++ b/content/pages/about.md
--- a/content/pages/home.md
+++ b/content/pages/home.md
@@ -0,0 +1,61 @@
+---
+title: Tina Cloud Starter
+blocks:
+  - headline: Welcome to the Tina Starter
+    text: >
+      This project is set up to show you the basics of working with Tina. You're
+      looking at the landing page, which pulls content from
+      `content/pages/home.md`, components from components/blocks, and puts them
+      all together in `pages/[filename].tsx`, all based on a config
+      `tina/config.tsx`.
+    actions:
+      - label: Get Started
+        type: button
+        icon: true
+        link: /posts
+      - label: Read Blog
+        type: link
+        icon: false
+        link: /posts
+    image:
+      src: /uploads/unsplash-75EFpyXu3Wg.jpg
+      alt: >-
+        Photo of palm trees at sunset by Adam Birkett -
+        unsplash.com/photos/75EFpyXu3Wg
+    color: default
+    _template: hero
+  - items:
+      - icon:
+          name: BiCodeBlock
+          color: red
+          style: float
+        title: Amazing Feature
+        text: >-
+          Aliquam blandit felis rhoncus, eleifend ipsum in, condimentum nibh.
+          Praesent ac faucibus risus, eu lacinia enim.
+      - icon:
+          name: BiLike
+          color: primary
+          style: float
+        title: This Is a Feature
+        text: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
+      - icon:
+          name: BiPalette
+          color: green
+          style: float
+        title: Configurable Theme
+        text: >-
+          Edit global theme configuration with Tina. Change your theme's primary
+          color, font, or icon set.
+    color: tint
+    _template: features
+  - quote: >-
+      There are only two hard things in Computer Science: cache invalidation and
+      naming things.
+    author: Phil Karlton
+    color: primary
+    _template: testimonial
+---
+
+
+
--- a/content/pages/hometwo.mdx
+++ b/content/pages/hometwo.mdx
@@ -0,0 +1,61 @@
+---
+title: Tina Cloud Starter
+blocks:
+  - headline: Welcome to the Tina Starter
+    text: >
+      This project is set up to show you the basics of working with Tina. You're
+      looking at the landing page, which pulls content from
+      `content/pages/home.md`, components from components/blocks, and puts them
+      all together in `pages/[filename].tsx`, all based on a config
+      `tina/config.tsx`.
+    actions:
+      - label: Get Started
+        type: button
+        icon: true
+        link: /posts
+      - label: Read Blog
+        type: link
+        icon: false
+        link: /posts
+    image:
+      src: /uploads/unsplash-75EFpyXu3Wg.jpg
+      alt: >-
+        Photo of palm trees at sunset by Adam Birkett -
+        unsplash.com/photos/75EFpyXu3Wg
+    color: default
+    _template: hero
+  - items:
+      - icon:
+          name: BiCodeBlock
+          color: red
+          style: float
+        title: Amazing Feature
+        text: >-
+          Aliquam blandit felis rhoncus, eleifend ipsum in, condimentum nibh.
+          Praesent ac faucibus risus, eu lacinia enim.
+      - icon:
+          name: BiLike
+          color: primary
+          style: float
+        title: This Is a Feature
+        text: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
+      - icon:
+          name: BiPalette
+          color: green
+          style: float
+        title: Configurable Theme
+        text: >-
+          Edit global theme configuration with Tina. Change your theme's primary
+          color, font, or icon set.
+    color: tint
+    _template: features
+  - quote: >-
+      There are only two hard things in Computer Science: cache invalidation and
+      naming things.
+    author: Phil Karlton
+    color: primary
+    _template: testimonial
+---
+
+Yo
+
--- a/content/posts/anotherPost.mdx
+++ b/content/posts/anotherPost.mdx
@@ -0,0 +1,62 @@
+---
+title: "Just Another Blog Post "
+heroImg: /uploads/unsplash-lylCw4zcA7I.jpg
+excerpt: >
+  Lorem markdownum evinctus ut cape adhaeret gravis licet progenies ut haesit
+  maxima ille. Est scorpius, mori vel in visaeque Haemoniis viperei furoris e ad
+  vasti, distulit. Crudus sub coniuge iam: dea propera sive
+author: content/authors/napolean.md
+date: "2021-07-12T07:00:00.000Z"
+---
+
+# Vote For Pedro
+
+Hello, the current date is <DateTime format="local" />. Quis semper [vulputate](https://example.com) aliquam venenatdis egestas sagittis quisque orci. Donec commodo sdit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam cdommodo tincidunt turpis. Amet, duis sed elit interdum dignissim
+
+---
+
+```graphql
+query MyQuery($relativePath: String!) {
+  page(relativePath: $relativePath) {
+    title
+  }
+}
+```
+
+> Id orci tellus laoreet id ac. Dolor, aenean leo, ac etiam consequat in. Convallis arcu ipsum urna nibh. Pharetra, euismod vitae interdum mauris enim, consequat vulputate nibh. Maecenas pellentesque id sed tellus mauris, ultrices mauris. Tincidunt enim cursus ridiculus mi. Pellentesque nam sed nullam sed diam turpis ipsum eu a sed convallis diam.
+
+![This is an image](/uploads/unsplash-75EFpyXu3Wg.jpg)
+
+Quis semper [vulputate](https://example.com) aliquam venenatdis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam cdommodo tincidunt turpis. Amet, duis sed elit interdum dignissim
+
+<NewsletterSignup
+  placeholder="Enter your email"
+  buttonText="Notify Me"
+  disclaimer={<>
+    We care about the protection of your data. Read our [Privacy Policy](http://example.com).
+  </>}
+>
+  ## Stay in touch!
+
+Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui Lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
+
+</NewsletterSignup>
+
+### 3 Reasons to vote for Pedro
+
+- Anim aute id magna aliqua ad ad non deserunt sunt
+- Qui irure qui Lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
+- Lorem markdownum evinctus ut cape adhaeret gravis licet progenies ut haesit maxima ille. Est scorpius, mori vel in visaeque Haemoniis viperei furoris e ad vasti, distulit. Crudus sub coniuge iam: dea propera sive?
+
+### 3 More Reasons to vote for Pedro
+
+1. Anim aute id magna aliqua ad ad non deserunt sunt
+2. Qui irure qui Lorem cupidatat commodo.
+   . Elit sunt amet fugiat veniam occaecat fugiat.
+3. Lorem markdownum evinctus ut cape adhaeret gravis licet progenies ut haesit maxima ille. Est scorpius, mori vel in visaeque Haemoniis viperei furoris e ad vasti, distulit. Crudus sub coniuge iam: dea propera sive?
+
+---
+
+<BlockQuote authorName="Uncle Rico">
+  How much you wanna make a bet I can throw a football over them mountains?
+</BlockQuote>
--- a/content/posts/voteForPedro.mdx
+++ b/content/posts/voteForPedro.mdx
@@ -0,0 +1,13 @@
+---
+title: Vote For Pedro
+heroImg: /uploads/unsplash-lylCw4zcA7I.jpg
+excerpt: >
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo
+  vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla
+  facilities morbi tempus.
+author: content/authors/pedro.md
+date: "2021-07-03T20:30:00.000Z"
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
--- a/graphql.config.js
+++ b/graphql.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  projects: {
+    app: {
+      schema: ["tina/__generated__/schema.gql"],
+      documents: [
+        "tina/__generated__/queries.gql",
+        "tina/__generated__/frags.gql",
+        "tina/queries/queries.gql",
+        "tina/queries/frags.gql",
+        "pages/**/*.{graphql,js,ts,jsx,tsx}",
+      ],
+    },
+  },
+};
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/next.config.js
+++ b/next.config.js
@@ -0,0 +1,23 @@
+module.exports = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/",
+        destination: "/home",
+      },
+      {
+        source: "/admin",
+        destination: "/admin/index.html",
+      },
+    ];
+  },
+};
--- a/package.json
+++ b/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@tinacms/starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "tinacms dev -c \"next dev\"",
+    "build": "tinacms build && next build",
+    "start": "tinacms build && next start",
+    "export": "npm run build && next export",
+    "lint": "eslint . --ext .ts,.tsx"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^6.3.1",
+    "@tinacms/cli": "^1.5.14",
+    "@types/js-cookie": "^3.0.0",
+    "@types/node": "^16.11.7",
+    "@types/react": "^17.0.35",
+    "@types/styled-components": "^5.1.15",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^8.13.0",
+    "postcss": "^8.3.11",
+    "postcss-import": "^14.0.2",
+    "postcss-nesting": "^10.1.0"
+  },
+  "dependencies": {
+    "@headlessui/react": "1.7.5",
+    "@tailwindcss/typography": "^0.5.8",
+    "date-fns": "^2.23.0",
+    "next": "^13.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.2.0",
+    "styled-jsx": "^3.2.5",
+    "tailwindcss": "^3.2.4",
+    "tinacms": "^1.5.6",
+    "typescript": "^4.5.2"
+  }
+}
--- a/pages/404.js
+++ b/pages/404.js
@@ -0,0 +1,24 @@
+import { Hero } from "../components/blocks/hero";
+import { Layout } from "../components/layout";
+
+export default function FourOhFour() {
+  return (
+    <Layout>
+      <Hero
+        data={{
+          color: "default",
+          headline: "404 – Page Not Found",
+          text: "Oops! It seems there's nothing here, how embarrassing.",
+          actions: [
+            {
+              label: "Return Home",
+              type: "button",
+              icon: true,
+              link: "/",
+            },
+          ],
+        }}
+      />
+    </Layout>
+  );
+}
--- a/pages/[filename].tsx
+++ b/pages/[filename].tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { InferGetStaticPropsType } from "next";
+import { Blocks } from "../components/blocks-renderer";
+import { useTina } from "tinacms/dist/react";
+import { Layout } from "../components/layout";
+import { client } from "../tina/__generated__/client";
+
+export default function HomePage(
+  props: InferGetStaticPropsType<typeof getStaticProps>
+) {
+  const { data } = useTina(props);
+
+  return (
+    <Layout rawData={data} data={data.global as any}>
+      <Blocks {...data.page} />
+    </Layout>
+  );
+}
+
+export const getStaticProps = async ({ params }) => {
+  const tinaProps = await client.queries.contentQuery({
+    relativePath: `${params.filename}.md`,
+  });
+  const props = {
+    ...tinaProps,
+    enableVisualEditing: process.env.VERCEL_ENV === "preview",
+  };
+  return {
+    props: JSON.parse(JSON.stringify(props)) as typeof props,
+  };
+};
+
+export const getStaticPaths = async () => {
+  const pagesListData = await client.queries.pageConnection();
+  return {
+    paths: pagesListData.data.pageConnection?.edges?.map((page) => ({
+      params: { filename: page?.node?._sys.filename },
+    })),
+    fallback: false,
+  };
+};
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -0,0 +1,7 @@
+import "../styles.css";
+
+const App = ({ Component, pageProps }) => {
+  return <Component {...pageProps} />;
+};
+
+export default App;
--- a/pages/posts.tsx
+++ b/pages/posts.tsx
@@ -0,0 +1,35 @@
+import { Container } from "../components/util/container";
+import { Section } from "../components/util/section";
+import { Posts } from "../components/posts";
+import { client } from "../tina/__generated__/client";
+import { Layout } from "../components/layout";
+import { InferGetStaticPropsType } from "next";
+
+export default function HomePage(
+  props: InferGetStaticPropsType<typeof getStaticProps>
+) {
+  const posts = props.data.postConnection.edges;
+
+  return (
+    <Layout>
+      <Section className="flex-1">
+        <Container size="large" width="small">
+          <Posts data={posts} />
+        </Container>
+      </Section>
+    </Layout>
+  );
+}
+
+export const getStaticProps = async () => {
+  const tinaProps = await client.queries.pageQuery();
+  return {
+    props: {
+      ...tinaProps,
+    },
+  };
+};
+
+export type PostsType = InferGetStaticPropsType<
+  typeof getStaticProps
+>["data"]["postConnection"]["edges"][number];
--- a/pages/posts/[filename].tsx
+++ b/pages/posts/[filename].tsx
@@ -0,0 +1,60 @@
+import { Post } from "../../components/posts/post";
+import { client } from "../../tina/__generated__/client";
+import { useTina } from "tinacms/dist/react";
+import { Layout } from "../../components/layout";
+import { InferGetStaticPropsType } from "next";
+
+// Use the props returned by get static props
+export default function BlogPostPage(
+  props: InferGetStaticPropsType<typeof getStaticProps>
+) {
+  const { data } = useTina({
+    query: props.query,
+    variables: props.variables,
+    data: props.data,
+  });
+  if (data && data.post) {
+    return (
+      <Layout rawData={data} data={data.global}>
+        <Post {...data.post} />
+      </Layout>
+    );
+  }
+  return (
+    <Layout>
+      <div>No data</div>;
+    </Layout>
+  );
+}
+
+export const getStaticProps = async ({ params }) => {
+  const tinaProps = await client.queries.blogPostQuery({
+    relativePath: `${params.filename}.mdx`,
+  });
+  return {
+    props: {
+      ...tinaProps,
+    },
+  };
+};
+
+/**
+ * To build the blog post pages we just iterate through the list of
+ * posts and provide their "filename" as part of the URL path
+ *
+ * So a blog post at "content/posts/hello.md" would
+ * be viewable at http://localhost:3000/posts/hello
+ */
+export const getStaticPaths = async () => {
+  const postsListData = await client.queries.postConnection();
+  return {
+    paths: postsListData.data.postConnection.edges.map((post) => ({
+      params: { filename: post.node._sys.filename },
+    })),
+    fallback: "blocking",
+  };
+};
+
+export type PostType = InferGetStaticPropsType<
+  typeof getStaticProps
+>["data"]["post"];
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/public/admin/.gitignore
+++ b/public/admin/.gitignore
@@ -0,0 +1,2 @@
+index.html
+assets/
--- a/public/blocks/content.png
+++ b/public/blocks/content.png
--- a/public/blocks/features.png
+++ b/public/blocks/features.png
--- a/public/blocks/hero.png
+++ b/public/blocks/hero.png
--- a/public/blocks/testimonial.png
+++ b/public/blocks/testimonial.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/tina.svg
+++ b/public/tina.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 66 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Tina</title>
+  <desc>A proud llama</desc>
+<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>
--- a/public/uploads/Diagram.png
+++ b/public/uploads/Diagram.png
--- a/public/uploads/llama-2.avif
+++ b/public/uploads/llama-2.avif
--- a/public/uploads/llama-3.avif
+++ b/public/uploads/llama-3.avif
--- a/public/uploads/llama-4.avif
+++ b/public/uploads/llama-4.avif
--- a/public/uploads/llama-5.avif
+++ b/public/uploads/llama-5.avif
--- a/public/uploads/llama-6.avif
+++ b/public/uploads/llama-6.avif
--- a/public/uploads/netlify-advanced-build-settings.png
+++ b/public/uploads/netlify-advanced-build-settings.png
--- a/public/uploads/netlify-build-settings.png
+++ b/public/uploads/netlify-build-settings.png
--- a/public/uploads/tina-cloud-authorization.png
+++ b/public/uploads/tina-cloud-authorization.png
--- a/public/uploads/tina-cloud-starter-preview.png
+++ b/public/uploads/tina-cloud-starter-preview.png
--- a/public/uploads/unsplash-75EFpyXu3Wg.jpg
+++ b/public/uploads/unsplash-75EFpyXu3Wg.jpg
--- a/public/uploads/unsplash-lylCw4zcA7I.jpg
+++ b/public/uploads/unsplash-lylCw4zcA7I.jpg
--- a/public/uploads/vercel-congratulations.png
+++ b/public/uploads/vercel-congratulations.png
--- a/public/zeit.svg
+++ b/public/zeit.svg
@@ -0,0 +1,10 @@
+<svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
+    <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
+    <defs>
+        <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff"/>
+            <stop offset="1"/>
+        </linearGradient>
+    </defs>
+</svg>
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,229 @@
+const colors = require("tailwindcss/colors");
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  mode: "jit",
+  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
+  theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      black: colors.black,
+      white: colors.white,
+      teal: colors.cyan,
+      green: colors.emerald,
+      red: colors.rose,
+      purple: colors.purple,
+      pink: colors.pink,
+      yellow: colors.yellow,
+      gray: {
+        50: "#F6F6F9",
+        100: "#EDECF3",
+        150: "#E6E3EF",
+        200: "#E1DDEC",
+        250: "#C9C5D5",
+        300: "#b2adbe",
+        400: "#918c9e",
+        500: "#716c7f",
+        600: "#565165",
+        700: "#433e52",
+        800: "#363145",
+        900: "#252336",
+        1000: "#1c1b2e",
+      },
+      blue: {
+        50: "#DCEEFF",
+        100: "#B4DBFF",
+        200: "#85C5FE",
+        300: "#4EABFE",
+        400: "#2296fe",
+        500: "#0084FF",
+        600: "#0574e4",
+        700: "#0D5DBD",
+        800: "#144696",
+        900: "#1D2C6C",
+        1000: "#241748",
+      },
+      orange: {
+        200: "#EB7752",
+        300: "#EA6C45",
+        400: "#E85C30",
+        500: "#EC4815",
+        600: "#DC4419",
+        700: "#D04017",
+        800: "#C1360F",
+      },
+    },
+    screens: {
+      sm: "600px",
+      md: "900px",
+      lg: "1200px",
+      xl: "1500px",
+      "2xl": "1800px",
+    },
+    fontSize: {
+      xs: ".875rem",
+      sm: "1rem",
+      base: "1.125rem",
+      lg: "1.25rem",
+      xl: "1.5rem",
+      "2xl": "1.75rem",
+      "3xl": "2rem",
+      "4xl": "2.5rem",
+      "5xl": "3.25rem",
+      "6xl": "4rem",
+      "7xl": "5rem",
+      "8xl": "6rem",
+    },
+    borderWidth: {
+      DEFAULT: "3px",
+      0: "0",
+      2: "2px",
+      3: "3px",
+      4: "4px",
+    },
+    extend: {
+      textDecoration: ["active"],
+      opacity: {
+        7: ".075",
+        15: ".15",
+      },
+      maxWidth: {
+        "8xl": "86rem",
+      },
+      spacing: {
+        128: "32rem",
+      },
+      zIndex: {
+        "-1": "-1",
+      },
+      fontFamily: {
+        nunito: ["Nunito", ...defaultTheme.fontFamily.sans],
+        lato: ["Lato", ...defaultTheme.fontFamily.sans],
+      },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            pre: {
+              color: theme("colors.gray.700"),
+              backgroundColor: theme("colors.gray.100"),
+              lineHeight: 1.5,
+            },
+            code: {
+              backgroundColor: theme("colors.gray.100"),
+              padding: "0.25rem",
+              borderRadius: "3px",
+              margin: "-0.25rem 1px",
+            },
+            "code::before": {
+              content: '""',
+            },
+            "code::after": {
+              content: '""',
+            },
+            "p:first-of-type": {
+              fontSize: "1.125rem",
+            },
+          },
+        },
+        tint: {
+          css: {
+            pre: {
+              color: theme("colors.gray.800"),
+              backgroundColor: theme("colors.gray.150"),
+            },
+          },
+        },
+        lg: {
+          css: {
+            pre: {
+              lineHeight: 1.5,
+            },
+            "p:first-of-type": {
+              fontSize: "1.365rem",
+            },
+          },
+        },
+        xl: {
+          css: {
+            pre: {
+              lineHeight: 1.5,
+            },
+            "p:first-of-type": {
+              fontSize: "1.365rem",
+            },
+          },
+        },
+        dark: {
+          css: {
+            color: theme("colors.gray.200"),
+            '[class~="lead"]': { color: theme("colors.gray.400") },
+            a: { color: theme("colors.gray.100") },
+            strong: { color: theme("colors.gray.100") },
+            "ul > li::before": { backgroundColor: theme("colors.gray.700") },
+            hr: { borderColor: theme("colors.gray.800") },
+            blockquote: {
+              color: theme("colors.gray.100"),
+              borderLeftColor: theme("colors.gray.800"),
+            },
+            h1: { color: theme("colors.gray.100") },
+            h2: { color: theme("colors.gray.100") },
+            h3: { color: theme("colors.gray.100") },
+            h4: { color: theme("colors.gray.100") },
+            code: {
+              color: theme("colors.gray.100"),
+              backgroundColor: theme("colors.gray.1000"),
+            },
+            "a code": { color: theme("colors.gray.100") },
+            pre: {
+              color: theme("colors.gray.200"),
+              backgroundColor: theme("colors.gray.900"),
+            },
+            thead: {
+              color: theme("colors.gray.100"),
+              borderBottomColor: theme("colors.gray.700"),
+            },
+            "tbody tr": { borderBottomColor: theme("colors.gray.800") },
+          },
+        },
+        primary: {
+          css: {
+            color: theme("colors.gray.50"),
+            '[class~="lead"]': { color: theme("colors.gray.400") },
+            a: { color: theme("colors.gray.100") },
+            strong: { color: theme("colors.gray.100") },
+            "ul > li::before": { backgroundColor: theme("colors.gray.700") },
+            hr: { borderColor: theme("colors.gray.800") },
+            blockquote: {
+              color: theme("colors.gray.100"),
+              borderLeftColor: theme("colors.gray.800"),
+            },
+            h1: { color: theme("colors.gray.100") },
+            h2: { color: theme("colors.gray.100") },
+            h3: { color: theme("colors.gray.100") },
+            h4: { color: theme("colors.gray.100") },
+            code: {
+              color: theme("colors.gray.100"),
+              backgroundColor: "rgba(0,0,0,0.15)",
+            },
+            "a code": { color: theme("colors.gray.100") },
+            pre: {
+              color: theme("colors.gray.200"),
+              backgroundColor: "rgba(0,0,0,0.15)",
+            },
+            thead: {
+              color: theme("colors.gray.100"),
+              borderBottomColor: theme("colors.gray.700"),
+            },
+            "tbody tr": { borderBottomColor: theme("colors.gray.800") },
+          },
+        },
+      }),
+    },
+  },
+  variants: {
+    extend: { typography: ["tint", "dark", "primary"] },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};
--- a/tina/.gitignore
+++ b/tina/.gitignore
@@ -0,0 +1 @@
+__generated__
--- a/tina/config.tsx
+++ b/tina/config.tsx
@@ -0,0 +1,372 @@
+import { defineConfig } from "tinacms";
+import { contentBlockSchema } from "../components/blocks/content";
+import { featureBlockSchema } from "../components/blocks/features";
+import { heroBlockSchema } from "../components/blocks/hero";
+import { testimonialBlockSchema } from "../components/blocks/testimonial";
+import { ColorPickerInput } from "./fields/color";
+import { iconSchema } from "../components/util/icon";
+
+const config = defineConfig({
+  clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
+  branch:
+    process.env.NEXT_PUBLIC_TINA_BRANCH! || // custom branch env override
+    process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF! || // Vercel branch env
+    process.env.HEAD!, // Netlify branch env
+  token: process.env.TINA_TOKEN!,
+  media: {
+    // If you wanted cloudinary do this
+    // loadCustomStore: async () => {
+    //   const pack = await import("next-tinacms-cloudinary");
+    //   return pack.TinaCloudCloudinaryMediaStore;
+    // },
+    // this is the config for the tina cloud media store
+    tina: {
+      publicFolder: "public",
+      mediaRoot: "uploads",
+    },
+  },
+  build: {
+    publicFolder: "public", // The public asset folder for your framework
+    outputFolder: "admin", // within the public folder
+  },
+  schema: {
+    collections: [
+      {
+        label: "Blog Posts",
+        name: "post",
+        path: "content/posts",
+        format: "mdx",
+        ui: {
+          router: ({ document }) => {
+            return `/posts/${document._sys.filename}`;
+          },
+        },
+        fields: [
+          {
+            type: "string",
+            label: "Title",
+            name: "title",
+            isTitle: true,
+            required: true,
+          },
+          {
+            type: "image",
+            name: "heroImg",
+            label: "Hero Image",
+          },
+          {
+            type: "rich-text",
+            label: "Excerpt",
+            name: "excerpt",
+          },
+          {
+            type: "reference",
+            label: "Author",
+            name: "author",
+            collections: ["author"],
+          },
+          {
+            type: "datetime",
+            label: "Posted Date",
+            name: "date",
+            ui: {
+              dateFormat: "MMMM DD YYYY",
+              timeFormat: "hh:mm A",
+            },
+          },
+          {
+            type: "rich-text",
+            label: "Body",
+            name: "_body",
+            templates: [
+              {
+                name: "DateTime",
+                label: "Date & Time",
+                inline: true,
+                fields: [
+                  {
+                    name: "format",
+                    label: "Format",
+                    type: "string",
+                    options: ["utc", "iso", "local"],
+                  },
+                ],
+              },
+              {
+                name: "BlockQuote",
+                label: "Block Quote",
+                fields: [
+                  {
+                    name: "children",
+                    label: "Quote",
+                    type: "rich-text",
+                  },
+                  {
+                    name: "authorName",
+                    label: "Author",
+                    type: "string",
+                  },
+                ],
+              },
+              {
+                name: "NewsletterSignup",
+                label: "Newsletter Sign Up",
+                fields: [
+                  {
+                    name: "children",
+                    label: "CTA",
+                    type: "rich-text",
+                  },
+                  {
+                    name: "placeholder",
+                    label: "Placeholder",
+                    type: "string",
+                  },
+                  {
+                    name: "buttonText",
+                    label: "Button Text",
+                    type: "string",
+                  },
+                  {
+                    name: "disclaimer",
+                    label: "Disclaimer",
+                    type: "rich-text",
+                  },
+                ],
+                ui: {
+                  defaultItem: {
+                    placeholder: "Enter your email",
+                    buttonText: "Notify Me",
+                  },
+                },
+              },
+            ],
+            isBody: true,
+          },
+        ],
+      },
+      {
+        label: "Global",
+        name: "global",
+        path: "content/global",
+        format: "json",
+        ui: {
+          global: true,
+        },
+        fields: [
+          {
+            type: "object",
+            label: "Header",
+            name: "header",
+            fields: [
+              iconSchema as any,
+              {
+                type: "string",
+                label: "Name",
+                name: "name",
+              },
+              {
+                type: "string",
+                label: "Color",
+                name: "color",
+                options: [
+                  { label: "Default", value: "default" },
+                  { label: "Primary", value: "primary" },
+                ],
+              },
+              {
+                type: "object",
+                label: "Nav Links",
+                name: "nav",
+                list: true,
+                ui: {
+                  itemProps: (item) => {
+                    return { label: item?.label };
+                  },
+                  defaultItem: {
+                    href: "home",
+                    label: "Home",
+                  },
+                },
+                fields: [
+                  {
+                    type: "string",
+                    label: "Link",
+                    name: "href",
+                  },
+                  {
+                    type: "string",
+                    label: "Label",
+                    name: "label",
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: "object",
+            label: "Footer",
+            name: "footer",
+            fields: [
+              {
+                type: "string",
+                label: "Color",
+                name: "color",
+                options: [
+                  { label: "Default", value: "default" },
+                  { label: "Primary", value: "primary" },
+                ],
+              },
+              {
+                type: "object",
+                label: "Social Links",
+                name: "social",
+                fields: [
+                  {
+                    type: "string",
+                    label: "Facebook",
+                    name: "facebook",
+                  },
+                  {
+                    type: "string",
+                    label: "Twitter",
+                    name: "twitter",
+                  },
+                  {
+                    type: "string",
+                    label: "Instagram",
+                    name: "instagram",
+                  },
+                  {
+                    type: "string",
+                    label: "Github",
+                    name: "github",
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: "object",
+            label: "Theme",
+            name: "theme",
+            // @ts-ignore
+            fields: [
+              {
+                type: "string",
+                label: "Primary Color",
+                name: "color",
+                ui: {
+                  component: ColorPickerInput,
+                },
+              },
+              {
+                type: "string",
+                name: "font",
+                label: "Font Family",
+                options: [
+                  {
+                    label: "System Sans",
+                    value: "sans",
+                  },
+                  {
+                    label: "Nunito",
+                    value: "nunito",
+                  },
+                  {
+                    label: "Lato",
+                    value: "lato",
+                  },
+                ],
+              },
+              {
+                type: "string",
+                name: "darkMode",
+                label: "Dark Mode",
+                options: [
+                  {
+                    label: "System",
+                    value: "system",
+                  },
+                  {
+                    label: "Light",
+                    value: "light",
+                  },
+                  {
+                    label: "Dark",
+                    value: "dark",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Authors",
+        name: "author",
+        path: "content/authors",
+        format: "md",
+        fields: [
+          {
+            type: "string",
+            label: "Name",
+            name: "name",
+            isTitle: true,
+            required: true,
+          },
+          {
+            type: "image",
+            label: "Avatar",
+            name: "avatar",
+          },
+        ],
+      },
+      {
+        label: "Pages",
+        name: "page",
+        path: "content/pages",
+        ui: {
+          router: ({ document }) => {
+            if (document._sys.filename === "home") {
+              return `/`;
+            }
+            if (document._sys.filename === "about") {
+              return `/about`;
+            }
+            return undefined;
+          },
+        },
+        fields: [
+          {
+            type: "string",
+            label: "Title",
+            name: "title",
+            description:
+              "The title of the page. This is used to display the title in the CMS",
+            isTitle: true,
+            required: true,
+          },
+          {
+            type: "object",
+            list: true,
+            name: "blocks",
+            label: "Sections",
+            ui: {
+              visualSelector: true,
+            },
+            templates: [
+              heroBlockSchema,
+              // @ts-ignore
+              featureBlockSchema,
+              contentBlockSchema,
+              testimonialBlockSchema,
+            ],
+          },
+        ],
+      },
+    ],
+  },
+});
+
+export default config;
--- a/tina/fields/color.tsx
+++ b/tina/fields/color.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import { wrapFieldsWithMeta } from "tinacms";
+
+export const colorOptions = [
+  "blue",
+  "teal",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "pink",
+  "purple",
+  "white",
+];
+
+export const ColorPickerInput = wrapFieldsWithMeta(({ input }) => {
+  const inputClasses = {
+    blue: "bg-blue-500 border-blue-600",
+    teal: "bg-teal-500 border-teal-600",
+    green: "bg-green-500 border-green-600",
+    yellow: "bg-yellow-500 border-yellow-600",
+    orange: "bg-orange-500 border-orange-600",
+    red: "bg-red-500 border-red-600",
+    pink: "bg-pink-500 border-pink-600",
+    purple: "bg-purple-500 border-purple-600",
+    white: "bg-white border-gray-150",
+  };
+
+  return (
+    <>
+      <input type="text" id={input.name} className="hidden" {...input} />
+      <div className="flex gap-2 flex-wrap">
+        {colorOptions.map((color) => {
+          return (
+            <button
+              className={`w-9 h-9 rounded-full shadow border ${
+                inputClasses[color]
+              } ${
+                input.value === color
+                  ? "ring-[3px] ring-offset-2 ring-blue-400"
+                  : ""
+              }`}
+              onClick={() => {
+                input.onChange(color);
+              }}
+            ></button>
+          );
+        })}
+      </div>
+    </>
+  );
+});
--- a/tina/fields/icon.tsx
+++ b/tina/fields/icon.tsx
@@ -0,0 +1,134 @@
+import * as React from "react";
+import { GoCircleSlash } from "react-icons/go";
+import { Button, wrapFieldsWithMeta } from "tinacms";
+import { Popover, Transition } from "@headlessui/react";
+import { Icon, IconOptions } from "../../components/util/icon";
+import { BiChevronRight } from "react-icons/bi";
+
+const parseIconName = (name: string) => {
+  const splitName = name.split(/(?=[A-Z])/);
+  if (splitName.length > 1) {
+    return splitName.slice(1).join(" ");
+  } else {
+    return name;
+  }
+};
+
+export const IconPickerInput = wrapFieldsWithMeta(({ input }) => {
+  const [filter, setFilter] = React.useState("");
+  const filteredBlocks = React.useMemo(() => {
+    return Object.keys(IconOptions).filter((name) => {
+      return name.toLowerCase().includes(filter.toLowerCase());
+    });
+  }, [filter]);
+
+  const inputLabel = Object.keys(IconOptions).includes(input.value)
+    ? parseIconName(input.value)
+    : "Select Icon";
+  const InputIcon = IconOptions[input.value] ? IconOptions[input.value] : null;
+
+  return (
+    <div className="relative z-[1000]">
+      <input type="text" id={input.name} className="hidden" {...input} />
+      <Popover>
+        {({ open }) => (
+          <>
+            <Popover.Button as={"span"}>
+              <Button
+                className={`text-sm h-11 px-4 ${InputIcon ? "h-11" : "h-10"}`}
+                size="custom"
+                rounded="full"
+                variant={open ? "secondary" : "white"}
+              >
+                {InputIcon && (
+                  <InputIcon className="w-7 mr-1 h-auto fill-current text-blue-500" />
+                )}
+                {inputLabel}
+                {!InputIcon && (
+                  <BiChevronRight className="w-5 h-auto fill-current opacity-70 ml-1" />
+                )}
+              </Button>
+            </Popover.Button>
+            <div
+              className="absolute w-full min-w-[192px] max-w-2xl -bottom-2 left-0 translate-y-full"
+              style={{ zIndex: 1000 }}
+            >
+              <Transition
+                enter="transition duration-150 ease-out"
+                enterFrom="transform opacity-0 -translate-y-2"
+                enterTo="transform opacity-100 translate-y-0"
+                leave="transition duration-75 ease-in"
+                leaveFrom="transform opacity-100 translate-y-0"
+                leaveTo="transform opacity-0 -translate-y-2"
+              >
+                <Popover.Panel className="relative overflow-hidden rounded-lg shadow-lg bg-white border border-gray-150 z-50">
+                  {({ close }) => (
+                    <div className="max-h-[24rem] flex flex-col w-full h-full">
+                      <div className="bg-gray-50 p-2 border-b border-gray-100 z-10 shadow-sm">
+                        <input
+                          type="text"
+                          className="bg-white text-sm rounded-sm border border-gray-100 shadow-inner py-1.5 px-2.5 w-full block placeholder-gray-200"
+                          onClick={(event: any) => {
+                            event.stopPropagation();
+                            event.preventDefault();
+                          }}
+                          value={filter}
+                          onChange={(event: any) => {
+                            setFilter(event.target.value);
+                          }}
+                          placeholder="Filter..."
+                        />
+                      </div>
+                      {filteredBlocks.length === 0 && (
+                        <span className="relative text-center text-xs px-2 py-3 text-gray-300 bg-gray-50 italic">
+                          No matches found
+                        </span>
+                      )}
+                      {filteredBlocks.length > 0 && (
+                        <div className="w-full grid grid-cols-6 auto-rows-auto p-2 overflow-y-auto">
+                          <button
+                            className="relative rounded-lg text-center text-xs py-2 px-3 flex-1 outline-none transition-all ease-out duration-150 hover:text-blue-500 focus:text-blue-500 focus:bg-gray-50 hover:bg-gray-50"
+                            key={"clear-input"}
+                            onClick={() => {
+                              input.onChange("");
+                              setFilter("");
+                              close();
+                            }}
+                          >
+                            <GoCircleSlash className="w-6 h-auto text-gray-200" />
+                          </button>
+                          {filteredBlocks.map((name) => {
+                            return (
+                              <button
+                                className="relative flex items-center justify-center rounded-lg text-center text-xs py-2 px-3 flex-1 outline-none transition-all ease-out duration-150 hover:text-blue-500 focus:text-blue-500 focus:bg-gray-50 hover:bg-gray-50"
+                                key={name}
+                                onClick={() => {
+                                  input.onChange(name);
+                                  setFilter("");
+                                  close();
+                                }}
+                              >
+                                <Icon
+                                  data={{
+                                    name: name,
+                                    size: "custom",
+                                    color: "blue",
+                                  }}
+                                  className="w-7 h-auto"
+                                />
+                              </button>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </Popover.Panel>
+              </Transition>
+            </div>
+          </>
+        )}
+      </Popover>
+    </div>
+  );
+});
--- a/tina/queries/frags.gql
+++ b/tina/queries/frags.gql
@@ -0,0 +1,5 @@
+fragment LayoutQueryFragment on Query {
+  global(relativePath: "index.json") {
+    ...GlobalParts
+  }
+}
--- a/tina/queries/queries.gql
+++ b/tina/queries/queries.gql
@@ -0,0 +1,41 @@
+query pageQuery {
+  ...LayoutQueryFragment
+  postConnection {
+    edges {
+      node {
+        id
+        date
+        title
+        excerpt
+        author {
+          ... on Author {
+            ...AuthorParts
+          }
+        }
+        _sys {
+          filename
+        }
+      }
+    }
+  }
+}
+
+query contentQuery($relativePath: String!) {
+  ...LayoutQueryFragment
+  page(relativePath: $relativePath) {
+    ...PageParts
+  }
+}
+
+query blogPostQuery($relativePath: String!) {
+  ...LayoutQueryFragment
+  post(relativePath: $relativePath) {
+    ...PostParts
+    author {
+      ... on Author {
+        name
+        avatar
+      }
+    }
+  }
+}
--- a/tina/tina-lock.json
+++ b/tina/tina-lock.json
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "exclude": ["node_modules"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".forestry/types.ts",
+    ".forestry/config.ts"
+  ]
+}
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="20" role="img" aria-label="lighthouse: 88%"><title>lighthouse: 88%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="102" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="67" height="20" fill="#555"/><rect x="67" width="35" height="20" fill="#a4a61d"/><rect width="102" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="345" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="570">lighthouse</text><text x="345" y="140" transform="scale(.1)" fill="#fff" textLength="570">lighthouse</text><text aria-hidden="true" x="835" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="250">88%</text><text x="835" y="140" transform="scale(.1)" fill="#fff" textLength="250">88%</text></g></svg>