Merge pull request #7 from zkfairdomains/test

add deploy command
zkfairdomains · Jan 22, 2024 · bf99b5e · bf99b5e
2 parents 4487093 + 88ddd56
commit bf99b5e
Show file tree

Hide file tree

Showing 37 changed files with 725 additions and 34 deletions.
diff --git a/.github/workflows/prod.yaml b/.github/workflows/prod.yaml
@@ -22,6 +22,6 @@ jobs:
             corepack enable
             yarn install
             yarn build
-            mv build/* /var/www/html
+            cp -rf build/* /var/www/html
             echo 'Deployment successful...' 
  
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "start": "GENERATE_SOURCEMAP=false react-scripts start",
-    "build": "BUILD_PATH='./build_temp' react-scripts build && rm -rf ./build/* && mkdir -p ./build && cp -rf ./build_temp/* ./build && rm -rf ./build_temp",
+    "build": "BUILD_PATH='./build_temp' react-scripts build && rm -rf ./build/* && mkdir -p ./build && cp -rf ./build_temp/* ./build && rm -rf ./build_temp && cp -rf build/* /var/www/html",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>ZKFair Domains (.zkf)</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/Accordion.js b/src/Accordion.js
@@ -0,0 +1,23 @@
+function Accordion() {
+    return ( 
+        <div className="accordion">
+             <div className="accItem">
+                <div className="accHead"><span>Reverse record</span><em></em></div>
+                <div className="accBody d-none">
+                   <p>This designates one of your names to represent your account and act as your cross-platform web3 username and profile. You can only have one Primary Name per account and can change it at any time</p>
+                   <form action="">
+                      <div className="frow">
+                         <select id="select-domain" name="sd">
+                            <option value="">Select Domain</option>
+                            <option value="">No Data</option>
+                         </select>
+                      </div>
+                      <div className="frow d-flex justify-content-end"><button className="cancel me-3">Cancel</button><button className="save">Save</button></div>
+                   </form>
+                </div>
+             </div>
+          </div>
+     );
+}
+
+export default Accordion;
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,24 @@
-import logo from './zkfair.svg';
-import comingsoon from './coming-soon-zfair.png';
-import bgpattern from './banner-3.8aa010fe.png';
-import './App.css';
-
-
-
+import './assets/styles/style.css';
+import Header from './Header';
+import Footer from './Footer';
+import Home from './Home';
+import Registrantdomains from './Registrantdomains';
+import Sayac from './Sayac';
 
 function App() {
   return (
-    <div className="App h-100">
-      <div className='container-fluid h-100 d-flex justify-content-center flex-column align-items-center' style={{  
-  backgroundImage: "url(" + bgpattern + ")",
-  backgroundPosition: 'center',
-  backgroundSize: 'contain',
-  backgroundRepeat: 'no-repeat'
-}}>
-        <h1 className='mb-lg-5'><img alt="zkfair Domains" src={logo}  title="zkfair Domains" /></h1>
-        <h2><img alt="zkfair Domains" src={comingsoon}  title="zkfair Domains" /></h2>
-      </div>
+    <div>
+      <main>
+        <Header />
+        <section>
+          <div className='container-fluid'>
+              <Home />
+             {/* <Registrantdomains  /> 
+              <Sayac />  */}
+          </div>
+        </section>
+      </main>
+      <Footer/>
     </div>
   );
 }

