Skip to content

Commit 96b2644

Browse files
devKiratudevKiratu
committed
add desktop version of hero-header
1 parent 865a942 commit 96b2644

9 files changed

Lines changed: 77 additions & 82 deletions

File tree

‎public/images/hero-image.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/components/HeroHeader/HeroHeader.tsx‎

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+
import React from 'react';
3+
import Button from '../Button/Button';
4+
import Navbar from '../Navbar';
5+
import bgImage from '../../../public/images/hero-image.svg';
6+
7+
export default function HeroHeader() {
8+
return (
9+
<div id="hero" className="pt-2">
10+
<Image
11+
src={bgImage}
12+
alt=""
13+
objectFit="cover"
14+
layout="fill"
15+
className="-z-10 fixed top-0"
16+
priority
17+
/>
18+
<div className="relative">
19+
<Navbar />
20+
</div>
21+
<div className="w-full flex flex-col items-center justify-center z-10">
22+
<h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-20">
23+
React Developer Community Kenya
24+
</h1>
25+
<p className="font-montserrat text-white w-[570px] mx-auto text-center mt-5 mb-[45px]">
26+
We are a tech community in Kenya focused on the React JS library and
27+
its ecosystem.
28+
</p>
29+
<div className="flex items-center justify-center mb-44 relative">
30+
<a
31+
target="_blank"
32+
href="https://bit.ly/joinreactdevske"
33+
rel="noopener noreferrer"
34+
>
35+
<Button className="bg-[#EC0505] w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold">
36+
Join ReactDevsKe
37+
</Button>
38+
</a>
39+
</div>
40+
</div>
41+
</div>
42+
);
43+
}

‎src/components/HeroHeader/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './HeroHeader';

‎src/components/Navbar/Navbar.tsx‎

Lines changed: 16 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,14 @@ import React from 'react';
22
import Link from 'next/link';
33
import Logo from '../Logo/Logo';
44

5-
import {
6-
ABOUT,
7-
CONTACT,
8-
EVENTS,
9-
FORUM,
10-
HOME,
11-
MEMBERS,
12-
NEWS,
13-
} from '../../util/routeConstants';
5+
import { ABOUT, CONTACT, EVENTS, HOME } from '../../util/routeConstants';
6+
import Button from '../Button/Button';
147

