Feat: add new design for categories page

components/Breadcrumps/index.tsx

@@ -0,0 +1,47 @@
+import HomeIcon from 'assets/icons/svg/HomeIcon.svg'
+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 sm:flex py-3">
+        <Link
+          href={`/`}
+          className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer"
+        >
+          <HomeIcon className="m-auto fill-text-primary-light dark:fill-text-quaternary" />
+          <div>Home</div>
+        </Link>
+        <div className="text-2xl mx-2.5 font-semibold text-text-secondary-light">
+          /
+        </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-primary-light dark: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

layouts/GeneralLayout.tsx

@@ -30,7 +30,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
         <main
           data-custom="restrict-click-outside"
           className={clsx(
-            'flex flex-col justify-between min-h-full px-4 pb-2 lg:ml-[290px] lg:w-[calc(100%-290px)]',
+            'flex flex-col justify-between min-h-full px-4 pb-2 sm:ml-[290px] lg:w-[calc(100%-290px)]',
 
             pathname != '/' && ' transition-color ease-in-out duration-200'
           )}

pages/[category]/index.tsx

@@ -1,56 +1,92 @@
 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/svg/AddIcon.svg'
+import ArrowIcon from 'assets/icons/svg/ArrowIcon.svg'
+import BreadCrumbs from 'components/Breadcrumps'
+import MessageIcon from 'assets/icons/svg/MessageIcon.svg'
+import QuestionMarkIcon from 'assets/icons/svg/question-mark.svg'
+import Button from 'components/Button'
 
 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">
+    <section className="flex min-h-[calc(100vh-165px)] flex-col bg-theme-primary-light dark:bg-inherit">
+      <div className="sm:ml-4 2xl:mx-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}` }]}
+              />
+
+              <a
+                className="flex my-auto gap-x-3"
+                href="https://github.com/rupali-codes/LinksHub/issues/new/choose"
+                target="_blank"
+              >
+                <MessageIcon className="m-auto" />
+                <span className="text-md text-text-quinary hidden md:block">
+                  Give a feedback
+                </span>
+              </a>
             </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 dark:border dark:border-theme-primary dark:border-opacity-8 rounded-xl dark:bg-theme-tertiary bg-white dark:bg-opacity-25 dark:hover:bg-theme-quaternary dark:hover:bg-opacity-25	px-3 py-1 dark:hover:border-opacity-25 hover:text-dark-primary dark:shadow-lg shadow-custom max-md:max-w-[320px] px-4 py-4 group max-w-[320px]"
+                  >
+                    <div>
+                      <div className="dark:text-text-primary text-text-primary-light text-lg capitalize font-medium">
+                        {subcat.name}
+                      </div>
+                      <div className="dark:text-text-tertiary text-text-quinary text-md font-medium w-10/12 h-12 overflow-y-hidden">
+                        Explore {subcat.name} resources for learning and growth.
+                      </div>
+                    </div>
+
+                    <ArrowIcon className="opacity-0 group-hover:opacity-100 duration-300 w-8 stroke-theme-secondary dark:stroke-white" />
+                  </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-medium dark:text-text-primary text-white">
+                      Wanna add something?
+                    </div>
+                    <div
+                      className={`dark:text-text-primary text-white 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,32 @@ 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',
+        'theme-primary-light': '#f4f7fe',
+        'theme-secondary-light': '#BCCBE1',
+        'theme-tertiary-light': '#E1DAF4',
+        'text-primary-light': '#3F3D56',
+        'text-secondary-light': '#DAE0F4',
       },
       screens: {
         xs: '200px',
         folding: '320px',
-        tall: { raw: '(min-height: 800px)' },
       },
+      display: ['group-hover'],
+
       keyframes: {
         'button-press': {
           '0%, 100%': {
@@ -78,16 +89,27 @@ module.exports = {
         'scale-appearance': 'scale-appearance 0.3s ease-in forwards',
         'scale-hide': 'scale-hide 0.3s ease-out forwards',
       },
+      opacity: {
+        8: '0.08',
+      },
+      width: {
+        1038: '1038px',
+      },
+      maxWidth: {
+        1038: '1038px',
+      },
+      fontSize: {
+        '1.5xl': '22px',
+      },
       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)',
+        custom: '0px 0px 12px 0px #E1DAF440',
       },
     },
   },
   plugins: [require('daisyui')],
   darkMode: ['class', '[data-theme="dark"]'],
+  variants: {
+    opacity: ['responsive', 'hover', 'focus', 'group-hover'],
+    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
+  },
 }