Skip to content

Commit e5ec3f9

Browse files
AbhinavMVAbhinavMV
committed
Add Navbar and Footer
1 parent f3e4910 commit e5ec3f9

File tree

4 files changed

+339
-1
lines changed

4 files changed

+339
-1
lines changed

‎components/Footer.jsx‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import {
2+
AiOutlineMail,
3+
AiOutlineInstagram,
4+
AiOutlineTwitter,
5+
AiFillLinkedin,
6+
AiOutlineGithub
7+
} from 'react-icons/ai'
8+
import { FaDiscord } from 'react-icons/fa'
9+
const Footer = () => {
10+
const settings = {
11+
name: 'WebXDAO',
12+
author: 'WebXDAO',
13+
url: 'https://web3community.github.io'
14+
}
15+
const socials = [
16+
{
17+
name: 'Mail',
18+
url: 'mailto:web3opensourcecommunity@gmail.com',
19+
icon: <AiOutlineMail />,
20+
text: 'Contact us via mail'
21+
},
22+
{
23+
name: 'Instagram',
24+
url: 'https://www.instagram.com/web3community/',
25+
icon: <AiOutlineInstagram />,
26+
text: 'Check our content at Instagram'
27+
},
28+
{
29+
name: 'Twitter',
30+
url: 'https://twitter.com/web3community',
31+
icon: <AiOutlineTwitter />,
32+
text: 'Follow us via Twitter'
33+
},
34+
35+
{
36+
name: 'Linkedin',
37+
url: 'https://www.linkedin.com/company/web3community',
38+
icon: <AiFillLinkedin />,
39+
text: 'Connect with us at LinkedIn'
40+
},
41+
{
42+
name: 'Twitter',
43+
url: 'https://github.com/WebXDAO',
44+
icon: <AiOutlineGithub />,
45+
text: 'Contribute at GitHub'
46+
},
47+
{
48+
name: 'Twitter',
49+
url: 'https://discord.gg/TSRwqx4K2v',
50+
icon: <FaDiscord />,
51+
text: 'Join our Discord community'
52+
}
53+
]
54+
const resources = [
55+
{ name: 'About Us', url: '#' },
56+
{ name: 'Blog', url: '/blog' },
57+
{ name: 'Contact', url: '#' },
58+
{ name: 'FAQ', url: '/faq' }
59+
]
60+
return (
61+
<footer className='bg-[#1F2E35]'>
62+
<div className='container mx-auto px-8'>
63+
<div className='w-full flex flex-col md:flex-row py-6'>
64+
<div className='flex-wrap flex-1 md:px-4 mb-6 text-black'>
65+
<p className='text-white mb-3 md:mb-6'>Socials</p>
66+
<div className='flex space-x-4'>
67+
{socials.map((handle, index) => (
68+
<a
69+
aria-hidden='true'
70+
className='text-white transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100'
71+
href={handle.url}
72+
key={handle.name + index}
73+
rel='noreferrer'
74+
target='_blank'
75+
title={handle.text}
76+
>
77+
{handle.icon}
78+
</a>
79+
))}
80+
</div>
81+
</div>
82+
<div className='flex-1'>
83+
<p className='text-white md:mb-6'>Resources</p>
84+
<ul className='list-reset mb-6'>
85+
{resources.map((item, index) => (
86+
<li key={item.name + index} className='mt-2 mr-2 block md:mr-0'>
87+
<a
88+
href={item.url}
89+
className='no-underline text-gray-400 hover:text-blue-500'
90+
>
91+
{item.name}
92+
</a>
93+
</li>
94+
))}
95+
</ul>
96+
</div>
97+
<div className='flex-1'>
98+
<p className='text-white md:mb-6'>Legal Stuff</p>
99+
<ul className='list-reset mb-6'>
100+
<li className='mt-2 mr-2 md:block md:mr-0'>
101+
<a
102+
href='#'
103+
className='no-underline text-gray-400 hover:text-blue-500'
104+
>
105+
Disclaimer
106+
</a>
107+
</li>
108+
<li className='mt-2 mr-2 block md:mr-0'>
109+
<a
110+
href='#'
111+
className='no-underline text-gray-400 hover:text-blue-500'
112+
>
113+
Financing
114+
</a>
115+
</li>
116+
<li className='mt-2 mr-2 block md:mr-0'>
117+
<a
118+
href='#'
119+
className='no-underline text-gray-400 hover:text-blue-500'
120+
>
121+
Privacy Policy
122+
</a>
123+
</li>
124+
<li className='mt-2 mr-2 block md:mr-0'>
125+
<a
126+
href='#'
127+
className='no-underline text-gray-400 hover:text-blue-500'
128+
>
129+
Terms of Service
130+
</a>
131+
</li>
132+
</ul>
133+
</div>
134+
<div className='flex-1'>
135+
<p className='text-white md:mb-6'>Contact</p>
136+
<ul className='list-reset mb-6'>
137+
<li className='mt-2 inline-block mr-2 md:block md:mr-0'>
138+
<a
139+
href='mailto:web3opensourcecommunity@gmail.com'
140+
className='no-underline text-gray-400 hover:text-blue-500'
141+
>
142+
web3opensourcecommunity@gmail.com
143+
</a>
144+
</li>
145+
<li className='mt-2 inline-block mr-2 md:block md:mr-0'>
146+
<a className='no-underline text-gray-400'>Global Open Source</a>
147+
</li>
148+
<li className='mt-2 inline-block mr-2 md:block md:mr-0'>
149+
<a className='no-underline text-gray-400'>
150+
Community for Dapps & $Dev
151+
</a>
152+
</li>
153+
</ul>
154+
</div>
155+
</div>
156+
</div>
157+
<div className='text-center text-sm font-light py-4 text-gray-200 bg-[#1D292F]'>
158+
<small>
159+
Copyright &copy; {settings.name + ' '}
160+
{new Date().getFullYear()}. Made with ❤️ by
161+
<a href={settings.url} target='_blank' className='underline' rel='noreferrer'>
162+
{' ' + settings.author}
163+
</a>
164+
•
165+
<a
166+
href='https://github.com/WebXDAO/WebXDAO.github.io'
167+
className='underline'
168+
target='_blank'
169+
rel='noreferrer'
170+
>
171+
View on GitHub
172+
</a>
173+
</small>
174+
</div>
175+
</footer>
176+
)
177+
}
178+
179+
export default Footer

