Skip to content

Commit 2b5fd6b

Browse files
AbhinavMVAbhinavMV
committed
Add Blog,Community Partners,Projects pages
1 parent 42dca4f commit 2b5fd6b

File tree

12 files changed

+241
-32
lines changed

12 files changed

+241
-32
lines changed

‎components/Blogs.jsx renamed to ‎components/Global/Blogs.jsx

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import Link from 'next/link'
22

3-
const Blogs = ({ articles, show = articles.length }) => {
3+
const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
44
return (
55
<section className='bg-white py-8'>
6-
<div className='container max-w-5xl mx-auto'>
7-
<h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
8-
Blogs
9-
</h1>
10-
<div className='w-full mb-4'>
11-
<div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
6+
{!contentOnly && (
7+
<div className='container max-w-5xl mx-auto'>
8+
<h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
9+
Blogs
10+
</h1>
11+
<div className='w-full mb-4'>
12+
<div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
13+
</div>
1214
</div>
13-
</div>
15+
)}
1416
<div className='container max-w-screen-xl mx-auto pt-4 pb-8 grid grid-cols-3 mb-8 gap-6 px-8'>
1517
{articles.length > 0 ? (
1618
articles.slice(0, show).map((article, index) => (
@@ -49,14 +51,15 @@ const Blogs = ({ articles, show = articles.length }) => {
4951
<div className='text-center w-full'>No Blogs found....</div>
5052
)}
5153
</div>
52-
53-
<div className='flex justify-center'>
54-
<a href='https://dev.to/web3community' target='_blank' rel='noreferrer'>
55-
<button className='bg-gray-700 text-white mx-auto lg:mx-0 rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out'>
56-
See All
57-
</button>
58-
</a>
59-
</div>
54+
{!contentOnly && (
55+
<div className='flex justify-center'>
56+
<a href='https://dev.to/web3community' target='_blank' rel='noreferrer'>
57+
<button className='bg-gray-700 text-white mx-auto lg:mx-0 rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out'>
58+
See All
59+
</button>
60+
</a>
61+
</div>
62+
)}
6063
</section>
6164
)
6265
}

‎components/Footer.jsx renamed to ‎components/Global/Footer.jsx

File renamed without changes.

‎components/Navbar.jsx renamed to ‎components/Global/Navbar.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const Navbar = () => {
4747
<NavBarItem key={item.title + index} item={item} pathname={router.asPath} />
4848
))}
4949
</ul>
50-
<div className='flex relative'>
50+
<div className='flex relative p-2'>
5151
{!toggleMenu && (
5252
<HiMenuAlt4
5353
fontSize={28}
@@ -75,7 +75,7 @@ flex flex-col justify-start items-end rounded-md blue-glassmorphism'
7575
key={item + index}
7676
item={item}
7777
pathname={router.asPath}
78-
classprops={'my-2 text-lg'}
78+
classprops={'my-2 text-lg !text-black font-bold'}
7979
/>
8080
))}
8181
</ul>

‎components/Global/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// export all the components in Global folder from here
2+
export { default as Navbar } from './Navbar'
3+
export { default as Footer } from './Footer'
4+
export { default as Blogs } from './Blogs'

‎components/Home/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// export all the components in Home folder from here
12
export { default as Hero } from './Hero'
23
export { default as Projects } from './Projects'
34
export { default as DeveloperPaths } from './DeveloperPath'

‎pages/_app.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import Footer from '../components/Footer'
2-
import Navbar from '../components/Navbar'
1+
import { Footer, Navbar } from '../components/Global'
32
import '../styles/globals.css'
43

