Skip to content

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

Footer Complete

parent 75057321
Show 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"; ...@@ -3,49 +3,29 @@ import carouselImg from "../../assets/images/offer.jpg";
import { Carousel } from "react-bootstrap"; import { Carousel } from "react-bootstrap";
import { carouselData } from "../../Helper/dummyData"; import { carouselData } from "../../Helper/dummyData";
import style from "./Carousel.module.scss" import style from "./Carousel.module.scss";
const MainCarousel = () => { const MainCarousel = () => {
return ( return (
<> <>
<Carousel variant="dark" controls={false} indicators={false} className={`${style.carousel}`} interval={3000}> <Carousel
{carouselData?.map((item, inndex) => { variant="dark"
controls={false}
indicators={false}
className={`${style.carousel}`}
interval={3000}
>
{carouselData?.map((item, index) => {
return ( return (
<Carousel.Item> <Carousel.Item key={index}>
<img <img
className={`d-block w-100 ${style.image}`} className={`d-block w-100 ${style.image}`}
src={item?.image} src={item?.image}
alt="First slide" alt="First slide"
fluid
/> />
</Carousel.Item> </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> </Carousel>
</> </>
); );
......
src/Components/Footer/Footer.js
View file @ 3b6bf2d2
import React from 'react' import React from "react";
import style from "./Footer.module.scss" import style from "./Footer.module.scss";
import {Container} from "react-bootstrap" 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 = () => { const Footer = () => {
return ( return (
<> <>
<div className={style.mainContainer}> <div className={style.mainContainer}>
<Container> <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>
<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>
</Container>
</ul>
</div>
</div>
</Col>
</Row>
</Container>
</div> </div>
</> </>
) );
} };
export default Footer export default Footer;
\ No newline at end of file
src/Components/Footer/Footer.module.scss
View file @ 3b6bf2d2
.mainContainer{ $main_green: #56a514;
.mainContainer {
width: 100%; width: 100%;
background-color: black; 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 React from "react";
import { import { Container, Navbar, Nav } from "react-bootstrap";
Container,
Navbar,
Nav,
} from "react-bootstrap";
import style from "./Navbar.module.scss"; import style from "./Navbar.module.scss";
import logo from "../../assets/images/logo.png"; import logo from "../../assets/images/logo.png";
import { Input } from "antd"; import { Input } from "antd";
...@@ -64,8 +60,15 @@ const MainNavbar = () => { ...@@ -64,8 +60,15 @@ const MainNavbar = () => {
<ul> <ul>
{headerData?.map((item, index) => { {headerData?.map((item, index) => {
return ( return (
<li> <li key={index}>
<a href={item?.link} className={headerData?.length - 1 !==index && style.borderRight}>{item?.link}</a> <a
href={item?.link}
className={
headerData?.length - 1 !== index ? style.borderRight : ""
}
>
{item?.link}
</a>
</li> </li>
); );
})} })}
......
src/Screens/Home/Home.js
View file @ 3b6bf2d2
...@@ -9,8 +9,16 @@ import MainCard from "../../Components/Card.js/Card"; ...@@ -9,8 +9,16 @@ import MainCard from "../../Components/Card.js/Card";
import CategoriesCard from "../../Components/Card.js/CategoriesCard"; import CategoriesCard from "../../Components/Card.js/CategoriesCard";
import { cardData, categoriesCardData } from "../../Helper/dummyData"; 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 Home = () => {
const dispatch = useDispatch();
const count = useSelector((state) => state.cart.item);
console.log(count);
return ( return (
<> <>
<section> <section>
...@@ -48,7 +56,14 @@ const Home = () => { ...@@ -48,7 +56,14 @@ const Home = () => {
<Row> <Row>
{cardData?.map((item, index) => { {cardData?.map((item, index) => {
return ( 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} /> <MainCard data={item} />
</Col> </Col>
); );
...@@ -64,7 +79,7 @@ const Home = () => { ...@@ -64,7 +79,7 @@ const Home = () => {
<Row className={style.categoriesCardContainer}> <Row className={style.categoriesCardContainer}>
{categoriesCardData?.map((item, index) => { {categoriesCardData?.map((item, index) => {
return ( return (
<Col md={6}> <Col md={6} key={index}>
<CategoriesCard data={item} /> <CategoriesCard data={item} />
</Col> </Col>
); );
...@@ -105,6 +120,10 @@ const Home = () => { ...@@ -105,6 +120,10 @@ const Home = () => {
</p> </p>
</Container> </Container>
</div> </div>
<div className={style.footerDiv}>
<Footer />
</div>
</Row> </Row>
</Container> </Container>
</section> </section>
......
src/Screens/Home/Home.module.scss
View file @ 3b6bf2d2
...@@ -61,6 +61,12 @@ ...@@ -61,6 +61,12 @@
} }
} }
.footerDiv{
margin-top: 30px !important;
// border: 1px solid black;
}
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
.carouselContainer { .carouselContainer {
// background-color: red; // 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 { configureStore, applyMiddleware } from "@reduxjs/toolkit";
import thunk from 'redux-thunk' import thunk from "redux-thunk";
import counterSlice from './Reducers/counterReducer' import counterSlice from "./Reducers/counterReducer";
import cartSlice from "./Reducers/cartReducer";
const store = configureStore({ const store = configureStore({
reducer: { reducer: {
counter: counterSlice, counter: counterSlice,
} //add reducers here cart: cartSlice,
}) }, //add reducers here
});
export default store; 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