Skip to content

Commit 487d2e8

Browse files
niyontwaliniyontwali
authoredJun 8, 2024··
Merge pull request #9 from atlp-rwanda/finishes-187732312-Transform-Figma-design-to-ui
Navbar and Footer UI Design
2 parents cdcc246 + 6ed0296 commit 487d2e8

21 files changed

+329
-42
lines changed
 

‎index.html

+24-23
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link
7-
href="https://assets-global.website-files.com/6480f74670678239cc947755/6488d4417cfc510dd4a63f0a_favicon.png"
8-
rel="shortcut icon"
9-
type="image/x-icon"
10-
/>
11-
<link
12-
href="https://assets-global.website-files.com/6480f74670678239cc947755/6488d446646e7274f07e1744_webclip.png"
13-
rel="apple-touch-icon"
14-
/>
15-
<meta
16-
name="description"
17-
content="Welcome to the best E-Commerce in Rwanda. We offer best price, as well as delivery services. We are the best in this this country!"
18-
/>
19-
<title>Mavericks E-Commerce</title>
20-
</head>
21-
<body>
22-
<div id="root"></div>
23-
<script type="module" src="/src/main.tsx"></script>
24-
</body>
25-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link href="https://assets-global.website-files.com/6480f74670678239cc947755/6488d4417cfc510dd4a63f0a_favicon.png"
8+
rel="shortcut icon" type="image/x-icon" />
9+
<link href="https://assets-global.website-files.com/6480f74670678239cc947755/6488d446646e7274f07e1744_webclip.png"
10+
rel="apple-touch-icon" />
11+
<meta name="description"
12+
content="Welcome to the best E-Commerce in Rwanda. We offer best price, as well as delivery services. We are the best in this this country!" />
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
17+
rel="stylesheet">
18+
<title>Mavericks E-Commerce</title>
19+
</head>
20+
21+
<body>
22+
<div id="root"></div>
23+
<script type="module" src="/src/main.tsx"></script>
24+
</body>
25+
26+
</html>

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"dependencies": {
1818
"@reduxjs/toolkit": "^2.2.5",
1919
"@types/react-redux": "^7.1.33",
20+
"lucide-react": "^0.387.0",
2021
"react": "^18.2.0",
2122
"react-dom": "^18.2.0",
2223
"react-redux": "^9.1.2",

‎src/App.tsx

+16-17
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
2-
import SamplePage from './pages/SamplePage';
3-
import Login from './pages/Login';
4-
import Counter from './components/Counter';
1+
import { RouterProvider, createBrowserRouter } from "react-router-dom";
2+
import Login from "./pages/Login";
3+
import LandingPage from "./pages/LandingPage";
54

65
const App = () => {
76
const router = createBrowserRouter([
87
{
9-
path: '/',
10-
element: <SamplePage />,
8+
path: "/",
9+
children: [
10+
{
11+
index: true,
12+
element: <LandingPage />
13+
},
14+
{
15+
path: "login",
16+
element: <Login />
17+
}
18+
]
1119
},
12-
{
13-
path: 'login',
14-
element: <Login />,
15-
},
16-
]);
20+
])
1721
return (
18-
<div>
19-
<RouterProvider router={router} />
20-
21-
<h2>redux</h2>
22-
<Counter />
23-
</div>
22+
<RouterProvider router={router} />
2423
);
2524
};
2625

‎src/assets/clothes.png

6.29 KB
Loading

‎src/assets/discount.png

5.36 KB
Loading

‎src/assets/education.png

7.15 KB
Loading

‎src/assets/electronics.png

5.51 KB
Loading

‎src/assets/flash-sales.png

7.1 KB
Loading

‎src/assets/shoes.png

5.01 KB
Loading

‎src/assets/supplement.png

2.4 KB
Loading

‎src/assets/watches.png

5.22 KB
Loading

‎src/components/SampleComponent.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Link } from "react-router-dom";
12
import maverick from "../assets/maverick.jpg";
23

34
const SampleComponent = () => {
@@ -14,6 +15,7 @@ const SampleComponent = () => {
1415
<p className="block text-gray-600">
1516
Happy Coding, my fefllow devs! Let's work together to achieve more 💪
1617
</p>
18+
<Link to="/login">Login</Link>
1719
</div>
1820
);
1921
};

