diff --git a/website/docs/welcome.md b/website/docs/welcome.md deleted file mode 100644 index 278954e8eb..0000000000 --- a/website/docs/welcome.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -slug: / -title: Feature Management Platform -description: 'Unleash is the largest open-source feature management platform. In our documentation, you’ll find everything from core Unleash concepts and feature flag best practices to detailed SDK and API guides—giving you all the resources you need to get the most out of Unleash.' -displayed_sidebar: documentation ---- - -# Unleash Documentation - -Unleash is a **private**, **secure**, and **scalable feature management platform** built to reduce the risk of releasing new features and accelerate software development. - -Whether you’re a small team or a large enterprise, Unleash enables you to **innovate faster** and make data-driven decisions that **enhance your user experience**. - -With market-leading data governance, robust change and access controls, SaaS or self-hosted deployment options, multi-region support, and the flexibility of **open-source**, you have the freedom to choose the setup that works best for you while maintaining full control over your data. - -## Quickstart - -[Get up and running](/quickstart) with Unleash in less than 5 minutes. - -## Tutorials and guides - -Explore [best practices](/topics) and step-by-step [tutorials](/feature-flag-tutorials), organized by programming languages and frameworks, to help you integrate Unleash into your stack. - -## SDKs - -With over 30 [SDKs](/reference/sdks), we enable fast and secure feature flagging across all major programming languages so you can deploy confidently in any environment. - -## Unleash Academy - -Enroll in [Unleash Academy](/unleash-academy/introduction) to learn the core concepts and best practices, earn certifications, and gain the expertise needed to manage feature flags. - -## Integrations - -[Connect Unleash](/reference/integrations) to your existing workflows. Integrate with popular tools like GitHub, Slack, CI/CD pipelines, and more. - -## Get in touch - -Have questions or ideas? We’d love to hear from you! Join our active [Slack community](https://slack.unleash.run/), contribute on [GitHub](https://github.com/orgs/Unleash), or [schedule a conversation](https://www.getunleash.io/plans/enterprise) with our team. - -You can also follow us on [Twitter](https://twitter.com/getunleash 'Unleash on Twitter'), [LinkedIn](https://www.linkedin.com/company/getunleash/ 'Unleash on LinkedIn'), and [visit our website](https://getunleash.io/) for ongoing updates and content. - - diff --git a/website/docs/welcome.mdx b/website/docs/welcome.mdx new file mode 100644 index 0000000000..727f4e20a8 --- /dev/null +++ b/website/docs/welcome.mdx @@ -0,0 +1,12 @@ +--- +slug: / +title: Unleash Documentation +description: "Unleash is the largest open-source feature management platform. In our documentation, you’ll find everything from core Unleash concepts and feature flag best practices to detailed SDK and API guides—giving you all the resources you need to get the most out of Unleash." +displayed_sidebar: documentation +--- + +import { Content, Cards } from "@site/src/components/Homepage/"; + + + + diff --git a/website/src/components/Homepage/HomepageCards.tsx b/website/src/components/Homepage/HomepageCards.tsx new file mode 100644 index 0000000000..789f6d9179 --- /dev/null +++ b/website/src/components/Homepage/HomepageCards.tsx @@ -0,0 +1,73 @@ +import styles from './cards.module.css'; +import QuickstartIcon from './icons/quickstart.svg'; +import TutorialsIcon from './icons/tutorials.svg'; +import SdksIcon from './icons/sdks.svg'; +import AcademyIcon from './icons/academy.svg'; +import IntegrationsIcon from './icons/integrations.svg'; +import GetInTouchIcon from './icons/get-in-touch.svg'; + +const cardsData = [ + { + title: 'Quickstart', + description: 'Get up and running with Unleash in less than 5 minutes.', + icon: , + href: '/quickstart', + }, + { + title: 'Tutorials and Guides', + description: + 'Explore best practices and step-by-step tutorials to help you integrate Unleash into your stack.', + icon: , + href: '/feature-flag-tutorials/use-cases/gradual-rollout', + }, + { + title: 'SDKs', + description: + 'With over 30 SDKs, we enable fast and secure feature flagging across all major programming languages.', + icon: , + href: '/reference/sdks', + }, + { + title: 'Unleash Academy', + description: + 'Enroll in Unleash Academy to learn core concepts and best practices and gain feature flag expertise.', + icon: , + href: '/unleash-academy/introduction', + }, + { + title: 'Integrations', + description: + 'Connect Unleash to your existing workflows. Integrate with popular tools like GitHub, Slack, CI/CD pipelines.', + icon: , + href: '/reference/integrations', + }, + { + title: 'Get in touch', + description: 'Reach out to us for any questions or support.', + icon: , + href: 'https://www.getunleash.io/support', + }, +]; + +const HomepageCards = () => { + return ( +
+ {cardsData.map((card, index) => ( + +
+
+
+ {card.icon} +

{card.title}

+
+ +

{card.description}

+
+
+ + ))} +
+ ); +}; + +export default HomepageCards; diff --git a/website/src/components/Homepage/HomepageContent.tsx b/website/src/components/Homepage/HomepageContent.tsx new file mode 100644 index 0000000000..171414c660 --- /dev/null +++ b/website/src/components/Homepage/HomepageContent.tsx @@ -0,0 +1,39 @@ +import styles from './content.module.css'; +import VideoContent from '@site/src/components/VideoContent.jsx'; + +const HomepageContent = () => { + return ( +
+
+

+ Unleash is a private,{' '} + secure, and{' '} + scalable feature management platform built + to reduce the risk of releasing new features and accelerate + software development. +

+

+ Whether you’re a small team or a large enterprise, Unleash + enables you to innovate faster and make + data-driven decisions that{' '} + enhance your user experience. +

+

+ With market-leading data governance, robust change and + access controls, SaaS or self-hosted deployment options, + multi-region support, and the flexibility of{' '} + open-source, you have the freedom to choose + the setup that works best for you while maintaining full + control over your data. +

+
+
+ +
+
+ ); +}; + +export default HomepageContent; diff --git a/website/src/components/Homepage/cards.module.css b/website/src/components/Homepage/cards.module.css new file mode 100644 index 0000000000..0118f7cbf1 --- /dev/null +++ b/website/src/components/Homepage/cards.module.css @@ -0,0 +1,78 @@ +.container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + margin-top: 60px; +} + +.container > a { + text-decoration: none; +} + +.card { + background-color: var(--ifm-background-color); + height: 250px; + border-radius: 12px; + border: 1px solid #e1e1e3; + border-bottom: 12px solid #6c65e5; + padding: 30px; + padding-top: 50px; + position: relative; + transition: background-color 0.2s ease-in-out; +} + +html[data-theme="dark"] .card { + border: 1px solid var(--ifm-color-emphasis-300); + border-bottom: 12px solid #6c65e5; +} + +.card::before { + content: ""; + background-image: url("/img/card-hover-bg.png"); + position: absolute; + z-index: 0; + top: 0; + right: 0; + width: 60%; + height: 85%; + background-size: cover; + border-top-right-radius: 12px; +} + +html[data-theme="dark"] .card::before { + opacity: 0.2; +} + +.card:hover { + background-color: var(--unleash-color-welcome-card-hover); +} + +.cardbody { + z-index: 10; + position: relative; +} + +.cardbody > p { + font-size: 14px; + color: var(--ifm-font-color-base); +} + +.cardbody > .title { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 16px; + color: var(--unleash-color-welcome-strong); +} + +.cardbody > .title > svg { + width: 30px; + height: 30px; + fill: var(--unleash-color-welcome-strong); +} + +.cardbody > .title > h3 { + margin-bottom: 0; + font-size: 18px; + line-height: 18px; +} diff --git a/website/src/components/Homepage/content.module.css b/website/src/components/Homepage/content.module.css new file mode 100644 index 0000000000..c4a5e6e2e7 --- /dev/null +++ b/website/src/components/Homepage/content.module.css @@ -0,0 +1,22 @@ +.content { + display: flex; + gap: 20px; + align-items: center; + justify-content: space-between; + font-size: 16px; + line-height: 24px; +} + +.content > * { + flex: 1; +} + +.content > .video { + width: 100%; +} + +@media screen and (max-width: 768px) { + .content { + flex-direction: column; + } +} diff --git a/website/src/components/Homepage/icons/academy.svg b/website/src/components/Homepage/icons/academy.svg new file mode 100644 index 0000000000..6b7fe130cf --- /dev/null +++ b/website/src/components/Homepage/icons/academy.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/src/components/Homepage/icons/get-in-touch.svg b/website/src/components/Homepage/icons/get-in-touch.svg new file mode 100644 index 0000000000..af7a20c6fb --- /dev/null +++ b/website/src/components/Homepage/icons/get-in-touch.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/src/components/Homepage/icons/integrations.svg b/website/src/components/Homepage/icons/integrations.svg new file mode 100644 index 0000000000..20670c4381 --- /dev/null +++ b/website/src/components/Homepage/icons/integrations.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/website/src/components/Homepage/icons/quickstart.svg b/website/src/components/Homepage/icons/quickstart.svg new file mode 100644 index 0000000000..dc1f43fdc3 --- /dev/null +++ b/website/src/components/Homepage/icons/quickstart.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/src/components/Homepage/icons/sdks.svg b/website/src/components/Homepage/icons/sdks.svg new file mode 100644 index 0000000000..7be3fc421b --- /dev/null +++ b/website/src/components/Homepage/icons/sdks.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/website/src/components/Homepage/icons/tutorials.svg b/website/src/components/Homepage/icons/tutorials.svg new file mode 100644 index 0000000000..24d7c8a2ed --- /dev/null +++ b/website/src/components/Homepage/icons/tutorials.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/website/src/components/Homepage/index.ts b/website/src/components/Homepage/index.ts new file mode 100644 index 0000000000..f7722b9e22 --- /dev/null +++ b/website/src/components/Homepage/index.ts @@ -0,0 +1,2 @@ +export { default as Cards } from './HomepageCards'; +export { default as Content } from './HomepageContent'; diff --git a/website/src/css/academy.css b/website/src/css/academy.css index 71ab37e8ef..0522a8729d 100644 --- a/website/src/css/academy.css +++ b/website/src/css/academy.css @@ -254,4 +254,3 @@ html[data-theme="dark"] .unleash-academy-level-badge { border-color: var(--ifm-link-color); color: var(--ifm-link-color); } - diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 1e3a4ea0e8..58b0d8c282 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -54,6 +54,11 @@ html[data-theme="light"] { --unleash-color-table-of-contents-header-background: #eef0f1; --unleash-color-table-of-contents-header-color: #244049; --unleash-color-navigation-background-active: #f4f3fd; + + --unleash-color-welcome-title: #1e373f; + --unleash-color-welcome-strong: #1a4049; + + --unleash-color-welcome-card-hover: #f7f7fa; } html[data-theme="dark"] { @@ -91,6 +96,10 @@ html[data-theme="dark"] { --unleash-color-navigation-background-active: var( --ifm-breadcrumb-item-background-active ); + + --unleash-color-welcome-title: var(--ifm-font-color-base); + --unleash-color-welcome-strong: var(--ifm-font-color-base); + --unleash-color-welcome-card-hover: #2b2a3c; } /* navbar */ @@ -350,3 +359,34 @@ main .theme-doc-breadcrumbs { } /* end video content container */ + +/* welcome page */ + +.docs-doc-id-welcome main .container { + background-color: transparent; +} + +@media (min-width: 997px) { + .docs-doc-id-welcome main .container > .row > .col { + max-width: 100% !important; + } +} + +.docs-doc-id-welcome main .theme-doc-breadcrumbs { + display: none; +} + +.docs-doc-id-welcome .markdown h1:first-child { + color: var(--unleash-color-welcome-title); + font-size: 40px; + line-height: 32px; + font-weight: 700; + margin-top: 40px; + margin-bottom: 40px; +} + +.docs-doc-id-welcome .markdown strong { + color: var(--unleash-color-welcome-strong); +} + +/* end welcome page */ diff --git a/website/static/img/card-hover-bg.png b/website/static/img/card-hover-bg.png new file mode 100644 index 0000000000..7bf2360a73 Binary files /dev/null and b/website/static/img/card-hover-bg.png differ