GitFOSS

// 3rd-party
import React from "react";
import type { ReactView } from "@ethicdevs/react-monolith";
import styled from "styled-components";

// app
import type { CommonProps } from "../types";
import { ButtonAnchor, Layout } from "../components";

export interface HomeViewProps extends CommonProps {
  foo?: boolean;
}

const HomeView: ReactView<HomeViewProps> = (props) => {
  const { commonProps } = props;
  return (
    <Layout {...commonProps} showSideMenu={false}>
      <StyledHomeWrapper>
        <StyledButtonsRow>
          <ButtonAnchor href={"/auth/register"}>Get Started</ButtonAnchor>
          <ButtonAnchor href={"/features"}>Learn More</ButtonAnchor>
        </StyledButtonsRow>
      </StyledHomeWrapper>
    </Layout>
  );
};

const StyledHomeWrapper = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;

  gap: 24px;
  padding: 24px 16px 64px 16px;
  width: 100%;
  max-width: 1176px;
  margin: 0 auto;
`;

const StyledButtonsRow = styled.div`
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  max-width: 440px;
  width: 100%;
`;

HomeView.displayName = "HomeView";
export default HomeView;