Skip to content

Commit ab64a48

Browse files
AbhinavMVAbhinavMV
committed
Change Style
1 parent 370e2ac commit ab64a48

File tree

7 files changed

+236
-7
lines changed

7 files changed

+236
-7
lines changed

‎components/Footer.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const Footer = () => {
7474
target='_blank'
7575
title={text}
7676
>
77-
<Icon className='w-5 h-5' />
77+
<Icon className='w-5 h-5 lg:w-7 lg:h-7' />
7878
</a>
7979
))}
8080
</div>

‎components/Home/DeveloperPath.jsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import Image from 'next/image'
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+
<Image
54+
alt={name}
55+
layout='responsive'
56+
height={150}
57+
width={150}
58+
className='bg-gray-50 p-5 rounded-md'
59+
src={imgUrl}
60+
/>
61+
</div>
62+
<div id='body' className='flex flex-col gap-y-3 pl-5'>
63+
<h4 id='name' className='text-xl font-semibold'>
64+
{name}
65+
</h4>
66+
<p id='caption' className='text-gray-800'>
67+
{text}
68+
</p>
69+
<div id='label' className='flex text-sm gap-x-3'>
70+
<a href={url}>
71+
<button className='cursor-pointer font-semibold bg-blue-100 text-blue-600 rounded-md py-2 px-4 focus:outline-none'>
72+
Take me there!
73+
</button>
74+
</a>
75+
<button className='font-semibold bg-blue-100 text-blue-600 rounded-md py-2 px-4 focus:outline-none'>
76+
Development
77+
</button>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
))}
83+
</div>
84+
85+
<div className='flex justify-center items-center py-5'>
86+
<a
87+
href='https://github.com/web3community/blockchain-dev-path'
88+
target='_blank'
89+
rel='noreferrer'
90+
>
91+
<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'>
92+
See All
93+
</button>
94+
</a>
95+
</div>
96+
</div>
97+
</section>
98+
)
99+
}
100+
101+
export default DeveloperPath

‎components/Home/Hero.jsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Image from 'next/image'
2+
3+
const Hero = () => {
4+
return (
5+
<div className='text-white bg-[#00007F] pt-24 py-24'>
6+
<div className='container px-5 mx-auto flex flex-wrap flex-col md:flex-row items-center'>
7+
<div className='px-5 flex flex-col w-full md:w-2/5 items-start text-center md:text-left'>
8+
<h1 className='my-4 text-3xl font-bold leading-tight'>
9+
A new community for Blockchain developers, designers, and Dapp Owners
10+
</h1>
11+
<p className='leading-normal text-xl mb-8'>
12+
An Open Source Community that focuses on decentralized applications, Web
13+
3.0, and Blockchain technologies 🚀
14+
</p>
15+
<div className='flex items-center justify-center w-full md:justify-start'>
16+
<a
17+
href='https://github.com/WebXDAO/start-here'
18+
target='_blank'
19+
rel='noreferrer'
20+
>
21+
<button className='bg-[#0086D6] text-white rounded-md my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out'>
22+
Explore
23+
</button>
24+
</a>
25+
</div>
26+
</div>
27+
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+
/>
37+
</div>
38+
</div>
39+
</div>
40+
)
41+
}
42+
43+
export default Hero

‎components/Home/Projects.jsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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}`}>
37+
{item.num}+
38+
</div>
39+
<div className='w-full font-bold text-xl text-gray-900 px-6 p-5'>
40+
{item.title}
41+
</div>
42+
<p className='text-gray-800 text-base px-6 mb-5 text-center mx-10'>
43+
{item.text}
44+
</p>
45+
</a>
46+
</div>
47+
</div>
48+
))}
49+
</div>
50+
</section>
51+
)
52+
}
53+
54+
export default Projects

‎components/Home/index.js

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

‎components/Navbar.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const NavBarItem = ({ item, pathname, classprops }) => (
1010
<li
1111
className={`${
1212
pathname === item.url && 'font-bold'
13-
} ${classprops} cursor-pointer text-ml inline-block text-blue-800 no-underline hover:text-indigo-500 py-2 px-4 items-center`}
13+
} ${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>
@@ -32,17 +32,17 @@ const Navbar = () => {
3232

3333
return (
3434
<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'>
35+
<div className='w-full container mx-auto flex items-center justify-between mt-0 py-2'>
3636
<div className='pl-4 flex items-center cursor-pointer'>
3737
<Link
38-
className='toggleColour text-black no-underline hover:no-underline font-bold text-2xl lg:text-2xl'
38+
className='text-black no-underline hover:no-underline font-bold text-2xl lg:text-2xl'
3939
href='/'
4040
passHref
4141
>
4242
<img src='/logo.png' alt='Web 3 Community' className='h-16 items-start' />
4343
</Link>
4444
</div>
45-
<ul className='lg:flex hidden list-none flex-row justify-between items-center flex-initial'>
45+
<ul className='lg:flex hidden list-none flex-row justify-end items-center ml-auto'>
4646
{navItems.map((item, index) => (
4747
<NavBarItem key={item.title + index} item={item} pathname={router.asPath} />
4848
))}
@@ -58,14 +58,14 @@ const Navbar = () => {
5858
{toggleMenu && (
5959
<AiOutlineClose
6060
fontSize={28}
61-
className='md:hidden cursor-pointer text-blue-600'
61+
className='lg:hidden cursor-pointer text-blue-600'
6262
onClick={() => setToggleMenu(false)}
6363
/>
6464
)}
6565
{toggleMenu && (
6666
<ul
6767
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'
68+
flex flex-col justify-start items-end rounded-md blue-glassmorphism'
6969
>
7070
<li className='text-xl w-full my-2 text-blue-600'>
7171
<AiOutlineClose onClick={() => setToggleMenu(false)} />

‎styles/globals.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,34 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
/*Core CSS*/
5+
@layer base {
6+
h1 {
7+
@apply text-4xl tracking-tighter mb-3;
8+
}
9+
10+
h3 {
11+
@apply text-2xl font-bold mb-3;
12+
}
13+
14+
body {
15+
font-family: 'Poppins', sans-serif;
16+
}
17+
18+
body :not(pre) > code[class*='language-'],
19+
body pre[class*='language-'] {
20+
@apply bg-gray-800;
21+
}
22+
}
23+
.gradient {
24+
background: linear-gradient(90deg, #00007f 0%, #0086d6 100%);
25+
}
26+
27+
.neumorphism {
28+
border-radius: 50px;
29+
background: #e0e0e0;
30+
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
31+
}
432

533
.blue-glassmorphism {
634
background: rgba(255, 255, 255, 0.5);

0 commit comments

Comments
 (0)