Skip to content

Commit 4429f47

Browse files
devKiratudevKiratu
committed
breakdown hero header into desktop and mobile versions
1 parent eb725ea commit 4429f47

10 files changed

Lines changed: 217 additions & 36 deletions

File tree

‎public/img/calendar-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/img/close-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/img/contact-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/img/github-logo.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/img/info-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/img/menu-icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/HeroHeader/DesktopHero.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>
10+
<Image
11+
src={bgImage}
12+
alt=""
13+
objectFit="cover"
14+
layout="fill"
15+
className="-z-10 fixed top-0 opacity-[0.85]"
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/DropdownMenu.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import Image from 'next/image';
2+
import React from 'react';
3+
import Button from '../Button/Button';
4+
import infoIcon from '../../../public/img/info-icon.svg';
5+
import calendarIcon from '../../../public/img/calendar-icon.svg';
6+
import contactIcon from '../../../public/img/contact-icon.svg';
7+
import { ABOUT, CONTACT, EVENTS } from '../../util/routeConstants';
8+
9+
interface DropdownMenuProps {
10+
onCloseMenu: () => void;
11+
}
12+
13+
export default function DropdownMenu({ onCloseMenu }: DropdownMenuProps) {
14+
return (
15+
<div className="bg-white rounded-[10px] overflow-hidden w-[158px] h-fit absolute top-14 right-5 shadow-[0_0_50px_-12px_rgb(0,0,0,0.25)]">
16+
<ul>
17+
<li className="">
18+
<a
19+
href={ABOUT}
20+
className="w-full p-[10px] flex justify-start items-center"
21+
onClick={() => onCloseMenu()}
22+
>
23+
<Image src={infoIcon} alt="" width={25} height={22} />
24+
<p className="inline-block ml-[10px]">About us</p>
25+
</a>
26+
</li>
27+
<li className="">
28+
<a
29+
href={EVENTS}
30+
className="w-full p-[10px] flex justify-start items-center"
31+
onClick={() => onCloseMenu()}
32+
>
33+
<Image src={calendarIcon} alt="" width={25} height={22} />
34+
<p className="inline-block ml-[10px]">Events</p>
35+
</a>
36+
</li>
37+
<li className="">
38+
<a
39+
href={CONTACT}
40+
className="w-full p-[10px] flex justify-start items-center"
41+
onClick={() => onCloseMenu()}
42+
>
43+
<Image src={contactIcon} alt="" width={25} height={25} />
44+
<p className="inline-block ml-[10px]">Contact</p>
45+
</a>
46+
</li>
47+
</ul>
48+
<div className="">
49+
<a
50+
target="_blank"
51+
href="https://bit.ly/joinreactdevske"
52+
rel="noopener noreferrer"
53+
className="w-full"
54+
onClick={() => onCloseMenu()}
55+
>
56+
<Button className="bg-[#12A04E] text-white w-full font-montserrat text-xs py-[10px]">
57+
Join React.JS Kenya
58+
</Button>
59+
</a>
60+
</div>
61+
</div>
62+
);
63+
}

‎src/components/HeroHeader/HeroHeader.tsx‎

Lines changed: 20 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,27 @@
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';
1+
import React, { useEffect, useState } from 'react';
2+
import DesktopHero from './DesktopHero';
3+
import MobileHero from './MobileHero';
64

75
export default function HeroHeader() {
6+
const [screenWidth, setScreenWidth] = useState<number | null>(null);
7+
8+
const breakpoint = 768;
9+
10+
useEffect(() => {
11+
setScreenWidth(window.innerWidth);
12+
13+
const handleResize = () => setScreenWidth(window.innerWidth);
14+
15+
window.addEventListener('resize', handleResize);
16+
17+
return () => window.removeEventListener('resize', handleResize);
18+
}, []);
19+
20+
if (!screenWidth) return null;
21+
822
return (
923
<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 opacity-[0.85]"
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>
24+
{screenWidth < breakpoint ? <MobileHero /> : <DesktopHero />}
4125
</div>
4226
);
4327
}

‎src/components/HeroHeader/MobileHero.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import Image from 'next/image';
2+
import React, { useState } from 'react';
3+
import Logo from '../Logo';
4+
import githubIcon from '../../../public/img/github-logo.svg';
5+
import menuIcon from '../../../public/img/menu-icon.svg';
6+
import closeIcon from '../../../public/img/close-icon.svg';
7+
import Button from '../Button/Button';
8+
import DropdownMenu from './DropdownMenu';
9+
10+
export default function MobileHero() {
11+
const [menuOpen, setMenuOpen] = useState(false);
12+
13+
const openMenu = () => setMenuOpen(true);
14+
const closeMenu = () => setMenuOpen(false);
15+
16+
return (
17+
<div className="relative">
18+
<div className="mx-6 pt-2 pb-5 flex justify-between">
19+
<Logo size={60} />
20+
<a
21+
target="_blank"
22+
href="https://github.com/reactdeveloperske/reactdevske-website"
23+
rel="noopener noreferrer"
24+
className="pt-[13px]"
25+
>
26+
<Image src={githubIcon} alt="" width={35} height={35} />
27+
</a>
28+
{menuOpen ? (
29+
<div className="inline-flex justify-center items-center w-[30px] ">
30+
<Image
31+
src={closeIcon}
32+
alt=""
33+
width={20}
34+
height={20}
35+
className="cursor-pointer"
36+
onClick={closeMenu}
37+
/>
38+
</div>
39+
) : (
40+
<Image
41+
src={menuIcon}
42+
alt=""
43+
width={30}
44+
height={30}
45+
className="cursor-pointer"
46+
onClick={openMenu}
47+
/>
48+
)}
49+
</div>
50+
{menuOpen && <DropdownMenu onCloseMenu={closeMenu} />}
51+
<div>
52+
<h1 className="font-robotoMono font-medium text-4xl text-center mb-2">
53+
ReactDevsKe
54+
</h1>
55+
<div className="flex justify-center items-center mb-[34px]">
56+
<a
57+
target="_blank"
58+
href="https://bit.ly/joinreactdevske"
59+
rel="noopener noreferrer"
60+
>
61+
<Button className="bg-[#12A04E] text-white w-44 rounded-md">
62+
Join React.JS Kenya
63+
</Button>
64+
</a>
65+
</div>
66+
<p className="font-montserrat text-[#535353] text-xs text-center px-4">
67+
We are a tech community in Kenya focused on the React JS library and
68+
its ecosystem.
69+
</p>
70+
</div>
71+
</div>
72+
);
73+
}

0 commit comments

Comments
 (0)