upadted

src/app/intro-page/intro-page.component.css

@@ -42,33 +42,52 @@
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: url(/assets/4.png) no-repeat center center fixed;
+  background: url(/assets/11.png) no-repeat center center fixed;
   background-size: cover;
   color: #e5e7eb;
-  justify-content: space-around;
-  gap: 6vw;
+  justify-content: space-evenly;
+  gap: 12vw;
 }
 
-/* Topbar */
+/* Topbar aligned like QA */
 .topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: #000000d4;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  padding: 17px 97px;
+  justify-content: space-between;
   display: flex;
-  align-items: center;
-  justify-content: space-around;
-  gap: 54vw;
   width: 100%;
+  align-items: center;
 }
 
 .brand {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 1.5vw;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
 }
 
-.brand__logo {
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
-  background: #00ff88;
+/* Match QA brand logo sizing/behavior */
+.brand__logo-img {
+  background: #ffffff;
+  max-width: 4.2vw;
+  min-width: 56px;
+  height: auto;
+  border-radius: 50%;
+  padding: 4px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
+  transition: transform .25s ease;
+}
+
+.brand:hover .brand__logo-img {
+  transform: scale(1.05);
 }
 
 .brand__name {
@@ -78,6 +97,18 @@
   font-weight: lighter;
 }
 
+  /* Color the "Py" like QA */
+  .brand__name strong {
+    font-weight: unset;
+    color: #f3a54c;
+  }
+
+.brand__link {
+  display: inline-flex;
+  align-items: center;
+  color: white;
+}
+
 .actions {
   display: flex;
   align-items: center;
@@ -123,19 +154,16 @@
   background: #0b0f1a;
 }
 
-/*.btn-disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}*/
-
-  .btn-disabled:hover {
-    border-color: #f3a54c !important;
-  }
+.btn-disabled:hover {
+  border-color: #f3a54c !important;
+}
 
-/* Hero */
 .hero {
   margin-left: 5vw;
+  position: absolute;
+  top: 50%;
+  left: 16.3%;
+  transform: translate(-50%, -16.3%);
 }
 
 .hero__content {
@@ -143,22 +171,25 @@
 }
 
 .hero__title {
-  margin: 0 0 10px;
-  font-size: clamp(26px, 4.2vw, 44px);
-  line-height: 1.12;
-  font-weight: 800;
+  margin: 0 0 25px;
+  font-size: 2.3vw;
+  line-height: 1.2;
+  font-weight: bold;
 }
 
 .hero__text {
   color: #b9c2d0;
-  margin: 0 0 18px;
-  font-size: clamp(14px, 2vw, 16px);
+  margin: 0 0 34px;
+  font-size: 0.9vw;
+  font-weight: 500;
+  line-height: 1.5vw;
 }
 
 .cta {
   display: flex;
   gap: 10px;
-  flex-wrap: wrap;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
 }
 
 /* Footer */
@@ -170,27 +201,11 @@
   font-size: 0.7vw;
 }
 
+  /* remove styles targeting removed footer link */
   .footer a {
-    text-decoration: unset;
-    align-items: center;
-    border: 2px solid #f3a54c;
-    color: white;
-    border-radius: 2vw;
-    display: inline-flex;
-    align-items: center;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, .25);
-    background: rgba(11, 15, 26, 0.6);
-    color: #cfe8ff;
-    cursor: pointer;
-    padding: 0 4px;
+    all: unset;
   }
 
-    .footer a i {
-      margin-right: 2px;
-      line-height: 1;
-    }
-
 .about-btn {
   display: inline-flex;
   align-items: center;
@@ -227,19 +242,6 @@
     border-color: #fff !important;
   }
 
-.brand__logo-img {
-  background: white;
-  max-width: 5vw;
-  height: auto;
-  border-radius: 1vw;
-  margin: 0.5vw;
-}
-
-.brand__link {
-  display: inline-flex;
-  align-items: center;
-}
-
 /* AUTH Modal overlay */
 .modal-backdrop {
   position: fixed;
@@ -248,38 +250,95 @@
   display: grid;
   place-items: center;
   z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+  backdrop-filter: blur(8px);
 }
 