‎components/Navbar.jsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { useState } from 'react'
2+
import { HiMenuAlt4 } from 'react-icons/hi'
3+
import { AiOutlineClose } from 'react-icons/ai'
4+
import Image from 'next/image'
5+
import Link from 'next/link'
6+
import { useRouter } from 'next/router'
7+
8+
const NavBarItem = ({ item, pathname, classprops }) => (
9+
<Link href={item.url} passHref>
10+
<li
11+
className={`${
12+
pathname === item.url && 'font-bold'
13+
} ${classprops} text-ml inline-block text-blue-800 no-underline hover:text-indigo-500 py-2 px-4 items-center`}
14+
>
15+
{item.title}
16+
</li>
17+
</Link>
18+
)
19+
20+
const Navbar = () => {
21+
const router = useRouter()
22+
const [toggleMenu, setToggleMenu] = useState(false)
23+
const navItems = [
24+
{ title: 'HOME', url: '/' },
25+
{ title: 'LEARN', url: '#' },
26+
{ title: 'BLOG', url: '/blog' },
27+
{ title: 'ABOUT', url: '#' },
28+
{ title: 'PROJECTS', url: '/projects' },
29+
{ title: 'COMMUNITY PARTNERS', url: '/partners' },
30+
{ title: 'OUR MODERATORS', url: '/moderators' }
31+
]
32+
33+
return (
34+
<nav className='sticky w-full z-30 top-0 text-white bg-white'>
35+
<div className='w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2'>
36+
<div className='pl-4 flex items-center'>
37+
<Link
38+
className='toggleColour text-black no-underline hover:no-underline font-bold text-2xl lg:text-2xl'
39+
href='/'
40+
passHref
41+
>
42+
<img src='/logo.png' alt='Web 3 Community' className='h-16 items-start' />
43+
</Link>
44+
</div>
45+
<ul className='lg:flex hidden list-none flex-row justify-between items-center flex-initial'>
46+
{navItems.map((item, index) => (
47+
<NavBarItem key={item.title + index} item={item} pathname={router.asPath} />
48+
))}
49+
</ul>
50+
<div className='flex relative'>
51+
{!toggleMenu && (
52+
<HiMenuAlt4
53+
fontSize={28}
54+
className='lg:hidden cursor-pointer text-blue-600'
55+
onClick={() => setToggleMenu(true)}
56+
/>
57+
)}
58+
{toggleMenu && (
59+
<AiOutlineClose
60+
fontSize={28}
61+
className='md:hidden cursor-pointer text-blue-600'
62+
onClick={() => setToggleMenu(false)}
63+
/>
64+
)}
65+
{toggleMenu && (
66+
<ul
67+
className='z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl lg:hidden list-none
68+
flex flex-col justify-start items-end rounded-md blue-glassmorphism animate-slide-in'
69+
>
70+
<li className='text-xl w-full my-2 text-blue-600'>
71+
<AiOutlineClose onClick={() => setToggleMenu(false)} />
72+
</li>
73+
{navItems.map((item, index) => (
74+
<NavBarItem
75+
key={item + index}
76+
item={item}
77+
pathname={router.asPath}
78+
classprops={'my-2 text-lg'}
79+
/>
80+
))}
81+
</ul>
82+
)}
83+
</div>
84+
</div>
85+
<hr className='border-b border-gray-100 opacity-25 my-0 py-0' />
86+
</nav>
87+
)
88+
}
89+
90+
export default Navbar
91+
92+
{
93+
/* <nav className='w-full z-30 top-0 text-white bg-white relative'>
94+
<div className='md:flex-[0.5] flex-initial justify-center items-center'>
95+
<Image
96+
src='/logo.png'
97+
layout='responsive'
98+
width={80}
99+
height={40}
100+
alt='logo'
101+
className='w-32 cursor-pointer'
102+
/>
103+
</div>
104+
<ul className='md:flex hidden list-none flex-row justify-between items-center flex-initial'>
105+
{['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
106+
<NavBarItem key={item + index} title={item} />
107+
))}
108+
<li className='bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]'>
109+
Login
110+
</li>
111+
</ul>
112+
<div className='flex relative'>
113+
{!toggleMenu && (
114+
<HiMenuAlt4
115+
fontSize={28}
116+
className='md:hidden cursor-pointer'
117+
onClick={() => setToggleMenu(true)}
118+
/>
119+
)}
120+
{toggleMenu && (
121+
<AiOutlineClose
122+
fontSize={28}
123+
className='text-white md:hidden cursor-pointer'
124+
onClick={() => setToggleMenu(false)}
125+
/>
126+
)}
127+
{toggleMenu && (
128+
<ul
129+
className='z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none
130+
flex flex-col justify-start items-end rounded-md blue-glassmorphism animate-slide-in'
131+
>
132+
<li className='text-xl w-full my-2'>
133+
<AiOutlineClose onClick={() => setToggleMenu(false)} />
134+
</li>
135+
{['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
136+
<NavBarItem key={item + index} title={item} classprops='my-2 text-lg' />
137+
))}
138+
</ul>
139+
)}
140+
</div>
141+
</nav> */
142+
}

‎pages/_app.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1+
import Footer from '../components/Footer'
2+
import Navbar from '../components/Navbar'
13
import '../styles/globals.css'
24

35
function MyApp({ Component, pageProps }) {
4-
return <Component {...pageProps} />
6+
return (
7+
<>
8+
<Navbar />
9+
<Component {...pageProps} />
10+
<Footer />
11+
</>
12+
)
513
}
614

715
export default MyApp

‎styles/globals.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
.blue-glassmorphism {
6+
background: rgba(255, 255, 255, 0.5);
7+
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
8+
backdrop-filter: blur(3px);
9+
-webkit-backdrop-filter: blur(3px);
10+
border-radius: 10px;
11+
border: 1px solid rgba(255, 255, 255, 0.18);
12+
}

0 commit comments

Comments
 (0)