feat(misc): update guides main page design (#1037)

.github/spelling/known_words_corpus.txt

@@ -716,4 +716,8 @@ jupyter
 streamlit
 bot
 screenshots
-aws
+aws
+guidesmdx
+agentsicon
+ledgericon
+asiicon

components/components.module.css

@@ -0,0 +1,177 @@
+.sectionDetails {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 24px 8px 16px;
+  align-items: center;
+  gap: 2px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid #dce2ea;
+  backdrop-filter: blur(35px);
+  cursor: pointer;
+  width: 100%;
+  color: #000d3d;
+  font-family: Lexend;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  letter-spacing: -0.16px;
+}
+
+:is(html[class~="dark"] .sectionDetails) {
+  border-radius: var(--8, 8px);
+  background: #2c2e38;
+  backdrop-filter: blur(35px);
+  color: #e9e9ea;
+  border: none;
+}
+
+:is(html[class~="dark"] .sectionDetails:hover) {
+  background: rgba(95, 56, 251, 0.2);
+  backdrop-filter: blur(35px);
+  color: #bfaffd;
+}
+
+.sectionDetails:hover {
+  background: #efebff;
+  backdrop-filter: blur(35px);
+  color: #5f38fb;
+  border: 1px solid #ffff;
+}
+
+.iconContainer {
+  display: flex;
+  width: 54px;
+  height: 54px;
+  padding: 11px 11.123px 11px 11.124px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: #f3f5f8;
+}
+
+.heading {
+  color: var(--Cold-Grey-Grey500-Coolgrey, #8a9fb8);
+  font-family: Lexend;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+  text-transform: uppercase;
+}
+
+:is(html[class~="dark"] .heading) {
+  color: #a6a7ab;
+}
+
+.dropDownGuide {
+  display: flex;
+  width: 280px;
+  height: 44px;
+  padding: 12px;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid #d0d9e3;
+  cursor: pointer;
+}
+
+:is(html[class~="dark"] .dropDownGuide) {
+  border-radius: 8px;
+  border: 1px solid var(--Dark-Mode-White-20, #4d4f57);
+  background-color: transparent;
+}
+
+.dropdownActive {
+  color: #0b1742;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  opacity: 0.6;
+}
+:is(html[class~="dark"] .dropdownActive) {
+  color: #d2d3d5;
+}
+
+.inputBoxGuide {
+  display: flex;
+  padding: var(--12, 12px) var(--112, 112px) var(--12, 12px) var(--12, 12px);
+  align-items: center;
+  gap: var(--6, 6px);
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid var(--Cold-Grey-Grey250, #d0d9e3);
+  color: #0b1742;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+:is(html[class~="dark"] .inputBoxGuide) {
+  background-color: #2c2e38;
+  border: none;
+  color: #fff;
+}
+
+.inputGuide:focus-visible {
+  --tw-ring-shadow: none;
+  box-shadow: none;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: none;
+  --tw-ring-offset-width: 0;
+  --tw-ring-offset-color: transparent;
+}
+
+.inputGuide {
+  outline: none;
+  border: none;
+  width: 100%;
+  background: transparent;
+}
+
+.tab {
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  gap: 6px;
+  align-self: stretch;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.active {
+  background: #efebff;
+  backdrop-filter: blur(35px);
+  color: #5f38fb;
+}
+
+.tab:hover {
+  background: #efebff;
+  backdrop-filter: blur(35px);
+  color: #5f38fb;
+  border: 1px solid #ffff;
+}
+
+.label {
+  display: flex;
+  height: 24px;
+  padding: 2px 8px;
+  align-items: center;
+  gap: 4px;
+  border-radius: 4px;
+  background: #e8ecf1;
+  color: var(--Secondary-500, #556578);
+  text-align: center;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}