Feedback

next.config.js

@@ -2,5 +2,15 @@
 const nextConfig = {
   reactStrictMode: true,
 }
-
 module.exports = nextConfig
+
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+}

package.json

@@ -15,16 +15,19 @@
     "autoprefixer": "10.4.16",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.2",
+    "firebase": "^10.4.0",
     "next": "13.5.2",
     "postcss": "8.4.30",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "cz-conventional-changelog": "^3.3.0",
+    "daisyui": "^3.8.1",
     "husky": "^8.0.0",
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.3"

src/components/Hero Grid/HeroGrid.jsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react"
+import { API } from "@/util/API"
+import { CATEGORIES } from "@/constants"
+import Link from "next/link"
+import { useCategory } from "@/context/CategoryContext"
+import Image from "next/image"
+
+export default function HeroGrid(categories) {
+  const { setDefaultCategory, defaultCategory } = useCategory()
+
+  const handleCategoryClick = (categoryKey) => {
+    setDefaultCategory(categories[categoryKey])
+  }
+
+  return (
+    <div className="min-h-screen p-8 lg:p-16 grid grid-cols-1 grid-rows-5 gap-4 h-full w-full lg:grid-cols-7 lg:grid-rows-3">
+      <div
+        className="hero min-h- lg:col-span-7"
+        style={{ backgroundImage: "url(/images/All-categories.jpg)" }}
+      >
+        <div className="hero-overlay bg-opacity-60"></div>
+        <div className="hero-content text-center text-neutral-content">
+          <div className="max-w-md">
+            <h1 className="mb-5 text-5xl font-bold"> Shop at Dz Express</h1>
+            <p className="mb-5">
+              Explore Fashion, Electronics, and Jewelry - Your One-Stop
+              E-commerce Destination!
+            </p>
+            <Link href={`/products`}>
+              <button className="btn btn-primary">Check All here!</button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div
+        onClick={() => handleCategoryClick("0")}
+        className="hero lg:col-span-5 lg:row-start-2 bg-tiffany-blue"
+      >
+        <Link href={`/products`}>
+          {" "}
+          <div className="hero-content text-left font-bold text-2xl font-mono text-black">
+            <div className="flex flex-col">
+              {categories[0]}
+              <p className="text-l my-3 text-white font-normal">
+                {" "}
+                #Laptops #Smatphones and more...
+              </p>
+            </div>
+            <Image
+              className="object-cover h-58 w-86"
+              src="/images/category_electronic.png"
+              alt="Placeholder Image"
+              width={200}
+              height={100}
+            />
+          </div>
+        </Link>{" "}
+      </div>
+
+      <div
+        onClick={() => handleCategoryClick("1")}
+        className="hero lg:col-span-2 lg:col-start-6 lg:row-start-2 bg-mint-green"
+      >
+        <Link href={`/products`}>
+          <div className="hero-content text-center font-bold text-2xl font-mono text-black">
+            <Image
+              src="/images/category_jewelry.png"
+              alt="Placeholder Image"
+              width={200}
+              height={100}
+            />
+            {categories[1]}
+          </div>
+        </Link>{" "}
+      </div>
+
+      <div
+        onClick={() => handleCategoryClick("2")}
+        className="hero lg:col-span-3 lg:row-start-3 bg-mint-cream"
+      >
+        <Link href={`/products`}>
+          <div className="hero-content text-center font-bold text-2xl font-mono text-black">
+            <Image
+              src="/images/category_men_clothing.png"
+              alt="Placeholder Image"
+              width={200}
+              height={100}
+            />
+
+            {categories[2]}
+          </div>
+        </Link>{" "}
+      </div>
+
+      <div
+        onClick={() => handleCategoryClick("3")}
+        className="hero lg:col-span-4 lg:col-start-4 lg:row-start-3 bg-zomp"
+      >
+        <Link href={`/products`}>
+          {" "}
+          <div className="hero-content text-center font-bold text-2xl font-mono text-black">
+            <div className="flex flex-col">
+              {categories[3]}
+              <p className="text-l my-3 text-white font-normal">
+                {" "}
+                #Dresses #Shoes #Bags and more...
+              </p>
+            </div>
+
+            <Image
+              className="object-none h-48 w-96"
+              src="/images/category_women_clothes.png"
+              alt="Placeholder Image"
+              width={200}
+              height={200}
+            />
+          </div>
+        </Link>
+      </div>
+    </div>
+  )
+}

src/components/Layout.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import Nav from "./Nav/Nav"
+import Footer from "./footer/Footer"
+
+const Layout = ({ children }) => {
+  return (
+    <div>
+      <Nav />
+      <main> {children} </main>
+      <Footer />
+    </div>
+  )
+}
+
+export default Layout

src/components/Nav/Logo.jsx

@@ -0,0 +1,14 @@
+import Link from "next/link"
+
+const Logo = () => {
+  return (
+    <Link href="/">
+      <button className="font-bold text-2xl tracking-wide md:hover:tracking-widest transform-all ease-in-out duration-500 font-mono text-black z-50">
+        <span className="text-emerald-400">Dz</span>Express
+        <span className="text-emerald-400">.</span>
+      </button>
+    </Link>
+  )
+}
+
+export default Logo

src/components/Nav/MobileMenu.jsx

@@ -0,0 +1,51 @@
+import React from "react"
+import { useState } from "react"
+import { AiOutlineClose } from "react-icons/ai"
+import { FiMenu } from "react-icons/fi"
+import Link from "next/link"
+const MobileMenu = () => {
+  const [showMenu, setShowMenu] = useState(false)
+  function handleOpenMenu() {
+    setShowMenu(true)
+  }
+  function handleCloseMenu() {
+    setShowMenu(false)
+  }
+  return (
+    <div>
+      <div
+        className={`${
+          showMenu ? "block" : "hidden"
+        } flex flex-col gap-10 justify-center absolute h-[100vh] w-[100%] overflow-x-hidden top-0 right-0 bg-neutral text-neutral-content`}
+      >
+        <div className="w-full text-center">
+          <button onClick={handleCloseMenu} className="btn btn-ghost btn-sm">
+            <AiOutlineClose className="text-2xl" />
+          </button>
+        </div>
+        <Link href="/" className="btn btn-ghost btn-sm p-10">
+          Home
+        </Link>
+        <hr className=" bg-neutral-content w-full" />
+        <Link href="/products" className="btn btn-ghost btn-sm p-10">
+          All Products
+        </Link>
+        <hr className=" bg-neutral-content w-full" />
+        <Link href="/categories" className="btn btn-ghost btn-sm p-10">
+          categories
+        </Link>
+        <hr className=" bg-neutral-content w-full" />
+      </div>
+      <div className="px-2 mx-2 lg:hidden flex-1 gap-2 ">
+        <button
+          onClick={handleOpenMenu}
+          className="btn btn-ghost btn-sm btn-square "
+        >
+          <FiMenu className="text-2xl" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default MobileMenu