import Button from "../../components/Button";
import styles from "./Homepage.module.scss";

export default function Homepage() {
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <h2>Usage Example for</h2>
        <h1>Owlchat</h1>
      </div>
      <div className={styles.description}>
        <p>
          In the geek world, owls are reputed to be great messengers, as well as
          being an animal that represents wisdom and knowledge. The initial idea
          of our project is to offer a great communication service between the
          contracting company and its clients, that is, this parallels being an
          intermediary in sending messages as well as.
        </p>
        <div>
          <a href="https://www.luislenzi.dev" target="_blank" rel="noreferrer">
            👨‍💻 Made by Luís Lenzi Dev
          </a>
          <a
            href="https://www.npmjs.com/package/owlchat"
            target="_blank"
            rel="noreferrer"
          >
            📃 Take a look on NPM package here
          </a>
        </div>
      </div>
      <div className={styles.stacks}>
        <h2>Stacks</h2>
        <div>
          <a
            href="https://pt-br.reactjs.org"
            target="_blank"
            rel="noreferrer"
          >
            <Button
              style={{
                borderRadius: "25px",
                padding: ".5rem 1rem",
                background: "transparent",
                color: "var(--red-primary)",
                fontWeight: "400",
                fontSize: "1rem",
                border: "1px solid var(--red-primary)",
              }}
            >
              React
            </Button>
          </a>
          <a
            href="https://nextjs.org"
            target="_blank"
            rel="noreferrer"
          >
            <Button
              style={{
                borderRadius: "25px",
                padding: ".5rem 1rem",
                background: "transparent",
                color: "var(--red-primary)",
                fontWeight: "400",
                fontSize: "1rem",
                border: "1px solid var(--red-primary)",
              }}
            >
              NextJS
            </Button>
          </a>
          <a
            href="https://www.typescriptlang.org"
            target="_blank"
            rel="noreferrer"
          >
            <Button
              style={{
                borderRadius: "25px",
                padding: ".5rem 1rem",
                background: "transparent",
                color: "var(--red-primary)",
                fontWeight: "400",
                fontSize: "1rem",
                border: "1px solid var(--red-primary)",
              }}
            >
              Typescript
            </Button>
          </a>
          <a
            href="https://sass-lang.com"
            target="_blank"
            rel="noreferrer"
          >
            <Button
              style={{
                borderRadius: "25px",
                padding: ".5rem 1rem",
                background: "transparent",
                color: "var(--red-primary)",
                fontWeight: "400",
                fontSize: "1rem",
                border: "1px solid var(--red-primary)",
              }}
            >
              SaSS
            </Button>
          </a>
          <a
            href="https://mui.com"
            target="_blank"
            rel="noreferrer"
          >
            <Button
              style={{
                borderRadius: "25px",
                padding: ".5rem 1rem",
                background: "transparent",
                color: "var(--red-primary)",
                fontWeight: "400",
                fontSize: "1rem",
                border: "1px solid var(--red-primary)",
              }}
            >
              MUI
            </Button>
          </a>
        </div>
      </div>
      <div className={styles.more}>
        <p>👉 This is a educational project and isn{"'"}t finished yet</p>
        <p>👉 The body of chatbot isn{"'"}t dynamic yet</p>
        <p>👉 No profit purpose</p>
      </div>
    </div>
  );
}
