Skip to content

Commit 1d39e39

Browse files
AbhinavMVAbhinavMV
committed
Add Moderators page
1 parent 2b5fd6b commit 1d39e39

File tree

7 files changed

+184
-33
lines changed

7 files changed

+184
-33
lines changed

‎components/Global/Blogs.jsx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Image from 'next/image'
12
import Link from 'next/link'
23

34
const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
@@ -19,11 +20,16 @@ const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
1920
<Link key={article.title + index} href={article.url} passHref>
2021
<div className='flex flex-col justify-between items-stretch col-span-3 md:col-span-1 cursor-pointer p-2 shadow rounded-md focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
2122
<div className='bg-white p-4 rounded-lg'>
22-
<img
23-
className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
24-
src={article.social_image}
25-
alt={article.title}
26-
/>
23+
<div className='relative bg-contain'>
24+
<Image
25+
alt={article.title}
26+
layout='responsive'
27+
height={150}
28+
width={150}
29+
className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
30+
src={article.social_image}
31+
/>
32+
</div>
2733
<div className='flex justify-between'>
2834
<h2 className='text-xl text-gray-900 font-semibold mb-4'>
2935
{article.title}
@@ -34,12 +40,15 @@ const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
3440
</p>
3541
</div>
3642
<time className='p-4 text-gray-500 text-xs flex items-end'>
37-
<img
43+
<Image
44+
layout='fixed'
45+
width={40}
46+
height={40}
3847
src={article?.user?.profile_image}
3948
alt={article.user.name}
40-
className='w-10 h-10 rounded-full mr-2'
49+
className='rounded-full'
4150
/>
42-
<p className='opacity-50'>
51+
<p className='ml-2 opacity-50'>
4352
by {article.user.name} on
4453
{' ' + article.readable_publish_date}
4554
</p>