‎src/components/footer/Footer.tsx

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import FooterTitle from "../../containers/footer/FooterTitle"
2+
import SocialIcon from "../../containers/footer/SocialIcon"
3+
import FooterLink from "../../containers/footer/FooterLink"
4+
5+
function Footer() {
6+
return (
7+
<>
8+
<div className="w-full flex flex-col gap-2 bg-grayColor font-roboto 2xl:items-center ">
9+
<div className="p-3 md:p-4 xl:px-10 2xl:w-[1440px] grid grid-cols-2 md:grid-cols-5 xl:grid-cols-6 gap-x-20 gap-y-5 sm:gap-5 md:gap-2">
10+
<div className="flex flex-col md:row-span-1 md:col-start-1 md:col-end-3 gap-3">
11+
<FooterTitle title={"mavericks"} />
12+
<div className="leading-none text-xs md:text-base break-words flex flex-col gap-3 font-light flex-grow">
13+
<p>
14+
K309 St , Makuza plaza, Nyarugenge ,
15+
Kigali, Rwanda
16+
</p>
17+
<p>
18+
andela.mavericks@gmail.com
19+
</p>
20+
<p>+250 788888888</p>
21+
</div>
22+
<div className="flex gap-2">
23+
<a href="#" target="_blank">
24+
<SocialIcon name="instagram" />
25+
</a>
26+
<a href="#" target="_blank">
27+
<SocialIcon name="facebook" />
28+
</a>
29+
<a href="#" target="_blank">
30+
<SocialIcon name="twitter" />
31+
</a>
32+
</div>
33+
</div>
34+
<div className="flex flex-col gap-3">
35+
<FooterTitle title={"company"} />
36+
<div className="flex flex-col gap-1 font-light">
37+
<FooterLink name={"about us"} />
38+
<FooterLink name={"contact us"} />
39+
</div>
40+
</div>
41+
<div className="flex flex-col gap-3">
42+
<FooterTitle title={"shop"} />
43+
<div className="flex flex-col gap-1 font-light">
44+
<FooterLink name={"new arrival"} />
45+
<FooterLink name={"all products"} />
46+
<FooterLink name={"babies"} />
47+
<FooterLink name={"father"} />
48+
<FooterLink name={"electronics"} />
49+
</div>
50+
</div>
51+
<div className="flex flex-col gap-3">
52+
<FooterTitle title={"help"} />
53+
<div className="flex flex-col gap-2 md:gap-1 font-light">
54+
<FooterLink name={"customer services"} />
55+
<FooterLink name={"my account"} />
56+
<FooterLink name={"find store"} />
57+
<FooterLink name={"legal & privacy"} />
58+
</div>
59+
</div>
60+
<div className="flex flex-col items-center gap-3 row-span-1 md:row-span-1 col-span-2 md:col-start-3 md:col-end-6 lg:col-start-4 xl:col-start-6 xl:auto-cols-max">
61+
<FooterTitle title={"subscribe"} />
62+
<p className="hidden xl:flex leading-none text-base font-light">Be the first to get latest news about trends,Promotions and many more.</p>
63+
<form className="w-full flex flex-col">
64+
<div className=" w-full flex">
65+
<label htmlFor="email"></label>
66+
<input type="text" id="email" placeholder="Email address" className="p-2 flex-grow xl:w-3/4" />
67+
<button type="submit" className="leading-none bg-greenColor text-whiteColor w-20">Join</button>
68+
</div>
69+
<span className="text-xs text-redColor text-left">Email is not valid</span>
70+
</form>
71+
</div>
72+
</div>
73+
<p className="p-3 md:p-4 xl:px-10 2xl:w-[1440px] text-xs text-center xl:text-left ">&copy; 2024 Mavericks Shop. All rights reserved.</p>
74+
</div>
75+
</>
76+
)
77+
}
78+
79+
export default Footer

