Feat: Add new design for search results page(no results found)

components/Button/Button.tsx

@@ -20,7 +20,7 @@ const Button: FC<Props> = ({
   className,
 }) => {
   const styles = {
-    primary: '', // @todo: add styles when using these button types in ResourcesCards
+    primary: 'bg-primary-purple hover:bg-primary-purple/80 text-white rounded-[10px] duration-500', // @todo: add styles when using these button types in ResourcesCards
     secondary: '',
     pale: 'bg-slate-100 hover:bg-violet-50 dark:bg-white dark:bg-opacity-10 dark:hover:bg-opacity-20 text-slate-500 dark:text-violet-50',
     text: 'text-slate-400 dark:text-gray-400 !gap-4',

components/NotFound/NotFound.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import { IoIosArrowRoundForward } from "react-icons/io";
+import Button from 'components/Button';
+import Search from "assets/icons/svg/search-icon.svg"
+
+const NotFound: FC = () => {
+  return (
+    <div className="pt-6 md:p-0 text-xl w-fit m-auto h-[calc(100vh-450px)] md:h-[calc(100vh-270px)]">
+      <h1 className='text-[32px] font-[600] dark:bg-text-light-silver mb-[8px]'>Resources</h1>
+      <span className='text-[16px] md:text-[18px]'>We&apos;ve curated a wealth of resources just for you. Go ahead and explore at your own pace.</span>
+
+      <div className='flex flex-col justify-center items-center gap-3 h-full'>
+        <Search />
+        <span className='text-center text-[16px] md:text-[18px]'>
+          Couldn&apos;t find what you&apos;re looking for? Feel free to seek <br className='hidden md:block' />
+          assistance in our Discord community.
+        </span>
+          <Button
+            label='Join Discord'
+            icon={<IoIosArrowRoundForward />}
+            variant='primary'
+            className='flex-row-reverse text-[16px]'
+            link='https://discord.com/invite/NvK67YnJX5'
+          />
+      </div>
+    </div>
+  )
+}
+
+export default NotFound

pages/search.tsx

@@ -4,10 +4,10 @@ import { useEffect, memo, useMemo } from 'react'
 
 import CardsList from 'components/Cards/CardsList'
 import { TopBar } from 'components/TopBar/TopBar'
-import ComingSoon from 'components/NewIssue/NewIssue'
 import { useResults } from 'hooks/ResultsContext'
 
 import { database } from 'database/data'
+import NotFound from 'components/NotFound/NotFound'
 
 const MemoizedCardsList = memo(CardsList)
 
@@ -98,7 +98,7 @@ const Search = () => {
         {filteredCardsList.length > 0 ? (
           <MemoizedCardsList cards={filteredCardsList} />
         ) : (
-          <ComingSoon />
+          <NotFound />
         )}
       </div>
     </>

tailwind.config.js

@@ -11,12 +11,18 @@ module.exports = {
         primary: '#714EFF',
         'theme-primary': '#a78bfa',
         'theme-secondary': '#8b5cf6',
-        'light-primary': '#f5f3ff',
         dark: '#0f172a',
         'dark-primary': '#101623',
         'gray-text': '#9ca3af',
         'text-primary': '#d1d5db',
         'text-secondary': '#4b5563',
+        light: {
+          primary: '#f5f3ff',
+          silver: '#EDEDED',
+        },
+        primary: {
+          purple: '#714EFF',
+        },
       },
       screens: {
         xs: '200px',