github.com/grafana/tanka@v0.26.1-0.20240506093700-c22cfc35c21a/docs/src/components/home/index.js (about)

     1  import React from "react"
     2  import { Link } from "docz"
     3  
     4  import Snip from "./snippet.mdx"
     5  
     6  const elemCss = {
     7    display: "flex",
     8    flexGrow: 1,
     9    flexDirection: "column",
    10    flexBasis: `calc(50% - 2em)`,
    11    justifyContent: "center",
    12    marginBottom: "1em",
    13    marginLeft: "2em",
    14  }
    15  
    16  export const Catcher = () => (
    17    <div
    18      css={{
    19        display: "flex",
    20        flexWrap: "wrap",
    21        marginLeft: "-2em",
    22        marginTop: "1em",
    23      }}
    24    >
    25      <div css={elemCss}>
    26        <h1
    27          css={{
    28            marginTop: 0,
    29            marginBottom: 0,
    30            fontSize: "3em",
    31            lineHeight: "normal",
    32          }}
    33        >
    34          Define. Reuse. Override.
    35        </h1>
    36        <p>
    37          Grafana Tanka is the robust configuration utility for your{" "}
    38          <a href="https://kubernetes.io">Kubernetes</a> cluster, powered by the
    39          unique <a href="https://jsonnet.org">Jsonnet</a> language
    40        </p>
    41        <div css={{ display: "flex", marginLeft: "-1em" }}>
    42          <Button to="/install">Install</Button>
    43          <Button to="/tutorial/overview">Tutorial</Button>
    44        </div>
    45      </div>
    46      <div
    47        css={{
    48          ...elemCss,
    49          flexBasis: "calc(50% - 2em)",
    50          overflowX: "hidden",
    51          pre: { marginTop: 0, marginBottom: 0 },
    52        }}
    53      >
    54        <Snip></Snip>
    55        <small>Kubernetes Deployment. That's all it takes.</small>
    56      </div>
    57    </div>
    58  )
    59  
    60  const Button = ({ to, children }) => (
    61    <Link
    62      css={{
    63        marginLeft: "1em",
    64        textDecoration: "none",
    65        color: "white",
    66        background: "#0B5FFF",
    67        padding: ".5em",
    68        justifyContent: "center",
    69        display: "flex",
    70        flexGrow: 1,
    71        borderRadius: "5px",
    72        border: "2px solid #0B5FFF",
    73        ":hover": {
    74          background: "white",
    75          color: "#0B5FFF",
    76        },
    77      }}
    78      to={to}
    79    >
    80      {children}
    81    </Link>
    82  )