update-commit

HimanshuNarware · Jul 2, 2024 · c33e5aa · c33e5aa
1 parent 1895240
commit c33e5aa
Show file tree

Hide file tree

Showing 3 changed files with 177 additions and 1 deletion.
diff --git 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() {
         <Route path="/ethical-hacking" element={<EthicalHacking />} />
         <Route path="/coding-platform" element={<CodingPlatform />} />
         <Route path="/courses-platform" element={<CoursesPlatform />} />
+        <Route path="/collaboration-tools" element={<Collaboration />} />
         {/* Define other routes as needed */}
         <Route path="*" element={<NotFound />} /> {/* 404 route */}
       </Routes>

diff --git 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 (
-    <div  style={{marginTop: "200px"}}>Collaboration</div>
+    <div className="container">
+    <h1 className="title" style={{ marginTop: "60px" }}>
+      Collaboration Tools
+    </h1>
+    <div className="grid-container">
+      {movies.map((movie, index) => (
+        <div key={index} className="grid-item">
+          <img src={movie.image} alt={movie.title} className="movie-image" />
+          <h2 className="movie-title">{movie.title}</h2>
+          <p className="movie-category">{movie.category}</p>
+          <p className="movie-description">{movie.description}</p>
+          <p className="movie-releaseDate">
+            Release Date: {movie.releaseDate}
+          </p>
+        </div>
+      ))}
+    </div>
+  </div>
   )
 }
 

diff --git a/frontend/src/style/Collaboration.css 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;
+  }
+