added beginning of categories page

theme-costume-app/src/CategoriesPage.css

-/* CategoriesPage.css */
 .categories-container {
-    padding: 20px;
+  padding: 20px;
+}
+
+.categories-title {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.category-item {
+  font-size: 18px;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer; /* Add cursor pointer for better UX */
+  transition: transform 0.4s, box-shadow 0.4s; /* Add transition for smoothness */
+}
+
+/* Add the hover effect */
+.category-item:hover {
+  animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+/* Define the shadow-drop-2-center animation */
+@keyframes shadow-drop-2-center {
+  0% {
+    transform: translateZ(0);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
   }
-  
-  .categories-title {
-    font-size: 24px;
-    margin-bottom: 20px;
+  100% {
+    transform: translateZ(50px);
+    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
   }
-  
-  .category-item {
-    font-size: 18px;
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-  
\ No newline at end of file
+}

theme-costume-app/src/CategoriesPage.js

 import React from 'react';
+import './CategoriesPage.css'; // Import the CSS file
 
 const categories = [
   { name: 'Men', link: '/category/men' },
   { name: 'Women', link: '/category/women' },
   { name: 'Kids', link: '/category/kids' },
+  { name: 'Accessories', link: '/category/accessories' },
+  { name: 'Sale', link: '/category/sale' },
 ];
 
 const CategoriesPage = () => {
   return (
-    <div style={{ padding: '20px' }}>
-      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Categories</h1>
+    <div className="categories-container">
+      <h1 className="categories-title">Categories</h1>
       <div>
         {categories.map((category, index) => (
           <div 
             key={index} 
-            style={{ 
-              fontSize: '18px', 
-              padding: '10px', 
-              marginBottom: '10px', 
-              border: '1px solid #ccc', 
-              borderRadius: '4px',
-              cursor: 'pointer' // Add cursor pointer for better UX
-            }}
-            onClick={() => { // Navigate to the category link on click
+            className="category-item"
+            onClick={() => { 
               window.location.href = category.link;
             }}
           >