diff --git a/src/components/home/Hero/Banner.tsx b/src/components/home/Hero/Banner.tsx new file mode 100644 index 000000000..3deb42761 --- /dev/null +++ b/src/components/home/Hero/Banner.tsx @@ -0,0 +1,16 @@ +// src/components/PageBanner.tsx +import React from 'react'; +import styles from "./styles.module.css"; +import LinkToNotebookLink from './LinkToNotebookLink'; + +export default function Banner() { + return ( +
+
+
Introducing Notebook.link
+
The future of notebook sharing
+ +
+
+ ); +} diff --git a/src/components/home/Hero/LinkToNotebookLink.tsx b/src/components/home/Hero/LinkToNotebookLink.tsx new file mode 100644 index 000000000..ca31445f6 --- /dev/null +++ b/src/components/home/Hero/LinkToNotebookLink.tsx @@ -0,0 +1,9 @@ +import styles from "./styles.module.css"; + +export default function LinkToNotebookLink({label}) { + return ( +
+ {label} +
+ ); +} diff --git a/src/components/home/Hero/index.tsx b/src/components/home/Hero/index.tsx index 6cfe5c83f..d01c41f52 100644 --- a/src/components/home/Hero/index.tsx +++ b/src/components/home/Hero/index.tsx @@ -1,12 +1,17 @@ import styles from "./styles.module.css"; import SimpleSlider from "./LogosTableBy8"; import Astronaut from "/img/quantstack/astronaut.svg"; +import Banner from "./Banner"; + export function Hero() { return (
+ +
+
-
+

diff --git a/src/components/home/Hero/styles.module.css b/src/components/home/Hero/styles.module.css index c26181d5d..7633d5574 100644 --- a/src/components/home/Hero/styles.module.css +++ b/src/components/home/Hero/styles.module.css @@ -11,7 +11,72 @@ padding-bottom: var(--ifm-spacing-3xl); } +.banner_container { + position: relative; + width: 100%; + display: flex; + align-items: center; + background-image: url('/img/banner/notebook-link-banner.svg'); + background-position: center; + background-repeat: no-repeat; + height: 464px; + padding-bottom: 110px; +} + +.banner_image { + width: 100%; + height: auto; + display: block; +} + +.banner_text_overlay { + margin-top: 50px; + margin-left: auto; + margin-right: auto; + text-align: center; + color: white; + /* or whatever contrasts with your SVG */ + font-size: 2rem; + font-family: var(--ifm-font-family-kode-mono); +} + +.banner_text_overlay_title { + font-size: 48px; + font-weight: 400; + font-style: normal; + line-height: 100%; +} + +.banner_text_overlay_subtitle { + font-size: 32px; + font-style: normal; +} + +.notebook_link { + color: #FCF12B; + font-weight: 700; + font-style: bold; + line-height: 100%; + font-family: var(--ifm-font-family-inter); +} + +.link_to_notebook_link { + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, + #5242FF, + #2A2A2A); + color: white; + width: 358px; + font-weight: 700; + font-family: var(--ifm-font-family-roboto); + font-weight: 600; + font-size: 24px; +} + @media only screen and (max-width: 996px) { + /*Mobile*/ .logos_carousel { display: none; @@ -19,6 +84,7 @@ } @media only screen and (min-width: 996px) { + /*Desktop*/ .table_with_8_customers { margin-bottom: var(--ifm-spacing-xl); diff --git a/src/css/custom.css b/src/css/custom.css index afdc4edbd..a3f5617a8 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -3,6 +3,8 @@ @import url("https://fonts.cdnfonts.com/css/rubik-one"); @import url("https://fonts.cdnfonts.com/css/roboto-flex"); @import url("https://fonts.googleapis.com/css2?family=Dosis"); +@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); :root { --ifm-color-orange-jupyter: #f37726; @@ -47,6 +49,8 @@ --ifm-font-family-bebas-neue: "Bebas Neue"; --ifm-font-family-rubik-one: "Rubik One"; --ifm-font-family-dosis: "Dosis"; + --ifm-font-family-kode-mono: "Kode Mono"; + --ifm-font-family-inter: "Inter"; /* Spacing for margins and paddings */ --ifm-spacing-none: 0px; diff --git a/static/atom.xml b/static/atom.xml index de4fedccf..01bc7278e 100644 --- a/static/atom.xml +++ b/static/atom.xml @@ -2,7 +2,7 @@ https://quantstack.net/ Recent blog posts featured by QuantStack team - 2026-02-04T13:08:35.577Z + 2026-02-04T13:30:12.438Z https://github.com/jpmonette/feed QuantStack Team diff --git a/static/atom_all.xml b/static/atom_all.xml index 8fe20890d..0c35d6175 100644 --- a/static/atom_all.xml +++ b/static/atom_all.xml @@ -2,7 +2,7 @@ All blog posts featured by QuantStack team - 2026-02-04T13:08:35.584Z + 2026-02-04T13:30:12.443Z https://github.com/jpmonette/feed Atom feed for QuantStack website blog page diff --git a/static/img/banner/notebook-link-banner.svg b/static/img/banner/notebook-link-banner.svg new file mode 100644 index 000000000..f468782f7 --- /dev/null +++ b/static/img/banner/notebook-link-banner.svg @@ -0,0 +1,308 @@ + + diff --git a/static/rss.xml b/static/rss.xml index 103f13942..183adb510 100644 --- a/static/rss.xml +++ b/static/rss.xml @@ -4,7 +4,7 @@ https://quantstack.net RSS for Node - Wed, 04 Feb 2026 13:08:35 GMT + Wed, 04 Feb 2026 13:30:12 GMT diff --git a/static/rss_all.xml b/static/rss_all.xml index fe1c962d3..543701777 100644 --- a/static/rss_all.xml +++ b/static/rss_all.xml @@ -4,7 +4,7 @@ https://quantstack.net RSS for Node - Wed, 04 Feb 2026 13:08:35 GMT + Wed, 04 Feb 2026 13:30:12 GMT