54
function MyApp({ Component, pageProps }) {

‎pages/blog.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Head from 'next/head'
2+
import { Blogs } from '../components/Global'
3+
4+
export default function Blog({ articles }) {
5+
return (
6+
<>
7+
<Head>
8+
<title>Blog | WebXDAO</title>
9+
</Head>
10+
<section className='text-white text-center bg-[#00007F]'>
11+
<div className='px-20 py-20'>
12+
<h1 className='font-bold text-5xl antialiased'>Check out our blog posts</h1>
13+
<div className='mt-6 text-xl font-light text-true-gray-500 antialiased'>
14+
Read our articles from <span className='font-mono'>Dev.to</span>
15+
</div>
16+
</div>
17+
<Blogs articles={articles} contentOnly={true} />
18+
</section>
19+
</>
20+
)
21+
}
22+
23+
export async function getStaticProps() {
24+
const res = await fetch('https://dev.to/api/articles?username=web3community', {
25+
method: 'GET'
26+
})
27+
const articles = await res.json()
28+
return {
29+
props: {
30+
articles
31+
},
32+
revalidate: 10
33+
}
34+
}

‎pages/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Head from 'next/head'
2-
import Blogs from '../components/Blogs'
2+
import { Blogs } from '../components/Global'
33
import { DeveloperPaths, DevprotocolBrands, Hero, Projects, Testimonials } from '../components/Home'
44

55
export default function Home({ articles }) {

‎pages/partners.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import Head from 'next/head'
2+
3+
export default function Partners() {
4+
const data = [
5+
{
6+
name: 'dev protocol',
7+
imgUrl: '/logo 3.4.png',
8+
title: 'DEV PROTOCOL',
9+
text: 'Dev Protocol was designed as a unique protocol to fairly evaluate OSS, which has been economically undervalued for decades. It is built on the Ethereum blockchain and brings economic value to all open source activities.'
10+
},
11+
{
12+
name: 'logo1',
13+
imgUrl: '/logo 3 1.png',
14+
title: 'Logo 1',
15+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.'
16+
},
17+
{
18+
name: 'logo2',
19+
imgUrl: '/logo 3 2.png',
20+
title: 'Logo 2',
21+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.'
22+
},
23+
{
24+
name: 'logo3',
25+
imgUrl: '/logo 3 3.png',
26+
title: 'Logo 3',
27+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.'
28+
}
29+
]
30+
31+
return (
32+
<>
33+
<Head>
34+
<title>Community Partners | WebXDAO</title>
35+
</Head>
36+
<section className='text-white text-center bg-[#00007f]'>
37+
<div className='px-20 py-20'>
38+
<h1 className='font-bold text-5xl antialiased'>Community Partners</h1>
39+
<div className='mt-6 text-xl font-light text-true-gray-500 antialiased'>
40+
Our Valuable Community Partners
41+
</div>
42+
</div>
43+
</section>
44+
45+
<div className='flex flex-col'>
46+
<div className='bg-white pt-12 pb-12 flex-1'>
47+
<div className='container mx-auto'>
48+
<div className='flex flex-wrap gap-6'>
49+
<div className='text-black grid grid-col-1 p-3 gap-y-3 md:grid md:grid-cols-2 md:gap-3 md:p-3'>
50+
{data.map(({ name, title, imgUrl, text }, index) => (
51+
<div
52+
key={name + index}
53+
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'
54+
>
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>
68+
</div>
69+
</div>
70+
</div>
71+
))}
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
</>
78+
)
79+
}

‎pages/projects.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import Head from 'next/head'
2+
3+
export default function Projects() {
4+
const data = [
5+
{
6+
name: 'InVision',
7+
imgUrl: '/blogs_inVision.png',
8+
type: 'PREMIUM',
9+
title: 'Start Here',
10+
text: 'InVision is the digital product design platform used to make the worlds best customer experiences.',
11+
tags: ['Documentation']
12+
},
13+
{
14+
name: 'Adobe XD',
15+
imgUrl: '/blogs_xd.png',
16+
type: 'FREE',
17+
title: 'Blockchain Dev Path',
18+
text: 'Adobe XD is your UI/UX design solution platform for website and mobile appcreation.',
19+
tags: ['Documentation']
20+
},
21+
{
22+
name: 'Figma',
23+
imgUrl: '/blogs_figma.png',
24+
type: 'FREE',
25+
title: 'Website',
26+
text: 'Figma helps the teams to create, test, and ship better designs from start to finish.',
27+
tags: ['Tailwind Css', 'Eleventy', 'Alpine.js']
28+
}
29+
]
30+
31+
return (
32+
<>
33+
<Head>
34+
<title>Projects | WebXDAO</title>
35+
</Head>
36+
<section className='text-white text-center bg-[#00007f]'>
37+
<div className='px-20 py-20'>
38+
<h1 className='font-bold text-3xl md:text-5xl antialiased'>
39+
Resources/Projects
40+
</h1>
41+
<div className='mt-6 text-xl font-light text-true-gray-500 antialiased'>
42+
Here you can find a list of good projects and resources to learn about
43+
Blockchain and Web 3.0
44+
</div>
45+
</div>
46+
</section>
47+
48+
<div className='container max-w-screen-xl mx-auto my-8 grid pb-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mb-8 gap-6 px-8'>
49+
{data.map(({ name, imgUrl, type, title, text, tags }, index) => (
50+
<div
51+
key={name + index}
52+
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'
53+
>
54+
<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+
/>
60+
<div className='flex justify-between'>
61+
<h2 className='text-xl text-gray-900 font-semibold mb-4'>
62+
{title}
63+
</h2>
64+
<h3
65+
className={`tracking-widest ${
66+
type === 'FREE' ? 'text-green-500' : 'text-yellow-500'
67+
} text-sm font-semibold title-font`}
68+
>
69+
{type}
70+
</h3>
71+
</div>
72+
73+
<p className='leading-relaxed text-base text-gray-800 mb-5'>{text}</p>
74+
75+
<div className='mt-auto justify-items-end text-sm flex flex-wrap gap-3'>
76+
{tags.map((item, index) => (
77+
<button
78+
key={item + index}
79+
className='whitespace-nowrap font-semibold bg-blue-100 text-blue-600 rounded-md py-2 px-4 focus:outline-none'
80+
>
81+
{item}
82+
</button>
83+
))}
84+
</div>
85+
</div>
86+
</div>
87+
))}
88+
</div>
89+
</>
90+
)
91+
}

0 commit comments

Comments
 (0)