Skip to content

H
hummartapp
Commit 3b6bf2d2 authored by Muhammad Ameen's avatar Muhammad Ameen 💻
Browse files
Options

Footer Complete

parent 75057321
Hide whitespace changes
Inline Side-by-side
Showing with 220 additions and 60 deletions
src/Components/Carousel/Carousel.js
View file @ 3b6bf2d2
......@@ -3,49 +3,29 @@ import carouselImg from "../../assets/images/offer.jpg";
import { Carousel } from "react-bootstrap";
import { carouselData } from "../../Helper/dummyData";
import style from "./Carousel.module.scss"
import style from "./Carousel.module.scss";
const MainCarousel = () => {
return (
<>
<Carousel variant="dark" controls={false} indicators={false} className={`${style.carousel}`} interval={3000}>
{carouselData?.map((item, inndex) => {
<Carousel
variant="dark"
controls={false}
indicators={false}
className={`${style.carousel}`}
interval={3000}
>
{carouselData?.map((item, index) => {
return (
<Carousel.Item>
<Carousel.Item key={index}>
<img
className={`d-block w-100 ${style.image}`}
src={item?.image}
alt="First slide"
fluid
/>
</Carousel.Item>
);
})}
{/* <Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Second slide&bg=eee"
alt="Second slide"
/>
<Carousel.Caption>
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Third slide&bg=e5e5e5"
alt="Third slide"
/>
<Carousel.Caption>
<h5>Third slide label</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</Carousel.Caption>
</Carousel.Item> */}
</Carousel>
</>
);
......
src/Components/Footer/Footer.js
View file @ 3b6bf2d2
import React from 'react'
import style from "./Footer.module.scss"
import {Container} from "react-bootstrap"
import React from "react";
import style from "./Footer.module.scss";
import { Container, Row, Col } from "react-bootstrap";
import { AiOutlineCaretRight } from "react-icons/ai";
import { HiOutlineMail } from "react-icons/hi";
import { FaArrowRight, FaHome, FaEnvelope,FaPhoneAlt, FaMapMarkerAlt } from "react-icons/fa";
import playStoreImg from "../../assets/images/playstore.png"
import appStoreImg from "../../assets/images/app_store.png"
const Footer = () => {
return (
<>
<div className={style.mainContainer}>
<Container>
<div className={style.mainContainer}>
<Container>
<Row>
<Col md={3}>
<div className={style.firstContainer}>
<h2>Hummart</h2>
<div>
<ul>
<li>
<FaHome /> <a href="">Home</a>
</li>
<li>
<FaArrowRight /> <a href="">About Us</a>
</li>
<li>
<FaArrowRight /> <a href="">Careers</a>
</li>
<li>
<FaArrowRight /> <a href="">Sell on Hummart</a>
</li>
<li>
<FaArrowRight /> <a href="">Terms</a>
</li>
</ul>
</div>
</div>
</Col>
<Col md={3}>
<div className={style.secondContainer}>
<h2>Help</h2>
<div>
<ul>
<li>
<AiOutlineCaretRight /> <a href="">FAQ's</a>
</li>
<li>
<AiOutlineCaretRight /> <a href="">How To Order</a>
</li>
<li>
<AiOutlineCaretRight /> <a href="">How To Pay</a>
</li>
<li>
<AiOutlineCaretRight /> <a href="">Return</a>
</li>
<li>
<AiOutlineCaretRight /> <a href="">Delivery Time</a>
</li>
</ul>
</div>
</div>
</Col>
<Col md={3}>
<div className={style.thirdContainer}>
<h2>Contact Us</h2>
<div>
<ul>
<li>
<FaMapMarkerAlt /> <a href="https://goo.gl/maps/vt9gXEHHmUrxfViu9" target="_blank" rel="noreferrer">Dehli, India</a>
</li>
<li>
<FaEnvelope /> <a href="mailto:muhammadameenh1@gmail.com">Hum Mart Mail</a>
</li>
<li>
<FaPhoneAlt /> <a href="tel:790078601">790078601</a>
</li>
</ul>
</div>
</div>
</Col>
</Container>
<Col md={3}>
<div className={style.fourthContainer}>
<h2>Mobile App</h2>
<div>
<ul>
<li>
<img src={appStoreImg} alt="" />
</li>
<li>
<img src={playStoreImg} alt="" />
</li>
</div>
</ul>
</div>
</div>
</Col>
</Row>
</Container>
</div>
</>
)
}
);
};
export default Footer
\ No newline at end of file
export default Footer;
src/Components/Footer/Footer.module.scss
View file @ 3b6bf2d2
.mainContainer{
width: 100%;
background-color: black;
}
\ No newline at end of file
$main_green: #56a514;
.mainContainer {
width: 100%;
background-color: $main_green;
color: white;
font-family: "Poppin-Regular";
h2 {
color: white;
font-family: "Poppin-Bold";
}
ul {
margin: 0px;
padding: 0px;
}
ul > li {
text-decoration: none;
list-style: none;
font-size: 18px;
padding: 10px 0px;
}
ul > li > a {
color: white;
margin-left: 8px;
&:hover {
color: black;
}
}
.firstContainer, .secondContainer, .thirdContainer, .fourthContainer {
padding-top: 40px;
padding-bottom: 20px;
}
.fourthContainer {
img {
cursor: pointer;
width: 90%;
height: 85px;
// background-color: rebeccapurple;
}
}
}
src/Components/Navbar/Navbar.js
View file @ 3b6bf2d2
import React from "react";
import {
Container,
Navbar,
Nav,
} from "react-bootstrap";
import { Container, Navbar, Nav } from "react-bootstrap";
import style from "./Navbar.module.scss";
import logo from "../../assets/images/logo.png";
import { Input } from "antd";
......@@ -64,8 +60,15 @@ const MainNavbar = () => {
<ul>
{headerData?.map((item, index) => {
return (
<li>
<a href={item?.link} className={headerData?.length - 1 !==index && style.borderRight}>{item?.link}</a>
<li key={index}>
<a
href={item?.link}
className={
headerData?.length - 1 !== index ? style.borderRight : ""
}
>
{item?.link}
</a>
</li>
);
})}
......
src/Screens/Home/Home.js
View file @ 3b6bf2d2
......@@ -9,8 +9,16 @@ import MainCard from "../../Components/Card.js/Card";
import CategoriesCard from "../../Components/Card.js/CategoriesCard";
import { cardData, categoriesCardData } from "../../Helper/dummyData";
import Footer from "../../Components/Footer/Footer";
import { useDispatch, useSelector } from "react-redux";
import { addCart } from "../../store/Reducers/cartReducer";
const Home = () => {
const dispatch = useDispatch();
const count = useSelector((state) => state.cart.item);
console.log(count);
return (
<>
<section>
......@@ -48,7 +56,14 @@ const Home = () => {
<Row>
{cardData?.map((item, index) => {
return (
<Col xl={3} md={4} sm={12} className={style.cardCol}>
<Col
key={index}
xl={3}
md={4}
sm={12}
className={style.cardCol}
onClick={() => dispatch(addCart(item))}
>
<MainCard data={item} />
</Col>
);
......@@ -64,7 +79,7 @@ const Home = () => {
<Row className={style.categoriesCardContainer}>
{categoriesCardData?.map((item, index) => {
return (
<Col md={6}>
<Col md={6} key={index}>
<CategoriesCard data={item} />
</Col>
);
......@@ -105,6 +120,10 @@ const Home = () => {
</p>
</Container>
</div>
<div className={style.footerDiv}>
<Footer />
</div>
</Row>
</Container>
</section>
......
src/Screens/Home/Home.module.scss
View file @ 3b6bf2d2
......@@ -61,6 +61,12 @@
}
}
.footerDiv{
margin-top: 30px !important;
// border: 1px solid black;
}
@media only screen and (max-width: 1200px) {
.carouselContainer {
// background-color: red;
......
src/store/Reducers/cartReducer.js 0 → 100644
View file @ 3b6bf2d2
import { createSlice } from "@reduxjs/toolkit";
export const cartSlice = createSlice({
name: "cart",
initialState: {
item: [],
},
reducers: {
addCart(state, action) {
console.log(action);
state.item.push(action.payload);
},
},
});
// each case under reducers becomes an action
export const { addCart } = cartSlice.actions;
export default cartSlice.reducer;
src/store/store.js
View file @ 3b6bf2d2
import { configureStore, applyMiddleware } from '@reduxjs/toolkit'
import thunk from 'redux-thunk'
import counterSlice from './Reducers/counterReducer'
import { configureStore, applyMiddleware } from "@reduxjs/toolkit";
import thunk from "redux-thunk";
import counterSlice from "./Reducers/counterReducer";
import cartSlice from "./Reducers/cartReducer";
const store = configureStore({
reducer: {
counter: counterSlice,
} //add reducers here
})
reducer: {
counter: counterSlice,
cart: cartSlice,
}, //add reducers here
});
export default store;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment