Home page - shop offers

src/index.css

@@ -6,13 +6,13 @@
 
 @layer base {
   .FPCard-hover-text {
-    @apply group-hover:text-[#fff] duration-300;
+    @apply group-hover:text-white duration-300;
   }
   .FPCard-hover-image {
     @apply bg-[#F6F7FB] group-hover:bg-[#F7F7F7] ease-in-out duration-300 overflow-hidden;
   }
   .FPCard-hover-body {
-    @apply relative before:bg-blue-cc before:absolute before:w-full before:h-full before:left-0 before:top-full before:duration-300 group-hover:before:top-0 before:-z-10 before:opacity-0 group-hover:before:opacity-100 ease-in-out z-10 overflow-hidden;
+    @apply relative before:bg-blue-cc before:absolute before:w-full before:h-full before:left-0 before:top-full before:duration-300 group-hover:before:top-0 before:-z-10 before:opacity-0 group-hover:before:opacity-100 ease-in-out z-10 overflow-hidden h-full;
   }
   .FPCard-hover-icons {
     @apply absolute flex top-3 -left-10 group-hover:left-3 duration-300 opacity-0 group-hover:opacity-100;

src/routes/Home/LatestProducts.tsx

@@ -13,7 +13,7 @@ const LatestProducts = () => {
   useEffect(() => {
     const products: Product[] = Products.filter(product => product.category === "Leatest Products" && product.section === section);
     setLatestProducts(products);
-  }, [section])
+  }, [section, Products])
 
   if (latestProducts.length === 0) return null;
   return (

src/routes/Home/ShopOffers.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import FreeDeliveryIMG from "../../images/free-delivery.png";
+import CashBackIMG from "../../images/cash-back.png";
+import QualityProductIMG from "../../images/quality-product.png";
+import Support from "../../images/24-7-support.png";
+import { ShopOfferContent } from '../../types/public.types';
+
+const ShopOffers = () => {
+  const content: ShopOfferContent[] = [
+    {text: "For orders above 50%, we will have free shipping.", title: "Free Delivery", image: FreeDeliveryIMG},
+    {text: "If you are not satisfied, we will refund your money.", title: "100% Cash Back", image: CashBackIMG},
+    {text: "The quality of all products is checked at the time of entry", title: "Quality Product", image: QualityProductIMG},
+    {text: "24/7 support to respond to customers", title: "24/7 Support", image: Support}
+  ]
+
+  return (
+    <div className='mt-14 mb-40'>
+      <div className='container mx-auto'>
+        <h1 className='font-JosefinSans text-center text-[#1A0B5B] text-[42px] font-bold mb-20'>What's Hekto Offer?</h1>
+        <div className='flex items-center justify-center'>
+          <div className='columns-4 gap-y-4'>
+            {
+              content.map(item => (
+                <div className='flex flex-col items-center justify-center h-[320px] drop-shadow-[0_8px_40px_rgba(49,32,138,0.05)] bg-white px-7'>
+                  <img src={item.image} alt="" className='mb-2' />
+                  <h4 className='mb-4 font-JosefinSans font-[22px] text-navy-blue'>{item.title}</h4>
+                  <p className='text-center font-Lato font-bold text-base text-[#1A0B5B4D]'>{item.text}</p>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ShopOffers;

src/routes/Home/main.tsx

@@ -2,13 +2,15 @@ import React from 'react'
 import FeaturedProducts from './FeaturedProducts';
 import Header from './header';
 import LatestProducts from './LatestProducts';
+import ShopOffers from './ShopOffers';
 
 const Home = () => {
   return (
     <>
       <Header />
       <FeaturedProducts />
       <LatestProducts />
+      <ShopOffers />
     </>
   )
 }

src/types/images.d.ts

@@ -0,0 +1,3 @@
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.png';

src/types/public.types.ts

@@ -2,4 +2,10 @@ import { Product } from "./IProducts.interface"
 
 export type FCTypes = {
   data: Product
+}
+
+export type ShopOfferContent = {
+  text: string, 
+  title: string, 
+  image: string
 }

tsconfig.json

@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "typeRoots" : ["node_modules/@types", "src/types"]
   },
   "include": [
     "src"