From 627add0fa176b96f47ff1f2e9417b0adc77ef86c Mon Sep 17 00:00:00 2001 From: Florence Haudin Date: Wed, 4 Feb 2026 18:41:55 +0100 Subject: [PATCH 1/2] Add a banner for introducing Notebook.link. --- src/components/home/Hero/Banner.tsx | 19 ++ .../home/Hero/LinkToNotebookLink.tsx | 9 + src/components/home/Hero/index.tsx | 7 +- src/components/home/Hero/styles.module.css | 64 +++- src/css/custom.css | 4 + static/atom.xml | 2 +- static/atom_all.xml | 2 +- static/img/banner/notebook-link-banner.svg | 308 ++++++++++++++++++ static/rss.xml | 2 +- static/rss_all.xml | 2 +- 10 files changed, 413 insertions(+), 6 deletions(-) create mode 100644 src/components/home/Hero/Banner.tsx create mode 100644 src/components/home/Hero/LinkToNotebookLink.tsx create mode 100644 static/img/banner/notebook-link-banner.svg diff --git a/src/components/home/Hero/Banner.tsx b/src/components/home/Hero/Banner.tsx new file mode 100644 index 000000000..b1aafd209 --- /dev/null +++ b/src/components/home/Hero/Banner.tsx @@ -0,0 +1,19 @@ +// src/components/PageBanner.tsx +import React from 'react'; +import BannerSvg from '@site/static/img/banner/notebook-link-banner.svg'; +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..db75b5ada 100644 --- a/src/components/home/Hero/styles.module.css +++ b/src/components/home/Hero/styles.module.css @@ -11,7 +11,68 @@ padding-bottom: var(--ifm-spacing-3xl); } +.banner_container { + position: relative; + width: 100%; + display: inline-block; +} + +.banner_image { + width: 100%; + height: auto; + display: block; +} + +.banner_text_overlay { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + 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; + letter-spacing: -4%; + 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 +80,7 @@ } @media only screen and (min-width: 996px) { + /*Desktop*/ .table_with_8_customers { margin-bottom: var(--ifm-spacing-xl); @@ -37,4 +99,4 @@ text-align: center; margin: var(--ifm-spacing-2xl) 0; } -} +} \ No newline at end of file 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 From d280ef0df81510f63633dc8be02edb76b7482008 Mon Sep 17 00:00:00 2001 From: Sylvain Corlay Date: Wed, 4 Feb 2026 22:03:48 +0100 Subject: [PATCH 2/2] Update layout --- src/components/home/Hero/Banner.tsx | 3 --- src/components/home/Hero/styles.module.css | 18 +++++++++++------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/home/Hero/Banner.tsx b/src/components/home/Hero/Banner.tsx index b1aafd209..3deb42761 100644 --- a/src/components/home/Hero/Banner.tsx +++ b/src/components/home/Hero/Banner.tsx @@ -1,19 +1,16 @@ // src/components/PageBanner.tsx import React from 'react'; -import BannerSvg from '@site/static/img/banner/notebook-link-banner.svg'; 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/styles.module.css b/src/components/home/Hero/styles.module.css index db75b5ada..7633d5574 100644 --- a/src/components/home/Hero/styles.module.css +++ b/src/components/home/Hero/styles.module.css @@ -14,7 +14,13 @@ .banner_container { position: relative; width: 100%; - display: inline-block; + 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 { @@ -24,10 +30,9 @@ } .banner_text_overlay { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + margin-top: 50px; + margin-left: auto; + margin-right: auto; text-align: center; color: white; /* or whatever contrasts with your SVG */ @@ -39,7 +44,6 @@ font-size: 48px; font-weight: 400; font-style: normal; - letter-spacing: -4%; line-height: 100%; } @@ -99,4 +103,4 @@ text-align: center; margin: var(--ifm-spacing-2xl) 0; } -} \ No newline at end of file +}