Skip to content

Commit 0542e8f

Browse files
orama254orama254
authored
Merge pull request #107 from devKiratu/feature/footer-section
[feature] create footer section
2 parents 8bb57d5 + f91d94a commit 0542e8f

8 files changed

Lines changed: 116 additions & 9 deletions

File tree

‎e2e/footer.spec.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.beforeEach(async ({ page }) => {
4+
page.goto('http://localhost:3000');
5+
});
6+
7+
test.describe('Test Footer Navigation Links', () => {
8+
test('About us link should navigate to About Us section', async ({
9+
page,
10+
}) => {
11+
const footerLocator = page.locator('footer');
12+
await footerLocator.getByRole('link', { name: 'About us' }).click();
13+
await expect(page).toHaveURL('/#about-us');
14+
});
15+
16+
test('Events link should navigate to Events section', async ({ page }) => {
17+
const footerLocator = page.locator('footer');
18+
await footerLocator.getByRole('link', { name: 'Events' }).click();
19+
await expect(page).toHaveURL('/#events');
20+
});
21+
22+
test('Contact link should navigate to Contact Us section', async ({
23+
page,
24+
}) => {
25+
const footerLocator = page.locator('footer');
26+
await footerLocator.getByRole('link', { name: 'Contact' }).click();
27+
await expect(page).toHaveURL('/#contact-us');
28+
});
29+
});

‎e2e/hero-header.spec.ts‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,22 @@ test.describe('Test Hero Header Navigation Links', () => {
88
test('About us link should navigate to about us section', async ({
99
page,
1010
}) => {
11-
await page.getByRole('link', { name: 'About us' }).click();
11+
const headerLocator = page.locator('header');
12+
await headerLocator.getByRole('link', { name: 'About us' }).click();
1213
await expect(page).toHaveURL('/#about-us');
1314
});
1415

1516
test('Events link should navigate to Events section', async ({ page }) => {
16-
await page.getByRole('link', { name: 'Events' }).click();
17+
const headerLocator = page.locator('header');
18+
await headerLocator.getByRole('link', { name: 'Events' }).click();
1719
await expect(page).toHaveURL('/#events');
1820
});
1921

2022
test('Contact link should navigate to Contact Us section', async ({
2123
page,
2224
}) => {
23-
await page.getByRole('link', { name: 'Contact' }).click();
25+
const headerLocator = page.locator('header');
26+
await headerLocator.getByRole('link', { name: 'Contact' }).click();
2427
await expect(page).toHaveURL('/#contact-us');
2528
});
2629

@@ -31,7 +34,10 @@ test.describe('Test Hero Header Navigation Links', () => {
3134
const [newPage] = await Promise.all([
3235
context.waitForEvent('page'),
3336
page.waitForLoadState(),
34-
page.getByRole('link', { name: 'Join Community' }).click(),
37+
page
38+
.locator('header')
39+
.getByRole('link', { name: 'Join Community' })
40+
.click(),
3541
]);
3642
await expect(newPage).toHaveURL(
3743
new RegExp(
@@ -47,7 +53,10 @@ test.describe('Test Hero Header Navigation Links', () => {
4753
const [newPage] = await Promise.all([
4854
context.waitForEvent('page'),
4955
page.waitForLoadState(),
50-
page.getByRole('link', { name: 'Join ReactDevsKe' }).click(),
56+
page
57+
.locator('header')
58+
.getByRole('link', { name: 'Join ReactDevsKe' })
59+
.click(),
5160
]);
5261
await expect(newPage).toHaveURL(
5362
new RegExp(

‎public/img/love-icon.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/components/Footer/Footer.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Image from 'next/image';
2+
import React, { useEffect, useState } from 'react';
3+
import { ABOUT, CONTACT, EVENTS } from '../../util/routeConstants';
4+
import Logo from '../Logo';
5+
import loveIcon from '../../../public/img/love-icon.svg';
6+
7+
export default function Footer() {
8+
const [screenWidth, setScreenWidth] = useState<number | null>(null);
9+
10+
const breakpoint = 768;
11+
12+
useEffect(() => {
13+
setScreenWidth(window.innerWidth);
14+
15+
const handleResize = () => setScreenWidth(window.innerWidth);
16+
17+
window.addEventListener('resize', handleResize);
18+
19+
return () => window.removeEventListener('resize', handleResize);
20+
}, []);
21+
22+
return (
23+
<footer
24+
id="footer"
25+
className="bg-[#CEEDF4] w-full md:pt-12 md:pb-[25px] py-4"
26+
>
27+
<div className="lg:w-1/4 md:w-[35%] sm:w-[40%] w-[65%] mx-auto flex flex-col justify-center items-center">
28+
{screenWidth && (
29+
<div>
30+
<Logo size={screenWidth >= breakpoint ? 175 : 125} />
31+
</div>
32+
)}
33+
<div className="md:pt-5 md:pb-[70px] pb-14 pt-[18px] md:w-auto w-full">
34+
<ul className="font-montserrat md:text-base text-xs text-black flex flex-row justify-between items-center md:space-x-[30px]">
35+
<a href={ABOUT}>
36+
<li>About us</li>
37+
</a>
38+
<a href={EVENTS}>
39+
<li>Events</li>
40+
</a>
41+
<a href={CONTACT}>
42+
<li>Contact</li>
43+
</a>
44+
</ul>
45+
</div>
46+
<p className="font-montserrat md:text-xs text-[8px]">
47+
Made with &nbsp;
48+
<span>
49+
<Image src={loveIcon} alt="" width={10} height={10} />
50+
</span>
51+
&nbsp; by ReactDevsKe
52+
</p>
53+
</div>
54+
</footer>
55+
);
56+
}

‎src/components/Footer/index.ts‎

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

‎src/components/HeroHeader/HeroHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export default function HeroHeader() {
2020
if (!screenWidth) return null;
2121

2222
return (
23-
<div id="hero" className="pt-2">
23+
<header id="hero" className="pt-2">
2424
{screenWidth < breakpoint ? <MobileHero /> : <DesktopHero />}
25-
</div>
25+
</header>
2626
);
2727
}

‎src/components/Navbar/Navbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import LinkButton from '../LinkButton/LinkButton';
88
export default function Navbar() {
99
return (
1010
<>
11-
<header className="lg:pl-[49px] w-full bg-transparent">
11+
<div className="lg:pl-[49px] w-full bg-transparent">
1212
<nav className="nav py-4 pl-5 flex flex-col md:flex-row justify-around items-center">
1313
<div>
1414
<Link href={HOME}>
@@ -41,7 +41,7 @@ export default function Navbar() {
4141
</LinkButton>
4242
</div>
4343
</nav>
44-
</header>
44+
</div>
4545
</>
4646
);
4747
}

‎src/pages/index.page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ContactUs from '../components/ContactUs';
44
import Events from '../components/Events/Events';
55
import MissionPillars from '../components/MissionPillars/MissionPillars';
66
import HeroHeader from '../components/HeroHeader';
7+
import Footer from '../components/Footer';
78

89
export default function Home() {
910
return (
@@ -29,6 +30,7 @@ export default function Home() {
2930
<MissionPillars />
3031
<Events />
3132
<ContactUs />
33+
<Footer />
3234
</main>
3335
</div>
3436
);

0 commit comments

Comments
 (0)