diff --git a/fern/assets/styles.css b/fern/assets/styles.css index d732c1787..9b9d5b4d5 100644 --- a/fern/assets/styles.css +++ b/fern/assets/styles.css @@ -159,3 +159,645 @@ div:has(> .fern-product-selector-radio-group):before { } +/* LANDING */ +.lp-page-container { + min-height: 100vh; + position: relative; + + .dashed-pattern-left { + position: absolute; + left: -24px; + top: 0; + height: 100%; + width: 1.5rem; + opacity: 1; + pointer-events: none; + border-right: 1px solid var(--grayscale-5); + border-left: 1px solid var(--grayscale-5); + } + + .dashed-pattern-right { + position: absolute; + right: -24px; + top: 0; + height: 100%; + width: 1.5rem; + opacity: 1; + pointer-events: none; + border-right: 1px solid var(--grayscale-5); + border-left: 1px solid var(--grayscale-5); + } + + .dashed-gradient { + height: 100%; + width: 100%; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: repeat; + background-size: 12px 12px; + } + + &:is(.dark) .dashed-gradient { + background-image: url('data:image/svg+xml;utf8,'); + } + + .main-content { + max-width: 60rem; + margin: 0 auto; + position: relative; + padding: 3rem 0; + } + + .hero-section { + margin-bottom: 3rem; + } + + .hero-title-container { + margin-bottom: 2rem; + padding: 0 2rem; + } + + .hero-title { + font-size: 2.25rem; + font-weight: bold; + letter-spacing: -0.025em; + color: var(--grayscale-12); + } + + .hero-description { + font-size: 1rem; + color: var(--grayscale-10); + } + + .feature-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + } + + .sdks-card { + border-top: 1px solid var(--grayscale-5); + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1.5rem; + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + .docs-card { + border-top: 1px solid var(--grayscale-5); + border-left: 1px solid var(--grayscale-5); + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1rem; + grid-row: 1 / 3; + } + + .ai-search-card { + border-top: 1px solid var(--grayscale-5); + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1.5rem; + } + + .card-header { + display: flex; + flex-direction: column; + gap: 0.25rem; + } + + .card-title { + font-size: 1.25rem; + font-weight: bold; + color: var(--grayscale-12); + } + + .card-description { + font-size: 1rem; + color: var(--grayscale-10); + } + + .sdks-preview { + width: 100%; + position: relative; + } + + .sdks-preview-img { + width: 100%; + object-fit: cover; + } + + .docs-preview-img { + width: 100%; + object-fit: cover; + } + + .ai-search-preview-img { + width: 100%; + object-fit: cover; + } + + .language-icons { + display: flex; + align-items: center; + gap: 0.75rem; + } + + .language-icons-label { + font-size: 0.875rem; + color: #62636c; + } + + .language-icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: none; + cursor: pointer; + padding: 0; + border-radius: 0.25rem; + + &:hover { + background-color: var(--grayscale-a3); + } + } + + .language-icon-img { + width: 16px; + height: 16px; + object-fit: contain; + } + + .action-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + } + + .action-buttons-vertical { + display: flex; + flex-direction: column; + gap: 0.75rem; + } + + .community-section { + border-top: 1px solid var(--grayscale-5); + border-bottom: 1px solid var(--grayscale-5); + padding: 3rem 2rem; + } + + .community-title-container { + margin-bottom: 2rem; + } + + .community-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; + } + + .community-card { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0; + align-items: flex-start; + } + + .community-card-title { + font-size: 1rem; + font-weight: bold; + color: var(--grayscale-12); + } + + .community-card-description { + font-size: 0.875rem; + color: var(--grayscale-10); + margin-bottom: 0.5rem; + } + + .twitter-strikethrough { + text-decoration: line-through; + } + + .help-section { + border-bottom: 1px solid var(--grayscale-5); + padding: 3rem 2rem; + margin-bottom: 3rem; + display: flex; + flex-direction: column; + gap: 1rem; + } + + .help-buttons { + display: flex; + gap: 1.5rem; + } + + .footer { + padding: 3rem 2rem; + } + + .footer-top { + display: flex; + justify-content: space-between; + gap: 2rem; + margin-bottom: 3rem; + position: relative; + } + + .footer-logo { + display: flex; + align-items: center; + gap: 0.25rem; + + svg { + display: none !important; + } + + img { + transition: filter 150ms ease; + } + + &:hover { + img { + filter: saturate(1) opacity(1); + } + } + } + + .footer-logo-img { + height: 1rem; + margin: 0; + filter: saturate(0) opacity(0.7); + } + + .footer-logo-frame { + position: absolute; + top: 50%; + left: 0; + transform: translate(-32px, calc(-50% - 4px)); + } + + .footer-status { + display: flex; + flex-direction: row; + gap: 1rem; + } + + .status-badge { + display: flex; + align-items: center; + gap: 0.5rem; + border-radius: 9999px; + padding: 0.25rem 0.75rem; + align-self: flex-start; + cursor: pointer; + text-decoration: none; + transition: background-color 150ms ease, color 150ms ease; + + svg { + display: none !important; + } + + &:hover { + background-color: var(--grayscale-a4); + + .status-text { + color: var(--grayscale-12); + } + } + } + + .status-indicator { + width: 0.375rem; + height: 0.375rem; + background-color: var(--green-a10); + border-radius: 50%; + box-shadow: 0 0 0 4px var(--green-a4); + } + + .status-text { + font-size: 0.875rem; + color: var(--grayscale-10); + font-weight: 400; + } + + .soc2-badge { + display: flex; + align-items: center; + gap: 0.5rem; + border-radius: 9999px; + padding: 0.25rem 0.75rem 0.25rem 0.25rem; + align-self: flex-start; + text-decoration: none; + transition: background-color 150ms ease, color 150ms ease; + + svg { + display: none !important; + } + + &:hover { + background-color: var(--grayscale-a4); + + .status-text { + color: var(--grayscale-12); + } + } + } + + .soc2-badge-img { + width: 1.5rem; + background-color: #62636C; + border-radius: 1000px; + } + + .footer-links { + display: flex; + gap: 2rem; + padding-top: 2rem; + align-items: flex-end; + justify-content: space-between; + } + + .footer-columns { + display: flex; + gap: 2rem; + } + + .footer-column { + display: flex; + flex-direction: column; + gap: 1rem; + width: 170px; + } + + .footer-column-title { + font-size: 0.875rem; + font-weight: 400; + color: var(--grayscale-9); + letter-spacing: -0.025em; + } + + .footer-column-links { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .footer-link { + font-weight: 400; + font-size: 0.875rem; + color: var(--grayscale-11); + text-decoration: none; + transition: color 0.15s ease-in-out; + + svg { + display: none !important; + } + } + + .footer-link:hover { + color: var(--grayscale-12); + } + + .footer-bottom-text { + font-weight: 400; + font-size: 0.875rem; + color: var(--grayscale-10); + text-decoration: none; + transition: color 0.15s ease-in-out; + } + + .a-btn { + text-decoration: none !important; + font-weight: 400 !important; + width: fit-content !important; + + svg { + display: none !important; + } + + &.no-hover { + cursor: default; + &:hover { + background: none !important; + color: var(--grayscale-a11) !important; + } + } + } + + /* Responsive Design - Mobile First */ + @media (max-width: 640px) { + .main-content { + padding: 2rem 1.5rem; + } + + .dashed-pattern-left { + left: 0px; + } + + .dashed-pattern-right { + right: 0px; + } + + .hero-section { + margin-bottom: 2rem; + } + + .hero-title-container { + padding: 0 1.5rem; + } + + .feature-grid { + grid-template-columns: 1fr; + grid-template-rows: auto; + gap: 0; + } + + .sdks-card { + padding: 1.5rem; + } + + .docs-card { + padding: 1.5rem; + border-left: none; + grid-column: 1; + grid-row: auto; + } + + .ai-search-card { + padding: 1.5rem; + } + + .card-title { + font-size: 1.375rem; + } + + .card-description { + font-size: 1.0625rem; + } + + .language-icons { + flex-wrap: wrap; + gap: 1rem; + } + + .language-icons-label { + width: 100%; + } + + .language-icon { + width: 2rem; + height: 2rem; + margin: -0.25rem; + + &:hover { + background-color: var(--grayscale-a4); + transform: scale(1.1); + transition: all 0.2s ease; + } + } + + .language-icon-img { + width: 20px; + height: 20px; + } + + .action-buttons { + flex-direction: row; + gap: 0.75rem; + align-items: stretch; + flex-wrap: wrap; + } + + .action-buttons-vertical { + gap: 0.75rem; + } + + .community-section { + padding: 2rem 1.5rem; + } + + .community-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .community-card { + border-radius: 0.5rem; + transition: all 0.2s ease; + + &:hover { + border-color: var(--grayscale-6); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } + } + + .help-section { + padding: 2rem 1.5rem; + } + + .help-buttons { + flex-direction: column; + gap: 1rem; + } + + .footer { + padding: 2rem 1.5rem; + } + + .footer-top { + flex-direction: column; + gap: 1.5rem; + margin-bottom: 2rem; + } + + .footer-logo-frame { + transform: translate(-32px, calc(-50% - 68px)); + } + + .footer-status { + flex-direction: column; + gap: 0.75rem; + padding-top: 2rem; + } + + .footer-links { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + align-items: flex-start; + padding-top: 1rem; + } + + .footer-columns { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + width: 100%; + order: 1; + } + + .footer-column { + width: 100%; + } + + .footer-bottom-text { + order: 2; + } + } + + /* Tablet breakpoint - Better use of space */ + @media (max-width: 720px) and (min-width: 481px) { + .community-grid { + grid-template-columns: repeat(2, 1fr); + } + + .hero-title { + font-size: 2rem; + } + + .feature-grid { + gap: 1px; + } + + .footer-columns { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } + + .footer-column { + width: calc(50% - 1rem); + min-width: 200px; + } + } + + /* Very small screens */ + @media (max-width: 480px) { + .hero-title { + font-size: 1.75rem; + } + + .card-title { + font-size: 1.25rem; + } + + .language-icon { + width: 28px; + height: 28px; + } + + .language-icon-img { + width: 16px; + height: 16px; + } + } +} + diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml index 63c51229b..c6ea3f23e 100644 --- a/fern/products/docs/docs.yml +++ b/fern/products/docs/docs.yml @@ -141,3 +141,4 @@ navigation: path: ./pages/component-library/custom-components/custom-react-components.mdx - page: Changelog path: ./pages/changelog/overview.mdx + diff --git a/fern/products/home/pages/images/recruiting-flyer.svg b/fern/products/home/pages/images/recruiting-flyer.svg new file mode 100644 index 000000000..44d2b0f16 --- /dev/null +++ b/fern/products/home/pages/images/recruiting-flyer.svg @@ -0,0 +1,1275 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 + + + + + +
 + + + + + +
 + + + + + +
 + + + + + +
 + + + + + +
 + + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fern/products/home/pages/images/soc2.svg b/fern/products/home/pages/images/soc2.svg new file mode 100644 index 000000000..950ce1025 --- /dev/null +++ b/fern/products/home/pages/images/soc2.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fern/products/home/pages/welcome.mdx b/fern/products/home/pages/welcome.mdx index fa8aa6694..0ae962146 100644 --- a/fern/products/home/pages/welcome.mdx +++ b/fern/products/home/pages/welcome.mdx @@ -11,644 +11,9 @@ layout: custom #builtwithfern { display: none !important; } - - /*** BACKGROUND ***/ - .background-wrapper { - filter: blur(13.5rem); - will-change: transform, filter; - transform-style: preserve-3d; - transform: translateZ(0); - z-index: -1; - width: 100%; - max-width: 86rem; - display: flex; - position: fixed; - inset: 0%; - margin-right: auto; - margin-left: auto; - pointer-events: none; - top: 0; - left: 0; - opacity: 0.5; - } - .gradient-radial.is-green { - background-color: #dbfdd3; - } - .gradient-radial.is-blue { - background-color: #a7bff7; - } - :is(.dark) .gradient-radial.is-green { - background-color: #17450A; - } - :is(.dark) .gradient-radial.is-blue { - background-color: #1E2E5A; - } - .gradient-radial { - will-change: transform; - transform-style: preserve-3d; - border-radius: 50%; - width: 12rem; - height: 19rem; - display: block; - position: absolute; - transform: translateZ(0); - } - .gradient-radial.hero-1 { - transform-style: preserve-3d; - transform: rotate(-34deg)scale(1.4,.5) - position: absolute; - top: 54%; - left: 0%; - } - .gradient-radial.hero-2 { - transform-style: preserve-3d; - transform: rotate(-74deg)scale(1.7,1.1); - position: absolute; - top: 40%; - left: -2%; - } - .gradient-radial.hero-3 { - transform-style: preserve-3d; - transform: rotate(-20deg)scaleY(1.4) - position: absolute; - top: 20%; - left: 8%; - } - .gradient-radial.hero-4 { - transform-style: preserve-3d; - transform: rotate(37deg)scale(1.1,1.5) - position: absolute; - top: 37%; - right: 11%; - } - .gradient-radial.hero-5 { - transform-style: preserve-3d; - transform: rotate(37deg)scale(.9,1.8) - position: absolute; - top: 52%; - right: -7%; - } - - /*** PAGE ***/ - .page-container { - min-height: 100vh; - position: relative; - } - - .dashed-pattern-left { - position: absolute; - left: -24px; - top: 0; - height: 100%; - width: 24px; - opacity: 1; - pointer-events: none; - border-right: 1px solid var(--grayscale-5); - border-left: 1px solid var(--grayscale-5); - } - - .dashed-pattern-right { - position: absolute; - right: -24px; - top: 0; - height: 100%; - width: 24px; - opacity: 1; - pointer-events: none; - border-right: 1px solid var(--grayscale-5); - border-left: 1px solid var(--grayscale-5); - } - - .dashed-gradient { - height: 100%; - width: 100%; - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: repeat; - background-size: 12px 12px; - } - - :is(.dark) .dashed-gradient { - background-image: url('data:image/svg+xml;utf8,'); - } - - .main-content { - max-width: 60rem; - margin: 0 auto; - position: relative; - padding: 3rem 0; - } - - /*** HERO ***/ - .hero-section { - margin-bottom: 3rem; - } - - .hero-title-container { - margin-bottom: 2rem; - padding: 0 2rem; - } - - .hero-title { - font-size: 2.25rem; - font-weight: bold; - letter-spacing: -0.025em; - color: var(--grayscale-12); - } - - .hero-description { - font-size: 1rem; - color: var(--grayscale-10); - } - - .feature-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr); - } - - .sdks-card { - border-top: 1px solid var(--grayscale-5); - padding: 2rem; - display: flex; - flex-direction: column; - gap: 1.5rem; - grid-column: 1 / 2; - grid-row: 1 / 2; - } - - .docs-card { - border-top: 1px solid var(--grayscale-5); - border-left: 1px solid var(--grayscale-5); - padding: 2rem; - display: flex; - flex-direction: column; - gap: 1rem; - grid-row: 1 / 3; - } - - .ai-search-card { - border-top: 1px solid var(--grayscale-5); - padding: 2rem; - display: flex; - flex-direction: column; - gap: 1.5rem; - } - - .card-header { - display: flex; - flex-direction: column; - gap: 0.25rem; - } - - .card-title { - font-size: 1.25rem; - font-weight: bold; - color: var(--grayscale-12); - } - - .card-description { - font-size: 1rem; - color: var(--grayscale-10); - } - - .card-description-alt { - font-size: 1rem; - color: rgba(0,7,20,0.62); - } - - .sdks-preview { - width: 100%; - position: relative; - } - - .sdks-preview-img { - width: 100%; - object-fit: cover; - } - - .docs-preview-img { - width: 100%; - object-fit: cover; - } - - .ai-search-preview-img { - width: 100%; - object-fit: cover; - } - - .language-icons { - display: flex; - align-items: center; - gap: 0.75rem; - } - - .language-icons-label { - font-size: 0.875rem; - color: #62636c; - } - - .language-icon { - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - border: none; - background: none; - cursor: pointer; - padding: 0; - border-radius: 0.25rem; - - &:hover { - background-color: var(--grayscale-a3); - } - } - - .language-icon-img { - width: 16px; - height: 16px; - object-fit: contain; - } - - .action-buttons { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - } - - .action-buttons-vertical { - display: flex; - flex-direction: column; - gap: 0.75rem; - } - - .btn-primary { - border: 1px solid var(--accent-9); - border-radius: 6px; - background-color: var(--accent-9); - color: var(--accent-contrast); - text-align: center; - letter-spacing: var(--_typography---letter-spacing--button); - white-space: nowrap; - justify-content: center; - align-items: center; - padding: .5rem 0.75rem; - font-size: .875rem; - font-weight: 400; - line-height: 1.2; - text-decoration: none; - transition: box-shadow .3s cubic-bezier(.19,1,.22,1), color .3s cubic-bezier(.19,1,.22,1), background-color .3s cubic-bezier(.19,1,.22,1); - display: flex; - box-shadow: 0 1.5em 1.375em 0 #0087000a, 0 .5em .5em #0087000f, 0 .25em .25em #00870012, 0 .15625em .125rem #00870014, 0 .071875em .75em #0087001f; - cursor: pointer; - width: fit-content; - gap: 0.5rem; - - &:hover { - border-color: var(--accent-10); - background-color: var(--accent-10); - box-shadow: 0 1.5em 1.375em 0 #0000000a, 0 .5em .5em #0000000f, 0 .25em .25em #00000012, 0 .15625em .125rem #00000014, 0 .071875em .75em #0000001f; - } - } - - .btn-secondary { - background-color: var(--grayscale-a3); - color: var(--grayscale-a10); - padding: 0.5rem 0.75rem; - border-radius: 6px; - font-size: 0.875rem; - border: none; - cursor: pointer; - transition: box-shadow .3s cubic-bezier(.19,1,.22,1), color .3s cubic-bezier(.19,1,.22,1), background-color .3s cubic-bezier(.19,1,.22,1); - width: fit-content; - display: flex; - align-items: center; - gap: 0.5rem; - - &:hover { - background-color: var(--grayscale-a4); - color: var(--grayscale-a12); - } - } - - .community-section { - border-top: 1px solid var(--grayscale-5); - border-bottom: 1px solid var(--grayscale-5); - padding: 3rem 2rem;; - } - - .community-title-container { - margin-bottom: 2rem; - } - - .section-title { - font-size: 1.5rem; - font-weight: bold; - color: #1e1f24; - } - - .community-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; - } - - .community-card { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 0; - align-items: flex-start; - } - - .community-card-title { - font-size: 1rem; - font-weight: bold; - color: var(--grayscale-12); - } - - .community-card-description { - font-size: 0.875rem; - color: var(--grayscale-10); - margin-bottom: 0.5rem; - } - - .community-card-arrow { - background-color: rgba(61,37,20,0.05); - border-radius: 0.5rem; - padding: 0.5rem; - align-self: flex-start; - } - - .twitter-strikethrough { - text-decoration: line-through; - } - - .help-section { - border-bottom: 1px solid var(--grayscale-5); - padding: 3rem 2rem; - margin-bottom: 3rem; - display: flex; - flex-direction: column; - gap: 1rem; - } - - .help-header { - margin-bottom: 1.5rem; - } - - .help-title { - font-size: 1.5rem; - font-weight: bold; - color: #1e1f24; - margin-bottom: 0.5rem; - } - - .help-description { - font-size: 1rem; - color: #62636c; - } - - .help-buttons { - display: flex; - gap: 1.5rem; - } - - .help-button { - border: 1px solid #e0e1e6; - border-radius: 0.75rem; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - padding: 0.75rem; - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; - } - - .help-button-text { - font-size: 1rem; - color: var(--grayscale-12); - } - - .footer { - padding: 3rem 2rem; - } - - .footer-top { - display: flex; - justify-content: space-between; - gap: 2rem; - margin-bottom: 3rem; - position: relative; - } - - .footer-left { - display: flex; - flex-direction: column; - gap: 1.5rem; - } - - .footer-logo { - display: flex; - align-items: center; - gap: 0.25rem; - - svg { - display: none !important; - } - } - - .footer-logo-img { - height: 1rem; - margin: 0; - } - - .footer-logo-frame { - position: absolute; - top: 50%; - left: 0; - transform: translate(-32px, calc(-50% - 4px)); - } - - .footer-status { - display: flex; - flex-direction: row; - gap: 1rem; - } - - .status-badge { - display: flex; - align-items: center; - gap: 0.5rem; - background-color: rgba(255,255,255,0.05); - border-radius: 9999px; - padding: 0.25rem 0.75rem; - align-self: flex-start; - } - - .status-indicator { - width: 0.375rem; - height: 0.375rem; - background-color: #008700; - border-radius: 50%; - border: 4px solid #e2f4e2; - } - - .status-text { - font-size: 0.875rem; - color: #8b8d98; - } - - .soc2-badge { - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 9999px; - padding: 0.25rem 0.75rem; - align-self: flex-start; - } - - .footer-right { - display: flex; - justify-content: flex-end; - } - - .newsletter-container { - background-color: var(--grayscale-2); - border: 1px solid var(--grayscale-6); - border-radius: 0.5rem; - padding: 0.75rem; - width: 20rem; - } - - .newsletter-label { - font-size: 0.75rem; - color: var(--grayscale-10); - margin-bottom: 0.75rem; - font-family: var(--font-code); - } - - .newsletter-form { - display: flex; - gap: 0.5rem; - } - - .newsletter-input { - display: flex; - padding: 12px; - flex-direction: column; - justify-content: center; - align-items: flex-start; - flex: 1 0 0; - border-radius: 8px; - border: 0.5px solid var(--grayscale-8); - background: var(--grayscale-1); - box-shadow: 0px 0px 0px 0.559px rgba(14, 63, 126, 0.04), 0px 0.559px 0.559px -0.28px rgba(42, 51, 69, 0.04), 0px 1.677px 1.677px -0.839px rgba(42, 51, 70, 0.04), 0px 3.354px 3.354px -1.677px rgba(42, 51, 70, 0.04), 0px 6.709px 6.709px -3.354px rgba(14, 63, 126, 0.04), 0px 13.417px 13.417px -6.709px rgba(14, 63, 126, 0.04), 4.472px 4.472px 32.336px 0px var(--radix-gray-2, #F9F9FB); - text-decoration: none; - font-family: var(--font-code); - font-size: 0.875rem; - font-style: normal; - font-weight: 400; - } - - .newsletter-input-text { - font-size: 0.75rem; - color: #80828d; - } - - .newsletter-button { - background-color: #008700; - color: white; - padding: 0.5rem; - border-radius: 0.5rem; - border: none; - cursor: pointer; - } - - .footer-links { - display: flex; - gap: 2rem; - padding-top: 2rem; - align-items: flex-end; - } - - .footer-column { - display: flex; - flex-direction: column; - gap: 1rem; - width: 170px; - } - - .footer-column-title { - font-size: 0.875rem; - font-weight: 400; - color: var(--grayscale-9); - letter-spacing: -0.025em; - } - - .footer-column-links { - display: flex; - flex-direction: column; - gap: 1rem; - } - - .footer-link { - font-weight: 400; - font-size: 0.875rem; - color: var(--grayscale-11); - text-decoration: none; - transition: color 0.15s ease-in-out; - - svg { - display: none !important; - } - } - - .footer-link:hover { - color: var(--grayscale-12); - } - - .footer-bottom { - display: flex; - justify-content: space-between; - padding-top: 3rem; - } - - .footer-bottom-text { - font-weight: 400; - font-size: 0.875rem; - color: var(--grayscale-10); - text-decoration: none; - transition: color 0.15s ease-in-out; - } - - .a-btn { - text-decoration: none !important; - font-weight: 400 !important; - - svg { - display: none !important; - } - - &.no-hover { - cursor: default; - &:hover { - background: none !important; - color: var(--grayscale-a11) !important; - } - } - } `} -{/*
-
-
-
-
-
-
*/} -
-
+
{/* Main Content */}
{/* Dashed Pattern - Left Side */} @@ -899,7 +264,7 @@ layout: custom

Follow progress and contribute to the codebase.

- + View Arrow right dark Arrow right dark @@ -914,7 +279,7 @@ layout: custom

Connect with the Fern community.

- + View Twitter Preview Twitter Preview @@ -931,7 +296,7 @@ layout: custom

Get updates on the Fern platform.

- + View Twitter Preview Twitter Preview @@ -945,12 +310,12 @@ layout: custom

Help

- We're lightning-fast with support - you'll typically hear back from us in hours, not days! + We're lightning-fast with support! If you're a customer, reach out via your dedicated Slack channel.

- + Github Github @@ -963,12 +328,6 @@ layout: custom Email us - -
- Slack - Slack - Slack (for customers only) -
@@ -985,14 +344,15 @@ layout: custom
-
+
All systems operational -
+ -
- Soc 2 Type 1 -
+ + Soc 2 Type II + Soc 2 Type II +
@@ -1010,39 +370,37 @@ layout: custom
*/} -
-

Documentation

-
- OpenAPI Compatibility - SDKs - Docs +
+
+

Documentation

+
+ OpenAPI Compatibility + SDKs + Docs +
-
-
-

Resources

-
- Blog - Support - Pricing - Slack +
+

Resources

+
-
-
-

Company

-
- Brand Kit - Github - Privacy Policy - Terms of Service +
- {/*
-
© 2025 Fern • Birch Solutions, Inc.
-
Located in Brooklyn, New York.
-
*/}
\ No newline at end of file