158
export default function Navbar() {
169
return (
1710
<>
18-
<header className="px-[181px] w-full shadow-md bg-white">
19-
<nav className="nav py-4 flex flex-col lg:flex-row justify-between items-center">
11+
<header className="lg:pl-[49px] w-full bg-transparent">
12+
<nav className="nav py-4 pl-5 flex flex-col md:flex-row justify-around items-center">
2013
<div>
2114
<Link href={HOME}>
2215
<a>
@@ -25,37 +18,16 @@ export default function Navbar() {
2518
</Link>
2619
</div>
2720
<div className="">
28-
<ul className="flex flex-col lg:flex-row justify-center items-center lg:space-x-[30px]">
29-
<Link href={ABOUT}>
30-
<a>
31-
<li>About us</li>
32-
</a>
33-
</Link>
34-
<Link href={MEMBERS}>
35-
<a>
36-
<li>Members</li>
37-
</a>
38-
</Link>
39-
<Link href={EVENTS}>
40-
<a>
41-
<li>Events</li>
42-
</a>
43-
</Link>
44-
<Link href={NEWS}>
45-
<a>
46-
<li>News</li>
47-
</a>
48-
</Link>
49-
<Link href={FORUM}>
50-
<a>
51-
<li>Forum</li>
52-
</a>
53-
</Link>
54-
<Link href={CONTACT}>
55-
<a>
56-
<li>Contact</li>
57-
</a>
58-
</Link>
21+
<ul className="font-montserrat text-base text-white flex flex-row justify-between items-center md:space-x-[30px]">
22+
<a href={ABOUT}>
23+
<li>About us</li>
24+
</a>
25+
<a href={EVENTS}>
26+
<li>Events</li>
27+
</a>
28+
<a href={CONTACT}>
29+
<li>Contact</li>
30+
</a>
5931
</ul>
6032
</div>
6133
<div>
@@ -64,9 +36,9 @@ export default function Navbar() {
6436
href="https://bit.ly/joinreactdevske"
6537
rel="noopener noreferrer"
6638
>
67-
<button className="flex mx-auto bg-gray-300 border-0 py-[10px] px-[33px] focus:outline-none hover:bg-gray-600 hover:text-white rounded text-lg">
39+
<Button className="bg-[#EC0505] w-[203px] h-[46px] rounded-md text-base text-white font-montserrat font-bold">
6840
Join Community
69-
</button>
41+
</Button>
7042
</a>
7143
</div>
7244
</nav>

‎src/pages/_app.page.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Navbar from '../components/Navbar';
21
import '../styles/globals.css';
32
import Banner from '../components/Banner';
43
import type { AppProps } from 'next/app';
@@ -7,7 +6,6 @@ export default function MyApp({ Component, pageProps }: AppProps) {
76
return (
87
<>
98
<Banner />
10-
<Navbar />
119
<Component {...pageProps} />
1210
</>
1311
);

‎src/pages/_document.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Document, { Html, Head, Main, NextScript } from 'next/document';
33
class MyDocument extends Document {
44
render() {
55
return (
6-
<Html>
6+
<Html className="scroll-smooth">
77
<Head>
88
{/* <!-- Open Graph / Facebook --> */}
99
<meta property="og:type" content="website" key="og-type" />

‎src/pages/index.page.tsx‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import Head from 'next/head';
2-
import Image from 'next/image';
3-
import logo from '../../public/reactdevske.svg';
42
import Events from '../components/Events/Events';
53
import AboutUs from '../components/about-us/about-us';
64
import ContactUs from '../components/ContactUs';
5+
import HeroHeader from '../components/HeroHeader';
76

87
export default function Home() {
98
return (
@@ -21,36 +20,8 @@ export default function Home() {
2120
key="title"
2221
/>
2322
</Head>
24-
2523
<main className="">
26-
<h1 className="pt-6 text-3xl font-bold text-center text-white font-montserrat">
27-
React Developer Community Kenya
28-
</h1>
29-
<p className="text-xl text-center text-white font-montserrat">
30-
A Community of Reactjs developers in Kenya
31-
</p>
32-
<div className="flex flex-col content-center justify-center pt-5">
33-
<Image
34-
src={logo}
35-
className="App-logo"
36-
alt="logo"
37-
width={400}
38-
height={400}
39-
/>
40-
<p className="flex justify-center pt-10 text-white">
41-
🚧Under construction...
42-
</p>
43-
<a
44-
target="_blank"
45-
href="https://github.com/reactdeveloperske/reactdevske-website"
46-
rel="noopener noreferrer"
47-
className="pt-5 pb-5"
48-
>
49-
<button className="flex mx-auto bg-gray-300 border-0 py-[10px] px-[33px] focus:outline-none hover:bg-gray-600 hover:text-white rounded text-lg">
50-
Contribute on GitHub
51-
</button>
52-
</a>
53-
</div>
24+
<HeroHeader />
5425
<div className="flex flex-col py-12 bg-white">
5526
<AboutUs />
5627
</div>

‎src/styles/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ body {
88
margin: 0;
99
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
1010
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
11-
background-color: #333333;
11+
/* background-color: #333333; */
1212
}
1313

1414
a {

‎src/util/routeConstants.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const HOME = '/';
2-
export const ABOUT = '/about';
2+
export const ABOUT = '#about-us';
33
export const MEMBERS = '/members';
4-
export const EVENTS = '/events';
4+
export const EVENTS = '#events';
55
export const NEWS = '/news';
66
export const FORUM = '/forum';
7-
export const CONTACT = '/contact';
7+
export const CONTACT = '#contact-us';

0 commit comments

Comments
 (0)