Skip to content

Commit

Permalink
product-commit
Browse files Browse the repository at this point in the history
  • Loading branch information
meetarora10 committed Jul 1, 2024
1 parent 1895240 commit 9e1bac2
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 2 deletions.
4 changes: 3 additions & 1 deletion frontend/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import Faq from "./Component/Faq";
import CodingPlatform from "./pages/CodingPlatform"; // Corrected import
import CoursesPlatform from "./pages/CoursesPlatform";
import TrailingCursor from "./Component/TrailingCursor/TrailingCursor";
import Productivity from "./pages/Productivity";

function App() {
const [searchQuery, setSearchQuery] = useState("");
Expand Down Expand Up @@ -58,8 +59,9 @@ function App() {
<Route path="/ethical-hacking" element={<EthicalHacking />} />
<Route path="/coding-platform" element={<CodingPlatform />} />
<Route path="/courses-platform" element={<CoursesPlatform />} />
<Route path="/productivity-tools" element={<Productivity />} />
{/* Define other routes as needed */}
<Route path="*" element={<NotFound />} /> {/* 404 route */}
{/* <Route path="*" element={<NotFound />} /> 404 route */}
</Routes>
<BackToTopButton />
<Footer />
Expand Down
103 changes: 102 additions & 1 deletion frontend/src/pages/Productivity.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,109 @@
import React from 'react'
import '../style/Productivity.css'
const products = [
{
title: "Asana",
category: "Productivity Tool",
description:
"Asana is a versatile project management productivity tool known for its user-friendly interface.",
image:
"https://assets.asana.biz/m/7342a96f034ee491/original/trademark-logo-lockup-horizontal.png",
releaseDate: "2008-09-01",
},
{
title: "Slack",
category: "Productivity Tool",
description:
"Slack is a productivity tool that helps in proper coordination and communication amongst team members.",
image:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVMFeL3wuZcR9N0bMhYVDE0mFYd1UR-JYitw&s",
releaseDate: "2020-09-05",
},
{
title: "Trello",
category: "Productivity Tool",
description:
"Trello is a well-regarded project management productivity tool that visualizes workflows, making project collaboration smooth and satisfying for support",
image:
"https://i.pcmag.com/imagery/reviews/04C2m2ye5UfXyb5x5WWIsZ4-19.fit_lim.size_1050x591.v1625759628.png",
releaseDate: "2011-10-01",
},
{
title: "Zapier",
category: "Productivity Tool",
description:
"Zapier is a productivity tool that automates workflows by linking different apps and services without any coding. ",
image:
"https://i.pcmag.com/imagery/reviews/05fqDQUuRXgFxdx8qWP0fkY-5.fit_lim.size_1200x630.v1569471903.png",
releaseDate: "2024-09-15",
},
{
title: "Evernote",
category: "Productivity Tool",
description:
"Evernote is one of the versatile productivity tools that provides a centralized platform for comprehensive note-taking, document organization.",
image:
"https://i.pcmag.com/imagery/reviews/00jhTm0Wm3HrXnMKoq2bcjU-18.fit_lim.size_1050x591.v1602169894.png",
releaseDate: "2024-09-20",
},
{
title: "Todoist",
category: "Productivity Tool",
description:
"Todoist is a top productivity app to simplify and organize the workday. ",
image:
"https://sm.pcmag.com/pcmag_au/review/t/todoist/todoist_b6jd.jpg",
releaseDate: "2024-10-10",
},
{
title: "Toggl",
category: "Productivity Tool",
description:
"Toggl Track is a reliable productivity software for tracking employee timesheets. ",
image:
"https://raw.githubusercontent.com/toggl-open-source/toggldesktop/gh-pages/assets/toggl-track-wide.png",
releaseDate: "2024-11-01",
},
{
title: "Harvest",
category: "Productivity Tool",
description:
"Harvest is a productivity tool for freelancers and project management teams.",
image:
"https://logos-world.net/wp-content/uploads/2022/04/Harvest-New-Logo.png",
releaseDate: "2006-11-15",
},
{
title: "ProofHub",
category: "Productivity Tool",
description:
"ProofHub is a productivity software that revolutionizes project management and team collaboration.",
image:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQE0WrVDo0kToN6N-lkYy1ouoOzmxjex4Y5PA&s",
releaseDate: "2024-12-01",
},
];

const Productivity = () => {
return (
<div style={{marginTop: "200px"}}>Productivity</div>
<div className="container">
<h1 className="title" style={{ marginTop: "60px" }}>
Productivity Tools
</h1>
<div className="grid-container">
{products.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>
)
}

Expand Down
72 changes: 72 additions & 0 deletions frontend/src/style/Productivity.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
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;
}

0 comments on commit 9e1bac2

Please sign in to comment.