133 refactory users microservice 11

users_microservice/src/main/java/com/users/application/controllers/PagesController.java

@@ -15,7 +15,7 @@ public String index(){
 
     @GetMapping("/sign-up")
     public String signupPage() {
-        return "home/sign-up"; // looks for signup.html in src/main/resources/templates
+        return "home/registration"; // looks for signup.html in src/main/resources/templates
     }
 
     @GetMapping("/reset")

users_microservice/src/main/resources/static/css/styles.css

@@ -0,0 +1,213 @@
+:root {
+  --black: #000000;
+  --dark-grey: #111111;
+  --dark-orange: #e65100;
+  --light-orange: #ffb74d;
+  --light-green: #81c784;
+  --focus-green: #4caf50;
+  --pink: #ff69b4;
+  --light-grey: #f8f9fa;
+  --medium-grey: #e9ecef;
+  --nav-height: 70px;
+}
+
+body {
+  background-color: #ffffff;
+  color: #111111;
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  line-height: 1.6;
+  scroll-behavior: smooth;
+  padding-top: var(--nav-height);
+}
+
+section {
+  padding-top: 3.5rem;
+  padding-bottom: 4rem;
+}
+
+.section-grey,
+.section-medium {
+  border: 2px solid var(--pink);
+  border-radius: 12px;
+  background-color: var(--light-grey);
+  margin: 0 auto 2rem auto;
+  max-width: 1400px;
+}
+
+.section-medium {
+  background-color: var(--medium-grey);
+}
+
+.card {
+  background-color: #ffffff;
+  border: 2px solid var(--pink) !important;
+  border-radius: 10px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 24px rgba(255,105,180,0.25);
+}
+
+.btn-black,
+.btn-primary-custom {
+  background-color: var(--black);
+  color: #ffffff;
+  border: 2px solid var(--black);
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.btn-black:hover,
+.btn-primary-custom:hover {
+  background-color: var(--light-orange);
+  color: #222222;
+  border-color: var(--light-orange);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(255,183,77,0.4);
+}
+
+.btn-login {
+  background-color: #ffffff;
+  color: var(--dark-grey);
+  border: 2px solid var(--dark-grey);
+  font-weight: 500;
+  transition: all 0.3s ease;
+  padding: 0.375rem 1rem;
+}
+
+.btn-login:hover {
+  background-color: var(--dark-orange);
+  color: white;
+  border-color: var(--dark-orange);
+  transform: translateY(-2px);
+}
+
+.btn-learn-more {
+  background-color: var(--light-orange);
+  color: white;
+  border: 2px solid var(--focus-green);
+  font-weight: 600;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(129, 199, 132, 0.25);
+}
+
+.btn-learn-more:hover {
+  background-color: #ff9800;
+  border-color: #388e3c;
+  color: white;
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 12px 28px rgba(76, 175, 80, 0.35);
+}
+
+.btn-learn-more:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.3rem rgba(76, 175, 80, 0.4);
+}
+
+.nav-link {
+  color: var(--black) !important;
+  font-weight: 500;
+  position: relative;
+  padding-bottom: 0.6rem;
+  transition: color 0.25s ease;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: var(--black) !important;
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 5%;
+  width: 0;
+  height: 3px;
+  background-color: var(--light-green);
+  border-radius: 3px;
+  transition: width 0.35s ease, left 0.35s ease;
+}
+
+.nav-link.active::after,
+.nav-link:hover::after {
+  width: 90%;
+  left: 5%;
+}
+
+.form-control:focus,
+.form-control:active {
+  border-color: var(--focus-green) !important;
+  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25) !important;
+  outline: none;
+}
+
+.form-label {
+  transition: color 0.2s ease;
+}
+
+.form-group:focus-within .form-label {
+  color: var(--focus-green) !important;
+  font-weight: 500;
+}
+
+h1, h2, h3, h4 {
+  font-weight: 700;
+  color: var(--black);
+}
+
+nav {
+  border-bottom: 3px solid var(--pink);
+  background-color: #ffffff;
+}
+
+.hero {
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
+  border-bottom: 4px solid var(--pink);
+  margin-bottom: 3rem;
+  padding: 5rem 0 4rem;
+  background-color: #fff;
+}
+
+.hero-text h1 {
+  color: var(--dark-orange);
+  font-size: 4.5rem;
+  line-height: 1.1;
+}
+
+.hero-img img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 16px;
+  border: 3px solid var(--pink);
+  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
+}
+
+@media (max-width: 991px) {
+  .hero-text {
+    text-align: center;
+    margin-bottom: 3rem;
+  }
+  .hero-img {
+    text-align: center;
+  }
+}
+
+.feature-img {
+  max-height: 160px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid var(--pink);
+  margin-bottom: 1.25rem;
+}
+
+footer {
+  background-color: var(--light-grey);
+  border-top: 4px solid var(--pink);
+  padding: 3rem 0 2rem;
+  color: var(--black);
+}