diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml index f79fffc..4a79547 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,8 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 1669054415332 + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index aa069f2..427f402 100644 --- a/public/index.html +++ b/public/index.html @@ -29,15 +29,5 @@
- diff --git a/src/App.css b/src/App.css index 74b5e05..afbb9ce 100644 --- a/src/App.css +++ b/src/App.css @@ -28,6 +28,12 @@ color: #61dafb; } +p { + font-family: "Inter", sans-serif; + padding: 0; + margin: 0; +} + @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/src/App.tsx b/src/App.tsx index a53698a..76158b0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,13 @@ import React from 'react'; -import logo from './logo.svg'; import './App.css'; +import Preview from "./components/Preview"; +import Header from "./components/Header"; function App() { return (
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
+
); } diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..c93350c Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/components/Button/button.module.css b/src/components/Button/button.module.css new file mode 100644 index 0000000..c040dc4 --- /dev/null +++ b/src/components/Button/button.module.css @@ -0,0 +1,9 @@ +.container { + padding: 15px 30px; + background: white; + filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2)); +} + +.container p { + font-size: 32px; +} diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx new file mode 100644 index 0000000..3aa90ac --- /dev/null +++ b/src/components/Button/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import style from './button.module.css'; + +type TButton = { + onClick: () => void; + text: string; +}; + +function Button({text, onClick}: TButton) { + + return ( +
+

{text}

+
+ ) +} + +export default Button; diff --git a/src/components/Header/header.module.css b/src/components/Header/header.module.css new file mode 100644 index 0000000..1ac592b --- /dev/null +++ b/src/components/Header/header.module.css @@ -0,0 +1,28 @@ +.container { + width: 100%; + height: 100px; + display: flex; + align-items: center; +} + +.logo { + flex-grow: 1; + display: flex; + align-items: center; +} + +.logo p { + font-size: 32px; + font-weight: 600; +} + +.menu { + flex-grow: 2; + display: flex; + list-style: none; +} + +.menu p { + font-size: 24px; + font-width: 400; +} \ No newline at end of file diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..16bc221 --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import style from './header.module.css'; +import logo from '../../assets/logo.png'; + +function Header() { + + return ( +
+
+ logotype +

Agorata

+
+ +
+ ) +} + +export default Header; diff --git a/src/components/Preview/index.tsx b/src/components/Preview/index.tsx new file mode 100644 index 0000000..99c0851 --- /dev/null +++ b/src/components/Preview/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import style from './preview.module.css'; +import Button from "../Button"; + +function Preview() { + + return ( +
+

The World Of
Web3 Domains

+
+ + +
+
+

i

+

What domain?

+
+
+ ) +} + +export default Preview; diff --git a/src/components/Preview/preview.module.css b/src/components/Preview/preview.module.css new file mode 100644 index 0000000..97b197f --- /dev/null +++ b/src/components/Preview/preview.module.css @@ -0,0 +1,48 @@ +.container { + width: 100vw; + height: calc(100vh - 100px); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.container h1 { + padding: 0; + margin: 0; + font-size: 100px; + font-family: "Inter", sans-serif; + text-align: center; + font-weight: 500; +} + +.buttons { + display: flex; + width: 620px; + justify-content: space-between; + margin: 50px 0; +} + +.domainButton { + display: flex; + align-items: center; +} + +.domainButton p { + font-size: 24px; +} + +.question { + margin-right: 10px; + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; +} + +.question p { + font-size: 24px; +} diff --git a/src/pages/main.tsx b/src/pages/main.tsx new file mode 100644 index 0000000..3aa90ac --- /dev/null +++ b/src/pages/main.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import style from './button.module.css'; + +type TButton = { + onClick: () => void; + text: string; +}; + +function Button({text, onClick}: TButton) { + + return ( +
+

{text}

+
+ ) +} + +export default Button;