From 2f6542d5f03b15a9b0a00ca8b9d8bafb84926c05 Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@gmail.com>
Date: Fri, 7 Jun 2024 11:46:20 +0200
Subject: [PATCH] finish welcome page

---
 public/marigold.svg                           |  1 +
 src/routes/__root.tsx                         |  7 ++-
 src/routes/_components/About.tsx              | 48 +++++++++++++++++++
 .../_components}/Devtools.tsx                 |  0
 src/routes/_components/Footer.tsx             | 23 +++++++++
 .../_components}/Header.tsx                   |  6 +--
 src/routes/_components/Tutorials.tsx          |  4 +-
 src/routes/index.lazy.tsx                     | 33 +------------
 8 files changed, 83 insertions(+), 39 deletions(-)
 create mode 100644 public/marigold.svg
 create mode 100644 src/routes/_components/About.tsx
 rename src/{components => routes/_components}/Devtools.tsx (100%)
 create mode 100644 src/routes/_components/Footer.tsx
 rename src/{components => routes/_components}/Header.tsx (94%)

diff --git a/public/marigold.svg b/public/marigold.svg
new file mode 100644
index 0000000..bc9a0ab
--- /dev/null
+++ b/public/marigold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><path fill="#46505a" d="M137 1c-4 0-9 2-13 6-14 14-14 43-14 43s29 0 43-14c4-4 6-8 7-12a77 77 0 0 0-23-23z"/><path fill="#f98422" d="M63 4c-3 3-4 8-4 14 0 20 20 40 20 40s20-20 20-40c0-6-1-11-4-14a80 80 0 0 0-32 0zm32 154c3-4 4-8 4-14 0-20-20-40-20-40s-21 20-21 40c0 6 2 10 5 14a80 80 0 0 0 32 0zm61-93c-4-3-8-5-14-5-20 0-40 21-40 21s20 20 40 20c6 0 10-1 14-4a80 80 0 0 0 0-32zM2 97c4 3 8 4 14 4 20 0 40-20 40-20S36 60 16 60c-6 0-10 2-14 4a80 80 0 0 0 0 33zm143 27c-1-4-3-9-7-13-14-14-43-14-43-14s0 29 14 43c4 4 9 6 13 7a80 80 0 0 0 23-23zM13 38c1 4 3 8 7 13 14 14 43 14 43 14s0-29-14-43c-4-4-9-6-13-7a77 77 0 0 0-23 23zm23 109c4-1 9-3 13-7 14-14 14-43 14-43s-29 0-43 14c-4 4-6 9-7 12a80 80 0 0 0 23 24z"/></svg>
\ No newline at end of file
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 3dd2f89..5155618 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,7 +1,9 @@
 import { createRootRoute, Outlet } from '@tanstack/react-router';
-import Header from '@/components/Header';
 import { Container } from '@/components/Container';