‎src/components/navbar/Navbar.tsx

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { DesktopNav, PopularCategory } from "../../containers/nav/NavbarComponents"
2+
import { useEffect } from "react";
3+
4+
function Navbar() {
5+
useEffect(() => {
6+
const humbergurBtn = document.getElementById('humbergurBtn');
7+
const closeBtn = document.getElementById('close');
8+
const overlay = document.getElementById('overlay');
9+
const container = document.getElementById('humbergerContainer');
10+
11+
closeBtn?.addEventListener('click', () => {
12+
overlay?.classList.add('-translate-x-full');
13+
container?.classList.add('-translate-x-full');
14+
});
15+
16+
humbergurBtn?.addEventListener('click', () => {
17+
overlay?.classList.remove('-translate-x-full');
18+
container?.classList.remove('-translate-x-full');
19+
});
20+
overlay?.addEventListener('click', () => {
21+
overlay?.classList.add('-translate-x-full');
22+
container?.classList.add('-translate-x-full');
23+
});
24+
}, []);
25+
26+
return (
27+
<div className='flex flex-col bg-blackColor md:bg-whiteColor md:text-blackColor text-whiteColor font-roboto w-screen 2xl:items-center relative'>
28+
<div className="flex justify-between gap-2 flex-wrap p-3 md:p-4 xl:px-10 2xl:w-[1440px] ">
29+
<div className="flex items-center gap-3 order-1">
30+
<div id="humbergurBtn" className="rounded-full p-1 text-txtColor active:bg-greenColor hover:bg-grayColor transition-all active:text-blackColor hover:text-blackColor md:hidden">
31+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-7">
32+
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
33+
</svg>
34+
</div>
35+
<div className="leading-none font-bold text-2xl md:text-3xl">
36+
<h1>Mavericks</h1>
37+
</div>
38+
</div>
39+
<div className="flex items-center gap-5 order-2 md:order-3">
40+
<div className="rounded-full transition-all ease-in-out delay-100 hover:bg-grayColor active:bg-greenColor p-1 cursor-pointer active:text-blackColor hover:text-blackColor">
41+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-7">
42+
<path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
43+
</svg>
44+
</div>
45+
<div className="relative rounded-full transition-all ease-in-out delay-100 hover:bg-grayColor active:bg-greenColor active:text-blackColor hover:text-blackColor p-1 cursor-pointer">
46+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-7">
47+
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
48+
</svg>
49+
<span className="p-1 leading-none text-xs bg-redColor text-whiteColor rounded-full flex justify-center items-center w-6 h-6 absolute -top-1 -right-1 md:-right-2 md:-top-2">90</span>
50+
</div>
51+
</div>
52+
<div className="order-3 md:order-2 w-full md:w-2/4">
53+
<form className="relative">
54+
<input
55+
type="text"
56+
className="w-full p-1 px-3 rounded-full text-blackColor outline-none text-base md:text-lg font-light md:border md:border-blackColor"
57+
placeholder="Search everything at Mavericks online"
58+
/>
59+
<button className="text-blackColor absolute z-30 right-2 top-0 md:top-[3px] md:hover:bg-grayColor cursor-pointer p-1 rounded-full flex justify-center items-center transition-all ease-in delay-100 active:text-blackColor hover:text-blackColor">
60+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
61+
<path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
62+
</svg>
63+
</button>
64+
</form>
65+
</div>
66+
</div>
67+
<DesktopNav />
68+
<div id="overlay" className=" w-full h-screen z-40 bg-overlay absolute -translate-x-full transition-transform ease-linear">
69+
<div id="humbergerContainer" className="bg-whiteColor w-4/5 text-blackColor p-5 flex flex-col select-none h-screen overflow-auto -translate-x-full transition-transform duration-500 ease-in-out">
70+
{/* close */}
71+
<div className=" flex justify-end">
72+
<div id="close" className="p-2 rounded-full active:bg-grayColor hover:bg-grayColor hover:cursor-pointer transition-all ease-in-out delay-75">
73+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-8">
74+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
75+
</svg>
76+
</div>
77+
</div>
78+
<div className="flex flex-col gap-1">
79+
<PopularCategory title="Popular Categores" />
80+
<PopularCategory title="shopping inspiration" />
81+
<PopularCategory title="shopping inspiration" />
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
)
87+
}
88+
89+
export default Navbar

‎src/containers/footer/FooterLink.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Link } from "react-router-dom"
2+
3+
function FooterLink({ name }: { name: string }) {
4+
return <Link to="/" className="leading-none capitalize hover:underline text-xs md:text-base">{name}</Link>
5+
6+
}
7+
8+
export default FooterLink

‎src/containers/footer/FooterTitle.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const FooterTitle = ({ title }: { title: string }) => {
2+
return <h3 className="font-bold leading-none text-lg capitalize cursor-pointer">{title}</h3>
3+
}
4+
export default FooterTitle

