New homepage design

.gitignore

@@ -8,4 +8,5 @@
 **/.benchmarks
 **/.pytest_cache
 **/.ruff_cache
-.DS_Store
+.DS_Store
+.idea

docs/src/css/custom.css

@@ -5,8 +5,7 @@
  */
 
 /* You can override the default Infima variables here. */
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root {
   --ifm-color-primary: #0C4A62;
@@ -28,7 +27,7 @@
   --ifm-navbar-background-color: rgb(255 255 255 / var(--navbar-bg-opacity));
   --ifm-code-padding-horizontal: 0.3rem;
 
-  --ifm-font-family-base: 'Montserrat', system-ui, -apple-system, sans-serif;
+  --ifm-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
   --ifm-font-family-monospace: 'Roboto Mono', monospace;
 
 }

docs/src/pages/index.module.css

@@ -4,21 +4,48 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
+  display: flex;
+  align-items: center;
   overflow: hidden;
+  padding: 0;
 }
 
 @media screen and (max-width: 996px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 4rem 2rem;
+  }
+
+  .infrahubVideo {
+    display: none;
   }
 }
 
-.buttons {
-  gap: 16px;
-  display: flex;
+.cardTitle {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.heroCard {
+  transition: box-shadow 0.2s ease-in-out;
+  border: 1px solid var(--border-color);
+  box-shadow: none;
+}
+
+.heroCard:hover {
+  box-shadow: 1px 0px 16px 0px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.heroButton {
+  border-radius: 9999px;
+  display: inline-flex;
+  gap: 0.5rem;
   align-items: center;
-  justify-content: center;
 }
+
+.containerFlexWrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  gap: 1rem;
+}

docs/src/pages/index.tsx

@@ -5,148 +5,132 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
-import Translate, { translate } from '@docusaurus/Translate';
+import {translate} from '@docusaurus/Translate';
+import ArrowRightIcon from "/img/arrow-right.svg";
+import EducationIcon from "/img/education.svg";
 
 function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">
-          {translate({
-            id: 'home.header.subtitle',
-            message: 'Simplify Infrastructure Automation',
-          })}
-        </p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/"
-          >
-            {translate({
-              id: 'home.header.docs',
-              message: 'Infrahub Docs',
-            })}
-          </Link>
-          <Link
-            className="button button--info button--lg"
-            to="https://opsmill.instruqt.com/pages/labs"
-          >
-            {translate({
-              id: 'home.header.tutorials',
-              message: 'Tutorials',
-            })}
-          </Link>
-          <Link
-            className="button button--info button--lg"
-            to="https://demo.infrahub.app/"
-          >
-            {translate({
-              id: 'home.header.sandbox',
-              message: 'Sandbox',
-            })}
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
+    const {siteConfig} = useDocusaurusContext();
+
+    return (
+        <header className={clsx('container', styles.heroBanner)}>
+            <div className="col col--6">
+                <Heading as="h1" className="hero__title">{siteConfig.title}</Heading>
+                <p className="hero__subtitle">
+                    {translate({
+                        id: 'home.header.subtitle',
+                        message: "Simplify Infrastructure Automation",
+                    })}
+                </p>
+
+                <div className={styles.containerFlexWrap}>
+                        <Link
+                            className={clsx(styles.heroButton, "button button--primary button--lg")}
+                            to="/docs/"
+                        >
+                            {translate({
+                                id: 'home.header.docs',
+                                message: 'Learn about Infrahub',
+                            })}
+
+                            <ArrowRightIcon/>
+                        </Link>
+                        <Link
+                            className={clsx(styles.heroButton, "button button--secondary button--lg")}
+                            to="https://demo.infrahub.app/"
+                        >
+                            {translate({
+                                id: 'home.header.sandbox',
+                                message: 'Try it',
+                            })}
+                            <ArrowRightIcon/>
+                        </Link>
+                    <Link
+                        className={clsx(styles.heroButton, "button button--secondary button--lg")}
+                        to="https://opsmill.instruqt.com/pages/labs"
+                    >
+                        {translate({
+                            id: 'home.header.tutorials',
+                            message: 'Infrahub Labs',
+                        })}
+                        <EducationIcon/>
+                    </Link>
+                </div>
+            </div>
+
+            <div className={clsx(styles.infrahubVideo, "col col--6")}>
+                <video
+                    style={{
+                        pointerEvents: "none",
+                        padding: "1px",
+                    }}
+                    className="rounded-2xl" height="100%" loop autoPlay muted>
+                    <source src="/medias/demo.mp4" type="video/mp4"/>
+                </video>
+            </div>
+        </header>
+    );
 }
 
 type SectionItem = {
-  title: string;
-  Svg: string;
-  description: React.JSX.Element;
-  link: string;
+    title: string;
+    svgPath: string;
+    description: React.ReactNode;
+    link: string;
 };
 
-// FIXME The SVG here (or all static files) cannot be loaded in i18n dev mode
-const SectionList: SectionItem[] = [
-  {
-    title: translate({
-      id: 'home.sectionList.sdk.title',
-      message: 'Python SDK',
-    }),
-    Svg: '/img/sdk.svg',
-    description: (
-      <Translate id="home.sectionList.sdk.description">
-        {
-          "These development packages such as the Infrahub Python SDK greatly simplify how you can interact with Infrahub programmatically."
-        }
-      </Translate>
-    ),
-    link: '/docs/python-sdk/',
-  },
-  {
-    title: translate({
-      id: 'home.sectionList.integrations.title',
-      message: 'Integrations',
-    }),
-    Svg: '/img/integrations.svg',
-    description: (
-      <Translate id="home.sectionList.integrations.description">
-        {'OpsMill maintains multiple integrations with other infrastructure systems. In addition, other companies maintain integrations with Infrahub.'}
-      </Translate>
-    ),
-    link: '/docs/integrations/',
-  },
-
-  {
-    title: translate({
-      id: 'home.sectionList.demos.title',
-      message: 'Demos',
-    }),
-    Svg: '/img/demos.svg',
-    description: (
-      <Translate id="home.sectionList.demos.description">
-        {'These repositories demo key Infrahub features using example infrastructure. They demonstrate the capabilities to use Infrahub in various scenarios.'}
-      </Translate>
-    ),
-    link: '/demo/',
-  },
-];
+function IntegrationCard({title, svgPath, description, link}: SectionItem) {
+    return (
+        <div className='col col--4 margin-bottom--md'>
+            <Link to={link} className={clsx(styles.heroCard, "card text--no-decoration")}>
+                <div className={clsx("card__header", styles.cardTitle)}>
+                    <img src={svgPath} width="24px" alt="python logo"/>
+                    <Heading as="h3">{title}</Heading>
+                </div>
 
-function Section({ title, Svg, description, link }: SectionItem) {
-  return (
-    <div className={clsx('col col--4')}>
-      <Link to={link}>
-        <div className="text--center">
-          <img className={styles.sectionSvg} style={{ width: '80px', height: '120px' }} src={Svg} alt="" />
-        </div>
-        <div className="text--center padding-horiz--md">
-          <Heading as='h4'>{title}</Heading>
-          <p>{description}</p>
-        </div>
-      </Link>
-    </div>
-  );
+                <div className="card__body">{description}</div>
+            </Link>
+        </div>)
 }
 
-function HomepageSections(): React.JSX.Element {
-  return (
-    <section className={styles.sections}>
-      <div className="container">
-        <div className="row">
-          {SectionList.map((props, idx) => (
-            <Section key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+function IntegrationsSection() {
+    return (
+        <section className="container">
+            <Heading as="h2">{translate({
+                id: 'home.section.integrations.title',
+                message: 'Integrations',
+            })}</Heading>
+
+            <div className="row">
+                <IntegrationCard
+                title="Ansible"
+                 svgPath="/img/ansible.svg"
+                 description="OpsMill maintains the opsmill.infrahub Ansible Collection."
+                 link="/docs/integrations/infrahub-ansible"/>
+                <IntegrationCard title="Nornir"
+                                 svgPath="/img/nornir.png"
+                                 description="Infrahub can be used as an inventory source for Nornir."
+                                 link="/docs/integrations/nornir-infrahub"/>
+                <IntegrationCard title="Infrahub Sync"
+                                 svgPath="/img/sync.svg"
+                                 description="A versatile Python package that synchronizes data between a source and a destination system."
+                                 link="/docs/integrations/sync"/>
+            </div>
+        </section>
+    );
 }
 
 export default function Home(): React.JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Simplify Infrastructure Automation"
-    >
-      <HomepageHeader />
-      <main>
-        <HomepageSections />
-      </main>
-    </Layout>
-  );
+    const {siteConfig} = useDocusaurusContext();
+    return (
+        <Layout
+            title={`${siteConfig.title}`}
+            description="Simplify infrastructure automation"
+        >
+            <HomepageHeader/>
+            <main>
+                <IntegrationsSection/>
+            </main>
+        </Layout>
+    );
 }