diff --git a/frontend/src/App.js b/frontend/src/App.js
index b9e836c9..5f87e24e 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -28,6 +28,7 @@ import FrontendTools from "./pages/FrontendTools";
import Faq from "./Component/Faq";
import CodingPlatform from "./pages/CodingPlatform"; // Corrected import
import CoursesPlatform from "./pages/CoursesPlatform";
+import Collaboration from "./pages/Collaboration";
import TrailingCursor from "./Component/TrailingCursor/TrailingCursor";
function App() {
@@ -58,6 +59,7 @@ function App() {
} />
} />
} />
+ } />
{/* Define other routes as needed */}
} /> {/* 404 route */}
diff --git a/frontend/src/pages/Collaboration.jsx b/frontend/src/pages/Collaboration.jsx
index 77bfe021..43694d39 100644
--- a/frontend/src/pages/Collaboration.jsx
+++ b/frontend/src/pages/Collaboration.jsx
@@ -1,8 +1,109 @@
import React from 'react'
+import '../style/Collaboration.css'
+const movies = [
+ {
+ title: "Google Drive",
+ category: "Collaboration Tools",
+ description:
+ "Google Drive is a cloud-based storage platform that allows users to store, share, and collaborate on files and documents online.",
+ image:
+ "https://mailmeteor.com/logos/assets/PNG/Google_Drive_Logo_512px.png",
+ releaseDate: "2012-04-18",
+ },
+ {
+ title: "Airtable",
+ category: "Collaboration Tools",
+ description:
+ "Airtable is a collaborative work-management tool that uses relational databases at its core.",
+ image:
+ "https://logowik.com/content/uploads/images/airtable3348.jpg",
+ releaseDate: "2012-09-15",
+ },
+ {
+ title: "Dropbox Paper",
+ category: "Collaboration Tools",
+ description:
+ "Dropbox was one of the first virtual collaboration tools for file sharing and cloud storage, and it now boasts over 700 million registered users. ",
+ image:
+ "https://play-lh.googleusercontent.com/yJlI8MRoj7PHDe0OAwpj6DWtZzOsgEm7oPJEIrZepJA9ZFndK5oSbyCTUDq05H7aRg",
+ releaseDate: "2015-09-20",
+ },
+ {
+ title: "Google Chat",
+ category: "Collaboration Tools",
+ description:
+ "Google Chat is a cloud-based collaborative productivity tool for productive teams that offers real-time messaging, video chat, and email in one place .",
+ image:
+ "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRSRZXU6U-qFytvbCXnWlaZ59ZMIDa_w5SAtJy_o1539tJ12Kkk",
+ releaseDate: "2024-10-10",
+ },
+ {
+ title: "Zoom",
+ category: "Collaboration Tools",
+ description:
+ " Zoom provide an excellent voice and video service for virtual communication",
+ image:
+ "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaps0VLCtNGDh-nbDAldJZFvqn6VIT-h-jLp2MYfao4OGRZxa9",
+ releaseDate: "2024-11-01",
+ },
+ {
+ title: "Microsoft Teams",
+ category: "Collaboration Tools",
+ description:
+ "Microsoft Teams is a team collaboration application developed by Microsoft,offering workspace chat and video conferencing, file storage, and integration of proprietary and third-party applications and services.",
+ image:
+ "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTThN_hvgYRjH2wN8IHwtUSEGOBMZSgGziCNBncclLQn7lFb_IW",
+ releaseDate: "2024-11-15",
+ },
+ {
+ title: "Canva",
+ category: "Collaboration Tools",
+ description:
+ "Canva is a web-based design online collaboration tool that allows users to create stunning graphics, presentations, posters, and other visual content. ",
+ image:
+ "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnN19E18xtM23VtnQAxytEgzdujZ3XKCtnFrfzdXp-tBn1TKKJ",
+ releaseDate: "2024-09-05",
+ },
+ {
+ title: "Invision",
+ category: "Collaboration Tools",
+ description:
+ "Invision is among the top collaborative productivity applications that help teams to stay productive by streamlining the design process.",
+ image:
+ "https://rm-media.nyc3.cdn.digitaloceanspaces.com/wp-content/uploads/sites/4/2020/08/InVision-App-logo.png",
+ releaseDate: "2024-09-01",
+ },
+ {
+ title: "Miro",
+ category: "Collaboration Tools",
+ description:
+ "Miro is a visual collaboration tool that helps teams plan projects, run meetings, and brainstorm. ",
+ image:
+ "https://logowik.com/content/uploads/images/miro3962.jpg",
+ releaseDate: "2024-10-01",
+ },
+];
const Collaboration = () => {
return (
-
Collaboration
+
+
+ Collaboration Tools
+
+
+ {movies.map((movie, index) => (
+
+
![{movie.title}]({movie.image})
+
{movie.title}
+
{movie.category}
+
{movie.description}
+
+ Release Date: {movie.releaseDate}
+
+
+ ))}
+
+
)
}
diff --git a/frontend/src/style/Collaboration.css b/frontend/src/style/Collaboration.css
new file mode 100644
index 00000000..3864fd38
--- /dev/null
+++ b/frontend/src/style/Collaboration.css
@@ -0,0 +1,73 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f0f0f0;
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+
+ .title {
+ text-align: center;
+ margin-bottom: 40px;
+ font-size: 2.5rem;
+ color: #333;
+ }
+
+ .grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 20px;
+ }
+
+ .grid-item {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+ }
+
+ .grid-item:hover {
+ transform: translateY(-10px);
+ }
+
+ .movie-image {
+ width: 100%;
+ height: auto;
+ border-radius: 8px;
+ }
+
+ .movie-title {
+ font-size: 1.5rem;
+ color: #007bff;
+ margin-top: 15px;
+ }
+
+ .movie-category {
+ font-size: 1rem;
+ color: #555;
+ }
+
+ .movie-duration {
+ font-size: 0.9rem;
+ color: #888;
+ margin-bottom: 10px;
+ }
+
+ .movie-description {
+ font-size: 1rem;
+ color: #555;
+ }
+
+ .movie-director,
+ .movie-releaseDate,
+ .movie-price {
+ font-size: 1rem;
+ color: #333;
+ }
+
\ No newline at end of file