Shop homepage redesign

package.json

@@ -28,6 +28,9 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^2.30.0",
+    "embla-carousel": "^8.1.5",
+    "embla-carousel-autoplay": "^8.1.5",
+    "embla-carousel-react": "^8.1.5",
     "html-react-parser": "^5.0.6",
     "lucide-react": "^0.395.0",
     "million": "^3.0.2",

src/components/FAQ.jsx

@@ -2,9 +2,7 @@
 import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 import { useState } from "react";
 
-import { questions } from "../pages/landingPage/data";
-
-function FAQ() {
+function FAQ({ questions }) {
   const [activeQuestion, setActiveQuestion] = useState(null);
 
   const toggleQuestion = (index) => {
@@ -16,14 +14,12 @@ function FAQ() {
       {questions.map((question, index) => (
         <div
           key={question.id}
-          className={`rounded-xl bg-white ${
-            activeQuestion === index && "mb-4"
-          }`}
+          className={`rounded-xl bg-white border shadow-sm mb-4 p-4 `}
         >
           <h2 className="mb-4 font-semibold" id={`flush-heading${index + 1}`}>
             <button
               aria-label={question.question}
-              className={`group relative flex w-full items-center rounded-none border-0 py-4 px-5 text-left text-base transition ${
+              className={`group relative flex w-full items-center rounded-none border-0   text-left text-base transition ${
                 activeQuestion === index
                   ? ""
                   : "overflow-anchor:none hover:z-[2] focus:z-[3]"
@@ -63,7 +59,7 @@ function FAQ() {
             aria-labelledby={`flush-heading${index + 1}`}
             data-te-parent="#accordionFlushExample"
           >
-            <div className="py-4 px-5">{question.answer}</div>
+            <div className=" ">{question.answer}</div>
           </div>
         </div>
       ))}

src/components/Header.jsx

@@ -37,11 +37,11 @@ const navLinks = [
     link: "Resources",
     route: "/resources",
   },
-  // {
-  //   id: 7,
-  //   link: "Shop",
-  //   route: "/shop",
-  // },
+  {
+    id: 7,
+    link: "Shop",
+    route: "/shop",
+  },
   // {
   //   id: 8,
   //   link: "Donate",

src/components/shop/CartIcon.jsx

@@ -0,0 +1,17 @@
+import { MdAddShoppingCart } from "react-icons/md";
+import SectionWrapper from "./SectionWrapper";
+
+const CartIcon = () => {
+  return (
+    <SectionWrapper>
+      <div className="flex justify-end ">
+        <div className="w-14 md:w-16 h-14 md:h-16 rounded-full p-1 bg-white border shadow-lg cursor-pointer">
+          <div className="flex w-full h-full rounded-full justify-center items-center bg-green-dark">
+            <MdAddShoppingCart color="white" size={30} />
+          </div>
+        </div>
+      </div>
+    </SectionWrapper>
+  );
+};
+export default CartIcon;

src/components/shop/ProductCard.jsx

@@ -0,0 +1,63 @@
+import { addCommaSeparator, categoryColors, cn } from "@/utilities/utils";
+import { CiShoppingTag } from "react-icons/ci";
+import { MdAddShoppingCart } from "react-icons/md";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Link } from "react-router-dom";
+
+const ProductCard = ({ product }) => {
+  const { backgroundColor, color } = categoryColors(product.category);
+
+  return (
+    <div className="border rounded-lg p-2.5 pr-1.5 shadow-sm group hover:bg-green-dark/10 bg-white flex flex-col gap-4 ">
+      <Link
+        to={`/shop/item/${product.id}`}
+        className="aspect-h-1 aspect-w-1 w-full bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-96"
+      >
+        <LazyLoadImage
+          src={product.image}
+          alt="Product image"
+          className="w-full h-80 object-cover object-center lg:h-full lg:w-full"
+        />
+      </Link>
+      <Link
+        to={`/shop/item/${product.id}`}
+        className="flex justify-between pr-1"
+      >
+        <h3 className="text-md uppercase font-bold text-gray-600">
+          {product.name}
+        </h3>
+        <div className="p-1 rounded-xl bg-green-dark/10">
+          {product.stock > 0 ? (
+            <p className="text-green-dark font-medium text-sm px-1">
+              <span> {product.stock}</span>
+              <span className="ml-2">items left</span>
+            </p>
+          ) : (
+            <div className=" text-red-800 p-1 rounded-lg bg-red-800/20 font-bold text-base">
+              <p>Out of stock</p>
+            </div>
+          )}
+        </div>
+      </Link>
+      <div className="flex justify-start w-full">
+        <div
+          style={{ backgroundColor, color }}
+          className="px-2 rounded-2xl flex gap-2 items-center"
+        >
+          <CiShoppingTag size={28} />
+          <p className="font-medium text-sm">{product.category}</p>
+        </div>
+      </div>
+      <div className="flex justify-between pr-1">
+        <h3 className="text-lg font-bold text-gray-700">
+          KES {addCommaSeparator(Number(product.price))}
+        </h3>
+        <div className="flex text-green-dark gap-2 items-center md:opacity-0 md:group-hover:opacity-100 transition-opacity cursor-pointer">
+          <MdAddShoppingCart size={20} />
+          <p className="font-bold text-base">Add to cart</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ProductCard;

src/components/shop/SearchInput.jsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { IoMdSearch } from "react-icons/io";
+import { useNavigate } from "react-router-dom";
+
+const SearchInput = () => {
+  const [searchText, setSearchText] = useState("");
+  const navigate = useNavigate();
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    navigate(`/shop/items?search=${searchText}`);
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex justify-between w-full relative "
+    >
+      <input
+        type="text"
+        placeholder="Search item"
+        className="rounded-l-lg pl-16 text-sm shadow-sm w-full border outline-none py-3 text-gray-600 "
+        value={searchText}
+        onChange={(e) => setSearchText(e.target.value)}
+      />
+      <IoMdSearch className="absolute top-3 left-8 text-gray-400 " size={24} />
+      <button
+        type="submit"
+        className="text-white text-sm  bg-gradient-to-b to-primary from-green-dark py-2 px-4 md:px-20 rounded-r-lg"
+      >
+        Search
+      </button>
+    </form>
+  );
+};
+export default SearchInput;

src/components/shop/SectionWrapper.jsx

@@ -0,0 +1,4 @@
+const SectionWrapper = ({ children }) => {
+  return <div className="px-4 md:px-10 lg:px-20 my-2 md:my-4">{children}</div>;
+};
+export default SectionWrapper;

src/components/shop/SortItems.jsx

@@ -0,0 +1,41 @@
+import { IoFilter } from "react-icons/io5";
+import { Menu } from "@headlessui/react";
+import { Link, useLocation } from "react-router-dom";
+
+const SortItems = () => {
+  const { pathname } = useLocation();
+  const path = pathname.includes("category") ? pathname : "/shop/items";
+
+  return (
+    <div className="flex flex-col gap-4 relative">
+      <Menu>
+        <Menu.Button className="rounded-lg border shadow-sm py-2 px-4 flex gap-2">
+          <IoFilter size={20} className="text-gray-400" />
+          <p className="text-sm text-gray-500"> Sort</p>
+        </Menu.Button>
+        <Menu.Items
+          anchor="bottom"
+          className="absolute top-10 z-10 right-0 w-48 bg-white py-2 px-4 rounded-md flex flex-col gap-2 border shadow-sm"
+        >
+          <Menu.Item>
+            <Link
+              to={`${path}?sort=low`}
+              className="text-sm p-2 text-gray-500 cursor-pointer hover:text-green-dark"
+            >
+              <p>Lowest price first</p>
+            </Link>
+          </Menu.Item>
+          <Menu.Item>
+            <Link
+              to={`${path}?sort=high`}
+              className="text-sm p-2 text-gray-500 cursor-pointer hover:text-green-dark"
+            >
+              <p>Highest price first</p>
+            </Link>
+          </Menu.Item>
+        </Menu.Items>
+      </Menu>
+    </div>
+  );
+};
+export default SortItems;

src/hooks/Queries/shop/useSwagList.jsx

@@ -38,4 +38,4 @@ const useSingleSwag = (id) =>
     refetchOnWindowFocus: false,
   });
 
-export { useSwagList, useSingleSwag };
+export { useSwagList, useSingleSwag };

src/index.js

@@ -5,16 +5,16 @@ import { lazy } from "react";
 const AboutUs = lazy(() => import("./pages/aboutUs/AboutUs"));
 const AdminLayout = lazy(() => import("./components/admin/AdminLayout"));
 const AllBlogsPage = lazy(() => import("./pages/admin/blogs/AllBlogsPage"));
-const AddChapterPage = lazy(() =>
-  import("./pages/admin/chapters/AddChapterPage")
+const AddChapterPage = lazy(
+  () => import("./pages/admin/chapters/AddChapterPage")
 );
-const AllChaptersPage = lazy(() =>
-  import("./pages/admin/chapters/AllChaptersPage")
+const AllChaptersPage = lazy(
+  () => import("./pages/admin/chapters/AllChaptersPage")
 );
 const AddEventPage = lazy(() => import("./pages/admin/events/AddEventPage"));
 const AllEventsPage = lazy(() => import("./pages/admin/events/AllEventsPage"));
-const UpdateEventPage = lazy(() =>
-  import("./pages/admin/events/UpdateEventPage")
+const UpdateEventPage = lazy(
+  () => import("./pages/admin/events/UpdateEventPage")
 );
 const ForgotPassword = lazy(() => import("./pages/auth/ForgotPassword"));
 const LogIn = lazy(() => import("./pages/auth/LogIn"));
@@ -23,25 +23,26 @@ const SignUp = lazy(() => import("./pages/auth/SignUp"));
 const Blog = lazy(() => import("./pages/blog/Blog"));
 const Blog2 = lazy(() => import("./pages/blog2/Blog2"));
 const Blogs = lazy(() => import("./pages/blogs/Blogs"));
-const IndividualChapter = lazy(() =>
-  import("./pages/chapter/pages/IndividualChapter")
+const IndividualChapter = lazy(
+  () => import("./pages/chapter/pages/IndividualChapter")
 );
 const CommunityPage = lazy(() => import("./pages/community/CommunityPage"));
-const SingleEvent = lazy(() =>
-  import("./pages/community/sections/eventsPreview/SingleEvents/SingleEvent")
+const SingleEvent = lazy(
+  () =>
+    import("./pages/community/sections/eventsPreview/SingleEvents/SingleEvent")
 );
 const DonatePage = lazy(() => import("./pages/donate/DonatePage"));
-const SingleProductDonation = lazy(() =>
-  import("./pages/donate/pages/SingleProductDonatePage")
+const SingleProductDonation = lazy(
+  () => import("./pages/donate/pages/SingleProductDonatePage")
 );
 const Error400 = lazy(() => import("./pages/errorPages/Error400"));
 const Error403 = lazy(() => import("./pages/errorPages/Error403"));
 const Error404 = lazy(() => import("./pages/errorPages/Error404"));
 const Error500 = lazy(() => import("./pages/errorPages/Error500"));
 const ErrorBoundary = lazy(() => import("./pages/errorPages/ErrorBoundary"));
 const EventsPage = lazy(() => import("./pages/events/pages/EventsPage"));
-const EventsSection = lazy(() =>
-  import("./pages/events/sections/eventsSection/EventsSection")
+const EventsSection = lazy(
+  () => import("./pages/events/sections/eventsSection/EventsSection")
 );
 const GalleryPage = lazy(() => import("./pages/gallery/GalleryPage"));
 const LandingPage = lazy(() => import("./pages/landingPage/LandingPage"));
@@ -51,27 +52,52 @@ const Resources = lazy(() => import("./pages/resources/Resources"));
 const Homepage = lazy(() => import("./pages/shop/Homepage"));
 const Checkout = lazy(() => import("./pages/shop/OrderSummaryPage"));
 const ProductDisplay = lazy(() => import("./pages/shop/ProductDisplayPage"));
-const CategoriesProducts = lazy(() =>
-  import("./pages/shop/sections/CategoriesProducts")
+const CategoriesProducts = lazy(
+  () => import("./pages/shop/sections/CategoriesProducts")
 );
+const AllProducts = lazy(() => import("./pages/shop/sections/AllProducts"));
 const SingleItemPage = lazy(() => import("./pages/shop/SingleItemPage"));
 
 const ShopDashboard = lazy(() => import("./pages/admin/shop/ShopDashboard"));
 
 export {
-  AboutUs, AddChapterPage,
+  AllProducts,
+  AboutUs,
+  AddChapterPage,
   AddEventPage,
   AdminLayout,
   AllBlogsPage,
   AllChaptersPage,
-  AllEventsPage, Blog,
-  Blog2, Blogs, CategoriesProducts, Checkout, CommunityPage,
-  DonatePage, Error400,
+  AllEventsPage,
+  Blog,
+  Blog2,
+  Blogs,
+  CategoriesProducts,
+  Checkout,
+  CommunityPage,
+  DonatePage,
+  Error400,
   Error403,
   Error404,
   Error500,
-  ErrorBoundary, EventsPage,
-  EventsSection, ForgotPassword, GalleryPage, Homepage, IndividualChapter, LandingPage, Layout, LogIn, ProductDisplay, Products, ResetPassword, Resources, ShopDashboard,
-  SignUp, SingleEvent, SingleItemPage, SingleProductDonation, UpdateEventPage
+  ErrorBoundary,
+  EventsPage,
+  EventsSection,
+  ForgotPassword,
+  GalleryPage,
+  Homepage,
+  IndividualChapter,
+  LandingPage,
+  Layout,
+  LogIn,
+  ProductDisplay,
+  Products,
+  ResetPassword,
+  Resources,
+  ShopDashboard,
+  SignUp,
+  SingleEvent,
+  SingleItemPage,
+  SingleProductDonation,
+  UpdateEventPage,
 };
-

src/pages/landingPage/sections/FaqSection.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { FAQ } from "../../../components";
+import { questions } from "../data";
 
 function FaqSection() {
   return (
@@ -17,7 +18,7 @@ function FaqSection() {
         </p>
       </div>
 
-      <FAQ />
+      <FAQ questions={questions} />
     </section>
   );
 }