Initial commit

App.js

@@ -0,0 +1,23 @@
+import logo from './logo1.png';
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Login from './Login'; // Adjust the import path based on your file structure
+import BorS from './BorS'; // Import the new page component
+import SignUp from './SignUp';
+
+
+const App = () => {
+    return (
+        <Router>
+            <Routes>
+                <Route path="/" element={<Login />} />
+                <Route path="/bors" element={<BorS />} />
+                <Route path="/signup" element={<SignUp />} /> {/* Add the SignUp route */}
+            </Routes>
+        </Router>
+    );
+};
+
+export default App;
+
+

App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

BorS.css

@@ -0,0 +1,68 @@
+.background {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #ffffff; /* White background */
+}
+
+.logo {
+  width: 400px;
+  height: 300px;
+  margin-bottom: 150px;
+}
+
+.rect_horiz {
+  width: 160px;
+  height: 340%;
+  color: #000000;
+  top: 30%;
+  left: 70px;
+}
+.bodyText {
+  margin-top: 20px;
+  bottom: 100px;
+  color: #fff; /* White text color */
+  text-align: left;
+  margin-top: 15px;
+}
+.bottomStuff {
+  width: 80%;
+  position: relative;
+  bottom: 0px;
+  text-align: center;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  color: #fff; /* White text color */
+  background-color: #222; /* Dark background for input */
+  padding: 10px;
+  margin: 10px 0; /* Vertical margin for spacing between inputs */
+  border-radius: 5px;
+  border: none;
+}
+
+.button {
+  color: #fff; /* White text color for Login button words*/
+  background-color: #6c63ff; /* Purple background for login button*/
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+  margin: 10px;
+}
+
+.footer {
+  color: #fff; /* White text color */
+  text-align: center;
+  margin-top: 10px;
+}
+
+.link {
+  color: #6c63ff; /* Purple text color for links */
+  text-decoration: none;
+}

BorS.js

@@ -0,0 +1,13 @@
+import logo from './logo1.png';
+import React from 'react';
+import './BorS.css';
+
+const BorS = () => {
+    return (
+        <div>
+            <div className="rect_horiz"></div>
+        </div>
+    );
+};
+
+export default BorS;

Login.css

@@ -0,0 +1,69 @@
+.background {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #ffffff; /* White background */
+}
+
+.logo {
+  width: 400px;
+  height: 300px;
+  margin-bottom: 150px;
+}
+
+.bottom-half {
+  width: 100%;
+  height: 50%;
+  background-color: #000000; /* Black background */
+  position: absolute;
+  top: 55%;
+  left: 0;
+}
+.bodyText {
+  margin-top: 20px;
+  bottom: 100px;
+  color: #fff; /* White text color */
+  text-align: left;
+  margin-top: 15px;
+}
+.bottomStuff {
+  width: 80%;
+  position: relative;
+  bottom: 0px;
+  text-align: center;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  color: #fff; /* White text color */
+  background-color: #222; /* Dark background for input */
+  padding: 10px;
+  margin: 10px 0; /* Vertical margin for spacing between inputs */
+  border-radius: 5px;
+  border: none;
+}
+
+.button {
+  color: #fff; /* White text color for Login button words*/
+  background-color: #6c63ff; /* Purple background for login button*/
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+  margin: 10px;
+}
+
+.footer {
+  color: #fff; /* White text color */
+  text-align: center;
+  margin-top: 10px;
+}
+
+.link {
+  color: #6c63ff; /* Purple text color for links */
+  text-decoration: none;
+}

Login.js

@@ -0,0 +1,36 @@
+import logo from './logo1.png';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate from react-router-dom
+import React from 'react';
+import './Login.css';
+
+const Login = () => {
+    const navigate = useNavigate();
+    const loginNav = () => {
+        navigate('/bors');
+    }
+    const signUpNav = () => {
+        navigate('/signup');
+    }
+  return (
+      <div className="background">
+        <div className="bottom-half"></div>
+        <img src={logo} alt="Logo" className="logo" />
+        <div className="bottomStuff">
+          <p className="bodyText">
+            Welcome to Husky Marketplace! Login below or create an account if you don't have one.
+          </p>
+          <input type="email" placeholder="Enter email" className="input" />
+          <input type="password" placeholder="Password" className="input" />
+          <button className="button" onClick={loginNav}>Login</button>
+          <p className="footer">
+              Don’t have an account?{' '}
+              <span className="link" onClick={signUpNav} style={{ cursor: 'pointer', color: '#6c63ff', textDecoration: 'underline' }}>
+                        Sign Up
+              </span>
+          </p>
+        </div>
+      </div>
+  );
+};
+
+export default Login;

SignUp.css

@@ -0,0 +1,69 @@
+.background {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #ffffff; /* White background */
+}
+
+.logo {
+  width: 400px;
+  height: 300px;
+  margin-bottom: 150px;
+}
+
+.bottom-half {
+  width: 100%;
+  height: 50%;
+  background-color: #000000; /* Black background */
+  position: absolute;
+  top: 55%;
+  left: 0;
+}
+.bodyText {
+  margin-top: 20px;
+  bottom: 100px;
+  color: #fff; /* White text color */
+  text-align: left;
+  margin-top: 15px;
+}
+.bottomStuff {
+  width: 80%;
+  position: relative;
+  bottom: 0px;
+  text-align: center;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  color: #fff; /* White text color */
+  background-color: #222; /* Dark background for input */
+  padding: 10px;
+  margin: 10px 0; /* Vertical margin for spacing between inputs */
+  border-radius: 5px;
+  border: none;
+}
+
+.button {
+  color: #fff; /* White text color for Login button words*/
+  background-color: #6c63ff; /* Purple background for login button*/
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+  margin: 10px;
+}
+
+.footer {
+  color: #fff; /* White text color */
+  text-align: center;
+  margin-top: 10px;
+}
+
+.link {
+  color: #6c63ff; /* Purple text color for links */
+  text-decoration: none;
+}

SignUp.js

@@ -0,0 +1,16 @@
+import logo from './logo1.png';
+import React from 'react';
+
+import './SignUp.css';
+
+const SignUp = () => {
+    return (
+        <div>
+            <h1>Sign Up Page</h1>
+            <p>This is where users can create a new account.</p>
+            {/* Add your signup form here */}
+        </div>
+    );
+};
+
+export default SignUp;

index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();