Created - Feature Section using map function

Author: rohitverma0234

public/images/isloading-main.jpg

@@ -2,6 +2,7 @@ import React from 'react'
 import HeroSection from './components/HeroSection'
 import Services from './components/Services'
 import Trusted from './components/Trusted'
+import FeatureProduct from './components/FeatureProduct'
 
 const Home = () => {
  const data = {
@@ -11,6 +12,7 @@ const Home = () => {
  return (
  <>
  <HeroSection myData={data}/>
+ <FeatureProduct/>
  <Services/>
  <Trusted/>
  </>

src/Home.js

@@ -0,0 +1,132 @@
+import React from 'react'
+import { useProductContext } from '../context/productcontext'
+import styled from 'styled-components'
+import Product from './Product'
+
+const FeatureProduct = () => {
+
+ const {isLoading, featureProducts} = useProductContext()
+ console.log(featureProducts)
+
+ if(isLoading){
+ return <div>
+ <img src="/images/isloading-main.jpg" alt='...loading' style={{width:75, display:'block', marginLeft:'auto', marginRight:'auto' }}></img>
+ </div>
+ }
+
+ return (
+ <Wrapper className="section">
+ <div className="container">
+ <div className="intro-data">Check Now!</div>
+ <div className="common-heading">Our Feature Services</div>
+ <div className="grid grid-three-column">
+ {featureProducts.map((curElem) => {
+ return <Product key={curElem.id} {...curElem} />;
+ })}
+ </div>
+ </div>
+ </Wrapper>
+ )
+}
+
+const Wrapper = styled.section`
+ padding: 9rem 0;
+ background-color: ${({ theme }) => theme.colors.bg};
+
+ .container {
+ max-width: 120rem;
+ }
+
+ figure {
+ width: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.5s linear;
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ transition: all 0.2s linear;
+ cursor: pointer;
+ }
+ &:hover::after {
+ width: 100%;
+ }
+ &:hover img {
+ transform: scale(1.2);
+ }
+ img {
+ max-width: 90%;
+ margin-top: 1.5rem;
+ height: 20rem;
+ transition: all 0.2s linear;
+ }
+
+ .caption {
+ position: absolute;
+ top: 15%;
+ right: 10%;
+ text-transform: uppercase;
+ background-color: ${({ theme }) => theme.colors.bg};
+ color: ${({ theme }) => theme.colors.helper};
+ padding: 0.8rem 2rem;
+ font-size: 1.2rem;
+ border-radius: 2rem;
+ }
+ }
+
+ .card {
+ background-color: #fff;
+ border-radius: 1rem;
+
+ .card-data {
+ padding: 0 2rem;
+ }
+
+ .card-data-flex {
+ margin: 2rem 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ h3 {
+ color: ${({ theme }) => theme.colors.text};
+ text-transform: capitalize;
+ }
+
+ .card-data--price {
+ color: ${({ theme }) => theme.colors.helper};
+ }
+
+ .btn {
+ margin: 2rem auto;
+ background-color: rgb(0 0 0 / 0%);
+ border: 0.1rem solid rgb(98 84 243);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ background-color: rgb(98 84 243);
+ }
+
+ &:hover a {
+ color: #fff;
+ }
+ a {
+ color: rgb(98 84 243);
+ font-size: 1.4rem;
+ }
+ }
+ }
+`;
+
+export default FeatureProduct

src/components/FeatureProduct.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+
+const Product = (curElem) => {
+ const { id, name, image, price, category } = curElem
+ return (
+ <NavLink to={`/singleproduct/${id}`}>
+ <div className="card">
+ <figure>
+ <img src={image} alt={name} />
+ <figcaption className="caption">{category}</figcaption>
+ </figure>
+
+ <div className="card-data">
+ <div className="card-data-flex">
+ <h3>{name}</h3>
+ <p className="card-data--price">{price}</p>
+ </div>
+ </div>
+ </div>
+ </NavLink>
+ )
+}
+
+export default Product