‎src/containers/footer/SocialIcon.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Facebook, Instagram, Twitter } from "lucide-react"
2+
3+
const SocialIcon = ({ name }: { name: string }) => {
4+
5+
switch (name) {
6+
case "facebook":
7+
return <Facebook size={24} />;
8+
case "instagram":
9+
return <Instagram size={24} />;
10+
case "twitter":
11+
return <Twitter size={24} />;
12+
default:
13+
return null;
14+
}
15+
};
16+
17+
export default SocialIcon

‎src/containers/nav/NavbarComponents.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import clothes from '../../assets/clothes.png'
2+
import watches from '../../assets/watches.png'
3+
import education from '../../assets/education.png'
4+
import suppliment from '../../assets/supplement.png'
5+
import shoes from '../../assets/shoes.png'
6+
import electronics from '../../assets/electronics.png'
7+
import { Link } from 'react-router-dom'
8+
9+
export function PopularCategory({ title }: { title: string }) {
10+
return (
11+
<>
12+
<div className='py-3'>
13+
<h2 className="capitalize font-bold text-2xl">{title}</h2>
14+
</div>
15+
<NavLink icon={clothes} name='women clothes' />
16+
<NavLink icon={watches} name='watches' />
17+
<NavLink icon={education} name='education' />
18+
<NavLink icon={suppliment} name='suppliment' />
19+
<NavLink icon={shoes} name='shoes' />
20+
<NavLink icon={electronics} name='electronics' />
21+
</>
22+
)
23+
}
24+
export function NavLink({ icon, name }: { icon: string, name: string }) {
25+
return (
26+
<div className="flex items-center justify-start gap-3 px-1 active:bg-grayColor">
27+
<div className="rounded-md h-[50px] w-[50px] flex justify-center items-center">
28+
<img src={icon} alt="" className="w-full rounded-md" />
29+
</div>
30+
<p className="leading-none font-medium text-base capitalize">{name}</p>
31+
</div>
32+
)
33+
}
34+
export function DesktopNav() {
35+
return (
36+
<div className="bg-blackColor text-whiteColor hidden md:block w-screen">
37+
<div className="flex justify-center items-center border-whiteColor">
38+
<Navlink to="/" name='Plus' />
39+
<Navlink to="/" name='Flash Sales' />
40+
<Navlink to="/" name='Babies' />
41+
<Navlink to="/" name='Fathers' />
42+
<Navlink to="/" name='Electronics' />
43+
<Navlink to="/" name='Beauty' />
44+
<Navlink to="/" name='Sports' />
45+
</div>
46+
</div>
47+
)
48+
}
49+
50+
function Navlink({ to, name }: { to: string, name: string }) {
51+
return (
52+
<Link to={to} className={`px-5 py-2 hover:bg-whiteColor hover:text-blackColor transition-all delay-100 ease-linear`}>
53+
{name}
54+
</Link>
55+
);
56+
}

‎src/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
@import 'tailwindcss/base';
22
@import 'tailwindcss/components';
3-
@import 'tailwindcss/utilities';
3+
@import 'tailwindcss/utilities';

‎src/pages/LandingPage.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Footer from '../components/footer/Footer';
2+
import Navbar from '../components/navbar/Navbar';
3+
4+
const LandingPage = () => {
5+
return (
6+
<div className='w-screen min-h-screen max-h-full'>
7+
<Navbar />
8+
<Footer />
9+
</div>
10+
);
11+
};
12+
13+
export default LandingPage;

‎tailwind.config.js

+19-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,25 @@
22
export default {
33
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
44
theme: {
5-
extend: {},
5+
fontFamily: {
6+
'roboto': ["Roboto", "Arial", "sans serif"]
7+
},
8+
colors: {
9+
greenColor: '#007A7A',
10+
whiteColor: '#ffffff',
11+
blackColor: '#000000',
12+
grayColor: '#DADADA',
13+
redColor: "#ce0202",
14+
overlay: "#000000c9"
15+
},
16+
extend: {
17+
gridRow: {
18+
'custom': "grid-start-0"
19+
},
20+
gridTemplateColumns: {
21+
'customCol': "repeat(auto-fit, minmax(200px, 1fr))"
22+
}
23+
},
624
},
725
plugins: [],
826
};

0 commit comments

Comments
 (0)
Please sign in to comment.