diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx index 6d7ef96..beaa1ba 100644 --- a/Frontend/src/App.jsx +++ b/Frontend/src/App.jsx @@ -1,19 +1,20 @@ import "./App.css"; -import DrivethruLandingPage from "./pages/DrivethruLandingPage"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Login from "./pages/Authentication/Login"; import SignUp from "./pages/Authentication/SignUp"; +import DrivethruLandingPage from "./pages/UserPages/DrivethruLandingPage"; +import Dashboard from "./pages/UserPages/Dashboard"; +import NotFoundPage from "./pages/UserPages/NotFoundPage"; function App() { return ( - {/* Landing Page at root ("/") */} } /> - - {/* Login Page at "/login" */} } /> } /> + } /> + } /> ); diff --git a/Frontend/src/components/Sidebar.jsx b/Frontend/src/components/Sidebar.jsx new file mode 100644 index 0000000..beea1a0 --- /dev/null +++ b/Frontend/src/components/Sidebar.jsx @@ -0,0 +1,308 @@ +import { Link } from "react-router-dom"; + +const Sidebar = () => { + return ( + <> + + + + + ); +}; + +export default Sidebar; diff --git a/Frontend/src/index.css b/Frontend/src/index.css index da19334..c4abad9 100644 --- a/Frontend/src/index.css +++ b/Frontend/src/index.css @@ -1,2 +1,28 @@ @import "tailwindcss"; -@import "flowbite/src/themes/default"; \ No newline at end of file + +/* For WebKit-based browsers */ +.custom-scrollbar::-webkit-scrollbar { + width: 15px; +} + +.custom-scrollbar::-webkit-scrollbar-track { + background: transparent; + /* or a color of your choice */ +} + +.custom-scrollbar::-webkit-scrollbar-thumb { + background-color: #a0aec0; + /* Customize thumb color */ + border-radius: 4px; + border: 2px solid transparent; + /* Optional: creates padding around thumb */ + background-clip: content-box; +} + +/* For Firefox */ +.custom-scrollbar { + scrollbar-width: auto; + /* "auto" or "thin" */ + scrollbar-color: #37A0EA transparent; + /* thumb and track colors */ +} \ No newline at end of file diff --git a/Frontend/src/pages/UserPages/Dashboard.jsx b/Frontend/src/pages/UserPages/Dashboard.jsx new file mode 100644 index 0000000..887f332 --- /dev/null +++ b/Frontend/src/pages/UserPages/Dashboard.jsx @@ -0,0 +1,21 @@ +import React from "react"; +import Sidebar from "../../components/Sidebar"; + +const Dashboard = () => { + return ( + <> + +
+
+

Dashboard

+

+ This is your custom dashboard body. Place your widgets, charts, + stats, or other components here. +

+
+
+ + ); +}; + +export default Dashboard; diff --git a/Frontend/src/pages/UserPages/DrivethruLandingPage.jsx b/Frontend/src/pages/UserPages/DrivethruLandingPage.jsx new file mode 100644 index 0000000..f2eeebe --- /dev/null +++ b/Frontend/src/pages/UserPages/DrivethruLandingPage.jsx @@ -0,0 +1,283 @@ +import Footer from "../../components/Footer"; + +const DrivethruLandingPage = () => { + return ( +
+
+
+
+
+ +
+
+
+ + + +
+

Drive-thru

+
+ +

+ Store, Access & Share Your Files — Anytime, Anywhere! +

+ +

+ A simple, secure, and fast cloud storage solution for all your + files. Upload, organize, and access with ease. +

+ +
+ + +
+
+
+
+
+ +
+
+
+ {" "} +
+ Person using Drive-thru on laptop +
+ {/* Features Card */} +
+
+

Key Features

+ +
+
+
+ + + +
+

+ Easy Upload & Access – Drag & drop, instant access. +

+
+ +
+
+ + + +
+

+ Secure & Private – End-to-end encryption. +

+
+ +
+
+ + + +
+

+ Seamless Sharing – Share files with one click. +

+
+ +
+
+ + + +
+

+ Access Anywhere – Works on all devices. +

+
+
+
+
+
+ + {/* How It Works Section */} +
+ {/* Person with Phone Image */} +
+ Person using Drive-thru on phone +
+ + {/* How It Works Card */} +
+
+

How It Works

+ +
+
+
+ + + +
+

+ Create an account – Sign up in seconds. +

+
+ +
+
+ + + +
+

+ Upload files – Drag & drop or select from your device. +

+
+ +
+
+ + + + +
+

+ Manage files – Rename, move, or delete easily. +

+
+ +
+
+ + + +
+

+ Access anytime – Open files from any device. +

+
+
+
+
+
+
+
+
+
+ ); +}; + +export default DrivethruLandingPage; diff --git a/Frontend/src/pages/UserPages/NotFoundPage.jsx b/Frontend/src/pages/UserPages/NotFoundPage.jsx new file mode 100644 index 0000000..9d8bd6e --- /dev/null +++ b/Frontend/src/pages/UserPages/NotFoundPage.jsx @@ -0,0 +1,245 @@ +import { Link } from "react-router-dom"; + +const NotFoundPage = () => { + return ( +
+ {/* Placeholder SVG - Replace this with your SVG */} + + + {/* Page number and title */} +

Page Not Found

+ + {/* Description text */} +

+ Sorry, we couldn't find the page you were looking for. It may have + been moved or deleted. +

+ + {/* Call-to-action button */} + + Go Home + +
+ ); +}; + +export default NotFoundPage;