Skip to content

Commit 62e00f2

Browse files
mkubdevmkubdev
committed
[🏗️] major architectural changes: moving core files to /src
1 parent 8802967 commit 62e00f2

File tree

21 files changed

+905
-0
lines changed

21 files changed

+905
-0
lines changed

‎public/images/test.PNG‎

186 KB
Loading

‎public/images/webxdao_logo.png‎

117 KB
Loading

‎src/components/Global/Blogs.jsx‎

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

‎src/components/Global/Footer.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const Footer = () => {
2+
return (
3+
<div className="bg-cover bg-white bg-opacity-10 text-white">
4+
<div className="justify-center items-center flex h-full">
5+
WebXDAO Footer
6+
</div>
7+
</div>
8+
);
9+
};
10+
11+
export default Footer;

‎src/components/Global/Navbar.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const Navbar = () => {
2+
return (
3+
<header className="bg-cover bg-white bg-opacity-10 min-h-16 h-16 text-white">
4+
<div className="justify-center items-center flex h-full">
5+
WebXDAO Navbar
6+
</div>
7+
</header>
8+
);
9+
};
10+
11+
export default Navbar;

‎src/components/Home/DeveloperPath.jsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { prefix } from "../../constants"
2+
3+
const DeveloperPath = () => {
4+
const devPaths = [
5+
{
6+
name: 'Simplilearn',
7+
imgUrl: '/simplilearn.png',
8+
text: 'Blockchain tutorial for beginners to advanced Level.',
9+
url: 'https://www.simplilearn.com/tutorials/blockchain-tutorial?source=sl_frs_nav_playlist_video_clicked'
10+
},
11+
{
12+
name: 'Learn with Whiteboard',
13+
imgUrl: '/whiteboard.png',
14+
text: 'The skills required for a blockchain developer which is one of the in-demand professions today.',
15+
url: 'https://www.youtube.com/watch?v=x9l3y0cdpuU'
16+
},
17+
{
18+
name: 'Figment',
19+
imgUrl: '/figment.png',
20+
text: 'The Web 3 education platform for developers, by developers.Learn the Web 3 basics with 101 Pathways.',
21+
url: 'https://learn.figment.io/'
22+
},
23+
24+
{
25+
name: 'CryptoZombies',
26+
imgUrl: '/cryptozombie.png',
27+
text: 'CryptoZombies is an interactive school that teaches you all things technical about blockchains.',
28+
url: 'https://cryptozombies.io/'
29+
}
30+
]
31+
32+
return (
33+
<section className='bg-gray-50'>
34+
<div className='container mx-auto max-w-7xl pt-8'>
35+
<h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
36+
Blockchain Developer Path
37+
</h1>
38+
<p className='text-center text-gray-800 text-base px-6 mb-5 mx-10'>
39+
The latest field in the tech industry
40+
</p>
41+
<div className='w-full mb-4'>
42+
<div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
43+
</div>
44+
45+
<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'>
46+
{devPaths.map(({ name, imgUrl, text, url }, index) => (
47+
<div
48+
key={name + index}
49+
className='bg-white flex-1 rounded-md shadow focus:outline-none focus:shadow-outline transform transition hover:scale-105 hover:shadow-lg hover:z-20 duration-300 ease-in-out p-4'
50+
>
51+
<div className='flex items-center justify-start overflow-hidden'>
52+
<div className='relative bg-contain w-1/3'>
53+
<img
54+
alt={name}
55+
className='bg-gray-50 p-5 rounded-md'
56+
src={prefix+imgUrl}
57+
/>
58+
</div>
59+
<div id='body' className='flex flex-col gap-y-3 pl-5'>
60+
<h4 id='name' className='text-xl font-semibold'>
61+
{name}
62+
</h4>
63+
<p id='caption' className='text-gray-800'>
64+
{text}
65+
</p>
66+
<div id='label' className='flex text-sm gap-x-3'>
67+
<a href={url}>
68+
<button className='cursor-pointer font-semibold bg-blue-100 text-blue-600 rounded-md py-2 px-4 focus:outline-none'>
69+
Take me there!
70+
</button>
71+
</a>
72+
<button className='font-semibold bg-blue-100 text-blue-600 rounded-md py-2 px-4 focus:outline-none'>
73+
Development
74+
</button>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
))}
80+
</div>
81+
82+
<div className='flex justify-center items-center py-5'>
83+
<a
84+
href='https://github.com/WebXDAO/blockchain-dev-path'
85+
target='_blank'
86+
rel='noreferrer'
87+
>
88+
<button className='bg-gray-700 text-white rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out'>
89+
See All
90+
</button>
91+
</a>
92+
</div>
93+
</div>
94+
</section>
95+
)
96+
}
97+
98+
export default DeveloperPath

