Merged the front-end and back-end dev environments into master.

Massive W for the team. Full Google Auth + other Prisma quirks and functionalities.

Changes to be committed:
    new file:   .gitattributes
    new file:   backend/index.js
    new file:   backend/login_pages/index.js
    new file:   backend/package-lock.json
    new file:   backend/package.json
    new file:   backend/populate_prisma.js
    new file:   backend/prisma/schema.prisma
    new file:   backend/views/pages/auth.ejs
    new file:   backend/views/pages/success.ejs
    new file:   frontend/README.md
    new file:   frontend/package-lock.json
    new file:   frontend/package.json
    new file:   frontend/public/favicon.ico
    new file:   frontend/public/index.html
    new file:   frontend/public/logo192.png
    new file:   frontend/public/logo1922.png
    new file:   frontend/public/logo512.png
    new file:   frontend/public/manifest.json
    new file:   frontend/public/robots.txt
    new file:   frontend/src/App.css
    new file:   frontend/src/App.js
    new file:   frontend/src/App.test.js
    new file:   frontend/src/Footer.css
    new file:   frontend/src/Footer.js
    new file:   frontend/src/components/Navbar.js
    new file:   frontend/src/components/NavbarElements.js
    new file:   frontend/src/components/logo192.png
    new file:   frontend/src/index.css
    new file:   frontend/src/index.js
    new file:   frontend/src/logo.svg
    new file:   frontend/src/pages/about.js
    new file:   frontend/src/pages/contact.css
    new file:   frontend/src/pages/contact.js
    new file:   frontend/src/pages/courses.css
    new file:   frontend/src/pages/courses.js
    new file:   frontend/src/pages/index.css
    new file:   frontend/src/pages/index.js
    new file:   frontend/src/reportWebVitals.js
    new file:   frontend/src/setupTests.js

20 files changed, 702 insertions, 0 deletions

