news section with carousel component

client/package.json

@@ -79,7 +79,7 @@
 		"prettier": "2.7.1",
 		"prettier-eslint-cli": "^6.0.1",
 		"rollup-plugin-visualizer": "^5.8.3",
-		"tailwindcss": "^3.1.8",
+		"tailwindcss": "^3.2.3",
 		"terser": "^5.15.1",
 		"vite": "^3.1.8"
 	}

client/src/App.jsx

@@ -2,6 +2,7 @@ import { lazy, Suspense } from "react";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
 import NavigationBar from "./components/navbar/NavigationBar";
+import { data } from "./Helper/NewsData";
 
 import { ErrorState, LoadingState } from "./components/states";
 
@@ -10,6 +11,7 @@ const Activity = lazy(() => import("./pages/activity/Activity"));
 const Events = lazy(() => import("./pages/events/Events"));
 const Projects = lazy(() => import("./pages/projects/Projects"));
 const Resources = lazy(() => import("./pages/resources/Resources"));
+const News = lazy(() => import("./pages/news/News"))
 
 function App() {
 	return (
@@ -18,11 +20,12 @@ function App() {
 			<ErrorBoundary FallbackComponent={ErrorState}>
 				<Suspense fallback={<LoadingState />}>
 					<Routes>
-						<Route path="/homepage" element={<Homepage />} />
+						<Route path="/homepage" element={<Homepage data={data} />} />
 						<Route path="/activity" element={<Activity />} />
 						<Route path="/activity/events" element={<Events />} />
 						<Route path="/activity/projects" element={<Projects />} />
 						<Route path="/resources" element={<Resources />} />
+						<Route path="/news/:year/:title" element={<News data={data} />} />
 						<Route path="*" element={<Navigate to="/homepage" replace />} />
 					</Routes>
 				</Suspense>

client/src/Helper/NewsData.jsx

@@ -0,0 +1,50 @@
+
+export const data = [
+    {
+        title: "(Title) Prof. X started a new project",
+        month: "September",
+        day: 1,
+        year: 2022,
+        description: "(Brief description) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd",
+        links: [
+            "https://en.wikipedia.org/wiki/Computer_science",
+            "https://www.britannica.com/science/computer-science",
+            "https://www.cs.ucla.edu/",
+        ],
+    },
+    {
+        title: "(Title) Prof. X started a new project",
+        month: "July",
+        day: 7,
+        year: 2022,
+        description:
+            "(Brief description) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd",
+        links: [],
+    },
+    {
+        title: "AI",
+        month: "July",
+        day: 7,
+        year: 2022,
+        description: "(Brief description) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd",
+        links: [],
+    },
+    {
+        title: "Graphics Programming",
+        month: "December",
+        day: 6,
+        year: 2022,
+        description:
+            "(Brief description) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd",
+        links: [],
+    },
+    {
+        title: "Game Development",
+        month: "August",
+        day: 12,
+        year: 2022,
+        description: "(Brief description) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore asd",
+        links: [],
+    },
+];
+export default data;