diff --git a/.gitignore b/.gitignore index 20b325d0..0e45e748 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,5 @@ **/.benchmarks **/.pytest_cache **/.ruff_cache -.DS_Store \ No newline at end of file +.DS_Store +.idea diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 2cf57764..dd979458 100644 --- a/docs/src/css/custom.css +++ b/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; } diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css index 1ab188e3..8191ed25 100644 --- a/docs/src/pages/index.module.css +++ b/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; +} \ No newline at end of file diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 754225f6..d37d050d 100644 --- a/docs/src/pages/index.tsx +++ b/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 ( -
-
-

{siteConfig.title}

-

- {translate({ - id: 'home.header.subtitle', - message: 'Simplify Infrastructure Automation', - })} -

-
- - {translate({ - id: 'home.header.docs', - message: 'Infrahub Docs', - })} - - - {translate({ - id: 'home.header.tutorials', - message: 'Tutorials', - })} - - - {translate({ - id: 'home.header.sandbox', - message: 'Sandbox', - })} - -
-
-
- ); + const {siteConfig} = useDocusaurusContext(); + + return ( +
+
+ {siteConfig.title} +

+ {translate({ + id: 'home.header.subtitle', + message: "Simplify Infrastructure Automation", + })} +

+ +
+ + {translate({ + id: 'home.header.docs', + message: 'Learn about Infrahub', + })} + + + + + {translate({ + id: 'home.header.sandbox', + message: 'Try it', + })} + + + + {translate({ + id: 'home.header.tutorials', + message: 'Infrahub Labs', + })} + + +
+
+ +
+ +
+
+ ); } 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: ( - - { - "These development packages such as the Infrahub Python SDK greatly simplify how you can interact with Infrahub programmatically." - } - - ), - link: '/docs/python-sdk/', - }, - { - title: translate({ - id: 'home.sectionList.integrations.title', - message: 'Integrations', - }), - Svg: '/img/integrations.svg', - description: ( - - {'OpsMill maintains multiple integrations with other infrastructure systems. In addition, other companies maintain integrations with Infrahub.'} - - ), - link: '/docs/integrations/', - }, - - { - title: translate({ - id: 'home.sectionList.demos.title', - message: 'Demos', - }), - Svg: '/img/demos.svg', - description: ( - - {'These repositories demo key Infrahub features using example infrastructure. They demonstrate the capabilities to use Infrahub in various scenarios.'} - - ), - link: '/demo/', - }, -]; +function IntegrationCard({title, svgPath, description, link}: SectionItem) { + return ( +
+ +
+ python logo + {title} +
-function Section({ title, Svg, description, link }: SectionItem) { - return ( -
- -
- -
-
- {title} -

{description}

-
- -
- ); +
{description}
+ +
) } -function HomepageSections(): React.JSX.Element { - return ( -
-
-
- {SectionList.map((props, idx) => ( -
- ))} -
-
-
- ); +function IntegrationsSection() { + return ( +
+ {translate({ + id: 'home.section.integrations.title', + message: 'Integrations', + })} + +
+ + + +
+
+ ); } export default function Home(): React.JSX.Element { - const { siteConfig } = useDocusaurusContext(); - return ( - - -
- -
- - ); + const {siteConfig} = useDocusaurusContext(); + return ( + + +
+ +
+ + ); } \ No newline at end of file diff --git a/docs/static/img/ansible.svg b/docs/static/img/ansible.svg new file mode 100644 index 00000000..e42a368b --- /dev/null +++ b/docs/static/img/ansible.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/arrow-right.svg b/docs/static/img/arrow-right.svg new file mode 100644 index 00000000..777bd7fe --- /dev/null +++ b/docs/static/img/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/education.svg b/docs/static/img/education.svg new file mode 100644 index 00000000..941ed431 --- /dev/null +++ b/docs/static/img/education.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/nornir.png b/docs/static/img/nornir.png new file mode 100644 index 00000000..a153d099 Binary files /dev/null and b/docs/static/img/nornir.png differ diff --git a/docs/static/img/python.svg b/docs/static/img/python.svg new file mode 100644 index 00000000..42396bb2 --- /dev/null +++ b/docs/static/img/python.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/img/sync.svg b/docs/static/img/sync.svg new file mode 100644 index 00000000..7495ebdb --- /dev/null +++ b/docs/static/img/sync.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/static/medias/demo.mp4 b/docs/static/medias/demo.mp4 new file mode 100644 index 00000000..d205f89f Binary files /dev/null and b/docs/static/medias/demo.mp4 differ