diff --git a/components/primary-button/index.tsx b/components/primary-button/index.tsx new file mode 100644 index 0000000..254610c --- /dev/null +++ b/components/primary-button/index.tsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; +import color from "../../styles/color"; + +export const PrimaryButton = styled.button` + width: 100%; + height: 100%; + + border: none; + + background-color: ${color.primary}; + padding: 11px 30px; + + font-family: "Inter", serif; + font-style: normal; + font-weight: 600; + font-size: 1.5rem; + line-height: 20px; + + color: ${color.orange}; +`; diff --git a/next.config.js b/next.config.js index 56239b8..6fee067 100644 --- a/next.config.js +++ b/next.config.js @@ -2,6 +2,9 @@ const nextConfig = { reactStrictMode: false, swcMinify: true, + compiler: { + styledComponents: true, + }, }; module.exports = nextConfig; diff --git a/pages/index.tsx b/pages/index.tsx index d385c85..444f5e5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,19 +1,178 @@ -interface AuthResponse { - authUrl: string; -} +import Image from "next/image"; + +// Styles +import styled from "styled-components"; +import color from "../styles/color"; + +// Components +import { PrimaryButton } from "../components/primary-button"; + +// Image Assets +import Logo from "../public/images/svg/logo.svg"; +import MainTitle from "../public/images/svg/main-title.svg"; +import MainLogo from "../public/images/svg/main-logo.svg"; +import CheckIcon from "../public/images/svg/check-icon.svg"; export default function Home() { - const handleSignInWithTwitter = async () => { - const response: AuthResponse = await (await fetch("/api/auth")).json(); - - window.location.href = response.authUrl; - }; - return ( -
-
- -
-
+ + + Home Logo + + + + + + + Main Title + + + + + Connect Wallet + + + + + Check Icon + + You are a  keplr  user. + if not, you can install here + + + + Check Icon + + Osmo  is required for this + transaction + + + + + + Main Logo + + + ); } + +const Container = styled.div` + display: flex; + flex-direction: column; + + width: 100vw; + height: 100vh; +`; + +const LogoContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + + position: absolute; + + width: 10rem; + height: 5rem; + + margin-top: 5rem; + margin-left: 5rem; +`; + +const MainContainer = styled.div` + display: flex; + flex-direction: row; + + margin-top: 15rem; + margin-left: 10rem; +`; + +const MainTitleContainer = styled.div` + display: flex; + flex-direction: column; + + position: relative; + + padding: 0.1rem; +`; + +const MainTitleImageBackground = styled.div` + display: flex; + justify-content: center; + + width: 70rem; + height: 19.9rem; + + background-color: ${color.black}; +`; + +const MainTitleImageContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + + position: relative; + + width: 55rem; + height: 19.9rem; +`; + +const MainLogoContainer = styled.div` + position: relative; + + right: 2.5rem; + + min-width: 25rem; + height: 25rem; +`; + +const ConnectButtonContainer = styled.div` + width: 19.9rem; + height: 5rem; + + margin-left: 5rem; +`; + +const SubContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.5rem; + + width: 29.9rem; + height: 4.9rem; + + margin-top: 5.1rem; + margin-left: 5rem; + + background-color: ${color.black}; +`; + +const CheckContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + + font-family: "Inter", serif; + font-style: normal; + font-weight: 500; + font-size: 0.8rem; + line-height: 16px; + + text-transform: uppercase; + + color: ${color.grey["300"]}; +`; + +const CheckBoldText = styled.span` + font-size: 0.8rem; + + color: ${color.grey["100"]}; +`; + +const CheckIconContainer = styled.div` + position: relative; + + width: 1.6rem; + height: 1.5rem; +`; diff --git a/public/images/svg/check-icon.svg b/public/images/svg/check-icon.svg new file mode 100644 index 0000000..b44d786 --- /dev/null +++ b/public/images/svg/check-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/svg/logo.svg b/public/images/svg/logo.svg new file mode 100644 index 0000000..cc13811 --- /dev/null +++ b/public/images/svg/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/images/svg/main-logo.svg b/public/images/svg/main-logo.svg new file mode 100644 index 0000000..ea2e95f --- /dev/null +++ b/public/images/svg/main-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/svg/main-title.svg b/public/images/svg/main-title.svg new file mode 100644 index 0000000..ae15ef3 --- /dev/null +++ b/public/images/svg/main-title.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/color.ts b/styles/color.ts new file mode 100644 index 0000000..22c0d2a --- /dev/null +++ b/styles/color.ts @@ -0,0 +1,26 @@ +const primary = "#FB5232"; + +const orange = "#FFCDC3"; + +const grey = { + 100: "#A3A3A3", + 200: "#868686", + 300: "#6F6F6F", + 400: "#5B5B5B", + 500: "#424242", + 600: "#333333", + 700: "#2B2B2B", + 800: "#242424", + 900: "#181818", +}; + +const black = "#121212"; + +const color = { + primary, + grey, + black, + orange, +}; + +export default color; diff --git a/styles/global.ts b/styles/global.ts index 9960db6..ab30f4b 100644 --- a/styles/global.ts +++ b/styles/global.ts @@ -1,4 +1,5 @@ import { createGlobalStyle } from "styled-components"; +import color from "./color"; export const GlobalStyle = createGlobalStyle` html, body { @@ -6,6 +7,21 @@ export const GlobalStyle = createGlobalStyle` margin: 0; font-family: 'Inter', sans-serif; + + background-color: ${color.black}; + + font-size: 0.85vw; + //font-size: 22px; + + background-size: 5rem 5rem; + background-position: top left; + background-repeat: repeat; + background-image: linear-gradient( + rgba(51, 51, 51, 1) 0.1rem, + transparent 0.1rem + ), + linear-gradient(90deg, rgba(51, 51, 51, 1) 0.1rem, transparent 0.1rem); + } * {