categories page UI

src/assets/icons/plus-circle.svg

@@ -1,5 +1,5 @@
 <svg id="plus-circle" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21">
-  <path id="Path_6147" data-name="Path 6147" d="M13.781,7.875a.656.656,0,0,1,.656.656v5.25a.656.656,0,0,1-.656.656H8.531a.656.656,0,0,1,0-1.312h4.594V8.531A.656.656,0,0,1,13.781,7.875Z" transform="translate(-3.281 -3.281)" fill="#f1be83" fill-rule="evenodd"/>
-  <path id="Path_6148" data-name="Path 6148" d="M16.875,17.531a.656.656,0,0,1,.656-.656h5.25a.656.656,0,0,1,0,1.313H18.188v4.594a.656.656,0,0,1-1.312,0Z" transform="translate(-7.031 -7.031)" fill="#f1be83" fill-rule="evenodd"/>
-  <path id="Path_6149" data-name="Path 6149" d="M10.5,19.688A9.188,9.188,0,1,0,1.313,10.5,9.187,9.187,0,0,0,10.5,19.688ZM10.5,21A10.5,10.5,0,1,0,0,10.5,10.5,10.5,0,0,0,10.5,21Z" fill="#f1be83" fill-rule="evenodd"/>
+  <path id="Path_6147" data-name="Path 6147" d="M13.781,7.875a.656.656,0,0,1,.656.656v5.25a.656.656,0,0,1-.656.656H8.531a.656.656,0,0,1,0-1.312h4.594V8.531A.656.656,0,0,1,13.781,7.875Z" transform="translate(-3.281 -3.281)" fill-rule="evenodd"/>
+  <path id="Path_6148" data-name="Path 6148" d="M16.875,17.531a.656.656,0,0,1,.656-.656h5.25a.656.656,0,0,1,0,1.313H18.188v4.594a.656.656,0,0,1-1.312,0Z" transform="translate(-7.031 -7.031)" fill-rule="evenodd"/>
+  <path id="Path_6149" data-name="Path 6149" d="M10.5,19.688A9.188,9.188,0,1,0,1.313,10.5,9.187,9.187,0,0,0,10.5,19.688ZM10.5,21A10.5,10.5,0,1,0,0,10.5,10.5,10.5,0,0,0,10.5,21Z" fill-rule="evenodd"/>
 </svg>

src/components/categories/Categories.module.scss

