docs: new landing page

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 />

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;

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;

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;
+}

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;
+    }
+}

website/src/components/Homepage/index.ts

@@ -0,0 +1,2 @@
+export { default as Cards } from './HomepageCards';
+export { default as Content } from './HomepageContent';

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);
 }
-