From e5b7826fcac3b29777e244cd571282d7257c5498 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Vitor=20R=2E=20da=20Silva?= Date: Fri, 4 Sep 2026 00:29:00 -0300 Subject: [PATCH] style(website): adicionar grid suave de linhas no background da landing page --- .../HomepageFeatures/styles.module.css | 12 +++++++++ website/src/pages/index.module.css | 25 ++++++++++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css index e9ca367..1bd51bf 100644 --- a/website/src/components/HomepageFeatures/styles.module.css +++ b/website/src/components/HomepageFeatures/styles.module.css @@ -2,7 +2,19 @@ padding: 4.5rem 0; width: 100%; background-color: var(--ifm-background-color); + background-image: + linear-gradient(to right, rgba(38, 59, 170, 0.035) 1px, transparent 1px), + linear-gradient(to bottom, rgba(38, 59, 170, 0.035) 1px, transparent 1px); + background-size: 40px 40px; + background-position: center top; border-top: 1px solid var(--border-subtle); + position: relative; +} + +[data-theme='dark'] .featuresSection { + background-image: + linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), + linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); } .sectionHeader { diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 98e9ce6..a0a2bd7 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -1,7 +1,28 @@ .heroBanner { - padding: 4.5rem 0 3.5rem; + padding: 5rem 0 4rem; background-color: var(--hero-bg); + background-image: + linear-gradient(to right, rgba(38, 59, 170, 0.05) 1px, transparent 1px), + linear-gradient(to bottom, rgba(38, 59, 170, 0.05) 1px, transparent 1px); + background-size: 40px 40px; + background-position: center top; border-bottom: 1px solid var(--border-subtle); + position: relative; + overflow: hidden; +} + +.heroBanner::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at 50% 35%, transparent 25%, var(--hero-bg) 85%); + pointer-events: none; +} + +[data-theme='dark'] .heroBanner { + background-image: + linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px), + linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px); } .heroContent { @@ -9,6 +30,8 @@ flex-direction: column; align-items: center; text-align: center; + position: relative; + z-index: 1; } .versionBadge {