@@ -0,0 +1,193 @@
+.pageHeader {
+    background-color: transparent;
+    text-align: center;
+    padding: 1.5rem 0;
+    position: relative;
+
+    figure {
+        display: block;
+        position: absolute;
+        right: 1rem;
+        top: 1rem;
+
+        img {
+            display: block;
+            width: 4rem;
+            height: 4rem;
+            border-radius: 50%;
+            border: 1px solid var(--creamy-white);
+        }
+    }
+}
+
+.tabHeading {
+    background-color: transparent;
+    position: relative;
+    padding: 3rem 0 8rem;
+    text-align: center;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--teal);
+        border-top-left-radius: 3rem;
+        border-top-right-radius: 3rem;
+    }
+
+    &>* {
+        position: relative;
+    }
+
+    h4 {
+        color: white;
+        font-size: 2.2rem;
+    }
+
+    p {
+        color: white;
+        font-size: 1.4rem;
+    }
+}
+
+.searchHolder {
+    position: relative;
+    
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--creamy-white);
+        border-top-left-radius: 3rem;
+        border-top-right-radius: 3rem;
+    }
+
+    &>* {
+        position: relative;
+    }
+
+    .searchBar {
+        background-color: white;
+        display: flex;
+        border-radius: 3rem;
+        height: 5rem;
+        width: calc(100% - 6rem);
+        margin: -2.5rem auto 0;
+        align-items: center;
+        justify-content: space-between;
+        box-shadow: 0px 5px 30px -20px var(--grey);
+        transform: translateY(-2.5rem);
+    
+        input {
+            height: 100%;
+            border: 0;
+            width: calc(100% - 5rem);
+            background-color: transparent;
+            padding-left: 2rem;
+            font-size: 1.4rem;
+        }
+    
+        svg {
+            width: 5rem;
+            fill: var(--red);
+        }
+    }
+}
+
+.addButton {
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(100% - 4rem);
+    border: 0.2rem dashed var(--orange);
+    border-radius: 3rem;
+    background-color: transparent;
+    height: 5rem;
+    color: var(--orange);
+    cursor: pointer;
+    font-weight: 700;
+
+    svg {
+        width: 2rem;
+        height: 2rem;
+        margin-right: 1rem;
+        fill: var(--orange);
+    }
+}
+
+$block-padding: 2.5rem 2rem;
+
+.Grid {
+    padding: #{$block-padding};
+
+    ul {
+        list-style: none;
+        display: grid;
+        grid-gap: 2rem;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    li {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &:nth-child(1) .icon {
+            background-color: var(--orange);
+        }
+
+        &:nth-child(2) .icon {
+            background-color: var(--blue);
+        }
+
+        &:nth-child(3) .icon {
+            background-color: var(--red);
+        }
+
+        &:nth-child(4) .icon {
+            background-color: var(--teal);
+        }
+    }
+
+    .icon {
+        width: 4.5rem;
+        height: 4.5rem;
+        background-color: var(--grey);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 1rem;
+
+        svg {
+            fill: white;
+            width: 2rem;
+        }
+    }
+
+    .info {
+        width: calc(100% - 5.5rem);
+
+        label, span {
+            display: block;
+        }
+
+        label {
+            font-size: 1.2rem;
+            color: var(--black);
+            font-weight: 700;
+        }
+
+        span {
+            font-size: 1rem;
+            color: var(--grey);
+            font-weight: 500;
+        }
+    }
+}

src/components/categories/Categories.tsx

@@ -1,8 +1,81 @@
 import React from "react";
 import styles from './Categories.module.scss';
+import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
+import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
+import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';
+
+import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
+import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg';
+import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg';
+import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
 
 export const Categories: React.FC = () => {
     return <section className="page">
-        categories
+        <header className={styles.pageHeader}>
+            <LogoIcon />
+
+            <figure>
+                {/* eslint-disable-next-line */}
+                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU" alt="profile-image" />
+            </figure>
+        </header>
+        
+        <header className={styles.tabHeading}>
+            <h4> Categories </h4>
+            <p> 4 Types </p>
+        </header>
+        
+        <section className={styles.searchHolder}>
+            <div className={styles.searchBar}>
+                <input type="text" placeholder={'Search Category'} />
+                <SearchIcon />
+            </div>
+        </section>
+
+        <button className={styles.addButton}>
+            <PlusCircledIcon /> Add Category
+        </button>
+
+
+        <section className={styles.Grid}>            
+            <ul>
+                <li>
+                    <div className={styles.icon}>
+                        <TimeIcon />
+                    </div>
+                    <div className={styles.info}>
+                        <label> Vocabulary </label>
+                        <span> 5 Shelves </span>
+                    </div>
+                </li>
+                <li>
+                    <div className={styles.icon}>
+                        <BookMarkIcon />
+                    </div>
+                    <div className={styles.info}>
+                        <label> Books </label>
+                        <span> 3 Shelves </span>
+                    </div>                    
+                </li>
+                <li>
+                    <div className={styles.icon}>
+                        <PersonSpeakerIcon />
+                    </div>
+                    <div className={styles.info}>
+                        <label> IELTS </label>
+                        <span> 5 Shelves </span>
+                    </div>                    
+                </li>
+                <li>
+                    <div className={styles.icon}>
+                        <BrainIcon />
+                    </div>
+                    <div className={styles.info}>
+                        <label> GRE </label>
+                        <span> 2 Shelves </span>
+                    </div>                    
+                </li>
+            </ul>
+        </section>
     </section>
 }

src/components/home/Home.tsx

@@ -16,7 +16,7 @@ import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-spe
 import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
 import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.svg';
 
-import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import { CircularProgressbar } from 'react-circular-progressbar';
 
 
 export const Home: React.FC = () => {
@@ -27,8 +27,7 @@ export const Home: React.FC = () => {
         </header>
 
         <section className={styles.upfold}>
-            <div className={styles.profileImage}>
-                {/* eslint-disable-next-line */}
+            <div className={styles.profileImage}>                
                 <CircularProgressbar value={70} strokeWidth={4} 
                     styles={{
                         path: {
@@ -40,6 +39,7 @@ export const Home: React.FC = () => {
                             strokeLinecap: 'round',
                         }}
                     } />
+                {/* eslint-disable-next-line */}
                 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU" alt="profile-image" />
                 <InternBadge />
             </div>