├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── App.jsx
├── Components
│ ├── Contact
│ │ ├── Contact.css
│ │ └── Contact.jsx
│ ├── Features
│ │ ├── Features.css
│ │ └── Features.jsx
│ ├── HeroSection
│ │ ├── HeroSection.css
│ │ └── HeroSection.jsx
│ ├── Join us
│ │ ├── Joinus.jsx
│ │ └── join.css
│ ├── Pricing
│ │ ├── Pricing.css
│ │ └── Pricing.jsx
│ ├── textsec
│ │ ├── Textsec.jsx
│ │ └── textsection.css
│ ├── textsection
│ │ ├── Textsection.jsx
│ │ └── textsection.css
│ └── titlesection
│ │ ├── Titlesection.jsx
│ │ └── titlesection.css
├── Navbar + Footer
│ ├── Navbar
│ │ ├── Navbar.css
│ │ └── Navbar.jsx
│ └── footer
│ │ ├── Footer.css
│ │ └── Footer.jsx
├── Signuppage
│ ├── Login.css
│ └── Login.jsx
├── assets
│ ├── bg-image-block.svg
│ ├── bg-tilt.png
│ ├── bg-tilt.svg
│ ├── favcon.png
│ ├── favicon.svg
│ ├── gif.gif
│ ├── graph.svg
│ ├── logo.svg
│ ├── react.svg
│ └── tracking.svg
├── index.css
└── main.jsx
├── tailwind.config.js
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Collabsy
3 |
4 | Collabsy is a comprehensive project management and team collaboration tool designed to streamline team tasks, enhance communication, and simplify progress tracking—all in one intuitive platform. With a user-friendly admin dashboard, Collabsy empowers teams to achieve more with less effort. Transform your team collaboration experience and elevate productivity today
5 |
6 | -Check out the live site here: https://colllabsy.netlify.app/
7 |
8 |
9 |
10 | ## Screenshots
11 |
12 | [](https://postimg.cc/3WvPdyRR)
13 |
14 |
15 | ## Features
16 |
17 | - **Intuitive Admin Dashboard**: A user-friendly interface that allows you to manage projects and team activities efficiently.
18 | - **Task Management**: Easily create, assign, and track tasks to ensure deadlines are met and projects stay on schedule.
19 | - **Team Collaboration**: Enhance communication among team members with integrated chat and file-sharing capabilities.
20 | - **Progress Tracking**: Monitor project status in real-time to keep everyone aligned and informed.
21 | - **Customizable Workflows**: Tailor workflows to fit your team's needs, making project management more effective.
22 | - **Responsive Design**: Access Collabsy from any device, ensuring you can manage your projects on the go.
23 | - **Demo Mode**: Try out the platform before committing, with a fully functional demo showcasing key features.
24 | ## Tech Stack
25 |
26 | - **React**: A powerful JavaScript library for building user interfaces, enabling a dynamic and responsive experience.
27 | - **Tailwind CSS**: A utility-first CSS framework that allows for rapid design and development of custom user interfaces.
28 | - **Pure CSS**: For additional styling and customization, ensuring a polished and visually appealing layout.
29 | ## How It Works
30 |
31 | 1. **User Registration and Login**: New users can easily sign up and create an account. Existing users can log in to access their personalized dashboard.
32 |
33 | 2. **Dashboard Overview**: Upon logging in, users are greeted with an intuitive dashboard that provides a snapshot of ongoing projects, tasks, and team activity.
34 |
35 | 3. **Create and Manage Projects**: Users can create new projects, set deadlines, and assign tasks to team members directly from the dashboard.
36 |
37 | 4. **Collaborate with Team Members**: Team members can communicate through integrated chat features and share files, ensuring seamless collaboration.
38 |
39 | 5. **Track Progress**: Users can monitor project progress with visual indicators, making it easy to see which tasks are completed and which are still in progress.
40 |
41 | 6. **Adjust Workflows**: Teams can customize workflows and processes to better fit their unique needs, enhancing overall productivity.
42 |
43 | 7. **Demo Mode**: Users can explore a demo version of Collabsy to familiarize themselves with its features before committing to a full account
44 |
45 | ## Getting Started
46 |
47 | 1. Clone the repository.
48 |
49 | 2. Install dependencies:
50 |
51 | ```bash
52 | npm install
53 | ```
54 |
55 | 3. Run the development server:
56 |
57 | ```bash
58 | npm start
59 | ```
60 | ## Contributing
61 |
62 | Feel free to submit issues or pull requests to contribute to the development of Admin Dashboard. Let's make it even better!
63 |
64 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import globals from 'globals'
3 | import react from 'eslint-plugin-react'
4 | import reactHooks from 'eslint-plugin-react-hooks'
5 | import reactRefresh from 'eslint-plugin-react-refresh'
6 |
7 | export default [
8 | { ignores: ['dist'] },
9 | {
10 | files: ['**/*.{js,jsx}'],
11 | languageOptions: {
12 | ecmaVersion: 2020,
13 | globals: globals.browser,
14 | parserOptions: {
15 | ecmaVersion: 'latest',
16 | ecmaFeatures: { jsx: true },
17 | sourceType: 'module',
18 | },
19 | },
20 | settings: { react: { version: '18.3' } },
21 | plugins: {
22 | react,
23 | 'react-hooks': reactHooks,
24 | 'react-refresh': reactRefresh,
25 | },
26 | rules: {
27 | ...js.configs.recommended.rules,
28 | ...react.configs.recommended.rules,
29 | ...react.configs['jsx-runtime'].rules,
30 | ...reactHooks.configs.recommended.rules,
31 | 'react/jsx-no-target-blank': 'off',
32 | 'react-refresh/only-export-components': [
33 | 'warn',
34 | { allowConstantExport: true },
35 | ],
36 | },
37 | },
38 | ]
39 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Collabsy
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "collabsy",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "collabsy": "file:",
14 | "react": "^18.3.1",
15 | "react-dom": "^18.3.1",
16 | "react-router-dom": "^6.27.0"
17 | },
18 | "devDependencies": {
19 | "@eslint/js": "^9.11.1",
20 | "@types/react": "^18.3.10",
21 | "@types/react-dom": "^18.3.0",
22 | "@vitejs/plugin-react": "^4.3.2",
23 | "autoprefixer": "^10.4.20",
24 | "eslint": "^9.11.1",
25 | "eslint-plugin-react": "^7.37.0",
26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0",
27 | "eslint-plugin-react-refresh": "^0.4.12",
28 | "globals": "^15.9.0",
29 | "postcss": "^8.4.47",
30 | "tailwindcss": "^3.4.14",
31 | "vite": "^5.4.8"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Navbar from "./Navbar + Footer/Navbar/Navbar";
3 | import HeroSection from "./Components/HeroSection/HeroSection";
4 | import Titlesection from "./Components/titlesection/titlesection";
5 | import Features from "./Components/Features/Features";
6 | import Pricing from "./Components/Pricing/Pricing";
7 | import Contact from "./Components/Contact/Contact";
8 | import Joinus from "./Components/Join us/Joinus";
9 | import Footer from "./Navbar + Footer/footer/Footer";
10 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; // Correct this line
11 | import Login from "./Signuppage/Login";
12 |
13 | const App = () => {
14 | return (
15 | {/* This is the correct usage */}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | } />
27 |
28 |
29 |
10 | {/* New wrapper for Titlesection and Textsec */}
11 |
12 |
13 |
14 |
15 |
16 |
17 |
55 |
56 | {/* Uncomment if needed */}
57 |
58 |
59 |
12 |
13 |
14 |
15 |
19 |
20 |
21 |
22 |
Real-Time Data Charts
23 |
Visualize project metrics at a glance and make informed decisions quickly.
24 |
25 |
26 |
27 |
Project Tracking
28 |
Monitor progress and deadlines to keep your team on track.
29 |
30 |
31 |
9 |
10 |
11 |
12 | Transform Your
13 | Team Collaborationly
14 |
15 |
16 | Collabsy streamlines team tasks, communication, and progress
17 | tracking—all in one place. Achieve more with less effort!
18 |
19 |
20 |
34 |
35 |
8 |
9 |
10 | Let’s Join With Us
11 |
12 |
13 | By Joining and enjoying our panel, you can make the
job you do
14 | as a recruiter easier
15 |
16 |
19 |
20 | {/* This div will be hidden on sm and md, shown on lg and larger */}
21 |
22 |
23 |
24 |
12 |
13 |
17 |
18 |
19 |
20 | {/* Pricing toggle */}
21 |
22 |
23 | {/* The background needs to be placed outside of the slider */}
24 |
25 |
28 |
29 |
36 |
43 |
44 |
45 |
46 |
47 | {/* Pricing Tab 1 */}
48 |
49 |
50 |
51 |
Essential
52 |
53 | $
54 | {isAnnual ? '29' : '35'}
55 | /mo
56 |
57 |
58 | There are many variations available, but the majority have suffered.
59 |
60 |
61 | Purchase Plan
62 |
63 |
64 |
Includes:
65 |
66 | - Unlimited placeholder texts
67 | - Consectetur adipiscing elit
68 | - Excepteur sint occaecat cupidatat
69 | - Officia deserunt mollit anim
70 |
71 |
72 |
73 |
74 | {/* Pricing Tab 2 */}
75 |
76 |
77 |
Most Popular
78 |
79 |
Perform
80 |
81 | $
82 | {isAnnual ? '49' : '55'}
83 | /mo
84 |
85 |
86 | There are many variations available, but the majority have suffered.
87 |
88 |
89 | Purchase Plan
90 |
91 |
92 |
Includes:
93 |
94 | - Unlimited placeholder texts
95 | - Consectetur adipiscing elit
96 | - Excepteur sint occaecat cupidatat
97 | - Predefined chunks as necessary
98 |
99 |
100 |
101 |
102 | {/* Pricing Tab 3 */}
103 |
104 |
105 |
106 |
Enterprise
107 |
108 | $
109 | {isAnnual ? '79' : '85'}
110 | /mo
111 |
112 |
113 | There are many variations available, but the majority have suffered.
114 |
115 |
116 | Purchase Plan
117 |
118 |
119 |
Includes:
120 |
121 | - Unlimited placeholder texts
122 | - Consectetur adipiscing elit
123 | - Excepteur sint occaecat cupidatat
124 | - Free from repetition
125 |
126 |
127 |
128 |
129 |
7 |
8 |
{subtitle}
9 |
10 |
7 |
8 | {title}
9 | {subtitle}
10 |
11 |
12 | );
13 | };
14 |
15 | export default Textsection;
--------------------------------------------------------------------------------
/src/Components/textsection/textsection.css:
--------------------------------------------------------------------------------
1 | .text-1 {
2 | font-size: 35px;
3 | margin: 0;
4 | margin-top: 20px;
5 | font-weight: 700;
6 | text-align: center;
7 | }
8 | h1 {
9 | color: #000;
10 |
11 | }
12 | .new-text{
13 | font-size: 23px;
14 | }
15 |
16 | span {
17 | margin: 0;
18 | background: linear-gradient(180deg, #cab4ff 20%, #4d16ff 80%, #fff);
19 | -webkit-background-clip: text;
20 | -webkit-text-fill-color: transparent;
21 | }
22 |
23 |
24 |
25 |
26 |
27 | @media (max-width: 600px) {
28 | .text-1{
29 | font-size: 20px;
30 | }
31 | }
32 |
33 | @media (max-width: 515px) {
34 | .new-text{
35 | font-size: 20px;
36 | }
37 |
38 | }
39 |
40 |
41 |
42 | @media (max-width: 421px) {
43 | .new-text{
44 | font-size: 11px;
45 | }
46 | }
--------------------------------------------------------------------------------
/src/Components/titlesection/Titlesection.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import "./titlesection.css";
3 |
4 | const Titlesection = ({ text, backgroundColor = "#5e2bff", textColor = "#fff" }) => {
5 | return (
6 |
10 | {text}
11 |
12 | );
13 | };
14 |
15 | export default Titlesection;
16 |
--------------------------------------------------------------------------------
/src/Components/titlesection/titlesection.css:
--------------------------------------------------------------------------------
1 | .button {
2 | display: inline-block;
3 | padding: 6px 37px;
4 | background-color: #5e2bff; /* Default color, overridden by inline styles */
5 | color: #fff; /* Default text color, overridden by inline styles */
6 | border-radius: 74px;
7 | text-align: center;
8 | font-size: 13px;
9 | }
10 |
11 | /* Media queries for responsive design */
12 | @media (max-width: 768px) {
13 | .button {
14 | padding: 4px 20px; /* Reduce padding on smaller screens */
15 | font-size: 11px; /* Adjust font size */
16 | }
17 | }
18 |
19 | @media (max-width: 480px) {
20 | .button {
21 | padding: 2px 20px; /* Further reduce padding */
22 | font-size: 10px; /* Adjust font size */
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/Navbar + Footer/Navbar/Navbar.css:
--------------------------------------------------------------------------------
1 | .Navbar {
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 | z-index: 1000;
6 | margin-right: 110px;
7 | margin-left: 110px;
8 | background-color: rgb(255, 255, 255);
9 | padding: 0.5px 4%;
10 | padding-top: 15px;
11 | padding-bottom: 15px;
12 | position: sticky;
13 | top: 0; /* Ensures it sticks to the top */
14 | transition: background-color 0.3s ease, box-shadow 0.3s ease;
15 | }
16 |
17 | .logo {
18 | width: max(10vw, 130px);
19 | align-items: center;
20 | cursor: pointer;
21 | }
22 |
23 | .nav-list {
24 | display: flex;
25 | align-items: center;
26 | gap: 35px;
27 | flex: 1;
28 | justify-content: center; /* This centers the navigation list */
29 | text-decoration: none;
30 | }
31 |
32 | .nav-list li {
33 | list-style: none;
34 | cursor: pointer;
35 | font-family: var(--font-poppins);
36 | transition: all ease-in-out 0.2s;
37 | text-decoration: none;
38 | }
39 | .nav-list li a{
40 | text-decoration: none;
41 | }
42 |
43 | .nav-right {
44 | display: flex;
45 | align-items: center;
46 | gap: 20px;
47 | }
48 |
49 | .nav-right li {
50 | list-style: none;
51 | font-family: var(--font-poppins);
52 | color: #000;
53 | font-size: 17px;
54 | cursor: pointer;
55 | transition: all ease-in-out 0.2s;
56 |
57 | }
58 | .nav-right a{
59 | text-decoration: none;
60 | }
61 | .nav-right button {
62 | background-color: var(--button-background);
63 | width: 120px;
64 | height: 40px;
65 | color: white;
66 | border-radius: 54px;
67 | font-size: 16px;
68 | display: inline-block;
69 | border: none;
70 | cursor: pointer;
71 | transition: all ease-in-out 0.2s;
72 | }
73 |
74 | /* Hover Effects */
75 | .nav-right button:hover {
76 | background-color: #4c22ac;
77 | }
78 |
79 | .nav-list li:hover {
80 | color: var(--button-background);
81 | }
82 |
83 | .nav-right li:hover {
84 | color: rgb(121, 121, 121);
85 | }
86 |
87 | /* For tablets and smaller devices */
88 | @media (max-width: 938px) {
89 | .Navbar {
90 | margin-right: 50px;
91 | margin-left: 50px;
92 | padding: 0.5px 2%;
93 | padding-top: 10px;
94 | }
95 | .nav-list {
96 | display: none;
97 | }
98 | }
99 |
100 | /* For mobile devices */
101 | @media (max-width: 480px) {
102 | .Navbar {
103 | margin-right: 10px;
104 | margin-left: 10px;
105 | padding: 10px 20px;
106 | }
107 | .logo {
108 | width: max(8vw, 100px);
109 | align-self: center;
110 | }
111 | .nav-right button {
112 | font-size: 11px;
113 | width: 100px;
114 | height: 35px;
115 | }
116 | .nav-right li {
117 | font-size: 14px;
118 | }
119 | .nav-right {
120 | gap: 15px;
121 | }
122 | }
123 |
124 | /* Add styles for the scrolled state */
125 | .Navbar.scrolled {
126 | box-shadow: 0 17px 50px rgba(0, 0, 0, 0.2); /* Optional shadow effect when scrolled */
127 | background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent background when scrolled */
128 | animation: fadeIn 0.5s ease forwards; /* Apply the fade-in animation */
129 | border-radius: 50px;
130 | top: 22px;
131 |
132 | }
133 |
134 | @keyframes fadeIn {
135 | 0% {
136 | opacity: 30s;
137 | transform: translateY(-10px); /* Slide from above */
138 | }
139 | 100% {
140 | opacity: 1;
141 | transform: translateY(0); /* Original position */
142 | }
143 | }
--------------------------------------------------------------------------------
/src/Navbar + Footer/Navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import './Navbar.css';
3 | import logo from '../../assets/logo.svg';
4 | import { Link } from 'react-router-dom';
5 |
6 | const Navbar = () => {
7 | useEffect(() => {
8 | const handleScroll = () => {
9 | const navbar = document.getElementsByClassName('Navbar')[0];
10 | if (window.scrollY > 50) {
11 | navbar.classList.add('scrolled');
12 | } else {
13 | navbar.classList.remove('scrolled');
14 | }
15 | };
16 |
17 | window.addEventListener('scroll', handleScroll);
18 |
19 | return () => {
20 | window.removeEventListener('scroll', handleScroll);
21 | };
22 | }, []);
23 |
24 | return (
25 |
26 |
27 |
28 | - Home
29 | - Features
30 | - Pricing
31 | - About Us
32 |
33 |
34 |
Login
35 |
36 |
37 |
7 |
8 |
9 |
10 |
16 |
17 |
18 | Copyright © 2024 Collabsy
19 |
20 |
21 | All rights reserved
22 |
23 |
24 |
43 |
62 |
81 |
100 |
101 |
102 |
137 |
166 |
167 |
170 |
171 |
176 |
194 |
195 |
196 |
197 |
198 |
199 |
202 |
203 |
208 |
226 |
227 |
228 |
6 |
7 |
8 | )
9 | }
10 |
11 | export default Login
12 |
--------------------------------------------------------------------------------
/src/assets/bg-tilt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mzherx/Collabsy/e8fa84175ba0767b299b934d9de365da4f8ea6cd/src/assets/bg-tilt.png
--------------------------------------------------------------------------------
/src/assets/favcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mzherx/Collabsy/e8fa84175ba0767b299b934d9de365da4f8ea6cd/src/assets/favcon.png
--------------------------------------------------------------------------------
/src/assets/favicon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/gif.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mzherx/Collabsy/e8fa84175ba0767b299b934d9de365da4f8ea6cd/src/assets/gif.gif
--------------------------------------------------------------------------------
/src/assets/graph.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
2 |
3 | @tailwind components;
4 | @tailwind utilities;
5 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
6 | *{
7 | padding: 0;
8 | margin: 0;
9 | box-sizing: border-box;
10 | /* Primary Font: */ font-family: "Poppins", sans-serif;
11 | /* Secondary Font: font-family: "Montserrat", sans-serif;*/
12 | }
13 |
14 | body{
15 | background: white;
16 | }
17 |
18 | :root {
19 | /* fonts */
20 | --font-poppins: Poppins;
21 | /* Colors */
22 | --button-background: #5e2bff;
23 | --primary-color: #5e2bff;
24 | --paragraph-heading : "Montserrat", sans-serif;
25 | }
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | content: [
3 | "./index.html",
4 | "./src/**/*.{js,ts,jsx,tsx}",
5 | ],
6 | theme: {
7 | extend: {
8 | colors: {
9 | purple: {
10 | 600: '#5e2bff', // Custom purple color
11 | 700: "#ffffff"
12 | },
13 | },
14 | },
15 | },
16 | corePlugins: {
17 | preflight: false, // Disable Tailwind's base reset
18 | },
19 | plugins: [],
20 | };
21 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | server:{
8 | host:true,
9 | }
10 | })
11 |
--------------------------------------------------------------------------------