-button.modal-close {
-  border: 3px solid #ff0000;
-  background: transparent;
-  color: white;
-  position: relative;
-  left: 47vw;
-  top: 1.8vw;
-  z-index: 11;
-  border-radius: 10px;
-  cursor: pointer;
+.modal-panel {
+  animation: slideIn 0.3s ease-out;
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
 
+  to {
+    opacity: 1;
+  }
+}
 
-  /* Ensure the auth components fit properly in the modal */
-  .modal-panel app-sign-in,
-  .modal-panel app-sign-up {
-    display: block;
-    width: 100%;
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
   }
 
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+button.modal-close {
+  background: white;
+  color: black;
+  position: relative;
+  left: 48.2vw;
+  top: 0.7vw;
+  z-index: 11;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 1vw;
+  font-weight: bold;
+}
 
-/* ABOUT Modal (new) */
+/* Ensure the auth components fit properly in the modal */
+.modal-panel app-sign-in,
+.modal-panel app-sign-up {
+  display: block;
+  width: 100%;
+}
+
+/* Enhanced ABOUT Modal backdrop */
 .about-backdrop {
   position: fixed;
   inset: 0;
-  background: rgb(255 255 255 / 34%);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   z-index: 1100; /* above auth backdrop */
+  animation: fadeIn 0.3s ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+  /* Add a subtle pattern/texture to the backdrop */
+  .about-backdrop::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle at 25% 25%, rgba(243, 165, 76, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
+    pointer-events: none;
+  }
+
+/* Add a subtle animation to the backdrop pattern */
+@keyframes subtleShift {
+  0%, 100% {
+    transform: translate(0, 0);
+  }
+
+  50% {
+    transform: translate(3px, 3px);
+  }
 }
 
+.about-backdrop::before {
+  animation: subtleShift 15s ease-in-out infinite;
+}
+
+/* Enhanced about modal */
 .about-modal {
   position: fixed;
   z-index: 1101; /* above auth modal */
@@ -288,93 +347,559 @@ button.modal-close {
   width: min(720px, 92vw);
   max-height: 80vh;
   overflow: auto;
-  background: #ffffff;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
   color: #111;
-  border-radius: 12px;
-  box-shadow: 0 20px 50px rgba(0,0,0,.25);
+  border-radius: 16px;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
   outline: none;
+  animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.about-modal__header,
-.about-modal__footer {
-  padding: 16px 20px;
-  border-bottom: 1px solid rgba(0,0,0,.08);
-  display: flex;
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
 }
 
-.about-modal__footer {
-  border-top: 1px solid rgba(0,0,0,.08);
-  border-bottom: none;
+.about-modal__header {
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+  align-items: center;
+  background: #dedee7;
+  color: #0b0f1a;
+  border-radius: 16px 16px 0 0;
 }
 
+  .about-modal__header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
 .about-modal__body {
-  padding: 16px 20px;
+  padding: 24px;
   line-height: 1.6;
+  background: #ffffff;
+  text-align: justify;
+}
+
+  .about-modal__body p {
+    margin-bottom: 16px;
+  }
+
+.about-modal__footer {
+  padding: 16px 24px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  background: #f8f9fa;
+  border-radius: 0 0 16px 16px;
 }
 
+/* Enhanced close button for the about modal */
 .about-close {
   margin-left: auto;
   border: none;
-  background: transparent;
-  font-size: 20px;
+  color: #000000;
+  border: 2px solid #f3a54c;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  font-size: 22px;
   cursor: pointer;
-  color: #111;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  font-weight: bold;
+  background: transparent;
 }
 
-/* Make the embedded auth components look like panels */
-/*:host ::ng-deep app-sign-in .auth-page,
-:host ::ng-deep app-sign-up .auth-page {
-  min-height: auto !important;
-  padding: 0 !important;
-  background: transparent !important;
-}*/
+  .about-close:hover {
+    border: 2px solid #00ff88;
+    /*transform: scale(0.8);*/
+  }
 
-/*:host ::ng-deep app-sign-in .auth-box,
-:host ::ng-deep app-sign-up .auth-box {
-  width: min(920px, 92vw) !important;
-  margin: 0 auto !important;
-}*/
+  .about-close:focus {
+    outline: 2px solid #00ff88;
+    outline-offset: 2px;
+  }
 
-/* Optional: if you want a tighter width for Sign-In 
-:host ::ng-deep app-sign-in .auth-box {
-  width: min(720px, 92vw) !important;
+/* High contrast mode adjustments */
+.page.high-contrast .about-backdrop {
+  background: rgba(0, 0, 0, 0.8);
 }
-*/
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgb(255 255 255 / 34%);
-  display: grid;
-  place-items: center;
-  z-index: 1000;
-  animation: fadeIn 0.2s ease-out;
+
+  .page.high-contrast .about-backdrop::before {
+    display: none;
+  }
+
+.page.high-contrast .about-modal {
+  border: 2px solid #fff;
+  background: #000;
+  color: #fff;
 }
 
-.modal-panel {
-  animation: slideIn 0.3s ease-out;
+.page.high-contrast .about-modal__header {
+  border-bottom: 2px solid #fff;
+  background: #000;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
+.page.high-contrast .about-modal__footer {
+  border-top: 2px solid #fff;
+  background: #000;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .about-backdrop,
+  .about-modal {
+    animation: none;
   }
 
-  to {
-    opacity: 1;
+    .about-backdrop::before {
+      animation: none;
+    }
+
+  .about-close:hover {
+    transform: none;
   }
 }
 
-@keyframes slideIn {
-  from {
+/* Enhanced tooltip for Get Started when not signed in */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  /* theme tokens */
+  --t-bg: #cfe8ff; /* requested background */
+  --t-border: #2b3246;
+  --t-text: #0b0f1a; /* dark text for contrast */
+  --t-shadow: rgba(0,0,0,.25);
+  --t-glow: rgba(0,255,136,.18); /* brand neon */
+}
+
+/* Bubble positioned to the right of trigger */
+.tooltip__bubble {
+  transform: translateY(-50%) translateX(-6px) scale(0.98);
+  padding: 10px 14px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .18s ease, transform .18s ease;
+  transition-delay: .06s;
+  z-index: 20;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 12px);
+  background: #cfe8ffb5;
+  color: var(--t-text);
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 10px;
+  transition: opacity .18s ease, transform .18s ease;
+  width: max-content;
+}
+
+  /* subtle top highlight */
+  .tooltip__bubble::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background: radial-gradient(120px 40px at 50% -20px, rgba(255,255,255,.35), transparent 70%);
+  }
+
+  /* Arrow on the left side pointing to trigger */
+  .tooltip__bubble::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -16px;
+    transform: translateY(-50%);
+    border: 8px solid transparent;
+    border-right-color: var(--t-bg);
+    filter: drop-shadow(0 2px 0 rgba(0,0,0,.12));
+  }
+
+.tooltip.tooltip--active:hover .tooltip__bubble,
+.tooltip.tooltip--active:focus-within .tooltip__bubble,
+.tooltip.tooltip--active .tooltip__bubble:hover,
+.tooltip.tooltip--active .tooltip__bubble:focus {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0) scale(1);
+  pointer-events: auto;
+  animation: tooltip-pop-right .22s cubic-bezier(.2,.8,.25,1);
+}
+
+@keyframes tooltip-pop-right {
+  0% {
     opacity: 0;
-    transform: translateY(-20px);
+    transform: translateY(-50%) translateX(-10px) scale(.96);
   }
 
-  to {
+  60% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(-50%) translateX(2px) scale(1.02);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0) scale(1);
   }
 }
+
+/* High contrast friendly tooltip */
+.page.high-contrast .tooltip__bubble {
+  background: #000;
+  color: #fff;
+  border-color: #fff;
+  box-shadow: 0 0 0 2px #fff;
+}
+
+  .page.high-contrast .tooltip__bubble::after {
+    border-right-color: #000;
+  }
+
+/* Keep right-side placement on small screens as requested */
+@media (prefers-reduced-motion: reduce) {
+  .tooltip__bubble {
+    transition: none;
+  }
+
+  .tooltip.tooltip--active:hover .tooltip__bubble,
+  .tooltip.tooltip--active:focus-within .tooltip__bubble {
+    animation: none;
+  }
+}
+
+/* Cards Section */
+.cards {
+  display: flex;
+  justify-content: space-around;
+  padding: 60px 10%;
+  background: #f9f9f9;
+  flex-wrap: wrap;
+}
+
+.card {
+  width: 30%;
+  background: #fff;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  margin-bottom: 20px;
+  border-radius: 12px;
+  overflow: hidden;
+  text-align: left;
+}
+
+  .card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+
+  .card h3 {
+    margin: 15px;
+    font-size: 20px;
+    color: #444;
+  }
+
+  .card p {
+    margin: 0 15px 20px 15px;
+    font-size: 0.89vw;
+    line-height: 1.5;
+    text-align: justify;
+    color: black;
+  }
+
+/* Scrolling Images */
+.scroll-container {
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 20px 0;
+  position: relative;
+}
+
+/* Use flex track with two identical sequences for seamless loop */
+.scroll-images {
+  display: flex;
+  align-items: center;
+  animation: scroll-left 40s linear infinite;
+  width: max-content;
+}
+
+  .scroll-images img {
+    width: 10vw;
+    height: 10vw;
+    margin: 0 10px;
+    border-radius: 8px;
+    object-fit: cover;
+    flex: 0 0 auto;
+  }
+
+/* Pause on hover (optional UX improvement) */
+.scroll-container:hover .scroll-images {
+  animation-play-state: paused;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+  /* shift exactly one set width (because duplicated) */
+}
+
+/* Special Content */
+.special-content {
+  background: #dedee7;
+  padding: 50px 15%;
+  text-align: center;
+}
+
+  .special-content h2 {
+    font-size: 28px;
+    margin-bottom: 20px;
+  }
+
+  .special-content p {
+    font-size: 18px;
+    line-height: 1.6;
+  }
+
+/* Footer */
+footer {
+  background: black;
+  color: #fff;
+  text-align: center;
+  padding: 15px 10px;
+}
+
+  footer a {
+    color: #fff;
+    text-decoration: none;
+    margin: 0 10px;
+  }
+
+  footer .social-icons {
+    margin-top: 10px;
+  }
+
+    footer .social-icons img {
+      width: 25px;
+      margin: 0 8px;
+      vertical-align: middle;
+    }
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .card {
+    width: 100%;
+  }
+
+  .brand__name {
+    font-size: 1.5rem;
+  }
+
+  .topbar {
+    gap: 20px;
+    justify-content: space-between;
+  }
+
+  .cards {
+    padding: 30px 5%;
+  }
+
+  .special-content {
+    padding: 30px 5%;
+  }
+}
+
+/* Adjust page padding to account for fixed header/footer */
+.page {
+  padding-top: 70px; /* Space for fixed header */
+  padding-bottom: 80px; /* Space for fixed footer */
+  height: auto;
+  min-height: 100vh;
+}
+
+/* Adjust cards section to account for fixed elements */
+.cards {
+  padding: 80px 51px;
+}
+
+/* Adjust scrolling images section */
+.scroll-container {
+  margin: 20px 0;
+}
+
+/* Adjust special content section */
+.special-content {
+  padding: 60px 15% 80px;
+}
+
+/* Responsive adjustments for fixed elements */
+@media (max-width: 768px) {
+  .topbar {
+    gap: 20px;
+    padding: 8px 12px;
+  }
+
+  .page {
+    padding-top: 60px;
+    padding-bottom: 70px;
+  }
+
+  .cards {
+    padding: 70px 5% 30px;
+  }
+
+  .special-content {
+    padding: 40px 5% 60px;
+  }
+
+  footer .social-icons img {
+    width: 20px;
+    margin: 0 5px;
+  }
+}
+
+/* Social Media Icons */
+.social-icons {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.social-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+  .social-icon:hover {
+    transform: translateY(-3px);
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  /* Specific colors for each platform */
+  .social-icon.facebook:hover {
+    background: #3b5998;
+    box-shadow: 0 4px 8px rgba(59, 89, 152, 0.3);
+  }
+
+  .social-icon.youtube:hover {
+    background: #ff0000;
+    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
+  }
+
+  .social-icon.linkedin:hover {
+    background: #0077b5;
+    box-shadow: 0 4px 8px rgba(0, 119, 181, 0.3);
+  }
+
+  .social-icon.instagram:hover {
+    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+    box-shadow: 0 4px 8px rgba(188, 24, 136, 0.3);
+  }
+
+/* Responsive adjustments for social icons */
+@media (max-width: 768px) {
+  .social-icons {
+    gap: 10px;
+  }
+
+  .social-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+  }
+}
+
+/* New special-card styles */
+.special-card {
+  width: min(840px, 90%);
+  margin: 0 auto;
+  background: #fff;
+  padding: 28px 32px 34px;
+  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15);
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 20px;
+  text-align: left;
+}
+
+  .special-card h3 {
+    margin: 0 0 16px;
+    font-size: 28px;
+    background: linear-gradient(90deg, #f3a54c, #ffcb7a);
+    -webkit-background-clip: text;
+    color: transparent;
+    letter-spacing: .5px;
+    color: black;
+    text-align: center;
+  }
+
+  .special-card p {
+    margin: 0;
+    line-height: 1.6;
+    color: #000000;
+  }
+
+.primary-nav {
+  display: flex;
+  gap: 1.8rem;
+}
+
+.nav-link {
+  position: relative;
+  font-size: 0.9rem;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #e5e7eb;
+  text-decoration: none;
+  padding: 6px 4px;
+  transition: color .25s ease;
+}
+
+  .nav-link::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg,#f3a54c,#ffcb7a);
+    transition: width .3s ease;
+    border-radius: 2px;
+  }
+
+  .nav-link:hover {
+    color: #f3a54c;
+  }
+
+    .nav-link:hover::after {
+      width: 100%;
+    }

src/app/intro-page/intro-page.component.html

@@ -1,18 +1,44 @@
 <a class="skip-link" href="#main">Skip to content</a>
 
 <section class="page">
-
-  <!-- Top bar -->
+  <!-- Top bar (now fixed) -->
   <header class="topbar" role="banner" aria-label="Top navigation">
-    <div class="brand" aria-label="Application name">
+    <a class="brand brand__link"
+       href="https://pykara.net/"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Visit Pykara website">
       <img src="assets/pykara-logo.png" alt="Pykara Technologies logo" class="brand__logo-img" />
-      <span class="brand__name">{{ tr('brand') }}</span>
-    </div>
+      <span class="brand__name"><strong>Py</strong>-Match</span>
+    </a>
+
+    <!-- Primary navigation for assessment types -->
+    <nav class="primary-nav" aria-label="Assessment navigation">
+      <a routerLink="/question-answer" [queryParams]="{ role: 'marriage' }" class="nav-link">
+        <i class="fa-solid fa-ring nav-link__icon" aria-hidden="true"></i>
+        <span>Marriage</span>
+      </a>
+      <a routerLink="/question-answer" [queryParams]="{ role: 'interview' }" class="nav-link">
+        <i class="fa-solid fa-user-tie nav-link__icon" aria-hidden="true"></i>
+        <span>Interview</span>
+      </a>
+      <a routerLink="/question-answer" [queryParams]="{ role: 'partnership' }" class="nav-link">
+        <i class="fa-solid fa-handshake nav-link__icon" aria-hidden="true"></i>
+        <span>Partnership</span>
+      </a>
+    </nav>
 
     <nav class="actions" aria-label="Actions">
-      <!-- CHANGED: open modal instead of routerLink -->
-      <button type="button" class="btn btn-primary" (click)="openSignUp()">{{ tr('signup') }}</button>
-      <button type="button" class="btn btn-ghost" (click)="openSignIn()">{{ tr('signin') }}</button>
+      <ng-container *ngIf="!isSignedIn; else signedInBlock">
+        <button type="button" class="btn btn-primary" (click)="openSignUp()">{{ tr('signup') }}</button>
+        <button type="button" class="btn btn-ghost" (click)="openSignIn()">{{ tr('signin') }}</button>
+      </ng-container>
+      <ng-template #signedInBlock>
+        <button type="button" class="profile-btn" aria-label="Profile">
+          <i class="fa-solid fa-user" aria-hidden="true"></i>
+        </button>
+        <button type="button" class="btn btn-ghost" (click)="signOut()">Sign out</button>
+      </ng-template>
     </nav>
   </header>
 
@@ -22,42 +48,18 @@
       <h1 class="hero__title">{{ tr('tagline') }}</h1>
       <p class="hero__text">{{ tr('subtext') }}</p>
       <div class="cta">
-        <!-- Updated: Add disabled attribute and tooltip -->
-        <a routerLink="/question-answer"
-           class="btn btn-primary"
-           [class.btn-disabled]="!isSignedIn"
-           [attr.aria-disabled]="!isSignedIn"
-           [title]="!isSignedIn ? 'Please sign in first' : ''">
-          {{ tr('getStarted') }}
-        </a>
-        <small *ngIf="!isSignedIn" style="display: block; margin-top: 8px; color: #ffa500;">
-          Please sign in to get started
-        </small>
+        <button type="button"
+                class="btn btn-ghost"
+                (click)="openAbout()"
+                aria-haspopup="dialog"
+                aria-controls="aboutDialog"
+                [attr.aria-expanded]="isAboutOpen ? 'true' : 'false'">
+          Know more
+        </button>
       </div>
     </div>
   </main>
 
-  <!-- Footer (updated) -->
-  <footer class="footer" aria-label="Footer">
-    <a href="https://pykara.net/"
-       target="_blank"
-       rel="noopener noreferrer"
-       aria-label="Visit Pykara website">
-      <i class="fa-solid fa-globe" aria-hidden="true"></i>
-      <span style="font-family: sans-serif">Visit Pykara</span>
-    </a>
-
-    <!-- About us button -->
-    <button type="button"
-            class="about-btn"
-            (click)="openAbout()"
-            aria-haspopup="dialog"
-            aria-controls="aboutDialog"
-            [attr.aria-expanded]="isAboutOpen ? 'true' : 'false'">
-      <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
-      <span>About us</span>
-    </button>
-  </footer>
 
   <!-- AUTH MODAL OVERLAY (unchanged) -->
   <div class="modal-backdrop" *ngIf="modal" (click)="backdropClick($event)">
@@ -92,9 +94,142 @@
     </div>
 
     <div class="about-modal__body">
-      <p><strong>Py-Match</strong> is an AI-driven personality profiling and matching system that models human traits using four colors — Red, Blue, Green, and Yellow. It conducts an adaptive Q&amp;A session where each response secretly maps to a color; the engine then computes a percentage distribution across the four colors to describe the user’s dominant and supporting traits.</p>
-      <p>The platform applies these profiles to practical scenarios — such as marriage compatibility, recruitment, leadership assessment, and personal development — by comparing user profiles to role templates with weighted color mixes. The system architecture includes a web/mobile UI, an AI question generator, a scoring and profile calculator, a matching engine, and secure data storage. The design emphasizes simplicity, scalability, localization, and privacy.</p>
+      <h1>Your Ideal Match Awaits</h1>
+      <p><strong>Py-Match</strong> is an advanced personality assessment tool designed to help individuals find the ideal match based on their core personality traits. The system uses a series of adaptive questions that are tailored to each user's profile. Each response is mapped to one of four core personality profiles, which represent different dominant behavioral tendencies. As users progress through the assessment, the platform continuously adapts, ensuring that the questions remain relevant and engaging, ultimately providing a more accurate personality profile.</p>
+
+      <p>The primary goal of <strong>Py-Match</strong> is to offer data-driven, personalized matches for various scenarios such as marriage compatibility, business partnerships, and leadership fit. By comparing the individual's personality profile to role-specific templates, the platform ensures that the match is based on both complementary and compatible traits. This sophisticated matching engine provides an in-depth, personalized experience while maintaining strict privacy standards. With a focus on both accuracy and user confidentiality, <strong>Py-Match</strong> guarantees that sensitive information is securely stored, offering users peace of mind while they explore the platform's potential.</p>
     </div>
   </div>
 
 </section>
+
+<!-- Cards Section -->
+<section class="cards">
+  <div class="card">
+    <img src="assets/ring.png" alt="Marriage Match">
+    <h3><b>Marriage Match</b></h3>
+    <p>
+      Find the right life partner, beyond surface-level details.<br>
+      This analyzes values, habits, and personality traits such as analytical, organized, decisive, and creative.<br>
+      Understand true compatibility.<br>
+      See strengths and differences clearly.<br>
+      Make informed decisions for a lasting relationship.
+    </p>
+  </div>
+  <div class="card">
+    <img src="assets/Hiring.png" alt="Interview & Hiring Match">
+    <h3><b>Interview & Hiring Match</b></h3>
+    <p>
+      Recruit with confidence, powered by science.<br>
+      Spot hidden strengths and leadership potential.<br>
+      Match candidates to roles where they'll thrive.<br>
+      Build balanced, high-performing teams.
+    </p>
+  </div>
+  <div class="card">
+    <img src="assets/business.png" alt="Business Partner Match">
+    <h3><b>Business Partner Match</b></h3>
+    <p>
+      Choose partners who complement your strengths.<br>
+      Identify complementary skills and leadership styles.<br>
+      Reduce risks of conflict in decision-making.<br>
+      Build stronger, trust-based collaborations.
+    </p>
+  </div>
+</section>
+
+<!-- Scrolling Images -->
+<div class="scroll-container">
+  <div class="scroll-images">
+    <!-- Sequence A -->
+    <img src="assets/small-img/1.png" alt="smallImage">
+    <img src="assets/small-img/2.png" alt="smallImage">
+    <img src="assets/small-img/3.png" alt="smallImage">
+    <img src="assets/small-img/4.png" alt="smallImage">
+    <img src="assets/small-img/5.png" alt="smallImage">
+    <img src="assets/small-img/6.png" alt="smallImage">
+    <img src="assets/small-img/7.png" alt="smallImage">
+    <img src="assets/small-img/8.png" alt="smallImage">
+    <img src="assets/small-img/9.png" alt="smallImage">
+    <img src="assets/small-img/10.png" alt="smallImage">
+    <img src="assets/small-img/11.png" alt="smallImage">
+    <img src="assets/small-img/12.png" alt="smallImage">
+    <img src="assets/small-img/13.png" alt="smallImage">
+    <img src="assets/small-img/14.png" alt="smallImage">
+    <img src="assets/small-img/15.png" alt="smallImage">
+    <img src="assets/small-img/16.png" alt="smallImage">
+    <img src="assets/small-img/17.png" alt="smallImage">
+    <img src="assets/small-img/18.png" alt="smallImage">
+    <img src="assets/small-img/19.png" alt="smallImage">
+    <img src="assets/small-img/20.png" alt="smallImage">
+    <img src="assets/small-img/21.png" alt="smallImage">
+    <img src="assets/small-img/22.png" alt="smallImage">
+    <img src="assets/small-img/24.png" alt="smallImage">
+    <img src="assets/small-img/26.png" alt="smallImage">
+    <img src="assets/small-img/28.png" alt="smallImage">
+    <!-- Sequence B (duplicate for seamless loop) -->
+    <img src="assets/small-img/1.png" alt="smallImage">
+    <img src="assets/small-img/2.png" alt="smallImage">
+    <img src="assets/small-img/3.png" alt="smallImage">
+    <img src="assets/small-img/4.png" alt="smallImage">
+    <img src="assets/small-img/5.png" alt="smallImage">
+    <img src="assets/small-img/6.png" alt="smallImage">
+    <img src="assets/small-img/7.png" alt="smallImage">
+    <img src="assets/small-img/8.png" alt="smallImage">
+    <img src="assets/small-img/9.png" alt="smallImage">
+    <img src="assets/small-img/10.png" alt="smallImage">
+    <img src="assets/small-img/11.png" alt="smallImage">
+    <img src="assets/small-img/12.png" alt="smallImage">
+    <img src="assets/small-img/13.png" alt="smallImage">
+    <img src="assets/small-img/14.png" alt="smallImage">
+    <img src="assets/small-img/15.png" alt="smallImage">
+    <img src="assets/small-img/16.png" alt="smallImage">
+    <img src="assets/small-img/17.png" alt="smallImage">
+    <img src="assets/small-img/18.png" alt="smallImage">
+    <img src="assets/small-img/19.png" alt="smallImage">
+    <img src="assets/small-img/20.png" alt="smallImage">
+    <img src="assets/small-img/21.png" alt="smallImage">
+    <img src="assets/small-img/22.png" alt="smallImage">
+    <img src="assets/small-img/24.png" alt="smallImage">
+    <img src="assets/small-img/26.png" alt="smallImage">
+    <img src="assets/small-img/28.png" alt="smallImage">
+  </div>
+</div>
+
+<!-- Special Content as Card -->
+<section class="special-content">
+  <div class="card special-card">
+    <h3><b>Why Py-Match is Special?</b></h3>
+    <p>
+      <strong>Py-Match</strong> isn't just about data — it's about people.<br>
+      Using cutting-edge technology and psychology-based personality models, <strong>Py-Match</strong> decodes human compatibility.<br>
+      Whether in love, business, or recruitment, <strong>Py-Match</strong> gives you clarity and confidence.<br>
+      It's science made simple, to help you make life's most important decisions wisely.
+    </p>
+  </div>
+</section>
+
+<!-- Footer (now fixed) -->
+<footer>
+  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+  <div class="footer-links">
+    <a href="#">About Us</a> |
+    <a href="#">Contact</a> |
+    <a href="#">Privacy Policy</a> |
+    <a href="#">Terms & Conditions</a>
+  </div>
+  <div class="social-icons">
+    <a href="#" class="social-icon facebook" aria-label="Facebook">
+      <i class="fab fa-facebook-f"></i>
+    </a>
+    <a href="#" class="social-icon youtube" aria-label="YouTube">
+      <i class="fab fa-youtube"></i>
+    </a>
+    <a href="#" class="social-icon linkedin" aria-label="LinkedIn">
+      <i class="fab fa-linkedin-in"></i>
+    </a>
+    <a href="#" class="social-icon instagram" aria-label="Instagram">
+      <i class="fab fa-instagram"></i>
+    </a>
+  </div>
+</footer>

src/app/intro-page/intro-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, HostListener } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostListener, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { SignInComponent } from '../auth/sign-in/sign-in.component';
@@ -19,6 +19,7 @@ export class IntroPageComponent {
   isSignedIn = false;
   isAboutOpen = false;
 
+  constructor(private cdr: ChangeDetectorRef) { }
   // --- Auth modal handlers ---
   openSignIn(): void {
     this.modal = 'signin';
@@ -33,6 +34,7 @@ export class IntroPageComponent {
   closeModal(): void {
     this.modal = null;
     if (!this.isAboutOpen) document.body.style.overflow = '';
+    this.cdr.markForCheck();
   }
 
 
@@ -48,6 +50,14 @@ export class IntroPageComponent {
     this.modal = 'signin';
     // You can optionally show a success message here
     alert('Sign up successful! Please sign in to continue.');
+    this.cdr.markForCheck();
+  }
+
+  signOut(): void {
+    this.isSignedIn = false;
+    // Clear any persisted auth if used later
+    localStorage.removeItem('auth_token');
+    this.cdr.markForCheck();
   }
 
   backdropClick(e: MouseEvent): void {
@@ -62,12 +72,14 @@ export class IntroPageComponent {
     document.body.style.overflow = 'hidden';
     // Move focus into the dialog for accessibility
     setTimeout(() => document.getElementById('aboutDialog')?.focus(), 0);
+    this.cdr.markForCheck();
   }
 
   closeAbout(): void {
     this.isAboutOpen = false;
     // If Auth is also open, keep scroll locked. Otherwise restore.
     if (!this.modal) document.body.style.overflow = '';
+    this.cdr.markForCheck();
   }
 
   // --- Global ESC handler closes whichever is open ---
@@ -76,16 +88,22 @@ export class IntroPageComponent {
     if (this.modal) this.closeModal();
     else if (this.isAboutOpen) this.closeAbout();
   }
-
+  scrollToContent() {
+    const element = document.getElementById('content-sections');
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
   // Your existing i18n helper, keep as-is if already present:
   tr(key: string): string {
     const dict = {
       brand: 'Py-Match',
       signup: 'Sign up',
       signin: 'Sign in',
-      tagline: 'Better match starts here',
-      subtext: 'Designed for trust, focused on fit.',
-      getStarted: 'Get started'
+      tagline: 'Smarter matches, powered by personality science.',
+      subtext: 'Discover compatibility in love, business, and careers with AI-driven personality insights.',
+      /*      getStarted: 'Get started',*/
+      exploreFeatures: 'Explore our features below'
     };
     return dict[key as keyof typeof dict] ?? key;
   }