Merge pull request #32 from UjjwalSaini07/UjjwalSaini07/patch-11

Adding Chronicle Section and Install required Libraries or modules

package.json

@@ -15,8 +15,10 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.2",
     "react-snowfall": "^1.2.1",
     "react-tsparticles": "^2.12.2",
+    "slick-carousel": "^1.8.1",
     "tsparticles-engine": "^2.12.0",
     "tsparticles-preset-snow": "^2.12.0",
     "web-vitals": "^2.1.4"

src/App.js

@@ -9,6 +9,7 @@ import Chapters from "./components/Chapters";
 import "./App.css";
 import Resources from "./components/Resources";
 import AboutUs from "./components/AboutUs";
+import Chronicle from './components/Chronicle';
 import AppLayout from "./components/AppLayout";
 import Preloader from "./components/Preloader.js";
 import 'aos/dist/aos.css';
@@ -32,6 +33,7 @@ const App = () => {
             <Route path="/api/resources" element={<Resources />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/api/aboutus" element={<AboutUs />} />
+            <Route path='/chronicle' element={<Chronicle/>}/>
           </Route>
           <Route path="*" element={<h1>404 Not Found</h1>} />
         </Routes>

src/components/Navbar.js

@@ -43,6 +43,14 @@ const Navbar = () => {
                             Resources
                         </Link>
                     </li>
+                    <li>
+                        <Link
+                            to="/api/chronicle"
+                            className="text-[1rem] text-gray-900 font-bold text-decoration-none hover:text-blue-400"
+                        >
+                            Chronicles
+                        </Link>
+                    </li>
                     <li>
                         <Link
                             to="/api/aboutus"
@@ -95,6 +103,13 @@ const Navbar = () => {
                     >
                         Resources
                     </Link>
+                    <Link
+                        to="/api/chronicle"
+                        className="text-[1.5rem] text-white font-bold hover:text-yellow-300 transition duration-300"
+                        onClick={() => setMenuOpen(false)}
+                    >
+                        Chronicles
+                    </Link>
                     <Link
                         to="/api/aboutus"
                         className="text-[1.5rem] text-white font-bold hover:text-yellow-300 transition duration-300"