men, women product page tweaked and added to the homepage

components/Countdown.jsx

@@ -28,7 +28,7 @@ const CountdownTimer = ({ endDate }) => {
   }, [endDate]);
 
   return (
-    <div className="wrapper my-10 flex flex-col gap-10 items-center">
+    <div className="wrapper my-20 flex flex-col gap-10 items-center">
       <h2 className="section-title text-center">April Sale Ends in</h2>
       <div className="text-center text-4xl md:text-6xl font-bold bg-rose-700 p-7 text-rose-100 px-10 w-full md:w-[40rem]">
         {expired ? (

components/Navbar.jsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { BsBag, BsHeart } from "react-icons/bs";
+import { BsBag } from "react-icons/bs";
 import { useSelector } from "react-redux";
 
 const Navbar = () => {
@@ -53,24 +53,16 @@ const Navbar = () => {
         </ul>
       </nav>
 
-      <div className="nav-btns flex gap-5">
-        <button className="uppercase linear-walkaways">Sign in</button>
+      <div className="nav-links-right flex gap-5">
+        <Link href="/login" className="uppercase linear-walkaways">
+          Sign in
+        </Link>
         <Link href="/cart" className="relative">
           <span>
             <BsBag />
           </span>
           <span className="counting-bubble">{products.length}</span>
         </Link>
-        {/* <button className="relative">
-          <span>
-            <BsBag />
-          </span>
-          <span className="counting-bubble">{products.length}</span>
-        </button> */}
-        {/* <button className="relative">
-          <BsHeart />
-          <span className="counting-bubble">0</span>
-        </button> */}
       </div>
     </header>
   );

components/ProductItem.jsx

@@ -20,7 +20,7 @@ const ProductItem = ({ product }) => {
       </span>
       <h3 className="text-2xl font-ligh h-[4rem]">{product.title}</h3>
       <p className="text-gray-500 h-[5rem]">
-        {product.description.split(".")[0]}.
+        {product.description?.split(".")[0]}.
       </p>
       <div className="flex justify-between items-center">
         <p className="text-rose-500 font-medium">

pages/index.js

@@ -2,15 +2,24 @@ import Slider from "@/components/Slider";
 import ProductsPage from "./products";
 import { getAllProducts } from "@/prisma/products";
 import Countdown from "@/components/Countdown";
+import MenProductsPage from "./products/men";
+import WomenProductsPage from "./products/women";
 
 const HomePage = ({ products }) => {
   const endDate = new Date().getTime() + 48 * 60 * 60 * 1000;
 
+  const menProducts = products.filter((product) => product.category === "Men");
+  const womenProducts = products.filter(
+    (product) => product.category === "Women"
+  );
+
   return (
     <div>
       <Slider />
       <ProductsPage products={products} />
       <Countdown endDate={endDate} />
+      <MenProductsPage products={menProducts} />
+      <WomenProductsPage products={womenProducts} />
     </div>
   );
 };

pages/products/index.js

@@ -3,7 +3,7 @@ import { getAllProducts } from "@/prisma/products";
 
 const ProductsPage = ({ products }) => {
   return (
-    <div className="wrapper my-10 flex flex-col gap-10">
+    <div className="wrapper my-20 flex flex-col gap-10">
       <h2 className="section-title">Browse all products</h2>
 
       <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">

pages/products/men.js

@@ -1,10 +1,10 @@
 import ProductItem from "@/components/ProductItem";
 import { getAllProducts } from "@/prisma/products";
 
-const men = ({ products }) => {
+const MenProductsPage = ({ products }) => {
   return (
-    <div className="wrapper my-10 flex flex-col gap-10">
-      <h2 className="section-title">Browse all products</h2>
+    <div className="wrapper my-20 flex flex-col gap-10">
+      <h2 className="section-title">Browse men collection</h2>
 
       <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
         {products.map((product) => (
@@ -15,7 +15,7 @@ const men = ({ products }) => {
   );
 };
 
-export default men;
+export default MenProductsPage;
 
 export const getServerSideProps = async () => {
   const products = await getAllProducts();

pages/products/women.js

@@ -1,10 +1,10 @@
 import ProductItem from "@/components/ProductItem";
 import { getAllProducts } from "@/prisma/products";
 
-const women = ({ products }) => {
+const WomenProductsPage = ({ products }) => {
   return (
-    <div className="wrapper my-10 flex flex-col gap-10">
-      <h2 className="section-title">Browse all products</h2>
+    <div className="wrapper my-20 flex flex-col gap-10">
+      <h2 className="section-title">Browse women collection</h2>
 
       <div className="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
         {products.map((product) => (
@@ -15,7 +15,7 @@ const women = ({ products }) => {
   );
 };
 
-export default women;
+export default WomenProductsPage;
 
 export const getServerSideProps = async () => {
   const products = await getAllProducts();

styles/globals.css

@@ -13,7 +13,7 @@
 }
 
 .counting-bubble {
-  @apply absolute -right-2 -bottom-1 bg-black w-4 h-4 rounded-full flex justify-center items-center text-white text-xs;
+  @apply absolute -right-2 bottom-0 bg-black w-4 h-4 rounded-full flex justify-center items-center text-white text-xs;
 }
 
 .slider {

utils/formatCurrency.js

@@ -1,5 +1,5 @@
 export function formatCurrency(price) {
-  return price.toLocaleString("en-US", {
+  return price?.toLocaleString("en-US", {
     style: "currency",
     currency: "USD",
   });