‎src/components/Home/DevprotocolBrands.jsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import Link from 'next/link'
2+
import { prefix } from '../../constants'
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+
<img src={prefix + imgUrl} alt={name} className="object-contain" />
47+
</div>
48+
<p className='text-gray-800 mt-8 mb-2 text-sm px-8 sm:px-4 h-full'>{text}</p>
49+
</div>
50+
</Link>
51+
))}
52+
</div>
53+
</div>
54+
</section>
55+
)
56+
}
57+
58+
export default DevprotocolBrands

‎src/components/Home/Hero.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const Hero = () => {
2+
return (
3+
<>
4+
<section className="bg-transparent h-full">
5+
<div className="px-4 py-32 mx-auto max-w-screen-xl lg:h-full lg:items-center lg:flex lg:flex-wrap">
6+
<div className="max-w-xl text-white text-center md:text-left">
7+
<h1 className="text-6xl font-bold sm:text-7xl">
8+
Build with us,{' '}
9+
<span className="sm:block">the future of web.</span>
10+
</h1>
11+
12+
<p className="max-w-lg mt-4 sm:leading-relaxed sm:text-xl text-white/50">
13+
We focus on building and talking about possible future usage of
14+
web technologies.
15+
</p>
16+
17+
<div className="flex flex-wrap mt-8 text-center items-center justify-center md:justify-start gap-4">
18+
<button
19+
type="button"
20+
className="border-dark inline-flex items-center rounded-md border border-transparent bg-gray-100 px-8 py-3 text-base font-medium text-slate-700 shadow-md hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
21+
>
22+
Join WebXDAO
23+
</button>
24+
<button
25+
href="https://github.com/WebXDAO/start-here"
26+
type="button"
27+
className="border-dark inline-flex items-center rounded-md border border-transparent bg-gray-100 px-8 py-3 text-base font-medium text-slate-700 shadow-md hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
28+
>
29+
Contribute
30+
</button>
31+
</div>
32+
</div>
33+
</div>
34+
</section>
35+
</>
36+
);
37+
};
38+
39+
export default Hero;

‎src/components/Home/Projects.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const Projects = () => {
2+
const projectsData = [
3+
{
4+
title: 'Total Courses',
5+
text: 'Lot of courses that offer free and premium features',
6+
num: 100,
7+
color: 'text-blue-500',
8+
url: '#'
9+
},
10+
{
11+
title: 'Free Tools',
12+
text: 'Explore free tools for students that would help you achieve something',
13+
num: 80,
14+
color: 'text-green-600',
15+
url: '#'
16+
},
17+
{
18+
title: 'Premium Tools',
19+
text: "Need more features? Let's try the premium tools!",
20+
num: 40,
21+
color: 'text-red-600',
22+
url: '#'
23+
}
24+
]
25+
26+
return (
27+
<section className='bg-white py-8'>
28+
<div className='container mx-auto flex flex-wrap pt-4 pb-12'>
29+
{projectsData.map((item, index) => (
30+
<div
31+
key={item.title + index}
32+
className='w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink text-center'
33+
>
34+
<div className='flex-1 bg-white overflow-hidden'>
35+
<a href='#' className='flex flex-wrap no-underline hover:no-underline'>
36+
<div className={`w-full font-bold text-3xl px-6 ${item.color}`}>{item.num}+</div>
37+
<div className='w-full font-bold text-xl text-gray-900 px-6 p-5'>{item.title}</div>
38+
<p className='text-gray-800 text-base px-6 mb-5 text-center mx-10'>{item.text}</p>
39+
</a>
40+
</div>
41+
</div>
42+
))}
43+
</div>
44+
</section>
45+
)
46+
}
47+
48+
export default Projects

0 commit comments

Comments
 (0)