Browse Source

first commit

main
Llavrov 2 years ago
parent
commit
f937e07fac
  1. 6
      .idea/vcs.xml
  2. 56
      .idea/workspace.xml
  3. 10
      public/index.html
  4. 6
      src/App.css
  5. 19
      src/App.tsx
  6. BIN
      src/assets/logo.png
  7. 9
      src/components/Button/button.module.css
  8. 18
      src/components/Button/index.tsx
  9. 28
      src/components/Header/header.module.css
  10. 22
      src/components/Header/index.tsx
  11. 28
      src/components/Preview/index.tsx
  12. 48
      src/components/Preview/preview.module.css
  13. 18
      src/pages/main.tsx

6
.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>

56
.idea/workspace.xml

@ -1,8 +1,64 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <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"> <component name="RunManager">
<configuration name="Debug Application" type="JavascriptDebugType" uri="http://localhost:3000"> <configuration name="Debug Application" type="JavascriptDebugType" uri="http://localhost:3000">
<method v="2" /> <method v="2" />
</configuration> </configuration>
</component> </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> </project>

10
public/index.html

@ -29,15 +29,5 @@
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <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> </body>
</html> </html>

6
src/App.css

@ -28,6 +28,12 @@
color: #61dafb; color: #61dafb;
} }
p {
font-family: "Inter", sans-serif;
padding: 0;
margin: 0;
}
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);

19
src/App.tsx

@ -1,24 +1,13 @@
import React from 'react'; import React from 'react';
import logo from './logo.svg';
import './App.css'; import './App.css';
import Preview from "./components/Preview";
import Header from "./components/Header";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <Header></Header>
<img src={logo} className="App-logo" alt="logo" /> <Preview></Preview>
<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>
</div> </div>
); );
} }

BIN
src/assets/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

9
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;
}

18
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;

28
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;
}

22
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;

28
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;

48
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;
}

18
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;
Loading…
Cancel
Save