‎components/Global/Footer.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ const Footer = () => {
6060
return (
6161
<footer className='bg-[#1F2E35]'>
6262
<div className='container mx-auto px-8'>
63-
<div className='w-full flex flex-col md:flex-row py-6'>
63+
<div className='w-full flex flex-col md:flex-row py-6 gap-x-4'>
6464
<div className='flex-wrap flex-1 md:px-4 mb-6 text-black'>
6565
<p className='text-white mb-3 md:mb-6'>Socials</p>
66-
<div className='flex space-x-4'>
66+
<div className='flex space-x-2'>
6767
{socials.map(({ url, name, text, icon: Icon }, index) => (
6868
<a
6969
aria-hidden='true'
@@ -137,7 +137,7 @@ const Footer = () => {
137137
<li className='mt-2 inline-block mr-2 md:block md:mr-0'>
138138
<a
139139
href='mailto:[email protected]'
140-
className='no-underline text-gray-400 hover:text-blue-500'
140+
className='no-underline text-sm md:text-base text-gray-400 hover:text-blue-500'
141141
>
142142
[email protected]
143143
</a>

‎components/Global/Navbar.jsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import Link from 'next/link'
66
import { useRouter } from 'next/router'
77

88
const NavBarItem = ({ item, pathname, classprops }) => (
9-
<Link href={item.url} passHref>
9+
<a href={item.url}>
1010
<li
1111
className={`${
1212
pathname === item.url && 'font-bold'
1313
} ${classprops} cursor-pointer text-ml inline-block text-blue-800 no-underline hover:text-indigo-500 p-2 xl:px-4 items-center`}
1414
>
1515
{item.title}
1616
</li>
17-
</Link>
17+
</a>
1818
)
1919

2020
const Navbar = () => {
@@ -39,7 +39,15 @@ const Navbar = () => {
3939
href='/'
4040
passHref
4141
>
42-
<img src='/logo.png' alt='Web 3 Community' className='h-16 items-start' />
42+
<div>
43+
<Image
44+
layout='fixed'
45+
width={180}
46+
height={60}
47+
src='/logo.png'
48+
alt='WebXDAO'
49+
/>
50+
</div>
4351
</Link>
4452
</div>
4553
<ul className='lg:flex hidden list-none flex-row justify-end items-center ml-auto'>

‎next.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
module.exports = {
2-
reactStrictMode: true,
2+
reactStrictMode: true,
3+
images: {
4+
domains: ['res.cloudinary.com', 'github.com']
5+
}
36
}

‎pages/moderators.js

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import Head from 'next/head'
2+
import Image from 'next/image'
3+
import { AiOutlineTwitter, AiOutlineGithub } from 'react-icons/ai'
4+
5+
export default function Moderators() {
6+
const data = [
7+
{
8+
name: 'David Leal',
9+
bio: 'Open-source maintainer/contributor 💻 Bot/website maintainer for @Heptagram 🤖 @Minetest mod/game maintainer & creator 🎮 Discord moderator in 20+ servers 🛡 Open-source/DSA mentor 🛠',
10+
imgUrl: 'https://github.com/Panquesito7.png',
11+
twitterUrl: 'https://twitter.com/David_Leal_7',
12+
githubUrl: 'https://github.com/Panquesito7'
13+
},
14+
{
15+
name: 'Ritvik Shukla',
16+
bio: 'Co-Founder | Open Source Enthusiast | Poet | Community 💛',
17+
imgUrl: 'https://github.com/shuklaritvik06.png',
18+
twitterUrl: 'https://twitter.com/ShuklaRitvik06',
19+
githubUrl: 'https://github.com/shuklaritvik06'
20+
},
21+
{
22+
name: 'Shubham Kukreti',
23+
bio: 'Co-Founder | Web3 & Open Source Enthusiast | Community ❤️',
24+
imgUrl: 'https://github.com/KukretiShubham.png',
25+
twitterUrl: 'https://twitter.com/ShubhamKukretii',
26+
githubUrl: 'https://github.com/KukretiShubham'
27+
},
28+
{
29+
name: 'Vincent Villafuerte',
30+
bio: 'Founder | Octocat lover | OSS Advocate | DevRel | Community guy 🚩',
31+
imgUrl: 'https://github.com/vinzvinci.png',
32+
twitterUrl: 'https://twitter.com/vinzvinci',
33+
githubUrl: 'https://github.com/vinzvinci'
34+
},
35+
{
36+
name: 'Max Kubik',
37+
bio: 'Web2 Fullstack Software Engineer 💠 I build webapps and mobile apps for the industry field 🔧 Transitioning to Web3 stacks 🌠 Maintainer for @Web3community 🍬 Open-source newbie!',
38+
imgUrl: 'https://github.com/mkubdev.png',
39+
twitterUrl: 'https://twitter.com/digikube1',
40+
githubUrl: 'https://github.com/mkubdev'
41+
},
42+
{
43+
name: 'Krish Gupta',
44+
bio: "Started my tech journey on 30th September 2021. Since then, I am learning new things and growing my network. I love to chat, collaborate and contribute. I am an open sourcer, that's my complete bio.",
45+
imgUrl: 'https://github.com/krishguptadev.png',
46+
twitterUrl: 'https://twitter.com/krishguptadev',
47+
githubUrl: 'https://github.com/krishguptadev'
48+
}
49+
]
50+
51+
return (
52+
<>
53+
<Head>
54+
<title>Our Moderators | WebXDAO</title>
55+
</Head>
56+
<section className='text-white text-center bg-[#00007f]'>
57+
<div className='px-20 py-20'>
58+
<h1 className='font-bold text-5xl antialiased'>Community moderators</h1>
59+
<div className='mt-6 text-xl font-light text-true-gray-500 antialiased'>
60+
Meet our moderators always providing support
61+
</div>
62+
</div>
63+
</section>
64+
65+
<div className='flex flex-col'>
66+
<div className='bg-white pt-12 pb-12 flex-1'>
67+
<div className='container mx-auto'>
68+
<div className='flex flex-wrap md:-mx-3 gap-6'>
69+
<div className='text-black grid grid-col-1 p-3 gap-y-3 md:grid lg:grid-cols-2 md:gap-3 md:p-3'>
70+
{data.map(({ name, bio, imgUrl, twitterUrl, githubUrl }, index) => (
71+
<div
72+
key={name + index}
73+
className='cursor-pointer hover:z-10 bg-white flex-1 rounded-md shadow focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out p-4'
74+
>
75+
<div className='grid grid-cols-3 items-center justify-start overflow-hidden p-4'>
76+
<div className='relative col-span-1 bg-gray-50 w-full rounded-full p-6'>
77+
<Image
78+
layout='responsive'
79+
width={800}
80+
height={800}
81+
alt={name}
82+
className='rounded-full'
83+
src={imgUrl}
84+
/>
85+
</div>
86+
<div className='flex flex-col col-span-2 gap-y-3 pl-5'>
87+
<h4 className='text-xl font-semibold'>{name}</h4>
88+
<p className='text-gray-800 my-2'>
89+
{bio}
90+
<div className='flex gap-2 mt-auto'>
91+
<a
92+
aria-hidden='true'
93+
className='text-blue-500 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100'
94+
href={twitterUrl}
95+
rel='noreferrer'
96+
target='_blank'
97+
>
98+
<AiOutlineTwitter className='w-10 h-10 ' />
99+
</a>
100+
101+
<a
102+
aria-hidden='true'
103+
className='transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100'
104+
href={githubUrl}
105+
rel='noreferrer'
106+
target='_blank'
107+
>
108+
<AiOutlineGithub className='w-10 h-10 ' />
109+
</a>
110+
</div>
111+
</p>
112+
</div>
113+
</div>
114+
</div>
115+
))}
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
</>
122+
)
123+
}

‎pages/partners.js

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Head from 'next/head'
2+
import Image from 'next/image'
23

34
export default function Partners() {
45
const data = [
@@ -52,19 +53,20 @@ export default function Partners() {
5253
key={name + index}
5354
className='cursor-pointer bg-white flex-1 rounded-md shadow focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 hover:z-10 duration-300 ease-in-out p-4'
5455
>
55-
<div className='flex items-center justify-start overflow-hidden'>
56-
<img
57-
alt={name}
58-
className='bg-gray-50 p-5 rounded-md'
59-
src={imgUrl}
60-
/>
61-
<div id='body' className='flex flex-col gap-y-3 pl-5'>
62-
<h4 id='name' className='text-xl font-semibold'>
63-
{title}
64-
</h4>
65-
<p id='caption' className='text-gray-800'>
66-
{text}
67-
</p>
56+
<div className='grid grid-cols-3 items-center justify-start overflow-hidden'>
57+
<div className='relative col-span-1'>
58+
<Image
59+
layout='responsive'
60+
width={800}
61+
height={800}
62+
alt={name}
63+
className='bg-gray-50 p-5 rounded-md'
64+
src={imgUrl}
65+
/>
66+
</div>
67+
<div className='flex flex-col col-span-2 gap-y-3 pl-5'>
68+
<h4 className='text-xl font-semibold'>{title}</h4>
69+
<p className='text-gray-800'>{text}</p>
6870
</div>
6971
</div>
7072
</div>

‎pages/projects.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Head from 'next/head'
2+
import Image from 'next/image'
23

34
export default function Projects() {
45
const data = [
@@ -52,11 +53,16 @@ export default function Projects() {
5253
className='flex flex-col justify-between items-stretch col-span-3 md:col-span-1 cursor-pointer p-2 shadow rounded-md focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'
5354
>
5455
<div className='bg-white p-4 rounded-lg flex flex-col justify-between'>
55-
<img
56-
className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
57-
src={imgUrl}
58-
alt={name}
59-
/>
56+
<div className='relative mb-6'>
57+
<Image
58+
layout='responsive'
59+
width={800}
60+
height={800}
61+
className='lg:h-60 xl:h-56 md:h-64 h-72 w-full object-cover object-center rounded-md'
62+
src={imgUrl}
63+
alt={name}
64+
/>
65+
</div>
6066
<div className='flex justify-between'>
6167
<h2 className='text-xl text-gray-900 font-semibold mb-4'>
6268
{title}

0 commit comments

Comments
 (0)