-import { Devtools } from '@/components/Devtools';
+
+import { Devtools } from './_components/Devtools';
+import { Footer } from './_components/Footer';
+import { Header } from './_components/Header';
 
 const Layout = () => (
   <>
@@ -14,6 +16,7 @@ const Layout = () => (
     >
       <Outlet />
     </Container>
+    <Footer />
     <Devtools />
   </>
 );
diff --git a/src/routes/_components/About.tsx b/src/routes/_components/About.tsx
new file mode 100644
index 0000000..e6e9022
--- /dev/null
+++ b/src/routes/_components/About.tsx
@@ -0,0 +1,48 @@
+import { Content } from '@/components/Container';
+import { Columns, Inset, Message } from '@marigold/components';
+import { Link } from '@tanstack/react-router';
+
+export const About = () => (
+  <Content className="prose-lg text-pretty py-20">
+    <Columns columns={[1, 1]} space={24} collapseAt="900px">
+      <div>
+        <h2>About</h2>
+        <p>
+          The main purpose of this site is to provide an overview of common
+          patterns and practices in ReactJS through simple examples. We address
+          specific issues and challenges, such as managing state and handling
+          forms, and demonstrate these in conjunction with the{' '}
+          <Link href="https://www.marigold-ui.io/">Marigold Design System</Link>{' '}
+          where applicable.
+        </p>
+      </div>
+      <div>
+        <h2>Mission</h2>
+        <p>
+          The tutorials teach you how to apply React patterns directly to our
+          daily projects. From managing state to integrating design systems like
+          Marigold, these tutorials offer practical solutions. By applying these
+          learned patterns, you can make your daily coding tasks smoother and
+          more enjoyable.
+        </p>
+      </div>
+    </Columns>
+    <div className="mx-auto grid max-w-screen-sm place-items-center pt-32">
+      <Message variant="info" messageTitle="Feedback">
+        <p className="mb-4">
+          If you have any suggestions for patterns that we should add, or if you
+          some your own code could become a valuable addition here, we'd love to
+          hear from you!
+        </p>
+        <p>
+          Your feedback, ideas, and suggestions for improvement are always
+          welcome. Feel free to reach out to us through any of{' '}
+          <Link href="https://www.marigold-ui.io/introduction/get-in-touch">
+            our communication channels
+          </Link>
+          .
+        </p>
+      </Message>
+    </div>
+  </Content>
+);
diff --git a/src/components/Devtools.tsx b/src/routes/_components/Devtools.tsx
similarity index 100%
rename from src/components/Devtools.tsx
rename to src/routes/_components/Devtools.tsx
diff --git a/src/routes/_components/Footer.tsx b/src/routes/_components/Footer.tsx
new file mode 100644
index 0000000..281db3a
--- /dev/null
+++ b/src/routes/_components/Footer.tsx
@@ -0,0 +1,23 @@
+import { Link } from '@tanstack/react-router';
+
+export const Footer = () => (
+  <footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t px-4 py-6 sm:flex-row md:px-6">
+    <p className="text-xs text-secondary-500 dark:text-secondary-400">
+      Build with 🧡 by the Design System Team
+    </p>
+    <nav className="flex gap-4 sm:ml-auto sm:gap-6">
+      <Link
+        href="https://www.marigold-ui.io/"
+        className="text-xs underline-offset-4 hover:underline"
+      >
+        Marigold Docs
+      </Link>
+      <Link
+        href="https://www.reservix.net/karriere/"
+        className="text-xs underline-offset-4 hover:underline"
+      >
+        Reservix GmbH
+      </Link>
+    </nav>
+  </footer>
+);
diff --git a/src/components/Header.tsx b/src/routes/_components/Header.tsx
similarity index 94%
rename from src/components/Header.tsx
rename to src/routes/_components/Header.tsx
index ab1f195..741f1ab 100644
--- a/src/components/Header.tsx
+++ b/src/routes/_components/Header.tsx
@@ -1,5 +1,5 @@
 import { Link, useRouter } from '@tanstack/react-router';
-import { Logo } from './Logo';
+import { Logo } from '../../components/Logo';
 
 const unkebabify = (val: string) =>
   val
@@ -35,7 +35,7 @@ const Navigation = () => {
   );
 };
 
-const Header = () => (
+export const Header = () => (
   <header className="sticky top-0 z-10  flex h-[--page-header-height] w-full items-center justify-between gap-2 border-0 border-b border-solid border-secondary-200 bg-bg-body px-[--page-padding] md:justify-normal md:px-[--page-padding-md] xl:px-[--page-padding-xl]">
     <Link className="md:pr-8" to="/">
       <Logo className="size-6" />
@@ -43,5 +43,3 @@ const Header = () => (
     <Navigation />
   </header>
 );
-
-export default Header;
diff --git a/src/routes/_components/Tutorials.tsx b/src/routes/_components/Tutorials.tsx
index 92e18d9..0df4499 100644
--- a/src/routes/_components/Tutorials.tsx
+++ b/src/routes/_components/Tutorials.tsx
@@ -5,8 +5,8 @@ export const Tutorials = () => (
   <Breakout id="skip-content" className="bg-secondary-400/10 py-32">
     <Container>
       <Content>
-        <div className="not-prose pb-8">
-          <h2 className="text-2xl font-bold">Tutorials</h2>
+        <div className="prose-lg pb-8">
+          <h2 className="my-0">Tutorials</h2>
           <p className="text-text-primary-muted">
             Dive into our fun and easy-to-follow tutorials! Here’s a list of
             available guides to help you learn React step-by-step and boost your
diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx
index 8e7ec30..4d9cc0a 100644
--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.lazy.tsx
@@ -3,43 +3,14 @@ import { createLazyFileRoute } from '@tanstack/react-router';
 import { Content } from '@/components/Container';
 import { Hero } from './_components/Hero';
 import { Tutorials } from './_components/Tutorials';
+import { About } from './_components/About';
 
 const Page = () => {
   return (
     <>
       <Hero />
       <Tutorials />
-      <Content id="skip-content">
-        <h2>How to use the React Reference App?</h2>
-        <p>
-          Using the React Reference App is straightforward. Each pattern or
-          practice is presented with a detailed explanation and code examples.
-          You can copy these code examples directly into your own projects. To
-          do this, simply click the copy button (
-          <button
-            type="button"
-            title="Copy code"
-            className="ch-editor-button"
-            style={{ verticalAlign: 'bottom', marginRight: '0px' }}
-          >
-            <svg
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1.6px"
-                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-              ></path>
-            </svg>
-          </button>
-          ) in the code snippet. Clicking this button will copy the code to your
-          clipboard, ready to be pasted into your own code editor.
-        </p>
-      </Content>
+      <About />
     </>
   );
 };