finish welcome page

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 />
  </>
 );

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>
+);

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>
+);

src/components/Header.tsx → 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,13 +35,11 @@ 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" />
  </Link>
  <Navigation />
  </header>
 );
-
-export default Header;

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

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 />
  </>
  );
 };