feat(docs): migrate documentation site into monorepo (#5912)

apps/docs/src/pages/about-us/index.tsx

@@ -0,0 +1,32 @@
+import Layout from "@theme/Layout";
+import React from "react";
+import { CodeContributorList } from "@site/src/components/pages/about/code-contributors/code-contributor-list";
+import { TranslationContributorList } from "@site/src/components/pages/about/translations-contributors/translation-constributor-list";
+
+export default function AboutUs() {
+  return (
+    <Layout
+      title="About Homarr"
+      description={
+        "Homarr is a community driven open source project that is being maintained by volunteers. Homarr has been a growing project since 2021."
+      }
+    >
+      <main className="mx-auto w-full md:w-2/3 ps-10 pr-10 mb-20 mt-10">
+        <h1 className="text-5xl font-extrabold">About us</h1>
+        <p className="text-lg text-gray-500">
+          Homarr is a community driven open source project that is being maintained by volunteers. Thanks to these
+          people, Homarr has been a growing project since 2021. Our team is working completely remote from many
+          different countries on Homarr in their leisure time for no compensation.
+        </p>
+
+        <h2 className={"mt-10"}>Code contributions</h2>
+
+        <CodeContributorList />
+
+        <h2 className={"mt-10"}>Translation contributions</h2>
+
+        <TranslationContributorList />
+      </main>
+    </Layout>
+  );
+}

apps/docs/src/pages/carbon-test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import { CarbonCoverStrict, CarbonCoverObserver, CarbonCoverCssOnlySecond } from "../components/carbon";
+
+export default function CarbonTestPage() {
+  return (
+    <Layout title="Carbon Ads Test" description="Test different Carbon cover implementations">
+      <div className="container margin-vert--lg">
+        <h1>Carbon Ads Test</h1>
+        <p>Compare three implementations to only show the cover unit.</p>
+
+        <section style={{ marginTop: 24, marginBottom: 24 }}>
+          <h2>1) Strict re-initialization</h2>
+          <CarbonCoverStrict />
+        </section>
+
+        <section style={{ marginTop: 24, marginBottom: 24 }}>
+          <h2>2) Observer trimming</h2>
+          <CarbonCoverObserver />
+        </section>
+
+        <section style={{ marginTop: 24, marginBottom: 24 }}>
+          <h2>3) CSS-only (hide first, keep cover)</h2>
+          <CarbonCoverCssOnlySecond />
+        </section>
+      </div>
+    </Layout>
+  );
+}

apps/docs/src/pages/index.module.css

@@ -0,0 +1,41 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+*/
+
+section {
+  margin-bottom: 2rem;
+}
+
+.heroWave {
+  width: 100%;
+  height: 125px;
+}
+
+.hero h2 {
+  font-size: 2rem;
+}
+
+.hero p {
+  font-weight: 500;
+}
+
+.heroImage {
+  display: block;
+  margin-left: auto;
+  border-radius: 6px;
+  max-width: min(100%, 500px);
+}
+
+
+.heroBanner {
+  padding: 4rem;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}

apps/docs/src/pages/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import Layout from "@theme/Layout";
+
+import HomepageFeatures from "../components/pages/home/features/features";
+import HomepageUserReviews from "../components/pages/home/review-list/review-list";
+import HomeHero from "../components/pages/home/hero/hero";
+
+import styles from "./index.module.css";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import { SectionContainer } from "@site/src/components/pages/home/container/section-container";
+import { DragAndDropShowcase } from "@site/src/components/pages/home/drag-and-drop/drag-and-drop-showcase";
+import { AvailableIntegrations } from "@site/src/components/pages/home/integrations/available-integrations";
+
+export default function Home() {
+  return (
+    <Layout description="Simplify the management of your server with Homarr - a sleek, modern dashboard that puts all of your apps and services at your fingertips. With Homarr, you can access and control everything in one convenient location. Homarr seamlessly integrates with the apps you've added, providing you with valuable information and giving you complete control. Installation is a breeze, and Homarr supports a wide range of deployment methods.">
+      <HomeHero />
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="none"
+        viewBox="0 0 1440 320"
+        className={styles.heroWave}
+      >
+        <path
+          fill="var(--ifm-color-primary)"
+          fillOpacity="1"
+          d="M0,224L48,202.7C96,181,192,139,288,133.3C384,128,480,160,576,149.3C672,139,768,85,864,58.7C960,32,1056,32,1152,37.3C1248,43,1344,53,1392,58.7L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
+        ></path>
+      </svg>
+      <SectionContainer>
+        <HomepageFeatures />
+      </SectionContainer>
+      <BrowserOnly fallback={<span>loading...</span>}>
+        {() => {
+          const DataflowVisualizationComponent =
+            require("../components/pages/home/dataflow/dataflow").DataflowVisualizationComponent;
+          return <DataflowVisualizationComponent />;
+        }}
+      </BrowserOnly>
+      <DragAndDropShowcase />
+      <AvailableIntegrations />
+      <SectionContainer>
+        <HomepageUserReviews />
+      </SectionContainer>
+    </Layout>
+  );
+}