diff --git a/frontend/src/components/log-in/Login.css b/frontend/src/components/log-in/Login.css index b567a8c48..c8e3961d9 100644 --- a/frontend/src/components/log-in/Login.css +++ b/frontend/src/components/log-in/Login.css @@ -18,11 +18,128 @@ .login-right-section { width: 50%; height: 100vh; - overflow-y: auto; + overflow: hidden; background-color: #eceff3; display: flex; justify-content: center; align-items: center; + position: relative; +} + +.login-right-section.llm-whisperer-light { + background: #ffffff; + overflow: hidden; +} + +.login-right-section.llm-whisperer-light::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 262deg, + rgba(200, 234, 126, 0.02) 1%, + rgba(200, 234, 126, 0.14) 49%, + rgba(50, 230, 255, 0.2) 99% + ); + pointer-events: none; +} + +.login-right-section.llm-whisperer-dark { + background: linear-gradient(160deg, #0a1628 0%, #132040 50%, #0d1a30 100%); +} + +.login-right-section.llm-whisperer-dark::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient( + ellipse at 20% 50%, + rgba(56, 112, 180, 0.12) 0%, + transparent 60% + ), + radial-gradient( + ellipse at 80% 20%, + rgba(56, 112, 180, 0.08) 0%, + transparent 50% + ); + pointer-events: none; +} + +.login-right-section.llm-whisperer-dark::after { + content: ""; + position: absolute; + bottom: 0; + right: 0; + width: 80%; + height: 55%; + background-image: radial-gradient( + circle, + rgba(56, 140, 220, 0.3) 2.5px, + transparent 2.5px + ); + background-size: 20px 20px; + mask-image: radial-gradient( + ellipse at 85% 85%, + rgba(0, 0, 0, 0.7) 0%, + rgba(0, 0, 0, 0.4) 25%, + transparent 60% + ); + -webkit-mask-image: radial-gradient( + ellipse at 85% 85%, + rgba(0, 0, 0, 0.7) 0%, + rgba(0, 0, 0, 0.4) 25%, + transparent 60% + ); + pointer-events: none; +} + +.login-right-section.unstract-light { + background: #ffffff; + overflow: hidden; +} + +.login-right-section.unstract-light::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 262deg, + rgba(200, 234, 126, 0.02) 1%, + rgba(200, 234, 126, 0.14) 49%, + rgba(50, 230, 255, 0.2) 99% + ); + pointer-events: none; +} + +.login-right-section.default-light { + background: #ffffff; + overflow: hidden; +} + +.login-right-section.default-light::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 262deg, + rgba(200, 234, 126, 0.02) 1%, + rgba(200, 234, 126, 0.14) 49%, + rgba(50, 230, 255, 0.2) 99% + ); + pointer-events: none; } .right-section-text-wrapper { @@ -65,8 +182,6 @@ .button-wraper { width: 450px; - height: 550px; - position: fixed; display: flex; flex-direction: column; gap: 20px; @@ -74,8 +189,10 @@ } .logo { - height: 50px; - width: 100%; + height: 40px; + width: auto; + display: block; + margin: 0 auto 18px; } .text-wrapper { @@ -84,6 +201,8 @@ flex-direction: column; justify-content: center; align-items: center; + margin-top: 18px; + margin-bottom: 10px; } .login-button { @@ -109,8 +228,30 @@ font-size: 14px; font-weight: 400; line-height: 22px; - text-align: left; - color: #949ca9; + text-align: center; + color: #282828; +} + +.login-trust-indicators { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 12px; +} + +.login-trust-item { + display: flex; + align-items: center; + gap: 6px; +} + +.login-trust-check { + flex-shrink: 0; +} + +.login-trust-text { + font-size: 14px; + color: #282828; } .signin-button { @@ -123,3 +264,1126 @@ font-weight: 600; line-height: 24px; } + +/* LLM Whisperer Right Panel */ +.llm-whisperer-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + padding: 24px 32px; + width: 100%; + max-width: 600px; + height: 100vh; + justify-content: center; + position: relative; + z-index: 1; +} + +.llm-headline { + font-size: 26px !important; + font-weight: 700 !important; + line-height: 34px !important; + text-align: center; + color: #fff !important; + margin-bottom: 0 !important; +} + +.llm-hero-visual { + width: 100%; + border-radius: 12px; + overflow: hidden; +} + +.llm-hero-image { + width: 80%; + height: auto; + display: block; + border-radius: 12px; +} + +.llm-works-with-section, +.llm-providers-section, +.llm-compliance-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + width: 100%; +} + +.llm-section-label { + font-size: 13px; + font-weight: 600; + color: #8fa8c8; +} + +.llm-badge-row { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + align-items: center; +} + +.llm-format-badge { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + border-radius: 8px; + background-color: transparent; + border: none; + font-size: 12px; + font-weight: 500; + color: #c8d8e8; +} + +.llm-provider-badge, +.llm-compliance-badge { + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + border-radius: 8px; + background-color: transparent; + border: none; + font-size: 12px; + font-weight: 500; + color: #c8d8e8; + backdrop-filter: blur(4px); +} + +.llm-format-badge-more { + background-color: rgba(77, 208, 120, 0.15); + border-color: rgba(77, 208, 120, 0.3); + color: #4dd078; + font-weight: 600; +} + +.llm-badge-icon { + width: 36px; + height: 36px; + flex-shrink: 0; +} + +.llm-provider-logo { + width: 36px; + height: 36px; + object-fit: contain; + flex-shrink: 0; +} + +.llm-compliance-logo { + width: 36px; + height: 36px; + object-fit: contain; + flex-shrink: 0; +} + +.llm-stats-bar { + display: flex; + gap: 16px; + justify-content: center; + width: 100%; + padding: 12px 0; +} + +.llm-stat-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + flex: 1; +} + +.llm-stat-value { + font-size: 22px; + font-weight: 600; + color: #fff; +} + +.llm-stat-label { + font-size: 14px; + font-weight: 500; + color: #d1d5dc; + text-align: center; +} + +.llm-testimonial-section { + background-color: rgba(255, 255, 255, 0.06); + border-radius: 12px; + padding: 16px 20px; + width: 100%; + border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(4px); +} + +.llm-testimonial-quote { + font-size: 13px !important; + font-style: italic; + line-height: 20px !important; + color: #fff !important; + margin-bottom: 10px !important; +} + +.llm-testimonial-author { + display: flex; + align-items: center; + gap: 12px; +} + +.llm-testimonial-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; +} + +.llm-testimonial-author-info { + display: flex; + align-items: center; + gap: 8px; +} + +.llm-testimonial-author .ant-typography-strong, +.llm-testimonial-author .ant-typography { + color: #fff !important; +} + +.llm-testimonial-role { + color: #8fa8c8; + font-size: 13px; +} + +/* Unstract Right Panel */ +.unstract-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + padding: 32px 36px; + width: 100%; + max-width: 600px; + height: 100vh; + justify-content: center; + position: relative; + z-index: 1; +} + +.unstract-headline { + font-size: 26px !important; + font-weight: 700 !important; + line-height: 32px !important; + text-align: center; + color: #fff !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.unstract-hero-visual { + width: 100%; + border-radius: 12px; + overflow: hidden; +} + +.unstract-hero-placeholder { + width: 100%; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.unstract-hero-image { + width: 80%; + height: auto; + display: block; + border-radius: 12px; +} + +.unstract-trusted-section, +.unstract-g2-section, +.unstract-compliance-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + width: 100%; +} + +.unstract-section-label { + font-size: 12px; + font-weight: 600; + color: #8fa8c8; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.unstract-badge-row { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + align-items: center; +} + +.unstract-trusted-badge { + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + border-radius: 8px; + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); + font-size: 12px; + font-weight: 500; + color: #c8d8e8; + min-height: 32px; +} + +.unstract-trusted-logo { + height: 16px; + width: auto; + max-width: 90px; + object-fit: contain; +} + +.unstract-logo-placeholder { + width: 24px; + height: 24px; + border: 2px dashed rgba(255, 255, 255, 0.3); + border-radius: 4px; + flex-shrink: 0; +} + +.unstract-stats-bar { + display: flex; + gap: 20px; + justify-content: center; + width: 100%; + padding: 12px 0; +} + +.unstract-stat-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; + flex: 1; +} + +.unstract-stat-value { + font-size: 22px; + font-weight: 600; + color: #fff; +} + +.unstract-stat-label { + font-size: 14px; + font-weight: 500; + color: #d1d5dc; + text-align: center; +} + +.unstract-g2-badge { + display: flex; + align-items: center; + justify-content: center; +} + +.unstract-g2-logo { + height: 48px; + width: auto; + object-fit: contain; +} + +.unstract-testimonial-section { + background-color: rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 16px 20px; + width: 100%; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.unstract-testimonial-quote { + font-size: 13px !important; + font-style: italic; + line-height: 19px !important; + color: #fff !important; + margin-bottom: 10px !important; +} + +.unstract-testimonial-author { + display: flex; + align-items: center; + gap: 10px; +} + +.unstract-testimonial-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; + border: 2px solid rgba(255, 255, 255, 0.15); +} + +.unstract-testimonial-author-info { + display: flex; + flex-direction: column; + gap: 1px; +} + +.unstract-testimonial-author .ant-typography-strong, +.unstract-testimonial-author .ant-typography { + color: #fff !important; + font-size: 13px; +} + +.unstract-testimonial-role { + color: #8fa8c8; + font-size: 12px; +} + +.unstract-testimonial-company { + color: #6b8aac; + font-size: 11px; +} + +.unstract-compliance-section { + margin-top: 0; +} + +.unstract-compliance-badge { + display: flex; + align-items: center; + justify-content: center; + padding: 6px; + border-radius: 8px; + background-color: transparent; + border: none; +} + +.unstract-compliance-logo { + width: 36px; + height: 36px; + object-fit: contain; + flex-shrink: 0; +} + +/* ======================================== + Default Landing Page Light Right Panel + ======================================== */ +.default-light-content { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px 36px; + width: 100%; + max-width: 620px; + justify-content: center; + position: relative; + z-index: 1; +} + +.default-light-headline { + font-size: 43px !important; + font-weight: 700 !important; + line-height: 1.15 !important; + text-align: center; + margin-top: 0 !important; + margin-bottom: 44px !important; +} + +.default-light-headline-dark { + color: #0c355a; +} + +.default-light-headline-accent { + color: #00a6ed; +} + +/* Default Compliance Badges Row */ +.default-light-badges-row { + display: flex; + gap: 16px; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-bottom: 49px; +} + +.default-light-compliance-badge { + display: flex; + align-items: center; + justify-content: center; +} + +.default-light-compliance-logo { + width: 68px; + height: 68px; + object-fit: contain; +} + +/* Product Info Cards */ +.default-light-product-card { + width: 100%; + max-width: 570px; +} + +.default-light-product-card + .default-light-product-card { + margin-top: 62px; +} + +.default-light-card-title { + font-size: 24px !important; + font-weight: 900 !important; + line-height: 30px !important; + color: #0c355a !important; + letter-spacing: -0.3px; + display: block; + margin-bottom: 10px; +} + +.default-light-card-body { + width: 100%; + padding: 21px 28px 25px; + border-radius: 4px; + border: 2px solid transparent; + background: + linear-gradient(#f2f8e6, #f2f8e6) padding-box, + linear-gradient(135deg, #50e6ff, #c8ea7e) border-box; +} + +.default-light-card-text { + font-size: 18px !important; + font-weight: 300 !important; + line-height: 21.45px !important; + color: #142a53 !important; + margin-bottom: 0 !important; +} + +.default-light-card-divider { + width: 100%; + height: 1px; + background: #d1d5dc; + margin: 20px 0 10px; +} + +.default-light-card-footer { + display: flex; + flex-direction: column; + gap: 8px; +} + +.default-light-card-footer-label { + font-size: 10px !important; + font-weight: 700 !important; + color: #004664 !important; + text-transform: uppercase; + letter-spacing: 0.8px; +} + +.default-light-card-logos { + display: flex; + gap: 20px; + align-items: center; +} + +.default-light-card-logo { + height: 28px; + max-width: 110px; + object-fit: contain; +} + +.default-light-card-provider-logo { + height: 24px; + width: auto; + object-fit: contain; +} + +/* ======================================== + Product Toggle (Unstract / LLMWhisperer) + ======================================== */ +.product-toggle { + display: flex; + align-items: center; + margin: 0 auto; + background: rgba(241, 245, 249, 0.8); + border: 1px solid rgba(226, 232, 240, 0.5); + border-radius: 20px; + padding: 4px; + width: 260px; +} + +.product-toggle-btn { + flex: 1; + height: 39px; + border: none; + border-radius: 16px; + background: transparent; + font-size: 11px; + font-weight: 900; + letter-spacing: 0.6px; + text-transform: uppercase; + color: #90a1b9; + cursor: pointer; + transition: all 0.2s ease; + font-family: inherit; +} + +.product-toggle-btn-active { + background: #fff; + color: #2f93f6; + border: 1px solid #f1f5f9; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +/* ======================================== + Region Selector + ======================================== */ +.region-selector { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + width: 100%; + margin-top: 18px; +} + +.region-selector-label { + font-size: 18px !important; + font-weight: 500 !important; + color: #545454 !important; +} + +.region-options { + display: flex; + gap: 24px; + justify-content: center; +} + +.region-option { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 0; + border: none; + background: transparent; + cursor: pointer; + position: relative; +} + +.region-flag { + width: 58px; + height: 58px; + border-radius: 50%; + object-fit: cover; +} + +.region-option-selected .region-flag { + box-shadow: 0 0 0 3px #2f93f6; + border-radius: 50%; +} + +.region-label { + font-size: 18px; + font-weight: 500; + color: #545454; +} + +.region-radio-indicator { + position: absolute; + top: -4px; + right: -4px; + width: 16px; + height: 16px; + border-radius: 50%; + background: #2f93f6; + border: 3px solid #fff; + box-shadow: 0 0 0 1px #2f93f6; +} + +/* ======================================== + LLM Whisperer Left Panel Headings + ======================================== */ +.llm-left-heading { + font-size: 24px !important; + font-weight: 600 !important; + line-height: 36px !important; + color: #282828 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + text-align: center; +} + +.llm-left-subheading { + font-size: 14px !important; + line-height: 22px !important; + color: #282828 !important; + text-align: center; + display: block; +} + +.signin-inline-link { + color: #2f93f6 !important; + font-weight: 400; +} + +/* ======================================== + LLM Whisperer Light Right Panel + ======================================== */ +.llm-light-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 41px; + padding: 40px 36px; + width: 100%; + max-width: 600px; + justify-content: center; + position: relative; + z-index: 1; +} + +.llm-light-headline { + font-size: 45px !important; + font-weight: 700 !important; + line-height: 1.15 !important; + text-align: center; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.llm-light-headline-dark { + color: #0c355a; +} + +.llm-light-headline-accent { + color: #00a6ed; +} + +/* Compliance Badges Row */ +.llm-light-badges-row { + display: flex; + gap: 16px; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.llm-light-compliance-badge { + display: flex; + align-items: center; + justify-content: center; +} + +.llm-light-compliance-logo { + width: 68px; + height: 68px; + object-fit: contain; +} + +/* Stats Cards */ +.llm-light-stats-bar { + display: flex; + gap: 16px; + justify-content: center; + width: 100%; +} + +.llm-light-stat-card { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + padding: 20px 12px 16px; + border-radius: 10px; + border: 1px solid #e8edf2; + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + box-sizing: border-box; +} + +.llm-light-stat-icon { + width: 36px; + height: 36px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.llm-light-stat-icon-img { + width: 18px; + height: 18px; +} + +.llm-light-stat-value { + font-size: 20px; + font-weight: 700; + color: #282828; + line-height: 36px; +} + +.llm-light-stat-label { + font-size: 14px; + font-weight: 400; + color: #545454; + text-align: center; + line-height: 18px; + white-space: pre-wrap; +} + +/* Testimonial Card */ +.llm-light-testimonial { + width: 100%; + padding: 22px 24px; + border-radius: 4px; + border: 2px solid transparent; + background: + linear-gradient(#f2f8e6, #f2f8e6) padding-box, + linear-gradient(135deg, #50e6ff, #c8ea7e) border-box; + position: relative; + box-sizing: border-box; +} + +.llm-light-testimonial-quote-row { + display: flex; + gap: 12px; + align-items: flex-start; + margin-bottom: 12px; +} + +.llm-light-testimonial-quote-icon { + width: 36px; + height: 36px; + flex-shrink: 0; + margin-top: 2px; +} + +.llm-light-testimonial-text { + font-size: 16px !important; + font-style: italic; + line-height: 22px !important; + color: #142a53 !important; + margin-bottom: 0 !important; +} + +.llm-light-testimonial-author { + display: flex; + align-items: center; + gap: 12px; +} + +.llm-light-testimonial-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; +} + +.llm-light-testimonial-author-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +.llm-light-testimonial-name { + color: #142a53 !important; + font-size: 16px !important; + font-style: italic; +} + +.llm-light-testimonial-role { + color: #142a53 !important; + font-size: 16px; + font-style: italic; +} + +/* LLM Providers Section */ +.llm-light-providers-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + width: 100%; +} + +.llm-light-providers-label-row { + display: flex; + align-items: center; + gap: 12px; + width: 100%; +} + +.llm-light-providers-line { + flex: 1; + height: 1px; + background: #d1d5dc; +} + +.llm-light-providers-label { + font-size: 10px !important; + font-weight: 700 !important; + color: #004664 !important; + text-transform: uppercase; + letter-spacing: 2.1px; + white-space: nowrap; +} + +.llm-light-providers-logos { + display: flex; + gap: 24px; + justify-content: center; + align-items: center; +} + +.llm-light-provider-badge { + display: flex; + align-items: center; + justify-content: center; +} + +.llm-light-provider-logo { + height: 38px; + width: auto; + object-fit: contain; +} + +/* ======================================== + Unstract Light Right Panel + ======================================== */ +.unstract-light-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 46px; + padding: 40px 36px; + width: 100%; + max-width: 600px; + justify-content: center; + position: relative; + z-index: 1; +} + +.unstract-light-headline { + font-size: 45px !important; + font-weight: 700 !important; + line-height: 1.15 !important; + text-align: center; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.unstract-light-headline-dark { + color: #0c355a; +} + +.unstract-light-headline-accent { + color: #00a6ed; +} + +/* Unstract Compliance Badges Row */ +.unstract-light-badges-row { + display: flex; + gap: 16px; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.unstract-light-compliance-badge { + display: flex; + align-items: center; + justify-content: center; +} + +.unstract-light-compliance-logo { + width: 68px; + height: 68px; + object-fit: contain; +} + +/* Unstract Stats Cards */ +.unstract-light-stats-bar { + display: flex; + gap: 16px; + justify-content: center; + width: 100%; +} + +.unstract-light-stat-card { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + padding: 20px 12px 16px; + border-radius: 10px; + border: 1px solid #e8edf2; + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + box-sizing: border-box; +} + +.unstract-light-stat-icon { + width: 36px; + height: 36px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.unstract-light-stat-icon-img { + width: 18px; + height: 18px; +} + +.unstract-light-stat-value { + font-size: 20px; + font-weight: 700; + color: #282828; + line-height: 36px; +} + +.unstract-light-stat-label { + font-size: 14px; + font-weight: 400; + color: #545454; + text-align: center; + line-height: 18px; + white-space: pre-wrap; +} + +/* Unstract Testimonial Card */ +.unstract-light-testimonial { + width: 100%; + padding: 22px 24px; + border-radius: 4px; + border: 2px solid transparent; + background: + linear-gradient(#f2f8e6, #f2f8e6) padding-box, + linear-gradient(135deg, #50e6ff, #c8ea7e) border-box; + position: relative; + box-sizing: border-box; +} + +.unstract-light-testimonial-quote-row { + display: flex; + gap: 12px; + align-items: flex-start; + margin-bottom: 12px; +} + +.unstract-light-testimonial-quote-icon { + width: 36px; + height: 36px; + flex-shrink: 0; + margin-top: 2px; +} + +.unstract-light-testimonial-text { + font-size: 16px !important; + font-style: italic; + line-height: 22px !important; + color: #142a53 !important; + margin-bottom: 0 !important; +} + +.unstract-light-testimonial-author { + display: flex; + align-items: flex-start; + gap: 12px; +} + +.unstract-light-testimonial-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; +} + +.unstract-light-testimonial-author-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +.unstract-light-testimonial-name { + color: #142a53 !important; + font-size: 16px !important; + font-style: italic; +} + +.unstract-light-testimonial-role { + color: #142a53 !important; + font-size: 16px; + font-style: italic; +} + +.unstract-light-testimonial-company { + color: #142a53 !important; + font-size: 16px; + font-style: italic; +} + +/* Unstract Trusted By Section */ +.unstract-light-trusted-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + width: 100%; +} + +.unstract-light-trusted-label-row { + display: flex; + align-items: center; + gap: 12px; + width: 100%; +} + +.unstract-light-trusted-line { + flex: 1; + height: 1px; + background: #d1d5dc; +} + +.unstract-light-trusted-label { + font-size: 10px !important; + font-weight: 700 !important; + color: #004664 !important; + text-transform: uppercase; + letter-spacing: 2.1px; + white-space: nowrap; +} + +.unstract-light-trusted-logos { + display: flex; + gap: 24px; + justify-content: center; + align-items: center; +} + +.unstract-light-trusted-badge { + display: flex; + align-items: center; + justify-content: center; +} + +.unstract-light-trusted-logo { + height: 28px; + max-width: 110px; + object-fit: contain; +} diff --git a/frontend/src/components/log-in/ProductContentLayout.jsx b/frontend/src/components/log-in/ProductContentLayout.jsx index 41ebafa0e..53aeebb82 100644 --- a/frontend/src/components/log-in/ProductContentLayout.jsx +++ b/frontend/src/components/log-in/ProductContentLayout.jsx @@ -1,41 +1,398 @@ import { Typography } from "antd"; -import PropTypes from "prop-types"; -import loginRightBanner from "../../assets/login-right-panel.svg"; +import anthropicLogo from "../../plugins/assets/llmWhisperer/Anthropic.svg"; +import azureGptLogo from "../../plugins/assets/llmWhisperer/Azure GPT.png"; +import llmG2Badge from "../../plugins/assets/llmWhisperer/G2-Badge.png"; +import gdprBadge from "../../plugins/assets/llmWhisperer/GDPR.webp"; +import gregCrisciPhoto from "../../plugins/assets/llmWhisperer/Greg Crisci.jpeg"; +import hipaaBadge from "../../plugins/assets/llmWhisperer/HIPAA-1.png.webp"; +import isoBadge from "../../plugins/assets/llmWhisperer/ISO-27001.png"; +import openAiLogo from "../../plugins/assets/llmWhisperer/OpenAI-icon.svg"; +import quoteIcon from "../../plugins/assets/llmWhisperer/quote-icon.svg"; +import soc2Badge from "../../plugins/assets/llmWhisperer/SOC2-Type-II.png"; +import statIconAccuracy from "../../plugins/assets/llmWhisperer/stat-icon-accuracy.svg"; +import statIconManual from "../../plugins/assets/llmWhisperer/stat-icon-manual.svg"; +import statIconTouchpoints from "../../plugins/assets/llmWhisperer/stat-icon-touchpoints.svg"; +import vertexAiLogo from "../../plugins/assets/llmWhisperer/Vertex AI.svg"; +import christopherVarnerPhoto from "../../plugins/assets/unstract/Christopher Varner.jpeg"; +import cybersoftLogo from "../../plugins/assets/unstract/cybersoft.png"; +import endpointClinicalLogo from "../../plugins/assets/unstract/endpoint-clinical.svg"; +import unstractG2BadgeNew from "../../plugins/assets/unstract/G2-Badge-new.png"; +import medaxionLogo from "../../plugins/assets/unstract/medaxion.svg"; +import moodysLogo from "../../plugins/assets/unstract/moodys.png"; +import unstractQuoteIcon from "../../plugins/assets/unstract/quote-icon.svg"; +import unstractStatIconAccuracy from "../../plugins/assets/unstract/stat-icon-accuracy.svg"; +import unstractStatIconEfficiency from "../../plugins/assets/unstract/stat-icon-efficiency.svg"; +import unstractStatIconStp from "../../plugins/assets/unstract/stat-icon-stp.svg"; -const defaultUnstractContent = { - title: "UNLOCK VALUE FROM UNSTRUCTURED DATA.", - description: - "Unstract is a no-code LLM platform that lets you automate even the most complex workflows involving unstructured data, saving you time, money, and automation headaches.", -}; +const DEFAULT_COMPLIANCE_BADGES = [ + { name: "SOC2 Type II", logo: soc2Badge }, + { name: "GDPR", logo: gdprBadge }, + { name: "ISO", logo: isoBadge }, + { name: "HIPAA", logo: hipaaBadge }, + { name: "G2 Users Love Us", logo: unstractG2BadgeNew }, +]; -function ProductContentLayout({ title, description, image }) { +const DEFAULT_TRUSTED_LOGOS = [ + { name: "Moody's", logo: moodysLogo }, + { name: "Endpoint Clinical", logo: endpointClinicalLogo }, + { name: "Cybersoft", logo: cybersoftLogo }, + { name: "Medaxion", logo: medaxionLogo }, +]; + +const DEFAULT_LLM_PROVIDERS = [ + { name: "Anthropic", logo: anthropicLogo }, + { name: "Azure GPT", logo: azureGptLogo }, + { name: "OpenAI", logo: openAiLogo }, + { name: "Vertex AI", logo: vertexAiLogo }, +]; + +function ProductContentLayout() { return ( -
-
- - {title || defaultUnstractContent.title} - -
-
- - {description || defaultUnstractContent.description} - -
-
- login background +
+ + + {"Parse, Structure and Automate "} + + + Document Extraction + + + +
+ {DEFAULT_COMPLIANCE_BADGES.map((badge) => ( +
+ {badge.name} +
+ ))} +
+ +
+ + Unstract + +
+ + Unstract automates document workflows using AI, eliminating manual + data entry from complex, unstructured documents — at enterprise + scale. + +
+
+ + Trusted by Enterprises + +
+ {DEFAULT_TRUSTED_LOGOS.map((company) => ( + {company.name} + ))} +
+
+
+
+ +
+ + LLMWhisperer + +
+ + LLMWhisperer parses text from documents and makes it ready for LLM + consumption. + +
+
+ + Plays well with leading LLMs + +
+ {DEFAULT_LLM_PROVIDERS.map((provider) => ( + {provider.name} + ))} +
+
+
+
+
+ ); +} + +const LLM_PROVIDERS = [ + { name: "Anthropic", logo: anthropicLogo }, + { name: "Azure GPT", logo: azureGptLogo }, + { name: "OpenAI", logo: openAiLogo }, + { name: "Vertex AI", logo: vertexAiLogo }, +]; + +const LLM_STATS = [ + { + value: "99.9%", + label: "Extraction\nAccuracy", + icon: statIconAccuracy, + gradient: "linear-gradient(-90deg, #00a6ed, #75deec)", + }, + { + value: "90%", + label: "Reduced\nManual Work", + icon: statIconManual, + gradient: "linear-gradient(109deg, #33b8f1, #ff7d95)", + }, + { + value: "80%", + label: "Lesser Human\nTouchpoints", + icon: statIconTouchpoints, + gradient: "linear-gradient(109deg, #ffde8e, #ff7d95)", + }, +]; + +const LLM_COMPLIANCE_BADGES = [ + { name: "SOC2 Type II", logo: soc2Badge }, + { name: "GDPR", logo: gdprBadge }, + { name: "ISO", logo: isoBadge }, + { name: "HIPAA", logo: hipaaBadge }, + { name: "G2 Users Love Us", logo: llmG2Badge }, +]; + +function LlmWhispererContent() { + return ( +
+ + Make parsed text ready +
+ for LLM extraction + + +
+ {LLM_COMPLIANCE_BADGES.map((badge) => ( +
+ {badge.name} +
+ ))} +
+ +
+ {LLM_STATS.map((stat) => ( +
+
+ +
+ {stat.value} + {stat.label} +
+ ))} +
+ +
+
+ + + “The features like changing the quality type, bounding around + tables are super helpful. When you compare the accuracy of the + outputs of LLMWhisperer vs. others like PDF.co, the difference is + night and day.” + +
+
+ Greg Crisci +
+ + Greg Crisci + + + Advisor + +
+
+
+ +
+
+ + + Plays well with leading LLMs + + +
+
+ {LLM_PROVIDERS.map((provider) => ( +
+ {provider.name} +
+ ))} +
); } -ProductContentLayout.propTypes = { - title: PropTypes.string, - description: PropTypes.string, - image: PropTypes.any, -}; +const TRUSTED_BY_LOGOS = [ + { name: "Moody's", logo: moodysLogo }, + { name: "Endpoint Clinical", logo: endpointClinicalLogo }, + { name: "Cybersoft", logo: cybersoftLogo }, + { name: "Medaxion", logo: medaxionLogo }, +]; + +const UNSTRACT_STATS_LIGHT = [ + { + value: "20x", + label: "Improvement in\nOperational Efficiency", + icon: unstractStatIconEfficiency, + gradient: "linear-gradient(-90deg, #00a6ed, #75deec)", + }, + { + value: "99.9%", + label: "Extraction\nAccuracy", + icon: unstractStatIconAccuracy, + gradient: "linear-gradient(109deg, #33b8f1, #ff7d95)", + }, + { + value: "90%+", + label: "Straight-Through\nProcessing", + icon: unstractStatIconStp, + gradient: "linear-gradient(109deg, #ffde8e, #ff7d95)", + }, +]; + +const UNSTRACT_COMPLIANCE_BADGES = [ + { name: "SOC2 Type II", logo: soc2Badge }, + { name: "GDPR", logo: gdprBadge }, + { name: "ISO", logo: isoBadge }, + { name: "HIPAA", logo: hipaaBadge }, + { name: "G2 Users Love Us", logo: unstractG2BadgeNew }, +]; + +function UnstractContent() { + return ( +
+ + + Turn messy documents + +
+ + into structured data + + + +
+ {UNSTRACT_COMPLIANCE_BADGES.map((badge) => ( +
+ {badge.name} +
+ ))} +
+ +
+ {UNSTRACT_STATS_LIGHT.map((stat) => ( +
+
+ +
+ {stat.value} + {stat.label} +
+ ))} +
+ +
+
+ + + “Unstract has cut down the time required to complete tasks + that we have to do multiple times. It's reduced the manual + review of many hundreds of pages of documents and summarizes key + details for analysis.” + +
+
+ Christopher Varner +
+ + Christopher Varner + + + Senior Director, Solutions + + + Endpoint Clinical + +
+
+
+ +
+
+ + + Trusted by Enterprises + + +
+
+ {TRUSTED_BY_LOGOS.map((company) => ( +
+ {company.name} +
+ ))} +
+
+
+ ); +} -export { ProductContentLayout }; +export { ProductContentLayout, LlmWhispererContent, UnstractContent }; diff --git a/frontend/vite.config.js b/frontend/vite.config.js index c14c20e79..06d5cfd87 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -1,10 +1,10 @@ -import { defineConfig, loadEnv } from 'vite' -import react from '@vitejs/plugin-react' -import svgr from 'vite-plugin-svgr' -import path from 'path' -import fs from 'fs' +import react from "@vitejs/plugin-react"; +import fs from "fs"; +import path from "path"; +import { defineConfig, loadEnv } from "vite"; +import svgr from "vite-plugin-svgr"; -const EMPTY_MODULE_ID = '\0optional-plugin-empty' +const EMPTY_MODULE_ID = "\0optional-plugin-empty"; // Rollup plugin that resolves missing optional plugin imports to an empty // module instead of failing the build. This lets the existing @@ -13,47 +13,49 @@ const EMPTY_MODULE_ID = '\0optional-plugin-empty' // not exist on disk, and the catch block handles the rest at runtime. function optionalPluginImports() { return { - name: 'optional-plugin-imports', + name: "optional-plugin-imports", resolveId(source, importer) { - if (!importer || !source.includes('plugins/')) return null + if (!importer || !source.includes("plugins/")) return null; // Only handle relative imports that go through a plugins directory - if (!source.startsWith('.')) return null + if (!source.startsWith(".")) return null; - const resolved = path.resolve(path.dirname(importer), source) + const resolved = path.resolve(path.dirname(importer), source); // Check common extensions - const extensions = ['', '.js', '.jsx', '.ts', '.tsx'] + const extensions = ["", ".js", ".jsx", ".ts", ".tsx"]; const exists = extensions.some( - (ext) => fs.existsSync(resolved + ext) || fs.existsSync(path.join(resolved, 'index' + (ext || '.js'))) - ) + (ext) => + fs.existsSync(resolved + ext) || + fs.existsSync(path.join(resolved, "index" + (ext || ".js"))), + ); if (!exists) { - return EMPTY_MODULE_ID + return EMPTY_MODULE_ID; } - return null + return null; }, load(id) { if (id === EMPTY_MODULE_ID) { - return 'export default undefined;' + return "export default undefined;"; } - return null + return null; }, - } + }; } // https://vite.dev/config/ export default defineConfig(({ mode }) => { // Load env file based on `mode` in the current working directory. - const env = loadEnv(mode, process.cwd(), '') + const env = loadEnv(mode, process.cwd(), ""); return { plugins: [ optionalPluginImports(), react({ // Include .js files for JSX transformation - include: '**/*.{jsx,js}', + include: "**/*.{jsx,js}", }), // SVG as React component support (for `import Logo from './logo.svg?react'`) svgr(), @@ -61,7 +63,7 @@ export default defineConfig(({ mode }) => { // ESBuild configuration to handle JSX in .js files esbuild: { - loader: 'jsx', + loader: "jsx", include: /src\/.*\.jsx?$/, exclude: [], }, @@ -69,13 +71,13 @@ export default defineConfig(({ mode }) => { // Resolve configuration resolve: { alias: { - '@': path.resolve(import.meta.dirname, './src'), + "@": path.resolve(import.meta.dirname, "./src"), }, }, // Server configuration for development server: { - host: '0.0.0.0', + host: "0.0.0.0", port: 3000, // Docker-specific: Enable polling for file watching watch: { @@ -88,19 +90,22 @@ export default defineConfig(({ mode }) => { clientPort: env.WDS_SOCKET_PORT ? Number(env.WDS_SOCKET_PORT) : 3000, }, // Proxy configuration (similar to setupProxy.js in CRA) - proxy: env.VITE_BACKEND_URL && env.VITE_BACKEND_URL.trim() !== "" ? { - '/api': { - target: env.VITE_BACKEND_URL, - changeOrigin: true, - secure: false, - }, - } : undefined, + proxy: + env.VITE_BACKEND_URL && env.VITE_BACKEND_URL.trim() !== "" + ? { + "/api": { + target: env.VITE_BACKEND_URL, + changeOrigin: true, + secure: false, + }, + } + : undefined, }, // Build configuration build: { - target: 'esnext', - outDir: 'build', + target: "esnext", + outDir: "build", sourcemap: true, // Chunk size warning limit chunkSizeWarningLimit: 1000, @@ -108,14 +113,14 @@ export default defineConfig(({ mode }) => { output: { // Manual chunk splitting for better caching manualChunks: { - 'react-vendor': ['react', 'react-dom', 'react-router-dom'], - 'antd-vendor': ['antd', '@ant-design/icons'], - 'pdf-vendor': [ - '@react-pdf-viewer/core', - '@react-pdf-viewer/default-layout', - '@react-pdf-viewer/highlight', - '@react-pdf-viewer/page-navigation', - 'pdfjs-dist', + "react-vendor": ["react", "react-dom", "react-router-dom"], + "antd-vendor": ["antd", "@ant-design/icons"], + "pdf-vendor": [ + "@react-pdf-viewer/core", + "@react-pdf-viewer/default-layout", + "@react-pdf-viewer/highlight", + "@react-pdf-viewer/page-navigation", + "pdfjs-dist", ], }, }, @@ -133,24 +138,24 @@ export default defineConfig(({ mode }) => { // Define global constants define: { - 'process.env': {}, // For compatibility with some libraries expecting process.env + "process.env": {}, // For compatibility with some libraries expecting process.env }, // Optimize dependencies optimizeDeps: { include: [ - 'react', - 'react-dom', - 'react-router-dom', - 'antd', - '@ant-design/icons', + "react", + "react-dom", + "react-router-dom", + "antd", + "@ant-design/icons", ], exclude: [], esbuildOptions: { loader: { - '.js': 'jsx', + ".js": "jsx", }, }, }, - } -}) + }; +});