diff --git a/App.css b/App.css
new file mode 100644
index 0000000..6c6c541
--- /dev/null
+++ b/App.css
@@ -0,0 +1,1416 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 300;
+  font-style: normal;
+}
+
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+.progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  background-color: rgba(255, 255, 255, 0.1);
+  z-index: 1000;
+}
+
+.progress-bar {
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, #6a529a, #7434ff);
+  box-shadow: 0 0 15px rgba(59, 58, 132, 0.8), 0 0 30px rgba(146, 120, 199, 0.8);
+  transition: width 0.4s ease;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(90deg, #6a529a, #7434ff);
+  border-radius: 10px;
+  box-shadow: 0 0 15px rgba(0, 119, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.8);
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(90deg, #0056b3, #00cccc);
+  box-shadow: 0 0 20px rgba(0, 119, 255, 1), 0 0 40px rgba(0, 255, 255, 1);
+}
+
+body {
+  height: 100%;
+  width: 100%;
+  color: white;
+  cursor: default;
+  overflow-x: hidden;
+  background: #13072e;
+}
+
+.home {
+  height: auto;
+  background: #13072e;
+}
+
+nav {
+  height: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 30px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background: #13072e;
+  z-index: 2;
+  padding-bottom: 25px;
+}
+
+.nav-up {
+  display: contents;
+}
+
+.nav-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 80px;
+  margin-left: 5%;
+}
+
+.nav-icon p {
+  width: 200px;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.nav-text {
+  margin-top: 14px;
+  display: flex;
+  word-wrap: break-word;
+}
+
+.nav-list {
+  list-style: none;
+  display: flex;
+}
+
+.nav-item {
+  margin-left: 5vw;
+  font-size: 1.15rem;
+  cursor: pointer;
+  position: relative;
+}
+.nav-item::before {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: -5%;
+  width: 0%;
+  height: 3px;
+  background-color: #ffcc4a;
+  border-radius: 3px;
+  transition: width 0.4s ease-in-out;
+}
+.nav-item:hover {
+  color: #ffcc4a;
+  &::before {
+    width: 110%;
+  }
+}
+.nav-item a {
+  color: white;
+  text-decoration: none;
+  opacity: 0.8;
+}
+
+.nav-item a:hover {
+  opacity: 1;
+  font-weight: 500;
+}
+
+.nav-button {
+  display: flex;
+}
+
+.nav-button a {
+  text-decoration: none;
+  color: black;
+  font-weight: 300;
+}
+
+.nav-content {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  align-items: center;
+}
+
+.nav-button .btn {
+  font-size: 1.25rem;
+  height: 2.5rem;
+  width: 8rem;
+  margin-right: 2vw;
+  border-radius: 30px;
+  border: none;
+  cursor: pointer;
+  background: white;
+  transition: all 0.3s ease-in-out;
+  border: 2px solid white;
+  transition: all 0.3s ease-in-out;
+}
+
+.btn i {
+  color: black;
+  border: none;
+  margin-left: 10px;
+  transition: rotate 0.3s ease-in-out;
+}
+
+.btn:hover {
+  background: transparent;
+  color: white;
+  font-weight: 400;
+}
+
+.btn:hover a {
+  color: white;
+}
+
+.btn:hover i {
+  rotate: -45deg;
+  color: white;
+}
+
+.hamburger {
+  display: none;
+}
+
+.home-text {
+  height: fit-content;
+  width: 95vw;
+  background: linear-gradient(135deg, #13072e, #3f2182);
+  margin-top: 100px;
+  margin-left: 2.5vw;
+  border-radius: 30px;
+  display: flex;
+}
+
+.top-button {
+  background-color: #b3aaff;
+  border: none;
+  width: 18rem;
+  height: 2.5rem;
+  border-radius: 30px;
+  margin-top: 12vh;
+  margin-left: 6vw;
+  font-size: 1.15rem;
+  font-weight: 400;
+}
+
+.mid-text {
+  width: 40vw;
+  margin-left: 6vw;
+  margin-top: 50px;
+}
+
+.mid-text p {
+  font-size: 1.1rem;
+  line-height: 1.85rem;
+  font-weight: 200;
+}
+
+.explore-btn {
+  margin-left: 6vw;
+  margin-top: 50px;
+  font-size: 1.255rem;
+  height: 2.5rem;
+  width: 18rem;
+  margin-right: 2vw;
+  border-radius: 30px;
+  border: none;
+  cursor: pointer;
+  background: rgb(255, 204, 74);
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+.explore-btn a {
+  text-decoration: none;
+  color: black;
+  font-weight: 400;
+}
+
+.explore-btn i {
+  color: black;
+  border: none;
+  margin-left: 10px;
+}
+
+.explore-btn i {
+  color: black;
+  border: none;
+  margin-left: 10px;
+}
+
+.explore-btn:hover {
+  box-shadow: 1px 1px 10px rgb(255, 234, 182);
+}
+
+.home-image {
+  width: 30rem;
+  margin-left: 230px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+/* General layout improvements */
+.course-page {
+  width: 100vw;
+  margin-top: 80px;
+}
+
+.course-head {
+  padding-top: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.search-icon {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-icon h2 {
+  font-size: 6rem;
+  font-weight: 700;
+  color: white;
+  padding-left: 100px;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+  position: relative;
+}
+
+.search-icon .search-bar input {
+  border-radius: 30px;
+  border: 1px solid #ccc;
+  height: 3.5rem;
+  width: 50%;
+  padding-left: 20px;
+  font-size: 1.25rem;
+  color: #333;
+  background-color: #f1f1f1;
+  transition: box-shadow 0.3s ease;
+}
+
+.search-icon input:focus {
+  outline: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.search-icon .mag {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  position: absolute;
+  right: 200px;
+}
+
+.search-icon i {
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #555;
+}
+
+.search-icon button:hover i {
+  color: #007bff;
+}
+
+.courses {
+  display: grid;
+  grid-template-columns: repeat(4, 2fr);
+  gap: 28px;
+  justify-content: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.course-box {
+  height: 55vh;
+  width: 21%;
+  border-radius: 20px;
+  border: 1px solid #ececf9;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  margin-bottom: 10vh;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.course-box:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+.course-image {
+  width: 100%;
+  height: 68%;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+}
+
+.course-image a img {
+  width: 88%;
+  height: 60%;
+  margin-top: 20px;
+  margin-left: 20px;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  filter: contrast(1.5);
+}
+
+.course-text {
+  padding: 20px;
+  text-align: left;
+}
+
+.courses h2 {
+  font-size: 6rem;
+}
+
+.course-page a {
+  text-decoration: none;
+  color: #333;
+}
+
+.course-name {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: #fff;
+}
+
+.course-author {
+  font-size: 1rem;
+  color: #ccc;
+  margin-bottom: 8px;
+}
+
+.course-author i {
+  margin-right: 8px;
+}
+
+.lessons {
+  font-size: 0.95rem;
+  color: #ccc;
+  cursor: pointer;
+}
+
+.lessons:hover {
+  color: #007bff;
+}
+
+.lessons i {
+  margin-right: 8px;
+}
+
+.arrow-container {
+  text-align: center; /* Center align the arrow */
+  margin-top: 20px; /* Add some spacing */
+  margin-left: 20px; /* Add some spacing */
+}
+
+.arrow-image {
+  width: 200px; /* Set desired width */
+  height: auto; /* Maintain aspect ratio */
+}
+
+.course-box:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.course-box:hover .course-name {
+  color: #007bff;
+}
+
+.search-icon input:hover {
+  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
+}
+
+.search input:focus {
+  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
+}
+
+.slideshow-container {
+  padding-top: 3%;
+}
+
+.testimonals {
+  height: auto;
+  width: 100%;
+  position: relative;
+}
+
+.testimonals .why {
+  text-align: center;
+  font-size: 5rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+  color: white;
+}
+
+/* Carousel Container */
+.wrapper {
+  position: relative;
+  padding: 20px;
+}
+
+.wrapper .carousels {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  padding: 60px 10px;
+  white-space: nowrap; /* Prevent wrapping of items */
+}
+
+.carousels::-webkit-scrollbar {
+  display: none; /* Hide scrollbar */
+}
+
+.carousels .card {
+  min-width: 300px; /* Set a minimum width for each card */
+  flex: 0 0 auto; /* Prevent cards from shrinking or growing */
+  background: linear-gradient(135deg, #13072e, #3f2182); /* Card background */
+  border-radius: 20px;
+  padding: 20px;
+  color: white;
+  text-align: center;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease-in-out;
+  list-style: none;
+  cursor: grab;
+}
+
+.carousels .card:hover {
+  transform: scale(1.05); /* Slight zoom effect on hover */
+}
+
+/* User Card Styling */
+.user-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.user {
+  background: none;
+  padding-bottom: 20px;
+  border-radius: 20px;
+}
+
+.user i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+  margin-top: 10px;
+  color: #bdb4ff;
+}
+
+/* Adjust Text Padding */
+.user p {
+  font-size: 18px;
+  text-align: center;
+  padding: 0 20px; /* Reduced padding to prevent overflow */
+  margin-top: 10px;
+  line-height: 1.5;
+  white-space: normal; /* Allow text to wrap properly */
+  overflow: hidden; /* Hide overflow */
+}
+
+/* User Image */
+.user img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin: 20px 0;
+  object-fit: cover;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Name and Role */
+.user-text .name {
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin: 10px 0;
+}
+
+.user-text {
+  font-size: 1rem;
+  color: #ccc;
+}
+
+/* Button for Sliding */
+.slider {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  background-color: #bdb4ff; /* Light purple */
+  color: black;
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
+}
+
+/* Position the Next button */
+.slider:nth-of-type(2) {
+  /* Select the second slider button (Next) */
+  right: 15px;
+  bottom: 45%;
+}
+
+/* Position the Previous button */
+.slider:nth-of-type(1) {
+  /* Select the first slider button (Previous) */
+  left: 15px; /* Position it on the left */
+  bottom: 45%;
+}
+
+.slider:hover {
+  background-color: #9d94ff; /* Darker purple on hover */
+  transform: scale(1.05); /* Slightly increase size on hover */
+}
+
+/* Optional: Add transition effects for smoothness */
+.slider:active {
+  transform: scale(0.95); /* Slightly shrink on click */
+}
+
+/* Custom scrollbar removal */
+.testimonals::-webkit-scrollbar {
+  display: none;
+}
+.dots-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px; /* Adjust as needed */
+}
+
+.dot {
+  height: 10px;
+  width: 10px;
+  margin: 0 5px; /* Space between dots */
+  background-color: #bbb; /* Inactive dot color */
+  border-radius: 50%;
+  display: inline-block;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.dot.active {
+  background-color: #4caf50; /* Active dot color */
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .testimonals .why {
+    font-size: 3rem;
+  }
+
+  .carousels .card {
+    min-width: 250px;
+  }
+
+  .user img {
+    width: 80px;
+    height: 80px;
+  }
+
+  .slider {
+    height: 40px;
+    width: 40px;
+    font-size: 1.25rem;
+  }
+}
+
+.contact-us {
+  height: auto;
+  margin-top: 5vw;
+  width: 100%;
+  display: flex;
+}
+
+.form {
+  flex-basis: 55%;
+  margin-left: 3vw;
+}
+
+.form input,
+textarea {
+  width: 33.5vw;
+  height: 3.5vw;
+  margin-bottom: 30px;
+  margin-left: 30px;
+  border-radius: 10px;
+  border: none;
+  text-align: left;
+  padding-left: 20px;
+  color: #fff;
+  font-size: 1.1rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  &::placeholder {
+    color: #ccc;
+  }
+}
+
+.contact-us .center input {
+  width: 15vw;
+}
+
+.phone {
+  margin-left: 10px;
+}
+
+.form ::placeholder {
+  font-size: 1rem;
+}
+
+.form textarea {
+  height: 12vw;
+  padding-top: 10px;
+}
+
+.submit-btn {
+  margin-top: -10px;
+  margin-left: 5.5rem;
+  width: 10rem;
+  height: 2rem;
+  font-weight: 500;
+  font-size: 1.15;
+}
+
+.details {
+  flex-basis: 40%;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+h1 {
+  font-size: 6vw;
+  font-weight: 700;
+  margin-top: 2rem;
+  text-align: center;
+  margin-bottom: -2rem;
+}
+
+.details p {
+  margin-bottom: 20px;
+  font-size: 16px;
+  width: 35vw;
+  line-height: 1.95rem;
+}
+
+.details p i {
+  margin-right: 20px;
+}
+
+.footer {
+  /* background-color: #fff; */
+  background: linear-gradient(135deg, #13072e, #624d91);
+  height: 55vh;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  color: white;
+  font-weight: 500;
+  border-top: 2px solid white;
+}
+
+.footer-top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer .left {
+  width: 40%;
+}
+
+.footer .right {
+  width: 50%;
+}
+
+.footer .left .nav-icon {
+  float: left;
+  color: white;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.footer .left .nav-icon .logo {
+  height: 60px;
+  margin-left: 20px;
+}
+
+.footer .left .nav-icon p {
+  font-weight: 700;
+  font-size: 20px;
+}
+
+.about-text h3 {
+  clear: both;
+  margin-top: 10px;
+  margin-left: 30px;
+  line-height: 1.75rem;
+  font-size: 16px;
+}
+
+.foot {
+  text-align: center;
+  padding: 20px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1.5px solid rgba(255, 255, 255, 0.2);
+  font-size: 16px;
+  color: #ccc;
+  width: 75%;
+  border-radius: 50px;
+  margin: auto;
+  margin-top: -60px;
+}
+.foot p {
+  font-family: "FontAwesome";
+  letter-spacing: 2px;
+}
+
+.resources {
+  margin-top: 50px;
+  display: flex;
+}
+
+.resources .first {
+  flex-basis: 30%;
+}
+
+.resources li a:hover {
+  text-decoration-line: underline;
+  color: white;
+}
+
+.resources .second {
+  flex-basis: 30%;
+}
+
+.resources .third {
+  flex-basis: 30%;
+}
+
+.third h4 {
+  font-size: 17px;
+  font-weight: 300;
+  margin-bottom: 30px;
+  line-height: 1.75rem;
+}
+
+.third .search {
+  width: 18rem;
+  margin-left: -40px;
+}
+
+.third input {
+  border: 1px solid black;
+  height: 2.5rem;
+  background-color: white;
+  position: relative;
+}
+
+.third button {
+  background-color: transparent;
+  height: 30px;
+  position: absolute;
+  right: 100px;
+}
+
+.third i {
+  color: black;
+  font-size: rem;
+}
+
+.resources h3 {
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.resources li {
+  list-style: none;
+  margin-bottom: 10px;
+  margin-left: 10px;
+}
+
+.resources li a {
+  text-decoration: none;
+  color: white;
+  transition: color 0.2s ease-in-out;
+}
+.resources li a:hover {
+  color: cyan;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+  position: relative;
+}
+
+.search input {
+  border-radius: 30px;
+  border: 1px solid #5c5c5c;
+  height: 2.5rem;
+  width: 90%;
+  padding-left: 20px;
+  font-size: 1.1rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  transition: box-shadow 0.3s ease;
+  &::placeholder {
+    color: #ccc;
+  }
+}
+
+.search input:focus {
+  outline: none;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.search button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  position: absolute;
+  right: 85px;
+  padding-top: 7px;
+}
+
+.search i {
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #ccc;
+}
+
+.search button:hover i {
+  color: #007bff;
+}
+
+.testimonial-image {
+  width: 100%;
+  height: auto;
+  max-width: 150px;
+  object-fit: cover;
+}
+
+@media (max-width: 660px) {
+  .home-text {
+    flex-direction: column;
+  }
+
+  .show {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    height: auto;
+    top: 100px;
+    padding: 20px 0;
+  }
+
+  .hamburger {
+    display: block;
+    cursor: pointer;
+    margin-right: 20px;
+  }
+
+  /* .nav-text, .nav-button {
+    display: none;
+  } */
+
+  .nav-icon p {
+    font-size: 2rem;
+  }
+
+  .nav-content {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: #13072e;
+    flex-direction: column;
+    align-items: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.5s ease-in-out;
+  }
+
+  .nav-content.show {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .nav-item {
+    margin-left: 0;
+    font-size: 1.5rem;
+  }
+
+  .nav-list {
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    padding-bottom: 25px;
+  }
+
+  .nav-button {
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 1rem;
+  }
+
+  .fa-bars,
+  .fa-times {
+    font-size: 2rem;
+    color: white;
+    padding: 25px;
+  }
+
+  .mid-text {
+    width: 80vw;
+  }
+
+  .home-image {
+    margin: 0px;
+    width: -webkit-fill-available;
+    padding: 20px;
+  }
+
+  .search-icon {
+    flex-direction: column;
+  }
+
+  .search-icon h2 {
+    padding: 10px;
+    font-size: 3rem;
+  }
+
+  .search-bar {
+    width: 80%;
+  }
+
+  .search-icon .search-bar input {
+    width: 100%;
+  }
+
+  .search-icon .mag {
+    position: static;
+  }
+
+  .course-box {
+    height: 20rem;
+    width: 17rem;
+    margin-bottom: 0;
+  }
+  .courses {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .course-page {
+    padding: 0px;
+  }
+
+  .testimonals .why {
+    font-size: 3rem;
+  }
+
+  .wrapper .carousels {
+    width: 100vw;
+  }
+
+  .contact-us {
+    flex-direction: column;
+    margin-top: 20vw;
+  }
+
+  .form {
+    margin-left: 30px;
+  }
+
+  .form input,
+  textarea {
+    width: 65vw;
+    height: 5vh;
+  }
+
+  .center {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .contact-us .center input {
+    width: 65vw;
+  }
+
+  .submit-btn {
+    margin-left: 3rem;
+  }
+
+  .details p {
+    width: 80vw;
+    padding: 40px;
+  }
+
+  .footer {
+    height: auto;
+    margin-top: 20rem;
+  }
+
+  .footer-top {
+    flex-direction: column;
+  }
+
+  .foot {
+    margin-top: 0px;
+    width: auto;
+  }
+
+  .resources {
+    flex-wrap: wrap;
+    margin: 20px;
+  }
+
+  .about-text {
+    width: 80vw;
+  }
+
+  .third .search {
+    margin-left: 0px;
+  }
+}
+
+@media (min-width: 661px) and (max-width: 1200px) {
+  nav {
+    padding: 20px 0;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-up {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-icon p {
+    font-size: 2rem;
+  }
+
+  .nav-item {
+    font-size: 1.5rem;
+  }
+
+  .home-text {
+    flex-direction: row;
+    justify-content: space-between;
+    width: 90%;
+    margin-top: 200px;
+    padding: 20px 0;
+  }
+
+  .mid-text {
+    width: 60vw;
+    /* Adjusted for better readability */
+  }
+
+  .home-image {
+    width: 100%;
+    /* Scaled for medium-sized screens */
+    margin: 10px auto;
+    padding: 20px 0;
+  }
+
+  .search-icon {
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .search-icon h2 {
+    padding: 1rem;
+    font-size: 4rem;
+  }
+
+  .search-bar {
+    width: 60%;
+    /* Adjust search bar for mid-sized screens */
+  }
+
+  .search-icon .search-bar input {
+    width: 100%;
+  }
+
+  .search-icon .mag {
+    position: static;
+    margin-left: 10px;
+  }
+
+  .courses {
+    grid-template-columns: repeat(3, 2fr);
+    padding: 20px;
+    width: 100%;
+    gap: 20px;
+    margin: 0px;
+  }
+
+  .course-box {
+    width: auto;
+    height: 20rem;
+    margin-bottom: 0;
+  }
+
+  .course-page {
+    padding: 10px;
+    margin-top: 0px;
+    width: 90vw;
+  }
+
+  .wrapper .carousels {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .testimonals .why {
+    font-size: 4rem;
+  }
+
+  .contact-us {
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 5vw;
+    padding: 20px 0 20px 0;
+  }
+
+  .form {
+    margin-left: 0;
+    width: 90%;
+  }
+
+  .form input,
+  textarea {
+    width: 93%;
+    height: 4vh;
+  }
+
+  .center {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .contact-us .center input {
+    width: 80%;
+  }
+
+  .submit-btn {
+    margin-left: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 30px;
+  }
+
+  .details p {
+    width: 70vw;
+    padding: 20px;
+    font-size: 1.5rem;
+  }
+
+  .footer {
+    height: auto;
+    margin-top: 0px;
+    padding: 20px;
+  }
+
+  .footer-top {
+    justify-content: space-around;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .footer .right {
+    width: 100%;
+  }
+
+  .foot {
+    margin-top: 0;
+    width: auto;
+  }
+
+  .resources {
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 10px;
+  }
+
+  .about-text {
+    width: 60vw;
+  }
+
+  .third .search {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+@media (min-width: 1201px) and (max-width: 1700px) {
+  .home-image {
+    margin-left: 100px;
+  }
+
+  .explore-btn {
+    margin-bottom: 50px;
+    padding: 30px;
+    width: 20rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .courses {
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .course-box {
+    margin-bottom: 0;
+  }
+  .course-page a {
+    width: 20rem;
+    height: 25rem;
+  }
+
+  .contact-us {
+    margin-bottom: 20px;
+    width: 100%;
+    height: auto;
+  }
+}
+html {
+  scroll-behavior: smooth;
+}
+
+.projects-section {
+  padding: 60px 40px;
+  background: linear-gradient(to right, #2e0575, #190219);
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(54, 1, 51, 0.1);
+  text-align: center;
+  margin: 40px auto;
+  max-width: 1200px;
+}
+
+#projects-heading {
+  font-size: 4rem; /* Adjusted to match heading sizes in the rest of the CSS */
+  color: white;
+  font-weight: 500;
+  text-align: center;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.projects-list {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap; /* Added for responsiveness */
+}
+
+.projects-list li {
+  flex: 1;
+  min-width: 200px; /* Ensures the items maintain a minimum width */
+}
+
+.project-link {
+  display: inline-block;
+  color: #b5ded5;
+  font-weight: 400;
+  text-decoration: none;
+  padding: 12px 24px;
+  border: 2px solid #007bff;
+  border-radius: 5px;
+  transition: background-color 0.3s, color 0.3s;
+  font-size: 1.2em;
+}
+
+.project-link:hover {
+  background-color: #007bff;
+  color: white;
+}
+
+@media (max-width: 768px) {
+  .projects-list {
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  #projects-heading {
+    font-size: 3rem; /* Adjust font size for mobile */
+  }
+
+  .project-link {
+    width: 100%; /* Make project links full width on smaller screens */
+  }
+}
diff --git a/App.jsx b/App.jsx
new file mode 100644
index 0000000..89475e8
--- /dev/null
+++ b/App.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import "./App.css";
+import AllCourses from "./components/AllCourses";
+import Home from "./components/Home";
+import Login from "./components/Login";
+import Signup from "./components/Signup";
+import PrivacyPolicy from "./components/PrivacyPolicy";
+import TermsOfUse from "./components/TermsOfUse";
+import Projects from "./components/Projects"; 
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+        <Route path="/terms-of-use" element={<TermsOfUse />} />
+        <Route path="/courses" element={<AllCourses />} />
+        <Route path="/projects" element={<Projects />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;
diff --git a/Home.jsx b/Home.jsx
new file mode 100644
index 0000000..2591019
--- /dev/null
+++ b/Home.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import Navbar from './Navbar'
+import Introduction from './Introduction'
+import Projects from "./Projects";
+import { Courses, Slideshow, Contact, Footer } from "./index";
+function Home() {
+  return (
+    <div>
+      <Navbar />
+      <Introduction />
+      <Courses />
+      <Projects />
+      <Slideshow />
+      <Contact />
+      <Footer />
+    </div>
+  );
+}
+
+export default Home
\ No newline at end of file
diff --git a/Navbar.jsx b/Navbar.jsx
new file mode 100644
index 0000000..8ab1e6e
--- /dev/null
+++ b/Navbar.jsx
@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+import Logo from "../assets/logo.png";
+import ProgressBar from "./ProgressBar";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { logout } from "../services/operations/authAPI";
+
+function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const navigate = useNavigate();
+  const { user } = useSelector((state) => state.profile);
+  const dispatch = useDispatch();
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <nav>
+      <ProgressBar />
+      <div className="nav-up">
+        <div className="nav-icon">
+          <a href="/">
+            <img src={Logo} alt="Logo" className="logo" />
+          </a>
+          <p>Code Book</p>
+        </div>
+        <div
+          className={`hamburger ${isOpen ? "open" : ""}`}
+          onClick={toggleMenu}
+        >
+          <i
+            className={`fa ${isOpen ? "fa-times" : "fa-bars"}`}
+            aria-hidden="true"
+          ></i>
+        </div>
+      </div>
+      <div className={`nav-content ${isOpen ? "show" : ""}`}>
+        <ul className="nav-list">
+          <li className="nav-item">
+            <a href="/">Home</a>
+          </li>
+          <li className="nav-item">
+            <a href="#courses">Courses and Projects</a>
+          </li>
+        
+          <li className="nav-item">
+            <a href="#testimonials">Testimonials</a>
+          </li>
+
+          <li className="nav-item">
+            <a href="#contact">Contact</a>
+          </li>
+        </ul>
+        <div className="nav-button">
+          {!user ? (
+            <>
+              <button className="btn">
+                <a href="/signup">
+                  Sign-up <i className="fa-solid fa-arrow-right"></i>
+                </a>
+              </button>
+              <button className="btn">
+                <a href="/login">
+                  Log-in <i className="fa-solid fa-arrow-right"></i>
+                </a>
+              </button>
+            </>
+          ) : (
+            <button className="btn" onClick={() => dispatch(logout(navigate))}>
+              <div>
+                LogOut <i className="fa-solid fa-arrow-right"></i>
+              </div>
+            </button>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;
+
diff --git a/Projects.jsx b/Projects.jsx
new file mode 100644
index 0000000..8529d4c
--- /dev/null
+++ b/Projects.jsx
@@ -0,0 +1,83 @@
+import React from "react";
+import "../App.css";
+
+function Projects() {
+  return (
+    <>
+      <br></br>
+      <br></br>
+      <h2 id="projects-heading">Projects</h2> {/* Heading outside the box */}
+      <section id="projects" className="projects-section">
+        <ul className="projects-list">
+          <li>
+            <a
+              href="https://youtu.be/iOeebAM_C5g?feature=shared"
+              className="project-link"
+            >
+              Java Project
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.youtube.com/playlist?list=PLsPse_rAwAIpjis9XwQXs-uz7gwfu-pcd"
+              className="project-link"
+            >
+              C++ Project
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.youtube.com/playlist?list=PLiLzqLEAMKr7_oTKOosIP1QH4GTlZe29G"
+              className="project-link"
+            >
+              C Project
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.youtube.com/playlist?list=PLl316cKxhMxtOWHa88kDqm42uWz1aqGfD"
+              className="project-link"
+            >
+              Python Project
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://youtu.be/5ZdHfJVAY-s?feature=shared"
+              className="project-link"
+            >
+              React Projects
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.youtube.com/playlist?list=PLMxec9nlD1X2ifPtxeu3Xm9nK1c4eBx2x"
+              className="project-link"
+            >
+              JavaScript Projects
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://youtube.com/playlist?list=PLImJ3umGjxdD3ov2lwg0SM5rxz5v9FjOf&feature=shared"
+              className="project-link"
+            >
+              HTML and CSS Projects
+            </a>
+          </li>
+
+          <li>
+            <a
+              href="https://youtube.com/playlist?list=PLnQbggnVfvo2wIr4kV1h6208xk1pPf2F0&feature=shared"
+              className="project-link"
+            >
+              Swift Projects
+            </a>
+          </li>
+        </ul>
+      </section>
+    </>
+  );
+}
+
+export default Projects;