diff --git a/frontend/src/App.css b/frontend/src/App.css
new file mode 100644
index 0000000..74b5e05
--- /dev/null
+++ b/frontend/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend/src/App.js b/frontend/src/App.js
new file mode 100644
index 0000000..def37d1
--- /dev/null
+++ b/frontend/src/App.js
@@ -0,0 +1,38 @@
+// Filename - App.js
+
+import React from "react";
+import '@popperjs/core';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+
+import Navbar from "./components/Navbar";
+import Footer from "./Footer";
+import {
+	BrowserRouter as Router,
+	Routes,
+	Route,
+} from "react-router-dom";
+import Home from "./pages";
+import About from "./pages/about";
+import Courses from "./pages/courses";
+import Contact from "./pages/contact";
+
+function App() {
+	return (
+		<Router>
+			<Navbar />
+			<Routes>
+				<Route exact path="/" element={<Home />} />
+				<Route path="/about" element={<About />} />
+				<Route
+					path="/contact"
+					element={<Contact />}
+				/>
+				<Route path="/courses" element={<Courses />} />
+			</Routes>
+			<Footer />
+		</Router>
+	);
+}
+
+export default App;
diff --git a/frontend/src/App.test.js b/frontend/src/App.test.js
new file mode 100644
index 0000000..1f03afe
--- /dev/null
+++ b/frontend/src/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();
+});
diff --git a/frontend/src/Footer.css b/frontend/src/Footer.css
new file mode 100644
index 0000000..74afecb
--- /dev/null
+++ b/frontend/src/Footer.css
@@ -0,0 +1 @@
+@import '~@fortawesome/fontawesome-free/css/all.css';
diff --git a/frontend/src/Footer.js b/frontend/src/Footer.js
new file mode 100644
index 0000000..f16f94d
--- /dev/null
+++ b/frontend/src/Footer.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import './Footer.css';
+
+const Footer = () => {
+  return (
+<footer className="text-center text-lg-start bg-body-tertiary text-muted">
+  <section className="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
+    <div className="me-5 d-none d-lg-block">
+      <span>Get connected with us on social networks:</span>
+    </div>
+    <div>
+      <a href="" className="me-4 text-reset">
+        <i className="fab fa-facebook-f"></i>
+      </a>
+      <a href="" className="me-4 text-reset">
+        <i className="fab fa-twitter"></i>
+      </a>
+      <a href="" className="me-4 text-reset">
+        <i className="fab fa-google"></i>
+      </a>
+      <a href="" className="me-4 text-reset">
+        <i className="fab fa-instagram"></i>
+      </a>
+      <a href="" className="me-4 text-reset">
+        <i className="fab fa-linkedin"></i>
+      </a>
+      <a href="" className="me-4 text-reset">
+        <i className="fab fa-github"></i>
+      </a>
+    </div>
+  </section>
+  
+  <section className="">
+    <div className="container text-center text-md-start mt-5">
+      <div className="row mt-3">
+        <div className="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
+          <h6 className="text-uppercase fw-bold mb-4">
+            <i className="fas fa-gem me-3"></i>FreeFlow
+          </h6>
+          <p>
+            Here you can use rows and columns to organize your footer content. Lorem ipsum
+            dolor sit amet, consectetur adipisicing elit.
+          </p>
+        </div>
+        <div className="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
+          
+          <h6 className="text-uppercase fw-bold mb-4">
+            Products
+          </h6>
+          <p>
+            <a href="#!" className="text-reset">Angular</a>
+          </p>
+          <p>
+            <a href="#!" className="text-reset">React</a>
+          </p>
+          <p>
+            <a href="#!" className="text-reset">Vue</a>
+          </p>
+          <p>
+            <a href="#!" className="text-reset">Laravel</a>
+          </p>
+        </div>
+        <div className="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
+          <h6 className="text-uppercase fw-bold mb-4">
+            Useful links
+          </h6>
+          <p>
+            <a href="#!" className="text-reset">Pricing</a>
+          </p>
+          <p>
+            <a href="#!" className="text-reset">Settings</a>
+          </p>
+          <p>
+            <a href="#!" className="text-reset">Orders</a>
+          </p>
+          <p>
+            <a href="#!" className="text-reset">Help</a>
+          </p>
+        </div>
+        <div className="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
+
+          <h6 className="text-uppercase fw-bold mb-4">Contact</h6>
+          <p><i className="fas fa-home me-3"></i> New York, NY 10012, US</p>
+          <p>
+            <i className="fas fa-envelope me-3"></i>
+            info@example.com
+          </p>
+          <p><i className="fas fa-print me-3"></i>  + 01 234 567 89</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <div className="text-center p-4" style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
+        © 2023 Copyright:
+        <a className="text-reset fw-bold" href="#">Krusty Krabs</a>
+        </div>
+</footer>
+  );
+};
+
+export default Footer;
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
new file mode 100644
index 0000000..e7b4c58
--- /dev/null
+++ b/frontend/src/components/Navbar.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { NavLink} from "./NavbarElements";
+import '@popperjs/core';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Navbar, Nav, Button, Badge, Dropdown } from 'react-bootstrap';
+
+function NavbarApp() {
+  return (
+    <Navbar expand="lg" variant="light" bg="body-tertiary">
+      <div className="container-fluid">
+        <Navbar.Toggle aria-controls="navbarSupportedContent" />
+        <Navbar.Collapse id="navbarSupportedContent">
+          <NavLink to="/" className="mt-2 mt-lg-0">
+            <img
+              src="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&"
+              height="35"
+              alt="Logo"
+              loading="lazy"
+            /></NavLink>
+          <Nav className="me-auto mb-2 mb-lg-0">
+            <NavLink to="/">Dashboard</NavLink>
+			<NavLink to="/about" activeStyle>About</NavLink>
+			<NavLink to="/contact" activeStyle>Contact</NavLink>
+            <NavLink to="/courses" activeStyle>Courses</NavLink>
+          </Nav>
+        </Navbar.Collapse>
+        <div className="d-flex align-items-center">
+          <a href="#" className="text-reset me-3">
+            
+          </a>
+          <Dropdown>
+            <Dropdown.Toggle
+              variant="light"
+              className="text-reset me-3 hidden-arrow"
+            >
+              <i className="fas fa-bell"></i>
+              <Badge pill bg="danger" className="rounded-pill">
+                69
+              </Badge>
+            </Dropdown.Toggle>
+            <Dropdown.Menu align="end">
+              <Dropdown.Item href="#">Some news</Dropdown.Item>
+              <Dropdown.Item href="#">Another news</Dropdown.Item>
+              <Dropdown.Item href="#">Something else here</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Dropdown>
+            <Dropdown.Toggle
+              variant="light"
+              className="d-flex align-items-center hidden-arrow"
+            >
+              <img
+                src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png"
+                className="rounded-circle"
+                height="25"
+                alt="Poza de profil"
+                loading="lazy"
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu align="end">
+              <Dropdown.Item href="#">Profilul meu</Dropdown.Item>
+              <Dropdown.Item href="#">Setari</Dropdown.Item>
+              <Dropdown.Item href="#">Logout</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+      </div>
+    </Navbar>
+  );
+}
+
+export default NavbarApp;
diff --git a/frontend/src/components/NavbarElements.js b/frontend/src/components/NavbarElements.js
new file mode 100644
index 0000000..99d8223
--- /dev/null
+++ b/frontend/src/components/NavbarElements.js
@@ -0,0 +1,40 @@
+// Filename - ./components/Navbar.js
+
+import { NavLink as Link } from "react-router-dom";
+import styled from "styled-components";
+
+export const Nav = styled.nav`
+	background: #ffb3ff;
+	height: 85px;
+	display: flex;
+	justify-content: space-between;
+	padding: 0.2rem calc((100vw - 1000px) / 2);
+	z-index: 12;
+`;
+
+export const NavLink = styled(Link)`
+	color: #808080;
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	padding: 0 1rem;
+	height: 100%;
+	cursor: pointer;
+	&.active {
+		color: #9400FF;
+	}
+`;
+
+export const NavMenu = styled.div`
+	display: flex;
+	align-items: center;
+	margin-right: -24px;
+	/* Second Nav */
+	/* margin-right: 24px; */
+	/* Third Nav */
+	/* width: 100vw;
+white-space: nowrap; */
+	@media screen and (max-width: 768px) {
+		display: none;
+	}
+`;
diff --git a/frontend/src/components/logo192.png b/frontend/src/components/logo192.png
new file mode 100644
index 0000000..e14da01
--- /dev/null
+++ b/frontend/src/components/logo192.png
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/frontend/src/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;
+}
diff --git a/frontend/src/index.js b/frontend/src/index.js
new file mode 100644
index 0000000..d9b59d5
--- /dev/null
+++ b/frontend/src/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import '@popperjs/core';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+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();
diff --git a/frontend/src/logo.svg b/frontend/src/logo.svg
new file mode 100644
index 0000000..9dfc1c0
--- /dev/null
+++ b/frontend/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/frontend/src/pages/about.js b/frontend/src/pages/about.js
new file mode 100644
index 0000000..4c239f6
--- /dev/null
+++ b/frontend/src/pages/about.js
@@ -0,0 +1,34 @@
+// Filename - pages/about.js
+
+import React from "react";
+import './index.css';
+import { Container, Row, Col } from 'react-bootstrap';
+const About = () => {
+	return (
+		<Container>
+      <h1>About us</h1>
+      <hr />
+      <Container className="background w-100 px-4 py-3 rounded mb-3">
+        <Row className="justify-content-evenly">
+          <Col xs={12} className="text-center mb-3 bg-light rounded">
+            <img src="/logo192.png" alt="Logo"  height="200" />
+          </Col>
+          <Col xs={12} md={6} className="mb-3 text-light">
+            <h2>Who are we?</h2>
+            <p>
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad porro dolorem eveniet mollitia ipsum minus ex corporis ut. Nihil voluptatem exercitationem quaerat assumenda! Provident neque, minima quod voluptatum tenetur ducimus!
+            </p>
+          </Col>
+          <Col xs={12} md={6} className="mb-3 text-light">
+            <h2>Blah Blah</h2>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima velit deleniti perferendis impedit rerum possimus dolorum eligendi similique, vero odit sed consectetur officiis iusto nisi culpa ex delectus illo sequi?
+            </p>
+          </Col>
+        </Row>
+      </Container>
+    </Container>
+	);
+};
+
+export default About;
diff --git a/frontend/src/pages/contact.css b/frontend/src/pages/contact.css
new file mode 100644
index 0000000..e22a888
--- /dev/null
+++ b/frontend/src/pages/contact.css
@@ -0,0 +1,3 @@
+#contact .card:hover i,#contact .card:hover h4{
+	color: #9400FF;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/contact.js b/frontend/src/pages/contact.js
new file mode 100644
index 0000000..195aa12
--- /dev/null
+++ b/frontend/src/pages/contact.js
@@ -0,0 +1,50 @@
+// Contact.js
+
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './contact.css';
+const Contact = () => {
+  return (
+    <section id="contact">
+      <div className="container">
+        <h1>Contact us</h1>
+		<hr />
+        <p className="text-center w-75 m-auto">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum purus at sem ornare sodales. Morbi
+          leo nulla, pharetra vel felis nec, ullamcorper condimentum quam.
+        </p>
+        <div className="row">
+          <div className="col-sm-12 col-md-6 col-lg-4 my-5">
+            <div className="card border-0">
+              <div className="card-body text-center">
+                <i className="fa fa-phone fa-5x mb-3" aria-hidden="true"></i>
+                <h4 className="text-uppercase mb-5">Call us</h4>
+                <p>+8801683615582</p>
+              </div>
+            </div>
+          </div>
+          <div className="col-sm-12 col-md-6 col-lg-4 my-5">
+            <div className="card border-0">
+              <div className="card-body text-center">
+                <i className="fa fa-map-marker fa-5x mb-3" aria-hidden="true"></i>
+                <h4 className="text-uppercase mb-5">Office location</h4>
+                <address>New York, NY 10012, US</address>
+              </div>
+            </div>
+          </div>
+          <div className="col-sm-12 col-md-6 col-lg-4 my-5">
+            <div className="card border-0">
+              <div className="card-body text-center">
+                <i className="fa fa-globe fa-5x mb-3" aria-hidden="true"></i>
+                <h4 className="text-uppercase mb-5">Email</h4>
+                <p>info@example.com</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Contact;
diff --git a/frontend/src/pages/courses.css b/frontend/src/pages/courses.css
new file mode 100644
index 0000000..053ac91
--- /dev/null
+++ b/frontend/src/pages/courses.css
@@ -0,0 +1,45 @@
+
+/* Culorile săgeților active */
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  background-color: black;
+}
+
+/* Culorile săgeților la hover */
+.carousel-control-prev:hover,
+.carousel-control-next:hover {
+  background-color: darkgrey;
+}
+
+/* Culorile săgeților inactive */
+.carousel-control-prev,
+.carousel-control-next {
+  background-color: grey;
+}
+/* Adaugă acest cod CSS în fișierul tău de stiluri (de exemplu, App.css) */
+
+/* Sageti de parcurgere - pozitionare mai in exterior */
+.carousel-control-prev, .carousel-control-next {
+    transform: translateY(250%);
+  }
+  
+  /* Sageti de parcurgere - setare distanta intre sageti si marginea carousel-ului */
+  .carousel-control-prev {
+    margin-left: -3rem; /* Ajusteaza distanta pe orizontala la stanga */
+  }
+  
+  .carousel-control-next {
+    margin-right: -3rem; /* Ajusteaza distanta pe orizontala la dreapta */
+  }
+  /* Adaugă acest cod CSS în fișierul tău de stiluri (de exemplu, App.css) */
+
+/* Stilizare dimensiune sageti de parcurgere */
+.carousel-control-prev, .carousel-control-next {
+    width: 50px; /* Lățimea săgeților */
+    height: 50px; /* Înălțimea săgeților */
+    font-size: 24px; /* Dimensiunea textului săgeților (dacă sunt utilizate iconițe) */
+    line-height: 3rem; /* Ajustează înălțimea liniei pentru a centra textul (dacă sunt utilizate iconițe) */
+  }
+  
+  /* Alte stilizari pot fi adaugate aici */
+  
\ No newline at end of file
diff --git a/frontend/src/pages/courses.js b/frontend/src/pages/courses.js
new file mode 100644
index 0000000..ffa7adb
--- /dev/null
+++ b/frontend/src/pages/courses.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { Carousel, Container, Row, Col } from 'react-bootstrap';
+import './courses.css';
+function CourseCard({ imageUrl, title, text }) {
+	return (
+		<div className="col-4 mb-2 text-dark">
+		<div className="card">
+		  <a href="#">
+			<img src={imageUrl} className="card-img-top" alt="..." />
+		  </a>
+		  <div className="card-body">
+			<h5 className="card-title">{title}</h5>
+			<p className="card-text">{text}</p>
+			<a href="#" className="btn btn-primary background2">
+			  Go somewhere
+			</a>
+		  </div>
+		</div>
+		</div>
+	);
+  }
+const MyCarousel = () => {
+  return (
+	<Container>
+		<h1>Courses</h1>
+      <hr />
+	  <Container>
+		<h2>Top Rated Courses</h2>
+    <Carousel>
+      <Carousel.Item>
+		<div className="row">
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+		</div>
+	  </Carousel.Item>
+
+      <Carousel.Item>
+	  <div className="row">
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+		</div>      </Carousel.Item>
+
+      <Carousel.Item>
+	  <div className="row">
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+		</div>      </Carousel.Item>
+    </Carousel>
+	</Container>
+	<Container>
+		<h2>Recommended courses</h2>
+    <Carousel>
+      <Carousel.Item>
+		<div className="row">
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+		</div>
+	  </Carousel.Item>
+
+      <Carousel.Item>
+	  <div className="row">
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+		</div>      </Carousel.Item>
+
+      <Carousel.Item>
+	  <div className="row">
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+	  <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+		</div>      </Carousel.Item>
+    </Carousel>
+	</Container>
+	</Container>
+  );
+};
+
+export default MyCarousel;
diff --git a/frontend/src/pages/index.css b/frontend/src/pages/index.css
new file mode 100644
index 0000000..d80b5e3
--- /dev/null
+++ b/frontend/src/pages/index.css
@@ -0,0 +1,10 @@
+@import '~@fortawesome/fontawesome-free/css/all.css';
+.background{
+    background-color: #010001 !important;
+}
+.background2{
+    background-color: #9400FF !important;
+}
+.text-logo{
+    color: #9400FF !important;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
new file mode 100644
index 0000000..ac0e470
--- /dev/null
+++ b/frontend/src/pages/index.js
@@ -0,0 +1,122 @@
+// Filename - pages/index.js
+
+import React from "react";
+import './index.css';
+function CourseCard({ imageUrl, title, text }) {
+  return (
+    <div className="col-12 col-md-6 col-lg-3 mb-2 text-dark">
+      <div className="card">
+        <a href="#">
+          <img src={imageUrl} className="card-img-top" alt="..." />
+        </a>
+        <div className="card-body">
+          <h5 className="card-title">{title}</h5>
+          <p className="card-text">{text}</p>
+          <a href="#" className="btn btn-primary background2">
+            Go somewhere
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+function PersonCard({ imageUrl, name, username, socialLinks, websites }) {
+  return (
+    <div className="col-md-12 col-xl-4 mb-3 text-dark">
+      <div className="card" style={{ borderRadius: '15px' }}>
+        <div className="card-body text-center">
+          <div className="mt-3 mb-4">
+            <img src={imageUrl} className="rounded-circle img-fluid" style={{ width: '100px' }} alt="..." />
+          </div>
+          <h4 className="mb-2">{name}</h4>
+          <p className="text-muted mb-4">@{username} | <a href="#!">{websites}</a></p>
+          <div className="mb-4 pb-2">
+            {socialLinks.map((link, index) => (
+              <button key={index} type="button" className="btn btn-outline-primary btn-floating m-2">
+                <i className={`fab ${link.icon} fa-lg`}></i>
+              </button>
+            ))}
+          </div>
+          <button type="button" className="btn btn-primary btn-rounded btn-lg background2">
+            Message now
+          </button>
+          <div className="d-flex justify-content-between text-center mt-5 mb-2">
+            <div>
+              <p className="mb-2 h5">8471</p>
+              <p className="text-muted mb-0">Interactions</p>
+            </div>
+            <div className="px-3">
+              <p className="mb-2 h5">8512</p>
+              <p className="text-muted mb-0">Prepared Students</p>
+            </div>
+            <div>
+              <p className="mb-2 h5">4751</p>
+              <p className="text-muted mb-0">Something</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Componenta principală
+function Home() {
+  return (
+    <div className="container">
+      <h1>Dashboard</h1>
+      <hr />
+      {/* Cursurile tale */}
+      <div className="container rounded text-white pt-3 pb-3 mb-3 background ">
+        <h2>Your courses</h2>
+        <div className="row d-flex justify-content-center align-items-center h-100">
+        <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+        <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+        <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+        <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+        
+        </div>
+      </div>
+      <div className="container background rounded text-white p-3 mb-3">
+        <h2>Connect with people</h2>
+        <div className="row d-flex justify-content-center align-items-center h-100">
+          <PersonCard
+            imageUrl="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png"
+            name="Nume Prenume"
+            username="Username"
+            socialLinks={[
+              { icon: 'fa-facebook-f' },
+              { icon: 'fa-twitter' },
+              { icon: 'fa-skype' },
+            ]}
+            websites={"website.com"}
+          />
+          <PersonCard
+            imageUrl="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png"
+            name="Nume Prenume"
+            username="Username"
+            socialLinks={[
+              { icon: 'fa-facebook-f' },
+              { icon: 'fa-twitter' },
+              { icon: 'fa-skype' },
+            ]}
+            websites={"website.com"}
+          />
+          <PersonCard
+            imageUrl="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png"
+            name="Nume Prenume"
+            username="Username"
+            socialLinks={[
+              { icon: 'fa-facebook-f' },
+              { icon: 'fa-twitter' },
+              { icon: 'fa-skype' },
+            ]}
+            websites={"website.com"}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/frontend/src/reportWebVitals.js b/frontend/src/reportWebVitals.js
new file mode 100644
index 0000000..5253d3a
--- /dev/null
+++ b/frontend/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/frontend/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';