Skip to content

Commit 42dca4f

Browse files
AbhinavMVAbhinavMV
committed
Add Home Page
1 parent 89d8bde commit 42dca4f

File tree

7 files changed

+258
-11
lines changed

7 files changed

+258
-11
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22

3+
#package-lock.json
4+
package-lock.json
5+
36
# dependencies
47
/node_modules
58
/.pnp

‎components/Blogs.jsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import Link from 'next/link'
2+
3+
const Blogs = ({ articles, show = articles.length }) => {
4+
return (
5+
<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>
12+
</div>
13+
</div>
14+
<div className='container max-w-screen-xl mx-auto pt-4 pb-8 grid grid-cols-3 mb-8 gap-6 px-8'>
15+
{articles.length > 0 ? (
16+
articles.slice(0, show).map((article, index) => (
17+
<Link key={article.title + index} href={article.url} passHref>
18+
<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'>
19+
<div className='bg-white p-4 rounded-lg'>
20+
<img
21+
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'
22+
src={article.social_image}
23+
alt={article.title}
24+
/>
25+
<div className='flex justify-between'>
26+
<h2 className='text-xl text-gray-900 font-semibold mb-4'>
27+
{article.title}
28+
</h2>
29+
</div>
30+
<p className='leading-relaxed text-sm text-gray-600'>
31+
{article.description}
32+
</p>
33+
</div>
34+
<time className='p-4 text-gray-500 text-xs flex items-end'>
35+
<img
36+
src={article?.user?.profile_image}
37+
alt={article.user.name}
38+
className='w-10 h-10 rounded-full mr-2'
39+
/>
40+
<p className='opacity-50'>
41+
by {article.user.name} on
42+
{' ' + article.readable_publish_date}
43+
</p>
44+
</time>
45+
</div>
46+
</Link>
47+
))
48+
) : (
49+
<div className='text-center w-full'>No Blogs found....</div>
50+
)}
51+
</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>
60+
</section>
61+
)
62+
}
63+
64+
export default Blogs

‎components/Home/DevprotocolBrands.jsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import Image from 'next/image'
2+
import Link from 'next/link'
3+
4+
const DevprotocolBrands = () => {
5+
const projects = [
6+
{
7+
name: 'Dev Protocol',
8+
imgUrl: '/dev_protocol.png',
9+
text: 'Dev Protocol integrates with OSS so that projects or creators can authenticate and tokenize their work. It is a whole new creator economy evolving from open creators assets.',
10+
url: 'https://devprotocol.xyz/'
11+
},
12+
{
13+
name: 'Stakes.Social',
14+
imgUrl: '/stakes_social.png',
15+
text: 'Stakes.social is a new sponsor platform where both developers and sponsors are rewarded with tokens if they support their favorite projects by staking $DEV tokens.',
16+
url: 'https://stakes.social/'
17+
},
18+
{
19+
name: 'Dev Protocol Forum',
20+
imgUrl: '/dev_protocol_forum.png',
21+
text: 'Dev Protocol forum is an open conversation for everyone who can collaborate or propose ideas to the Dev Protocol team or help other community members.',
22+
url: 'https://community.devprotocol.xyz/'
23+
}
24+
]
25+
26+
return (
27+
<section className='bg-white py-8'>
28+
<div className='container max-w-5xl mx-auto m-8'>
29+
<h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
30+
Dev Protocol Brand
31+
</h1>
32+
<p className='text-center text-gray-800 text-base px-6 mb-5 mx-10'>
33+
Our Partner Open Source Projects
34+
</p>
35+
<div className='w-full mb-4'>
36+
<div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
37+
</div>
38+
</div>
39+
40+
<div className='container mx-auto text-black max-w-screen-xl flex flex-wrap flex-col pt-4 mb-8 px-8'>
41+
<div className='items-center gap-6 text-black grid grid-cols-1 md:grid-cols-3'>
42+
{projects.map(({ name, imgUrl, text, url }, index) => (
43+
<Link key={name + index} href={url} passHref className='h-full group'>
44+
<div className='mx-auto flex flex-col justify-evenly items-center h-full object-center text-center p-8 shadow cursor-pointer rounded-md focus:outline-none focus:shadow-outline transform bg-white transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
45+
<div className='relative h-24 w-full flex-shrink-0'>
46+
<Image
47+
src={imgUrl}
48+
alt={name}
49+
layout='fill'
50+
objectFit='contain'
51+
/>
52+
</div>
53+
<p className='text-gray-800 mt-8 mb-2 text-sm px-8 sm:px-4 h-full'>
54+
{text}
55+
</p>
56+
</div>
57+
</Link>
58+
))}
59+
</div>
60+
</div>
61+
</section>
62+
)
63+
}
64+
65+
export default DevprotocolBrands

