[web] init homepage intro #1209

agdb_web/components/layout/footer.tsx → agdb_web/components/layout/footer/footer.tsx

@@ -1,7 +1,7 @@
 import styles from "./footer.module.scss";
-import { LinkItem } from "../common/link-item";
+import { LinkItem } from "@/components/common/link-item";
 
-export default function Footer() {
+export const Footer = () => {
     return (
         <footer
             className={
@@ -30,4 +30,4 @@ export default function Footer() {
             </div>
         </footer>
     );
-}
+};

agdb_web/components/layout/footer/index.tsx

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

agdb_web/components/layout/logo/index.tsx

@@ -0,0 +1,3 @@
+import { Logo } from "./logo";
+
+export default Logo;

agdb_web/components/layout/logo.tsx → agdb_web/components/layout/logo/logo.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 
-export default function Logo() {
+export const Logo = () => {
     return (
         <>
             <Image
@@ -13,4 +13,4 @@ export default function Logo() {
             <span style={{ marginLeft: ".8rem" }}>agdb</span>
         </>
     );
-}
+};

agdb_web/components/pages/intro/index.ts

@@ -0,0 +1,3 @@
+import { Intro } from "./intro";
+
+export default Intro;

agdb_web/components/pages/intro/intro.module.scss

@@ -0,0 +1,38 @@
+.intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 40vh;
+    min-height: 15rem;
+    max-height: 60rem;
+    h1 {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+        font-weight: 100;
+        color: var(--grey-color-0);
+    }
+    a {
+        font-size: 1.1rem;
+        text-decoration: none;
+        padding: 0.4rem 1rem;
+        border-radius: 0.5rem;
+        color: var(--grey-color-1);
+        border: 1px solid var(--grey-color-1);
+        margin: 1rem 0.5rem;
+        transition:
+            color 0.3s ease,
+            background-color 0.3s ease;
+        &:hover {
+            background-color: var(--grey-color-1);
+            color: var(--grey-color-6);
+        }
+    }
+}
+
+.subheading {
+    font-size: 1.3rem;
+    font-weight: 100;
+    margin-bottom: 3rem;
+    color: var(--grey-color-2);
+}

agdb_web/components/pages/intro/intro.spec.tsx

@@ -0,0 +1,10 @@
+import { expect, describe, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Intro from "@/components/pages/intro";
+
+describe("intro", () => {
+    it("should render the intro", () => {
+        render(<Intro />);
+        expect(screen.getByText(/The graph database/i)).toBeDefined();
+    });
+});

agdb_web/components/pages/intro/intro.tsx

@@ -0,0 +1,14 @@
+import styles from "./intro.module.scss";
+
+export const Intro = () => {
+    return (
+        <div className={styles.intro}>
+            <h1>agdb</h1>
+            <p className={styles.subheading}>The graph database.</p>
+            <p>
+                <a href="/docs/guides/quickstart">Quickstart</a>
+                <a href="/blog/blog">Why agdb?</a>
+            </p>
+        </div>
+    );
+};

agdb_web/pages/_app.mdx

@@ -1,3 +1,5 @@
+import "../styles/global.scss";
+
 export default function App({ Component, pageProps }) {
     return <Component {...pageProps} />;
 }

agdb_web/pages/api-docs/openapi.en-US.mdx

@@ -7,7 +7,7 @@ description: "API, Agnesoft Graph Database"
 
 The [agdb server](/docs/guides/how-to-run-server) can be accessed using OpenAPI (REST) via any HTTP client. In addition to the API specification `agdb` offers wide range of clients for many languages that uses the same API but provides convenience and ease-of-use:
 
-<p>
+<p class="flex-row">
     <a href="/api-docs/rust">
         <img width="50" src="/images/rust.png" alt="rust" />
     </a>

agdb_web/pages/index.en-US.mdx

@@ -3,9 +3,11 @@ title: agdb
 description: agdb homepage
 ---
 
-<p align="center">The graph database.</p>
+import Intro from "../components/pages/intro";
 
-<p align="center">
+<Intro />
+
+<p class="flex-row">
     <a href="/docs/docs">
         <img width="100" src="./images/db.png" alt="db" />
     </a>
@@ -22,31 +24,3 @@ description: agdb homepage
         <img width="100" src="./images/cloud.png" alt="cloud" />
     </a>
 </p>
-
-<p align="center">
-    <a href="/docs/guides/quickstart">Quickstart</a>
-    <a href="/blog/blog">Why agdb?</a>
-</p>
-
-## Mermaid example
-
-```mermaid
-graph TD;
-subgraph AA [Consumers]
-A[Mobile app];
-B[Web app];
-C[Node.js client];
-end
-subgraph BB [Services]
-E[REST API];
-F[GraphQL API];
-G[SOAP API];
-end
-Z[GraphQL API];
-A --> Z;
-B --> Z;
-C --> Z;
-Z --> E;
-Z --> F;
-Z --> G;
-```

agdb_web/styles/global.scss

@@ -0,0 +1,28 @@
+body {
+    --grey-color-0: #000;
+    --grey-color-1: #334155;
+    --grey-color-2: #4f5d75;
+    --grey-color-3: #7b8794;
+    --grey-color-4: #b0b7c3;
+    --grey-color-5: #e2e8f0;
+    --grey-color-6: #fff;
+}
+
+:is(html[class~="dark"] body) {
+    --grey-color-0: #fff;
+    --grey-color-1: #e2e8f0;
+    --grey-color-2: #b0b7c3;
+    --grey-color-3: #7b8794;
+    --grey-color-4: #4f5d75;
+    --grey-color-5: #334155;
+    --grey-color-6: #000;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin: 1rem 0;
+}