From f937e07fac0b1c326feef20f49dd8b24cf5cac8a Mon Sep 17 00:00:00 2001 From: Llavrov Date: Mon, 28 Nov 2022 13:38:23 +0300 Subject: [PATCH] first commit --- .idea/vcs.xml | 6 +++ .idea/workspace.xml | 56 ++++++++++++++++++++++ public/index.html | 10 ---- src/App.css | 6 +++ src/App.tsx | 19 ++------ src/assets/logo.png | Bin 0 -> 2393 bytes src/components/Button/button.module.css | 9 ++++ src/components/Button/index.tsx | 18 +++++++ src/components/Header/header.module.css | 28 +++++++++++ src/components/Header/index.tsx | 22 +++++++++ src/components/Preview/index.tsx | 28 +++++++++++ src/components/Preview/preview.module.css | 48 +++++++++++++++++++ src/pages/main.tsx | 18 +++++++ 13 files changed, 243 insertions(+), 25 deletions(-) create mode 100644 .idea/vcs.xml create mode 100644 src/assets/logo.png create mode 100644 src/components/Button/button.module.css create mode 100644 src/components/Button/index.tsx create mode 100644 src/components/Header/header.module.css create mode 100644 src/components/Header/index.tsx create mode 100644 src/components/Preview/index.tsx create mode 100644 src/components/Preview/preview.module.css create mode 100644 src/pages/main.tsx 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 0000000000000000000000000000000000000000..c93350c3ac93464682c7454bf1a19edc749db269 GIT binary patch literal 2393 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 LNkvXXu0mjf?P-U7 literal 0 HcmV?d00001 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

+
+
    +

  • how it work?

    • +

  • Community

    • +

  • Contacts

    • +
+
+ ) +} + +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;