Skip to content

Commit d1d2ecd

Browse files
Highlander-makerHighlander-maker
authored
Merge pull request #53 from Highlander-maker/development
Development
2 parents 2facf46 + c7cff40 commit d1d2ecd

6 files changed

Lines changed: 212 additions & 41 deletions

File tree

‎components/Footer.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ import { BsGithub } from "react-icons/bs";
88
function Footer() {
99
return (
1010

11-
<div className="bg-gray-100 h-40 w-full md:flex-col justify-start p-20 ">
11+
<div className=" h-10 w-full md:flex-col justify-start px-6 pt-10 pb-6 p-10 ">
1212
<ul>
1313
<p className="text-gray-800 font-bold text-4xl p-6">
1414
Chain<span className="text-slate-500">tools</span>
1515
</p>
1616

1717
<div className=" flex p-6 gap-16 justify-start">
18-
<BsTwitter onClick={() => window.location.href = 'https://twitter.com/ChaintoolsT'} className="text-2xl cursor-pointer hover:text-black" />
19-
<BsDiscord onClick={() => window.location.href = 'https://discord.gg/ebd3nYeS'} className="text-2xl cursor-pointer hover:text-black" />
20-
<BsTelegram onClick={() => window.location.href = 'https://t.me/chaintoolsT'} className="text-2xl cursor-pointer hover:text-black" />
21-
<BsGithub onClick={() => window.location.href = 'https://github.com/Highlander-maker/chaintools.tech-frontend'} className="text-2xl cursor-pointer hover:text-black" />
18+
<BsTwitter onClick={() => window.location.href = 'https://twitter.com/ChaintoolsT'} className="text-3xl cursor-pointer sm:text-1xl hover:text-black" />
19+
<BsDiscord onClick={() => window.location.href = 'https://discord.gg/ebd3nYeS'} className="text-3xl cursor-pointer hover:text-black" />
20+
<BsTelegram onClick={() => window.location.href = 'https://t.me/chaintoolsT'} className="text-3xl cursor-pointer hover:text-black" />
21+
<BsGithub onClick={() => window.location.href = 'https://github.com/Highlander-maker/chaintools.tech-frontend'} className="text-3xl cursor-pointer hover:text-black" />
2222
</div>
2323
</ul>
2424

‎components/Header.tsx‎

Lines changed: 120 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,144 @@
1-
import Link from "next/link";
1+
import { useState } from "react";
22

3-
function Header() {
3+
function NavLink({ to, children }: any) {
44
return (
5-
<header className="flex justify-between bg-gray-100 p-5">
6-
<div className="flex items-center space-x-5">
7-
<Link href="/">
8-
<img
9-
className="w-44 object-contain cursor-pointer"
10-
src="/chaintool--header-logo.svg"
11-
alt=""
12-
/>
13-
</Link>
14-
</div>
5+
<a href={to} className={`mx-4`}>
6+
{children}
7+
</a>
8+
);
9+
}
1510

16-
<div className="hidden md:inline-flex items-center space-x-5">
11+
function MobileNav({ open, setOpen }: any) {
12+
return (
13+
<div
14+
className={`absolute top-0 left-0 h-screen w-screen bg-white transform ${
15+
open ? "-translate-x-0" : "-translate-x-full"
16+
} transition-transform duration-300 ease-in-out filter drop-shadow-md `}
17+
>
18+
<div className="flex items-center justify-center filter drop-shadow-md bg-white h-20">
19+
{" "}
20+
{/*logo container*/}
21+
<a className="text-xl font-semibold" href="/">
22+
MENU
23+
</a>
24+
</div>
25+
<div className="flex flex-col ml-4">
1726
<a
18-
href="networks"
19-
className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200"
27+
className="text-xl font-medium my-4"
28+
href="/networks"
29+
onClick={() =>
30+
setTimeout(() => {
31+
setOpen(!open);
32+
}, 100)
33+
}
2034
>
2135
Networks
2236
</a>
23-
2437
<a
25-
href="services"
26-
className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200"
38+
className="text-xl font-normal my-4"
39+
href="/services"
40+
onClick={() =>
41+
setTimeout(() => {
42+
setOpen(!open);
43+
}, 100)
44+
}
2745
>
2846
Services
2947
</a>
30-
3148
<a
32-
href="education"
33-
className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200"
49+
className="text-xl font-normal my-4"
50+
href="/education"
51+
onClick={() =>
52+
setTimeout(() => {
53+
setOpen(!open);
54+
}, 100)
55+
}
3456
>
3557
Education
3658
</a>
37-
3859
<a
60+
className="text-xl font-normal my-4"
61+
href="/tools"
62+
onClick={() =>
63+
setTimeout(() => {
64+
setOpen(!open);
65+
}, 100)
66+
}
67+
>
68+
Tools
69+
</a>
70+
<a
71+
className="text-xl font-normal my-4"
3972
href="contact"
40-
className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200"
73+
onClick={() =>
74+
setTimeout(() => {
75+
setOpen(!open);
76+
}, 100)
77+
}
4178
>
42-
Contact Us
79+
Contact
4380
</a>
4481
</div>
82+
</div>
83+
);
84+
}
4585

46-
<div className="flex items-center space-x-5 text-slate-700">
47-
86+
export default function Navbar() {
87+
const [open, setOpen] = useState(false);
88+
return (
89+
<nav className="flex justify-between filter drop-shadow-md bg-white px-4 py-4 h-25">
90+
<MobileNav open={open} setOpen={setOpen} />
91+
<div className="w-44 object-contain cursor-pointer">
92+
<a href="/">
93+
<img src="/chaintool--header-logo.svg" alt="" />
94+
</a>
4895
</div>
49-
</header>
96+
<div className="w-9/12 flex justify-end items-center">
97+
<div
98+
className="z-50 flex relative w-8 h-8 flex-col justify-between items-center md:hidden"
99+
onClick={() => {
100+
setOpen(!open);
101+
}}
102+
>
103+
{/* hamburger button */}
104+
<span
105+
className={`h-1 w-full bg-black rounded-lg transform transition duration-300 ease-in-out ${
106+
open ? "rotate-45 translate-y-3.5" : ""
107+
}`}
108+
/>
109+
<span
110+
className={`h-1 w-full bg-black rounded-lg transition-all duration-300 ease-in-out ${
111+
open ? "w-0" : "w-full"
112+
}`}
113+
/>
114+
<span
115+
className={`h-1 w-full bg-black rounded-lg transform transition duration-300 ease-in-out ${
116+
open ? "-rotate-45 -translate-y-3.5" : ""
117+
}`}
118+
/>
119+
</div>
120+
121+
<div className="hidden md:flex space-x-2">
122+
<button className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200">
123+
<NavLink to="/networks">Networks</NavLink>
124+
</button>
125+
126+
<button className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200">
127+
<NavLink to="/services">Services</NavLink>
128+
</button>
129+
130+
<button className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200">
131+
<NavLink to="/education">Education</NavLink>
132+
</button>
133+
134+
<button className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200">
135+
<NavLink to="/tools">Tools</NavLink>
136+
</button>
137+
<button className="border px-4 py-1 rounded-full hover:bg-gray-300 object-contain cursor-pointer transition-all duration-200">
138+
<NavLink to="/contact">Contact Us</NavLink>
139+
</button>
140+
</div>
141+
</div>
142+
</nav>
50143
);
51144
}
52-
53-
export default Header;

‎pages/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ export default function Home() {
1515
<Header />
1616

1717

18-
<div className="flex justify-between items-center border-black py-10 lg:py-0">
19-
<div className="px-10 space-y-20">
20-
<h1 className="text-6xl max-w-xl font-semibold">
21-
<p className="text-gray-800 font-bold text-6xl pb-6">
18+
<div className="flex justify-between items-center border-black py-10 lg:py-20">
19+
<div className="px-10 space-y-40">
20+
<h1 className="text-5xl max-w-xl font-semibold">
21+
<p className="text-gray-800 font-bold text-6xl">
2222
Chain<span className="text-slate-500 text-6xl">tools</span>
2323
</p>
2424
Learn, stake, support the world of decentralised blockchains
2525
</h1>
26-
<h2 className="font-serif">
26+
<h2 className="font-serif text-2xl">
2727
Production grade validators securing multiple chains accros the
2828
cosmos eco-system. We validate, teach, offer services. Support us
2929
with your stake and earn high APY rewards paid out daily
@@ -32,7 +32,7 @@ export default function Home() {
3232

3333

3434
<img
35-
className="hidden md:inline-flex h-32 lg:h-full"
35+
className="hidden md:inline-flex object-none: h-68 w-96"
3636
src="chaintools-logo-black.svg"
3737
alt=""
3838
/>

‎pages/tools.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from "react";
2+
import Layout from "../components/Layout";
3+
4+
function tools() {
5+
return (
6+
<Layout>
7+
<div className="justify-center rounded-lg mt-400 py-5 grid grid-cols-1 sm:grid-col-1 md:grid-cols-2 lg:grid-cols-3 md:p-10">
8+
{/* relayers */}
9+
<div className="bg-gray-200 max-w-sm rounded-2xl mx-5 overflow-hidden shadow-lg">
10+
<img
11+
className="w-full"
12+
src="/chaintools-logo-clear.svg"
13+
alt="React ts"
14+
/>
15+
<div className="px-6 py-4 lg:h-52">
16+
<span className="tracking-widest text-lg m-2 title-font font-medium text-black mb-1">
17+
{" "}
18+
Explorer{" "}
19+
</span>
20+
21+
<p className="text-gray-700 flex text-sm font-medium leading-snug p-5">
22+
Monitor all our networks in one place. Connect your Keplr wallet
23+
and manage your stake in one place.
24+
</p>
25+
</div>
26+
<div className="px-6 pt-4 pb-2">
27+
<a href="https://explorer.chaintools.tech/">
28+
<span className="inline-block bg-gray-400 text-black px-4 py-2 text-sm font-semibold mr-2 cursor-pointer tracking-widest rounded-full hover:bg-slate-300">
29+
Take me there.
30+
</span>
31+
</a>
32+
</div>
33+
</div>
34+
35+
{/* snapshots */}
36+
<div className="bg-gray-200 max-w-sm rounded-2xl mx-5 overflow-hidden shadow-lg">
37+
<img className="w-full" src="/ardorreward.png" alt="React ts" />
38+
<div className="px-6 py-4 lg:h-52">
39+
<a href="https://rewards.ardor.chaintools.tech/">
40+
<span className="inline-block bg-gray-400 text-black px-6 py-2 tracking-widest text-sm mr-2 title-semibold mb-1 rounded-full cursor-pointer hover:bg-slate-300">
41+
{" "}
42+
Test it out{" "}
43+
</span>
44+
</a>
45+
46+
<p className="text-gray-700 flex text-lg font-medium leading-snug p-5">
47+
We have developed a Ardor node reward calulator for Ardor Network.
48+
This is something we will be developing further on all chains.
49+
Come test out our Beta version on Ardor.
50+
</p>
51+
</div>
52+
</div>
53+
54+
{/* stakesync */}
55+
{/* <div className="bg-gray-200 max-w-sm rounded-2xl mx-5 overflow-hidden shadow-lg">
56+
<img className="w-full" src="/statesync.png" alt="React ts" />
57+
<div className="px-6 py-4 lg:h-52">
58+
<span className="tracking-widest text-lg title-font font-medium text-black mb-1">
59+
{" "}
60+
Statesync Snapshots{" "}
61+
</span>
62+
63+
<p className="text-gray-700 flex text-sm font-medium leading-snug p-5">
64+
State-sync is a module built into the Cosmos SDK to allow
65+
validators to rapidly join the network by syncing your node with a
66+
snapshot enabled RPC from a trusted block height.
67+
</p>
68+
</div>
69+
<div className="px-6 pt-4 pb-2">
70+
<span className="inline-block bg-gray-400 text-black px-4 py-2 text-sm font-semibold mr-2 mb-3 cursor-pointer tracking-widest rounded-full hover:bg-cyan-400">
71+
Statesync...
72+
</span>
73+
</div>
74+
</div> */}
75+
</div>
76+
</Layout>
77+
);
78+
}
79+
80+
export default tools;

‎public/ardorreward.png‎

67.1 KB
Loading

0 commit comments

Comments
 (0)