‎components/Home/Hero.jsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,8 @@ const Hero = () => {
2525
</div>
2626
</div>
2727

28-
<div className='block w-full md:w-3/5 py-6 text-center items-end bg-contain'>
29-
<Image
30-
src='/hero.png'
31-
layout='fixed'
32-
width={400}
33-
height={400}
34-
objectFit='contain'
35-
alt='Web3'
36-
/>
28+
<div className='relative w-full md:w-3/5 h-96 py-6 text-center items-end'>
29+
<Image src='/hero.png' layout='fill' objectFit='contain' alt='Web3' />
3730
</div>
3831
</div>
3932
</div>

‎components/Home/Testimonials.jsx

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import Image from 'next/image'
2+
3+
const Testimonials = () => {
4+
const data = [
5+
{
6+
name: 'Wahid Ari',
7+
imgUrl: '/placeholder/placeholder_1.png',
8+
userTitle: 'Designer',
9+
text: 'Gear Menyediakan informasi tools yang powerful untuk Designer, Developer, dan juga Business Owner agar bisa lebih produktif',
10+
rating: 2
11+
},
12+
{
13+
name: 'Wahid Ari',
14+
imgUrl: '/placeholder/placeholder_2.png',
15+
userTitle: 'Developer',
16+
text: 'Gear Menyediakan informasi tools yang powerful untuk Designer, Developer, dan juga Business Owner agar bisa lebih produktif',
17+
rating: 5
18+
},
19+
{
20+
name: 'Wahid Ari',
21+
imgUrl: '/placeholder/placeholder_3.png',
22+
userTitle: 'UI/UX Designer',
23+
text: 'Gear Menyediakan informasi tools yang powerful untuk Designer, Developer, dan juga Business Owner agar bisa lebih produktif',
24+
rating: 3
25+
}
26+
]
27+
28+
return (
29+
<section className='bg-gray-50 py-8'>
30+
<div className='container max-w-5xl mx-auto m-8'>
31+
<h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
32+
Testimonials
33+
</h1>
34+
<p className='text-center text-gray-800 text-base px-6 mb-5 mx-10'>
35+
Community Members Experience
36+
</p>
37+
<div className='w-full mb-4'>
38+
<div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
39+
</div>
40+
</div>
41+
42+
<div className='lg:container mx-auto flex flex-wrap pt-4 mb-8 px-8 pb-12'>
43+
<div className='items-center gap-6 text-black grid grid-cols-1 md:grid-cols-3'>
44+
{data.map(({ name, imgUrl, userTitle, rating, text }, index) => (
45+
<div
46+
key={name + index}
47+
className='mx-auto flex flex-col justify-evenly h-full content-start p-6 shadow cursor-pointer rounded-md focus:outline-none focus:shadow-outline transform bg-white transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'
48+
>
49+
<div className='flex py-4'>
50+
<div className='flex items-center'>
51+
{Array.from(Array(Math.floor(rating)).keys()).map(
52+
(item, index) => (
53+
<svg
54+
key={item + index}
55+
className='mx-1 w-4 h-4 fill-current text-yellow-500'
56+
xmlns='http://www.w3.org/2000/svg'
57+
viewBox='0 0 20 20'
58+
>
59+
<path d='M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z' />
60+
</svg>
61+
)
62+
)}
63+
{Array.from(Array(5 - Math.floor(rating)).keys()).map(
64+
(item, index) => (
65+
<svg
66+
key={item + index}
67+
className='mx-1 w-4 h-4 fill-current text-gray-400'
68+
xmlns='http://www.w3.org/2000/svg'
69+
viewBox='0 0 20 20'
70+
>
71+
<path d='M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z' />
72+
</svg>
73+
)
74+
)}
75+
</div>
76+
</div>
77+
<p className='text-gray-600 text-base mb-2'>{text}</p>
78+
<div className='flex flex-row items-center justify-start py-2'>
79+
<div className='relative h-16 w-16 flex-shrink-0'>
80+
<Image
81+
src={imgUrl}
82+
alt={name}
83+
layout='fill'
84+
objectFit='contain'
85+
/>
86+
</div>
87+
88+
<div className='flex flex-col justify-center pl-3'>
89+
<div className='w-full font-bold text-xl text-gray-800'>
90+
{name}
91+
</div>
92+
<p className='text-gray-800 text-base'>{userTitle}</p>
93+
</div>
94+
</div>
95+
</div>
96+
))}
97+
</div>
98+
</div>
99+
</section>
100+
)
101+
}
102+
103+
export default Testimonials

‎components/Home/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
export { default as Hero } from './Hero'
22
export { default as Projects } from './Projects'
33
export { default as DeveloperPaths } from './DeveloperPath'
4+
export { default as DevprotocolBrands } from './DevprotocolBrands'
5+
export { default as Testimonials } from './Testimonials'

‎pages/index.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import Head from 'next/head'
2-
import { DeveloperPaths, Hero, Projects } from '../components/Home'
2+
import Blogs from '../components/Blogs'
3+
import { DeveloperPaths, DevprotocolBrands, Hero, Projects, Testimonials } from '../components/Home'
34

4-
export default function Home() {
5+
export default function Home({ articles }) {
56
return (
67
<div className=''>
78
<Head>
@@ -10,6 +11,22 @@ export default function Home() {
1011
<Hero />
1112
<Projects />
1213
<DeveloperPaths />
14+
<Blogs articles={articles} show={3} />
15+
<DevprotocolBrands />
16+
<Testimonials />
1317
</div>
1418
)
1519
}
20+
21+
export async function getStaticProps() {
22+
const res = await fetch('https://dev.to/api/articles?username=web3community', {
23+
method: 'GET'
24+
})
25+
const articles = await res.json()
26+
return {
27+
props: {
28+
articles
29+
},
30+
revalidate: 10
31+
}
32+
}

0 commit comments

Comments
 (0)