first commit

2 years ago · f937e07fac
13 changed files with 243 additions and 25 deletions
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@ -1,8 +1,64 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="697fb6df-d905-400a-8b28-aa6fb4ab2dd2" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectId" id="2HrsD8siGBzwftkpwuTkBesxHO2" />
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "last_opened_file_path": "/Users/lionarr/WebstormProjects/agorata/src/assets",
+    "nodejs_interpreter_path": "node",
+    "nodejs_package_manager_path": "npm",
+    "ts.external.directory.path": "/Users/lionarr/WebstormProjects/agorata/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/assets" />
+    </key>
+  </component>
  <component name="RunManager">
    <configuration name="Debug Application" type="JavascriptDebugType" uri="http://localhost:3000">
      <method v="2" />
    </configuration>
  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="697fb6df-d905-400a-8b28-aa6fb4ab2dd2" name="Changes" comment="" />
+      <created>1669054415332</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1669054415332</updated>
+      <workItem from="1669054416534" duration="4979000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
 </project>
--- a/public/index.html
+++ b/public/index.html
@ -29,15 +29,5 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
  </body>
 </html>
--- 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);
--- 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 (
    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <Header></Header>
+        <Preview></Preview>
    </div>
  );
 }
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Button/button.module.css
+++ 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;
+}
--- a/src/components/Button/index.tsx
+++ 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 (
+        <div className={style.container} onClick={onClick}>
+            <p>{text}</p>
+        </div>
+    )
+}
+
+export default Button;
--- a/src/components/Header/header.module.css
+++ 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;
+}
--- a/src/components/Header/index.tsx
+++ 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 (
+        <div className={style.container}>
+            <div className={style.logo}>
+                <img src={logo} alt="logotype"/>
+                <p>Agorata</p>
+            </div>
+            <ul className={style.menu}>
+                <li><p>how it work?</p></li>
+                <li><p>Community</p></li>
+                <li><p>Contacts</p></li>
+            </ul>
+        </div>
+    )
+}
+
+export default Header;
--- a/src/components/Preview/index.tsx
+++ 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 (
+        <div className={style.container}>
+            <h1>The World Of <br/> Web3 Domains</h1>
+            <div className={style.buttons}>
+                <Button
+                    text='I have a domain'
+                    onClick={() => ''}
+                ></Button>
+                <Button
+                    text='I want a domain'
+                    onClick={() => ''}
+                ></Button>
+            </div>
+            <div className={style.domainButton}>
+                <div className={style.question}><p>i</p></div>
+                <p>What domain?</p>
+            </div>
+        </div>
+    )
+}
+
+export default Preview;
--- a/src/components/Preview/preview.module.css
+++ 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;
+}
--- a/src/pages/main.tsx
+++ 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 (
+        <div className={style.container} onClick={onClick}>
+            <p>{text}</p>
+        </div>
+    )
+}
+
+export default Button;