Feat: add new design for categories page

assets/icons/AddIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { SVGProps } from 'react'
+const AddIcon = ({ ...rest }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-8"
+    >
+      <path
+        d="M5 12H19"
+        stroke="white"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 19V5"
+        stroke="white"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default AddIcon

assets/icons/ArrowIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { SVGProps } from 'react'
+const ArrowIcon = ({ ...rest }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="opacity-0 group-hover:opacity-100 duration-300 w-8"
+    >
+      <path
+        d="M14.4299 5.92993L20.4999 11.9999L14.4299 18.0699"
+        stroke="white"
+        stroke-width="2"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.5 12H20.33"
+        stroke="white"
+        stroke-width="2"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ArrowIcon

assets/icons/HomeIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { SVGProps } from 'react'
+const HomeIcon = ({ ...rest }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="m-auto"
+    >
+      <path
+        d="M15.621 6.00825L10.7085 2.07825C9.74851 1.31325 8.24851 1.30575 7.29601 2.07075L2.38351 6.00825C1.67851 6.57075 1.25101 7.69575 1.40101 8.58075L2.34601 14.2357C2.56351 15.5032 3.74101 16.5007 5.02351 16.5007H12.9735C14.241 16.5007 15.441 15.4807 15.6585 14.2282L16.6035 8.57325C16.7385 7.69575 16.311 6.57075 15.621 6.00825ZM9.56101 13.5007C9.56101 13.8082 9.30601 14.0632 8.99851 14.0632C8.69101 14.0632 8.43601 13.8082 8.43601 13.5007V11.2507C8.43601 10.9432 8.69101 10.6882 8.99851 10.6882C9.30601 10.6882 9.56101 10.9432 9.56101 11.2507V13.5007Z"
+        fill="#EDEDED"
+      />
+    </svg>
+  )
+}
+
+export default HomeIcon

assets/icons/MessageIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { SVGProps } from 'react'
+const MessageIcon = ({ ...rest }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="my-auto"
+    >
+      <path
+        d="M14.1667 15.3583H10.8334L7.12507 17.8249C6.57507 18.1916 5.83341 17.8 5.83341 17.1333V15.3583C3.33341 15.3583 1.66675 13.6916 1.66675 11.1916V6.19157C1.66675 3.69157 3.33341 2.0249 5.83341 2.0249H14.1667C16.6667 2.0249 18.3334 3.69157 18.3334 6.19157V11.1916C18.3334 13.6916 16.6667 15.3583 14.1667 15.3583Z"
+        stroke="#A6ABBF"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10 9.46655V9.29159C10 8.72492 10.35 8.4249 10.7 8.18324C11.0417 7.9499 11.3833 7.64991 11.3833 7.09991C11.3833 6.33325 10.7667 5.71655 10 5.71655C9.23334 5.71655 8.6167 6.33325 8.6167 7.09991"
+        stroke="#A6ABBF"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9.99617 11.4584H10.0037"
+        stroke="#A6ABBF"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default MessageIcon

components/Breadcrumps/index.tsx

@@ -0,0 +1,47 @@
+import HomeIcon from 'assets/icons/HomeIcon'
+import Link from 'next/link'
+import { IoChevronBack } from 'react-icons/io5'
+
+interface ComponentProps {
+  sections: { name: string; url: string }[]
+}
+const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
+  return (
+    <>
+      <div className="hidden md:flex">
+        <Link
+          href={`/`}
+          className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer	"
+        >
+          <HomeIcon />
+          <div>Home</div>
+        </Link>
+        <div className="text-2xl	mx-2.5 font-semibold varela">/</div>
+        {sections.map((section, i: number) => (
+          <Link
+            key={i}
+            href={section.url}
+            className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer	"
+          >
+            {section.name}
+          </Link>
+        ))}
+      </div>
+      <div className="flex sm:hidden">
+        <Link
+          href={`/`}
+          className="flex gap-x-2 text-text-quaternary text-lg py-0.5 rounded-lg cursor-pointer	my-auto capitalize"
+        >
+          <IoChevronBack className="text-text-quinary" />
+        </Link>
+        <div
+          className={`dark:text-text-primary text-1.5xl capitalize font-medium	mx-2.5 my-auto`}
+        >
+          {sections[0].name}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default BreadCrumbs

pages/[category]/index.tsx

@@ -1,56 +1,91 @@
 import { useRouter } from 'next/router'
-import Logo from 'components/logo/logo'
 import { sidebarData } from 'database/data'
 import { SubCategories } from 'types'
 import Link from 'next/link'
+import AddIcon from 'assets/icons/AddIcon'
+import ArrowIcon from 'assets/icons/ArrowIcon'
+import BreadCrumbs from 'components/Breadcrumps'
+import MessageIcon from 'assets/icons/MessageIcon'
 
 const CategoryPage = () => {
   const router = useRouter()
-  const { category } = router.query as { category: string}
+  const { category } = router.query as { category: string }
 
-  const subcategories: SubCategories[] = []
-  sidebarData.forEach((c) => {
-    if (c.category == category)
-      c.subcategory.forEach((a) => {
-        subcategories.push(a)
-      })
-  })
+  const subcategories: SubCategories[] = category
+    ? sidebarData.filter((c) => c.category == category)[0]['subcategory']
+    : []
 
   return (
     <section className="flex min-h-[calc(100vh-165px)] flex-col">
       <div className=" m-auto items-start gap-2">
         {subcategories?.length ? (
           <>
-            <div className="m-auto gap-2 flex flex-col items-center justify-center ">
-              <p className="md:text-4xl text-xl uppercase font-bold text-theme-secondary dark:text-gray-text w-fit mx-auto text-center">
-                <span className="text-theme-primary">-/</span>
-                {category.split('-').join(' ')}
-              </p>
-              <p className="text-xl hidden md:block">
-                Get access to all exclusive{' '}
-                <span className="capitalize text-theme-primary">
-                  {category.split('-').join(' ')}
-                </span>{' '}
-                resources!
-              </p>
+            <div className="flex mt-8 justify-between	">
+              <BreadCrumbs
+                sections={[{ name: category, url: `/${category}` }]}
+              />
+              <div className="flex my-auto gap-x-3">
+                <MessageIcon />
+                <div className="text-md text-text-quinary hidden md:block">
+                  Give a feedback
+                </div>
+              </div>
             </div>
-            <div className="flex flex-wrap gap-3 mt-6 justify-center items-start mx-auto lg:max-w-sm max-md:max-w-sm">
-              {subcategories.map((subcat, i) => (
+            <div className="flex max-w-1038 justify-center">
+              <div className="flex flex-wrap gap-x-9 gap-y-5 mt-6 mb-28 flex-start items-start">
+                {subcategories.map((subcat, i) => (
+                  <Link
+                    key={i}
+                    href={`/${category}${subcat.url}`}
+                    aria-label={`Explore ${subcat.name}`}
+                    className={`group flex border dark:border-theme-primary dark:border-opacity-8 rounded-xl bg-theme-tertiary  hover:bg-theme-quaternary hover:bg-opacity-25	 px-3 py-1 dark:hover:border-opacity-25 hover:text-dark-primary shadow-lg lg:max-w-xs max-md:max-w-xs px-4 py-4 group`}
+                  >
+                    <div>
+                      <div
+                        className={`dark:text-text-primary text-lg capitalize font-semibold	`}
+                      >
+                        {' '}
+                        {subcat.name}
+                      </div>
+                      <div
+                        className={`dark:text-text-tertiary text-md font-medium w-10/12 h-12	overflow-y-hidden`}
+                      >
+                        Explore {subcat.name} resources for learning and growth.
+                      </div>
+                    </div>
+
+                    <ArrowIcon className="group" />
+                  </Link>
+                ))}
                 <Link
-                  key={i}
-                  href={`/${category}${subcat.url}`}
-                  aria-label={`Explore ${subcat.name}`}
-                  className={`border-2 dark:border-theme-primary rounded-md bg-transparent dark:text-theme-primary text-text-secondary px-3 py-1 text-md capitalize hover:border-dashed hover:text-dark-primary shadow-lg`}
+                  href={`/`}
+                  aria-label={`Add`}
+                  className={`flex gap-x-2 border dark:border-theme-primary dark:border-opacity-8 rounded-xl bg-theme-secondary px-3 py-1 hover:border-dashed hover:text-dark-primary shadow-lg lg:max-w-xs max-md:max-w-xs px-4 py-4`}
                 >
-                  {subcat.name}
+                  <AddIcon className="w-8 dark:text-text-primary" />
+
+                  <div>
+                    <div className="text-xl font-semibold dark:text-text-primary">
+                      {' '}
+                      Wanna add something?
+                    </div>
+                    <div
+                      className={`dark:text-text-primary text-md font-medium w-10/12	opacity-75`}
+                    >
+                      Share resources, and help other fellows in the journey.{' '}
+                    </div>
+                  </div>
                 </Link>
-              ))}
+              </div>
             </div>
           </>
         ) : (
-          <div className='text-center'>
+          <div className="text-center">
             <p className="text-theme-secondary dark:text-gray-text w-fit mx-auto text-center">
-              <span className='md:text-7xl text-xl uppercase font-bold '>404|</span> No resources found.
+              <span className="md:text-7xl text-xl uppercase font-bold ">
+                404|
+              </span>{' '}
+              No resources found.
             </p>
           </div>
         )}

styles/globals.css

@@ -10,6 +10,10 @@ body {
   font-family: 'Urbanist', sans-serif;
 }
 
+.varela {
+  font-family: 'Varela Round', sans-serif;
+}
+
 #__next {
   height: 100vh;
   display: grid;

tailwind.config.js

@@ -8,21 +8,27 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: '#714EFF',
-        'theme-primary': '#a78bfa',
-        'theme-secondary': '#8b5cf6',
+        'theme-primary': '#BDBDBD',
+        'theme-secondary': '#714EFF',
+        'theme-tertiary': '#1f2736',
+        'theme-quaternary': '#293242',
+        'theme-quinary': '#BCCBE1',
         'light-primary': '#f5f3ff',
         dark: '#0f172a',
-        'dark-primary': '#101623',
+        'dark-primary': '#161e2c',
         'gray-text': '#9ca3af',
-        'text-primary': '#d1d5db',
+        'text-primary': '#EDEDED',
         'text-secondary': '#4b5563',
+        'text-tertiary': '#B9C0DA',
+        'text-quaternary': '#EDEDED',
+        'text-quinary': '#A6ABBF',
       },
       screens: {
         xs: '200px',
         folding: '320px',
-        tall: { raw: '(min-height: 800px)' },
       },
+      display: ['group-hover'],
+
       keyframes: {
         'button-press': {
           '0%, 100%': {
@@ -78,16 +84,24 @@ module.exports = {
         'scale-appearance': 'scale-appearance 0.3s ease-in forwards',
         'scale-hide': 'scale-hide 0.3s ease-out forwards',
       },
-      boxShadow: {
-        header: '0px 4px 16px 0px rgba(225, 218, 244, 0.25)',
-        sidebar: '4px 0px 16px 0px rgba(225, 218, 244, 0.25)',
-        'input-hover': '0px 0px 0px 1.6px rgba(113, 78, 255, 0.10)',
-        'input-focus': '0px 0px 0px 1.6px #714EFF',
-        'input-hover-dark': '0px 0px 0px 1.6px rgba(255, 255, 255, 0.20)',
-        'input-focus-dark': '0px 0px 0px 1.6px rgba(238, 243, 251, 0.75)',
+      opacity: {
+        8: '0.08',
+      },
+      width: {
+        1038: '1038px',
+      },
+      maxWidth: {
+        1038: '1038px',
+      },
+      fontSize: {
+        '1.5xl': '22px',
       },
     },
   },
   plugins: [require('daisyui')],
   darkMode: ['class', '[data-theme="dark"]'],
+  variants: {
+    opacity: ['responsive', 'hover', 'focus', 'group-hover'],
+    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
+  },
 }