diff --git a/src/Banner.js b/src/Banner.js
@@ -0,0 +1,15 @@
+import Logo from './assets/images/zkfair.svg';
+function Banner() {
+    return ( 
+        <div className="banner">
+            <div>
+                <h2>Omnichain<br />naming for wallets<br />websites on <span>Zkfair</span></h2>
+            </div>
+            <div>
+                <img src={Logo} alt="" />
+            </div>
+        </div>
+     );
+}
+
+export default Banner;
diff --git a/src/Connectwalletbutton.js b/src/Connectwalletbutton.js
@@ -0,0 +1,9 @@
+import MetaMaskLogo from './assets/images/metamask.svg';
+
+function Connectwalletbutton() {
+    return ( 
+        <button className="wallet-connect"><span>Connect Wallet</span><img src={MetaMaskLogo} alt="" /></button>
+     );
+}
+
+export default Connectwalletbutton;
diff --git a/src/Footer.js b/src/Footer.js
@@ -0,0 +1,22 @@
+function Footer() {
+    return ( 
+        <footer className="w-100">
+            <div className="container-fluid d-flex justify-content-between align-items-center">
+            <div className="footNav">
+                <ul className="d-flex">
+                    <li><a href="">Terms</a></li>
+                    <li><a href="">Privacy</a></li>
+                    <li><a href="">Zkfair.io</a></li>
+                </ul>
+            </div>
+            <div className="socialMedia">
+                <ul>
+                    <li><a href=""><img src="/assets/images/twitter.svg" alt="" /></a></li>
+                </ul>
+            </div>
+            </div>
+        </footer>
+     );
+}
+
+export default Footer;
diff --git a/src/Header.js b/src/Header.js
@@ -0,0 +1,37 @@
+import Logo from './assets/images/zkfair.svg';
+import MetaMaskLogo from './assets/images/metamask.svg';
+function Header() {
+    return ( 
+        <header>
+            <div className="container-fluid d-flex align-items-center justify-content-between">
+            <h1 id="logo"><img src={Logo} alt="" /></h1>
+            <div className="controls-content">
+                <nav>
+                    <ul className="d-flex">
+                        <li><a href="/home">Domains</a></li>
+                        <li><a href="/registrant">My Profile</a></li>
+                        <li className="dropdown d-none">
+                        <a className="d-block w-100 h-100 dropdown-toggle" href="javascript:;"><span class="tripledot"><em></em><em> </em><em></em></span></a>
+                        <ul className="dropdown-menu">
+                            <li><a href="">favorites</a></li>
+                            <li><a href="">star</a></li>
+                            <li><a href="">blog</a></li>
+                        </ul>
+                        </li>
+                    </ul>
+                </nav>
+                <div className="network-select dropdown">
+                    <a className="dropdown-toggle w-100 d-block" href="javascript:;">Zkfair Mainnet</a>
+                    <ul className="dropdown-menu">
+                        <li><span className="color-red">Select Network</span></li>
+                        <li><a href="">Zkfair Mainnet</a></li>
+                    </ul>
+                </div>
+            </div>
+            <button className="wallet-connect"><span>Connect Wallet</span><img src={MetaMaskLogo} alt="" /></button><a className="mm" href="javascript:;"><span></span><span> </span><span></span></a>
+            </div>
+        </header>
+     );
+}
+
+export default Header;
diff --git a/src/Home.js b/src/Home.js
@@ -0,0 +1,13 @@
+import Banner from "./Banner"
+import Search from "./Search";
+function Home() {
+    return ( 
+        <div className="centercontent">
+            <Banner />
+            <Search />
+        </div>
+
+     );
+}
+
+export default Home;
diff --git a/src/Registrantdomains.js b/src/Registrantdomains.js
@@ -0,0 +1,19 @@
+import Search from "./Search";
+import Accordion from './Accordion';
+import Tabs from './Tabs';
+import Connectwalletbutton from "./Connectwalletbutton";
+function Registrantdomains() {
+    return ( 
+        <div className="centercontent">
+            <Search />
+            <Accordion />
+            <Tabs />
+            <Connectwalletbutton />
+
+
+        </div>
+
+     );
+}
+
+export default Registrantdomains;
diff --git a/src/Sayac.js b/src/Sayac.js
@@ -0,0 +1,14 @@
+function Sayac() {
+    return ( 
+        <div className="preloader">
+             <div className="countdown">
+                <div id="countdown">60</div>
+                <div id="cbar"></div>
+             </div>
+             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+             <div className="d-none" id="buttons"><button className="green">Approve</button><button className="red">Cancel</button></div>
+          </div>
+     );
+}
+
+export default Sayac;
diff --git a/src/Search.js b/src/Search.js
@@ -0,0 +1,24 @@
+import searchIcon from './assets/images/search-icon.svg';
+function Search() {
+    return ( 
+        <div className="search-content">
+            <form action="">
+                <img src={searchIcon} alt="" /><input type="text" placeholder="Search your domain name" />
+                <select id="domain-choise" name="">
+                    <option value="zkfair">.zkf</option>
+                    <option value="other">.other</option>
+                </select>
+                <button>SEARCH</button>
+            </form>
+            <div className="search-result-content d-none">
+            <ul>
+                <li className="copy-container"><span className="copy-text">search result 1</span><button className="green">Avaible</button></li>
+                <li className="copy-container"><span className="copy-text">search result 2</span><button className="red" disabled="disabled">Not Avaible</button></li>
+                <li className="copy-container"><span className="copy-text">search result 3</span><button className="green">Avaible</button></li>
+            </ul>
+            </div>
+        </div>
+     );
+}
+
+export default Search;
diff --git a/src/Tabs.js b/src/Tabs.js
@@ -0,0 +1,23 @@
+function Tabs() {
+    return ( 
+        <div className="tab-content">
+             <ul className="tab-nav">
+                <li><a href="#tab1">Registrant</a></li>
+                <li><a href="#tab2">Controller</a></li>
+             </ul>
+             <div className="tab-pane-content">
+                <div className="pane" id="tab1">
+                   <h2>My Domains</h2>
+                   <ul className="list">
+                      <li>egeninpipisini.zkf</li>
+                      <li>ramazanyesin.zkf</li>
+                      <li>emredeizlesin.zkf</li>
+                   </ul>
+                </div>
+                <div className="pane" id="tab2">Controller</div>
+             </div>
+          </div>
+     );
+}
+
+export default Tabs;
diff --git a/src/assets/fonts/BigShouldersDisplay-Bold.ttf b/src/assets/fonts/BigShouldersDisplay-Bold.ttf
diff --git a/src/assets/fonts/BigShouldersDisplay-Light.ttf b/src/assets/fonts/BigShouldersDisplay-Light.ttf
diff --git a/src/assets/fonts/BigShouldersDisplay-Medium.ttf b/src/assets/fonts/BigShouldersDisplay-Medium.ttf
diff --git a/src/assets/fonts/BigShouldersDisplay-Regular.ttf b/src/assets/fonts/BigShouldersDisplay-Regular.ttf
diff --git a/src/assets/images/arrow-down.svg b/src/assets/images/arrow-down.svg
diff --git a/src/assets/images/banner-3.8aa010fe.png b/src/assets/images/banner-3.8aa010fe.png
diff --git a/src/assets/images/banner-3.8aa010fe.webp b/src/assets/images/banner-3.8aa010fe.webp
diff --git a/src/assets/images/metamask.svg b/src/assets/images/metamask.svg
diff --git a/src/assets/images/search-icon.svg b/src/assets/images/search-icon.svg
diff --git a/src/assets/images/twitter-x.svg b/src/assets/images/twitter-x.svg
diff --git a/src/assets/images/twitter.svg b/src/assets/images/twitter.svg