feat: v2.0.0 (#280)

* feat: v2.0.0

* fix: textarea

* feat: add circleci

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:jsx-a11y/recommended',
+  ],
+  plugins: ['jsx-a11y'],
+  rules: {
+    'jsx-a11y/anchor-is-valid': 'off',
+    'react/prop-types': 'off',
+  },
+};

.gitignore

@@ -1,5 +1,4 @@
 node_modules
-.DS_Store
-.next
+.env
 .vercel
-.env
+.next

components/button/button.tsx

@@ -0,0 +1,49 @@
+import React, { FC, MouseEvent } from 'react';
+import classnames from 'classnames';
+
+export interface ButtonProps {
+  className?: string;
+  type?: 'button' | 'submit' | 'reset';
+  appearance?: 'primary' | 'secondary' | 'fade';
+  disabled?: boolean;
+  onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
+  size?: 'medium' | 'small' | 'icon';
+}
+
+export const Button: FC<Readonly<ButtonProps>> = ({
+  className,
+  children,
+  type = 'button',
+  disabled = false,
+  appearance = 'primary',
+  onClick,
+  size = 'medium',
+}) => {
+  const classNames = classnames(
+    'uppercase text-xs rounded-sm tracking-wider inline-flex items-center duration-200 transition ease-in-out',
+    {
+      'bg-black text-white dark:bg-white dark:text-black':
+        appearance === 'primary',
+      'bg-transparent text-black dark:text-white hover:bg-black dark:hover:bg-white dark:hover:bg-opacity-5 hover:bg-opacity-5':
+        appearance === 'secondary',
+      'bg-black text-black bg-opacity-5 hover:bg-opacity-10 dark:bg-white dark:text-white dark:bg-opacity-5 dark:hover:bg-opacity-10':
+        appearance === 'fade',
+      'py-3 px-12': size === 'medium',
+      'py-3 px-4': size === 'small',
+      'py-3 px-3': size === 'icon',
+      'cursor-not-allowed bg-opacity-50 dark:bg-opacity-50': disabled,
+    },
+    className,
+  );
+
+  return (
+    <button
+      className={classNames}
+      type={type}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};

components/hero/hero.tsx

@@ -0,0 +1,27 @@
+import { Logo } from 'components/logo/logo';
+import React, { FC } from 'react';
+import classnames from 'classnames';
+import Link from 'next/link';
+
+export interface HeroProps {
+  className?: string;
+}
+
+export const Hero: FC<Readonly<HeroProps>> = ({ className }) => {
+  const classNames = classnames(className);
+
+  return (
+    <header className={classNames}>
+      <Link href="/">
+        <a>
+          <Logo className="lg:-ml-11" />
+        </a>
+      </Link>
+      <p className="mt-2 max-w-md text-gray-500 dark:text-gray-400 leading-relaxed">
+        send a message through a safe, private, and encrypted link that
+        automatically expires to ensure your stuff does not remain online
+        forever.
+      </p>
+    </header>
+  );
+};

components/logo/logo.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import classnames from 'classnames';
+
+export interface LogoProps {
+  className?: string;
+  size?: string;
+}
+
+export const Logo: FC<Readonly<LogoProps>> = ({ className, size = '36' }) => {
+  const classNames = classnames('items-center flex', className);
+
+  return (
+    <div className={classNames}>
+      <svg width={size} height={size} viewBox="0 0 128 128" fill="none">
+        <rect width="128" height="128" fill="black" />
+        <rect width="128" height="128" fill="black" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M72 37H24V45H72V37ZM104 37H78V45H104V37ZM24 61H42V69H24V61ZM48 61H56V69H48V61ZM104 61H62V69H104V61ZM24 85H52V93H24V85ZM58 85H104V93H58V85Z"
+          fill="white"
+        />
+      </svg>
+
+      <h1 className="text-3xl ml-2 font-medium">Secret</h1>
+    </div>
+  );
+};