docs: new landing page (#9087)

New landing page design for the docs with custom card components. [Design file](https://www.figma.com/design/7BXV5qZrmrI4H1Yk8FVW9T/Marketing?node-id=5330-8333&t=eKa3NYwKpzane9ey-0) [Docs Preview](https://unleash-docs-git-alvin-new-docs-homepage-unleash-team.vercel.app/) --------- Co-authored-by: Alvin Bryan <hello@alvin.codes> Co-authored-by: Nuno Góis <github@nunogois.com>
2025-02-04 00:18:01 +01:00 · 2025-01-23 14:05:41 +01:00 · 2025-01-23 14:05:41 +01:00 · 0ebe791a75
commit 0ebe791a75
parent 7aefc573dc
16 changed files with 305 additions and 43 deletions
--- a/website/docs/welcome.md
+++ b/website/docs/welcome.md
@ -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.
-
-
--- a/website/docs/welcome.mdx
+++ 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/";
+
+<Content />
+
+<Cards />
--- a/website/src/components/Homepage/HomepageCards.tsx
+++ 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: <QuickstartIcon />,
+        href: '/quickstart',
+    },
+    {
+        title: 'Tutorials and Guides',
+        description:
+            'Explore best practices and step-by-step tutorials to help you integrate Unleash into your stack.',
+        icon: <TutorialsIcon />,
+        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: <SdksIcon />,
+        href: '/reference/sdks',
+    },
+    {
+        title: 'Unleash Academy',
+        description:
+            'Enroll in Unleash Academy to learn core concepts and best practices and gain feature flag expertise.',
+        icon: <AcademyIcon />,
+        href: '/unleash-academy/introduction',
+    },
+    {
+        title: 'Integrations',
+        description:
+            'Connect Unleash to your existing workflows. Integrate with popular tools like GitHub, Slack, CI/CD pipelines.',
+        icon: <IntegrationsIcon />,
+        href: '/reference/integrations',
+    },
+    {
+        title: 'Get in touch',
+        description: 'Reach out to us for any questions or support.',
+        icon: <GetInTouchIcon />,
+        href: 'https://www.getunleash.io/support',
+    },
+];
+
+const HomepageCards = () => {
+    return (
+        <div className={styles.container}>
+            {cardsData.map((card, index) => (
+                <a href={card.href} key={index}>
+                    <div key={index} className={styles.card}>
+                        <div className={styles.cardbody}>
+                            <div className={styles.title}>
+                                {card.icon}
+                                <h3>{card.title}</h3>
+                            </div>
+
+                            <p>{card.description}</p>
+                        </div>
+                    </div>
+                </a>
+            ))}
+        </div>
+    );
+};
+
+export default HomepageCards;
--- a/website/src/components/Homepage/HomepageContent.tsx
+++ 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 (
+        <div className={styles.content}>
+            <div>
+                <p>
+                    Unleash is a <strong>private</strong>,{' '}
+                    <strong>secure</strong>, and{' '}
+                    <strong>scalable feature management platform</strong> built
+                    to reduce the risk of releasing new features and accelerate
+                    software development.
+                </p>
+                <p>
+                    Whether you’re a small team or a large enterprise, Unleash
+                    enables you to <strong>innovate faster</strong> and make
+                    data-driven decisions that{' '}
+                    <strong>enhance your user experience</strong>.
+                </p>
+                <p>
+                    With market-leading data governance, robust change and
+                    access controls, SaaS or self-hosted deployment options,
+                    multi-region support, and the flexibility of{' '}
+                    <strong>open-source</strong>, you have the freedom to choose
+                    the setup that works best for you while maintaining full
+                    control over your data.
+                </p>
+            </div>
+            <div className={styles.video}>
+                <VideoContent
+                    videoUrls={['https://www.youtube.com/embed/3h5NhorR4Ig']}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default HomepageContent;
--- a/website/src/components/Homepage/cards.module.css
+++ 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;
+}
--- a/website/src/components/Homepage/content.module.css
+++ 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;
+    }
+}
--- a/website/src/components/Homepage/icons/academy.svg
+++ b/website/src/components/Homepage/icons/academy.svg
@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6178 4.83496L1.95117 12.835L7.2845 15.7416V23.7416L16.6178 28.835L25.9512 23.7416V15.7416L28.6178 14.2883V23.5016H31.2845V12.835L16.6178 4.83496ZM25.7112 12.835L16.6178 17.795L7.5245 12.835L16.6178 7.87496L25.7112 12.835ZM23.2845 22.155L16.6178 25.795L9.95117 22.155V17.195L16.6178 20.835L23.2845 17.195V22.155Z" />
+</svg>
--- a/website/src/components/Homepage/icons/get-in-touch.svg
+++ b/website/src/components/Homepage/icons/get-in-touch.svg
@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.576 5.81047V15.1438H7.46934L5.90934 16.7038V5.81047H20.576ZM21.9093 3.1438H4.57601C3.84268 3.1438 3.24268 3.7438 3.24268 4.47713V23.1438L8.57601 17.8105H21.9093C22.6427 17.8105 23.2427 17.2105 23.2427 16.4771V4.47713C23.2427 3.7438 22.6427 3.1438 21.9093 3.1438ZM28.576 8.47713H25.9093V20.4771H8.57601V23.1438C8.57601 23.8771 9.17601 24.4771 9.90934 24.4771H24.576L29.9093 29.8105V9.81046C29.9093 9.07713 29.3093 8.47713 28.576 8.47713Z" />
+</svg>
--- a/website/src/components/Homepage/icons/integrations.svg
+++ b/website/src/components/Homepage/icons/integrations.svg
@ -0,0 +1,12 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5330_8495)">
+<path d="M15.2428 19.3704L12.3495 16.4771L15.2428 13.5838L13.3628 11.6904L8.57617 16.4771L13.3628 21.2638L15.2428 19.3704Z" />
+<path d="M19.7897 21.2638L24.5763 16.4771L19.7897 11.6904L17.9097 13.5838L20.803 16.4771L17.9097 19.3704L19.7897 21.2638Z" />
+<path d="M25.9095 4.47709H20.3362C19.7762 2.93042 18.3095 1.81042 16.5762 1.81042C14.8428 1.81042 13.3762 2.93042 12.8162 4.47709H7.24284C7.05617 4.47709 6.88284 4.49042 6.70951 4.53042C6.18951 4.63709 5.72284 4.90376 5.36284 5.26376C5.12284 5.50376 4.92284 5.79709 4.78951 6.11709C4.65617 6.42376 4.57617 6.77042 4.57617 7.14376V20.4771V21.8104V25.8104C4.57617 26.1704 4.65617 26.5304 4.78951 26.8504C4.92284 27.1704 5.12284 27.4504 5.36284 27.7038C5.72284 28.0638 6.18951 28.3304 6.70951 28.4371C6.88284 28.4638 7.05617 28.4771 7.24284 28.4771H25.9095C27.3762 28.4771 28.5762 27.2771 28.5762 25.8104V21.8104V20.4771V7.14376C28.5762 5.67709 27.3762 4.47709 25.9095 4.47709ZM16.5762 4.14376C17.1228 4.14376 17.5762 4.59709 17.5762 5.14376C17.5762 5.69042 17.1228 6.14376 16.5762 6.14376C16.0295 6.14376 15.5762 5.69042 15.5762 5.14376C15.5762 4.59709 16.0295 4.14376 16.5762 4.14376ZM25.9095 20.4771V21.8104V25.8104H7.24284V21.8104V20.4771V7.14376H25.9095V20.4771Z" />
+</g>
+<defs>
+<clipPath id="clip0_5330_8495">
+<rect width="32" height="32" fill="white" transform="translate(0.576172 0.477112)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/src/components/Homepage/icons/quickstart.svg
+++ b/website/src/components/Homepage/icons/quickstart.svg
@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.57633 17.8104C7.843 17.8104 7.243 18.4104 7.243 19.1438C7.243 19.8771 7.843 20.4771 8.57633 20.4771C9.30967 20.4771 9.90967 19.8771 9.90967 19.1438C9.90967 18.4104 9.30967 17.8104 8.57633 17.8104ZM8.57633 23.1438C7.843 23.1438 7.243 23.7438 7.243 24.4771C7.243 25.2104 7.843 25.8104 8.57633 25.8104C9.30967 25.8104 9.90967 25.2104 9.90967 24.4771C9.90967 23.7438 9.30967 23.1438 8.57633 23.1438ZM8.57633 12.4771C7.843 12.4771 7.243 13.0771 7.243 13.8104C7.243 14.5438 7.843 15.1438 8.57633 15.1438C9.30967 15.1438 9.90967 14.5438 9.90967 13.8104C9.90967 13.0771 9.30967 12.4771 8.57633 12.4771ZM4.57633 13.1438C4.203 13.1438 3.90967 13.4371 3.90967 13.8104C3.90967 14.1838 4.203 14.4771 4.57633 14.4771C4.94967 14.4771 5.243 14.1838 5.243 13.8104C5.243 13.4371 4.94967 13.1438 4.57633 13.1438ZM8.57633 7.14376C7.843 7.14376 7.243 7.74376 7.243 8.47709C7.243 9.21043 7.843 9.81042 8.57633 9.81042C9.30967 9.81042 9.90967 9.21043 9.90967 8.47709C9.90967 7.74376 9.30967 7.14376 8.57633 7.14376ZM28.5763 14.4771C28.9497 14.4771 29.243 14.1838 29.243 13.8104C29.243 13.4371 28.9497 13.1438 28.5763 13.1438C28.203 13.1438 27.9097 13.4371 27.9097 13.8104C27.9097 14.1838 28.203 14.4771 28.5763 14.4771ZM19.243 9.81042C19.9763 9.81042 20.5763 9.21043 20.5763 8.47709C20.5763 7.74376 19.9763 7.14376 19.243 7.14376C18.5097 7.14376 17.9097 7.74376 17.9097 8.47709C17.9097 9.21043 18.5097 9.81042 19.243 9.81042ZM19.243 5.14376C19.6163 5.14376 19.9097 4.85042 19.9097 4.47709C19.9097 4.10376 19.6163 3.81042 19.243 3.81042C18.8697 3.81042 18.5763 4.10376 18.5763 4.47709C18.5763 4.85042 18.8697 5.14376 19.243 5.14376ZM4.57633 18.4771C4.203 18.4771 3.90967 18.7704 3.90967 19.1438C3.90967 19.5171 4.203 19.8104 4.57633 19.8104C4.94967 19.8104 5.243 19.5171 5.243 19.1438C5.243 18.7704 4.94967 18.4771 4.57633 18.4771ZM13.9097 27.8104C13.5363 27.8104 13.243 28.1038 13.243 28.4771C13.243 28.8504 13.5363 29.1438 13.9097 29.1438C14.283 29.1438 14.5763 28.8504 14.5763 28.4771C14.5763 28.1038 14.283 27.8104 13.9097 27.8104ZM13.9097 5.14376C14.283 5.14376 14.5763 4.85042 14.5763 4.47709C14.5763 4.10376 14.283 3.81042 13.9097 3.81042C13.5363 3.81042 13.243 4.10376 13.243 4.47709C13.243 4.85042 13.5363 5.14376 13.9097 5.14376ZM13.9097 9.81042C14.643 9.81042 15.243 9.21043 15.243 8.47709C15.243 7.74376 14.643 7.14376 13.9097 7.14376C13.1763 7.14376 12.5763 7.74376 12.5763 8.47709C12.5763 9.21043 13.1763 9.81042 13.9097 9.81042ZM13.9097 17.1438C12.803 17.1438 11.9097 18.0371 11.9097 19.1438C11.9097 20.2504 12.803 21.1438 13.9097 21.1438C15.0163 21.1438 15.9097 20.2504 15.9097 19.1438C15.9097 18.0371 15.0163 17.1438 13.9097 17.1438ZM24.5763 17.8104C23.843 17.8104 23.243 18.4104 23.243 19.1438C23.243 19.8771 23.843 20.4771 24.5763 20.4771C25.3097 20.4771 25.9097 19.8771 25.9097 19.1438C25.9097 18.4104 25.3097 17.8104 24.5763 17.8104ZM24.5763 23.1438C23.843 23.1438 23.243 23.7438 23.243 24.4771C23.243 25.2104 23.843 25.8104 24.5763 25.8104C25.3097 25.8104 25.9097 25.2104 25.9097 24.4771C25.9097 23.7438 25.3097 23.1438 24.5763 23.1438ZM24.5763 12.4771C23.843 12.4771 23.243 13.0771 23.243 13.8104C23.243 14.5438 23.843 15.1438 24.5763 15.1438C25.3097 15.1438 25.9097 14.5438 25.9097 13.8104C25.9097 13.0771 25.3097 12.4771 24.5763 12.4771ZM24.5763 7.14376C23.843 7.14376 23.243 7.74376 23.243 8.47709C23.243 9.21043 23.843 9.81042 24.5763 9.81042C25.3097 9.81042 25.9097 9.21043 25.9097 8.47709C25.9097 7.74376 25.3097 7.14376 24.5763 7.14376ZM28.5763 18.4771C28.203 18.4771 27.9097 18.7704 27.9097 19.1438C27.9097 19.5171 28.203 19.8104 28.5763 19.8104C28.9497 19.8104 29.243 19.5171 29.243 19.1438C29.243 18.7704 28.9497 18.4771 28.5763 18.4771ZM19.243 23.1438C18.5097 23.1438 17.9097 23.7438 17.9097 24.4771C17.9097 25.2104 18.5097 25.8104 19.243 25.8104C19.9763 25.8104 20.5763 25.2104 20.5763 24.4771C20.5763 23.7438 19.9763 23.1438 19.243 23.1438ZM19.243 27.8104C18.8697 27.8104 18.5763 28.1038 18.5763 28.4771C18.5763 28.8504 18.8697 29.1438 19.243 29.1438C19.6163 29.1438 19.9097 28.8504 19.9097 28.4771C19.9097 28.1038 19.6163 27.8104 19.243 27.8104ZM13.9097 11.8104C12.803 11.8104 11.9097 12.7038 11.9097 13.8104C11.9097 14.9171 12.803 15.8104 13.9097 15.8104C15.0163 15.8104 15.9097 14.9171 15.9097 13.8104C15.9097 12.7038 15.0163 11.8104 13.9097 11.8104ZM13.9097 23.1438C13.1763 23.1438 12.5763 23.7438 12.5763 24.4771C12.5763 25.2104 13.1763 25.8104 13.9097 25.8104C14.643 25.8104 15.243 25.2104 15.243 24.4771C15.243 23.7438 14.643 23.1438 13.9097 23.1438ZM19.243 17.1438C18.1363 17.1438 17.243 18.0371 17.243 19.1438C17.243 20.2504 18.1363 21.1438 19.243 21.1438C20.3497 21.1438 21.243 20.2504 21.243 19.1438C21.243 18.0371 20.3497 17.1438 19.243 17.1438ZM19.243 11.8104C18.1363 11.8104 17.243 12.7038 17.243 13.8104C17.243 14.9171 18.1363 15.8104 19.243 15.8104C20.3497 15.8104 21.243 14.9171 21.243 13.8104C21.243 12.7038 20.3497 11.8104 19.243 11.8104Z" />
+</svg>
--- a/website/src/components/Homepage/icons/sdks.svg
+++ b/website/src/components/Homepage/icons/sdks.svg
@ -0,0 +1,5 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.9628 7.45045L26.1095 5.21045C25.7495 4.75711 25.2028 4.47711 24.5762 4.47711H8.57617C7.94951 4.47711 7.40284 4.75711 7.02951 5.21045L5.18951 7.45045C4.80284 7.90378 4.57617 8.50378 4.57617 9.14378V25.8104C4.57617 27.2771 5.77617 28.4771 7.24284 28.4771H25.9095C27.3762 28.4771 28.5762 27.2771 28.5762 25.8104V9.14378C28.5762 8.50378 28.3495 7.90378 27.9628 7.45045ZM8.89617 7.14378H24.2562L25.3628 8.47711H7.80284L8.89617 7.14378ZM7.24284 25.8104V11.1438H25.9095V25.8104H7.24284Z" />
+<path d="M15.2428 21.1571L12.3495 18.2638L15.2428 15.3704L13.3628 13.4771L8.57617 18.2638L13.3628 23.0504L15.2428 21.1571Z" />
+<path d="M19.7892 23.0504L24.5758 18.2638L19.7892 13.4771L17.9092 15.3704L20.8025 18.2638L17.9092 21.1571L19.7892 23.0504Z" />
+</svg>
--- a/website/src/components/Homepage/icons/tutorials.svg
+++ b/website/src/components/Homepage/icons/tutorials.svg
@ -0,0 +1,13 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5330_8450)">
+<path d="M23.9097 6.47711C21.3097 6.47711 18.5097 7.01045 16.5763 8.47711C14.643 7.01045 11.843 6.47711 9.243 6.47711C7.30967 6.47711 5.25633 6.77045 3.53633 7.53045C2.563 7.97045 1.90967 8.91711 1.90967 9.99711V25.0371C1.90967 26.7704 3.53633 28.0504 5.21633 27.6238C6.523 27.2904 7.90967 27.1438 9.243 27.1438C11.323 27.1438 13.5363 27.4904 15.323 28.3704C16.123 28.7704 17.0297 28.7704 17.8163 28.3704C19.603 27.4771 21.8163 27.1438 23.8963 27.1438C25.2297 27.1438 26.6163 27.2904 27.923 27.6238C29.603 28.0638 31.2297 26.7838 31.2297 25.0371V9.99711C31.2297 8.91711 30.5763 7.97045 29.603 7.53045C27.8963 6.77045 25.843 6.47711 23.9097 6.47711ZM28.5763 23.4504C28.5763 24.2904 27.803 24.9038 26.9763 24.7571C25.9763 24.5704 24.9363 24.4904 23.9097 24.4904C21.643 24.4904 18.3763 25.3571 16.5763 26.4904V11.1438C18.3763 10.0104 21.643 9.14378 23.9097 9.14378C25.1363 9.14378 26.3497 9.26378 27.5097 9.51711C28.123 9.65045 28.5763 10.1971 28.5763 10.8238V23.4504Z" />
+<path d="M19.2163 15.1571C18.7897 15.1571 18.403 14.8905 18.2697 14.4638C18.0963 13.9438 18.3897 13.3705 18.9097 13.2105C20.963 12.5438 23.6163 12.3305 26.0563 12.6105C26.603 12.6771 27.003 13.1705 26.9363 13.7171C26.8697 14.2638 26.3763 14.6638 25.8297 14.5971C23.6697 14.3438 21.3097 14.5438 19.523 15.1171C19.4163 15.1305 19.3097 15.1571 19.2163 15.1571Z" />
+<path d="M19.2163 18.7038C18.7897 18.7038 18.403 18.4371 18.2697 18.0104C18.0963 17.4904 18.3897 16.9171 18.9097 16.7571C20.9497 16.0904 23.6163 15.8771 26.0563 16.1571C26.603 16.2238 27.003 16.7171 26.9363 17.2638C26.8697 17.8104 26.3763 18.2104 25.8297 18.1438C23.6697 17.8904 21.3097 18.0904 19.523 18.6638C19.4163 18.6904 19.3097 18.7038 19.2163 18.7038Z" />
+<path d="M19.2163 22.2505C18.7897 22.2505 18.403 21.9838 18.2697 21.5571C18.0963 21.0371 18.3897 20.4638 18.9097 20.3038C20.9497 19.6371 23.6163 19.4238 26.0563 19.7038C26.603 19.7705 27.003 20.2638 26.9363 20.8105C26.8697 21.3571 26.3763 21.7438 25.8297 21.6905C23.6697 21.4371 21.3097 21.6371 19.523 22.2105C19.4163 22.2371 19.3097 22.2505 19.2163 22.2505Z" />
+</g>
+<defs>
+<clipPath id="clip0_5330_8450">
+<rect width="32" height="32" fill="white" transform="translate(0.576172 0.477112)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/src/components/Homepage/index.ts
+++ b/website/src/components/Homepage/index.ts
@ -0,0 +1,2 @@
+export { default as Cards } from './HomepageCards';
+export { default as Content } from './HomepageContent';
--- 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);
 }
-
--- 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 */
--- a/website/static/img/card-hover-bg.png
+++ b/website/static/img/card-hover-bg.png