From 8e9983ecd69499d41967ab3dcdf096f6493269b0 Mon Sep 17 00:00:00 2001 From: Jwahir Sundai Date: Wed, 17 Dec 2025 15:26:48 -0600 Subject: [PATCH 1/2] docs standalone landing page --- docs/index.mdx | 15 +- src/components/elements/HomePageHero.js | 125 +++++++ src/components/index.js | 1 + src/css/homepage-hero.css | 430 ++++++++++++++++++++++++ 4 files changed, 562 insertions(+), 9 deletions(-) create mode 100644 src/components/elements/HomePageHero.js create mode 100644 src/css/homepage-hero.css diff --git a/docs/index.mdx b/docs/index.mdx index 26a8cce630..2312455b68 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,14 +1,11 @@ --- id: index -title: Temporal Platform Documentation -sidebar_label: Documentation Home -description: Explore Temporal's comprehensive documentation to build, scale, and manage reliable, fault-tolerant workflows with Workflow-as-Code solutions. +title: Temporal Documentation +sidebar_label: Home +description: Temporal is the open source platform that guarantees the execution of services and applications with durable execution. +hide_table_of_contents: true --- - - Temporal Platform Documentation - +import HomePageHero from '@site/src/components/elements/HomePageHero'; -import { Intro } from '@site/src/components'; - - + diff --git a/src/components/elements/HomePageHero.js b/src/components/elements/HomePageHero.js new file mode 100644 index 0000000000..1339e1d73c --- /dev/null +++ b/src/components/elements/HomePageHero.js @@ -0,0 +1,125 @@ +import React from "react"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import "../../css/homepage-hero.css"; + +const Icon = ({ src, alt, className, width, height }) => { + const darkSrc = src; + const lightSrc = src.replace(".svg", "-dark.svg"); + + return ( + <> + {alt} + {alt} + + ); +}; + +const HomePageHero = () => { + const actionCards = [ + { + href: "/develop", + icon: , + title: "Developer Guide", + description: "Dive into everything you need to know about building Temporal applications." + }, + { + href: "/production-deployment", + icon: , + title: "Deploy your Workflows", + description: "Deploy your Temporal Application to your environment." + }, + { + href: "https://learn.temporal.io/courses/", + icon: , + title: "Take a free Temporal 101 or 102 course", + description: "Learn the fundamentals with comprehensive courses and become a Temporal expert." + }, + { + href: "https://temporal.io/cloud", + icon: , + title: "Get started for free with $1000 in credits", + description: "Sign up for Temporal Cloud and let us host the Temporal Service for you." + } + ]; + + const communityCards = [ + { + href: "https://temporal.io/slack", + icon: , + title: "Slack Community", + description: "Join us on temporal.io/slack and chat with us directly." + }, + { + href: "https://community.temporal.io", + icon: , + title: "Developer Forum", + description: "Ask questions, search solutions, and learn from other developers." + }, + { + href: "#", + icon: , + title: "Ask AI", + description: "Try our Ask AI button next to the search bar for instant answers and personalized help." + } + ]; + + return ( + <> +
+
+

Build applications that never fail

+

+ Temporal is an open-source platform for building reliable applications. + Temporal delivers crash-proof execution by guaranteeing that applications resume exactly where they left off after crashes, network failures, or infrastructure outages, whether that happens seconds, days, or even years later. +

+

+ Temporal enables developers to focus on building features that drive the business while ensuring that mission-critical processes such as order fulfillment, customer onboarding, and payment processing never fail or disappear, regardless of what goes wrong. +

+ + Quickstart → + +
+
+ {actionCards.map((card, index) => ( + +
+ {card.icon} +
+
+

{card.title}

+

{card.description}

+
+ + ))} +
+
+ +
+ {communityCards.map((card, index) => ( + +
+ {card.icon} +
+

{card.title}

+

{card.description}

+ + ))} +
+ + ); +}; + +export default HomePageHero; + diff --git a/src/components/index.js b/src/components/index.js index d4363977c5..d86b9839e7 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,6 +1,7 @@ // Website components export { default as RetrySimulator } from "./elements/RetrySimulator"; export { Intro } from "./elements/Intro"; +export { default as HomePageHero } from "./elements/HomePageHero"; export { SdkLogos } from "./elements/SdkLogos"; export { default as PhotoCarousel } from "./elements/PhotoCarousel"; export { default as SdkTabs } from './elements/SdkTabs'; diff --git a/src/css/homepage-hero.css b/src/css/homepage-hero.css new file mode 100644 index 0000000000..2c247fc115 --- /dev/null +++ b/src/css/homepage-hero.css @@ -0,0 +1,430 @@ +.hero-section { + display: grid; + grid-template-columns: 1fr 420px; + gap: 3.5rem; + margin: 3rem 0 5rem 0; + align-items: start; + background: #1a1d29; + padding: 3.5rem; + border-radius: 0; + min-height: 480px; +} + +[data-theme="light"] .hero-section { + background: #ffffff; + border: 1px solid #e0e0e0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.hero-content { + color: #ffffff; +} + +[data-theme="light"] .hero-content { + color: #000000; +} + +.hero-content h1 { + font-size: 2.5rem; + font-weight: 700; + color: #ffffff; + margin-bottom: 1.5rem; + line-height: 1.2; + letter-spacing: -0.02em; +} + +[data-theme="light"] .hero-content h1 { + color: #000000; +} + +.hero-content p { + font-size: 1rem; + line-height: 1.7; + color: #ffffff; + margin-bottom: 1.5rem; +} + +[data-theme="light"] .hero-content p { + color: #333333; +} + +.hero-cta { + display: inline-flex; + align-items: flex-start; + justify-content: center; + gap: 16px; + width: 181px; + height: 56px; + background: linear-gradient(255.4deg, #444CE7 0%, #B664FF 100%); + color: #ffffff !important; + padding: 15px 24px 12px 24px; + border-radius: 0; + text-decoration: none !important; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-weight: 500; + font-size: 15px; + line-height: 1.2; + margin-top: 1rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid rgba(68, 76, 231, 0.4); + box-sizing: border-box; + box-shadow: 0 4px 12px rgba(68, 76, 231, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1); + letter-spacing: 0.02em; + position: relative; + overflow: hidden; + text-align: center; + white-space: nowrap; +} + +.hero-cta, +.hero-cta:visited, +.hero-cta:link, +.hero-cta:active { + color: #ffffff !important; +} + +.hero-cta:hover { + transform: translateY(-3px); + box-shadow: 0 12px 32px rgba(68, 76, 231, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15); + text-decoration: none !important; + color: #ffffff !important; + background: linear-gradient(255.4deg, #5a5ce7 0%, #c474ff 100%); + border-color: rgba(68, 76, 231, 0.6); +} + +.hero-cta::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%); + border-radius: 0; + pointer-events: none; +} + +.hero-cta:active { + transform: translateY(-1px); + box-shadow: 0 6px 16px rgba(68, 76, 231, 0.35); +} + +.hero-cta:hover, +.hero-cta:hover:visited, +.hero-cta:hover:link, +.hero-cta:hover:active { + color: #ffffff !important; +} + +/* Light mode glass morphism button */ +[data-theme="light"] .hero-cta { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%); + border: 1px solid rgba(0, 0, 0, 0.15); + color: #000000 !important; + backdrop-filter: blur(15px); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 1), + inset 0 -1px 0 rgba(0, 0, 0, 0.06); +} + +[data-theme="light"] .hero-cta:hover { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%); + border-color: rgba(0, 0, 0, 0.25); + color: #000000 !important; + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.08), + inset 0 2px 0 rgba(255, 255, 255, 1), + inset 0 -1px 0 rgba(0, 0, 0, 0.08); + transform: translateY(-3px); +} + +[data-theme="light"] .hero-cta, +[data-theme="light"] .hero-cta:visited, +[data-theme="light"] .hero-cta:link, +[data-theme="light"] .hero-cta:active { + color: #000000 !important; +} + +[data-theme="light"] .hero-cta:hover, +[data-theme="light"] .hero-cta:hover:visited, +[data-theme="light"] .hero-cta:hover:link, +[data-theme="light"] .hero-cta:hover:active { + color: #000000 !important; +} + +.hero-actions { + display: flex; + flex-direction: column; + gap: 0.625rem; +} + +.action-card { + background: transparent; + border: 1px solid #30394a; + border-radius: 0; + padding: 1rem 1.125rem; + display: flex; + align-items: flex-start; + gap: 0.875rem; + text-decoration: none; + color: inherit; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +[data-theme="light"] .action-card { + background: transparent; + border: 1px solid #d0d0d0; +} + +.action-card:hover { + transform: translateY(-3px); + border-image: linear-gradient(135deg, #1FF1A5, #444CE7) 1; + background: transparent; + text-decoration: none; + color: inherit; + box-shadow: 0 12px 32px rgba(31, 241, 165, 0.15); +} + +[data-theme="light"] .action-card:hover { + transform: translateY(-3px); + border-image: linear-gradient(135deg,rgb(184, 185, 198),rgb(23, 33, 234)) 1; + background: rgba(0, 0, 0, 0.02); + box-shadow: 0 12px 32px rgba(31, 32, 63, 0.2); +} + +.action-icon { + width: 32px; + height: 32px; + background: rgba(31, 241, 165, 0.1); + border: 1px solid rgba(31, 241, 165, 0.2); + border-radius: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; + font-weight: 600; + color: #1FF1A5; + flex-shrink: 0; + margin-top: 1px; + letter-spacing: -0.02em; +} + +[data-theme="light"] .action-icon { + background: transparent; + border: 1px solid rgba(0, 0, 0, 0.08); + color: #000000; +} + +.action-card:hover .action-icon { + box-shadow: 0 6px 12px rgba(31, 241, 165, 0.2), 0 0 24px rgba(31, 241, 165, 0.1); +} + +[data-theme="light"] .action-card:hover .action-icon { + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1); + background: rgba(0, 0, 0, 0.05); + border-color: rgba(0, 0, 0, 0.12); +} + +.action-content { + flex: 1; + min-width: 0; +} + +.action-card h3 { + margin: 0 0 0.375rem 0; + font-size: 0.95rem; + font-weight: 600; + color: #ffffff; + line-height: 1.3; +} + +[data-theme="light"] .action-card h3 { + color: #000000; +} + +.action-card p { + margin: 0; + font-size: 0.8rem; + line-height: 1.4; + color: #CACBF9; +} + +[data-theme="light"] .action-card p { + color: #666666; +} + +.action-icon img { + width: 16px; + height: 16px; +} + +/* Community Cards */ +.community-cards { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 3rem; + margin: 3rem 0 2rem 0; + text-align: center; +} + +@media (max-width: 768px) { + .community-cards { + grid-template-columns: 1fr; + gap: 2rem; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .community-cards { + grid-template-columns: 1fr 1fr; + gap: 2.5rem; + } +} + +.community-card { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + text-decoration: none; + color: inherit; + transition: all 0.2s ease; + border-radius: 0; + padding: 1.5rem; + border: 1px solid transparent; +} + +.community-card:hover { + text-decoration: none; + color: inherit; + transform: translateY(-4px); + border-color: #6366f1; + box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15); +} + +[data-theme="dark"] .community-card:hover { + border-color: #444CE7; + box-shadow: 0 4px 16px rgba(68, 76, 231, 0.2); +} + +.community-icon { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.5rem; +} + +.community-card h3 { + margin: 0; + font-size: 1.1rem; + font-weight: 600; + color: #1f2937; + letter-spacing: -0.01em; +} + +[data-theme="dark"] .community-card h3 { + color: var(--ifm-color); +} + +.community-card p { + margin: 0; + color: #6b7280; + line-height: 1.5; + font-size: 0.85rem; +} + +[data-theme="dark"] .community-card p { + color: var(--ifm-color-emphasis-700); +} + +/* Icon theme switching */ +.icon-dark-mode { + display: block; +} + +.icon-light-mode { + display: none; +} + +[data-theme="light"] .icon-dark-mode { + display: none; +} + +[data-theme="light"] .icon-light-mode { + display: block; +} + +/* Mobile responsiveness */ +@media (max-width: 1024px) { + .hero-section { + grid-template-columns: 1fr 350px; + gap: 2.5rem; + padding: 2.5rem; + } +} + +@media (max-width: 768px) { + .hero-section { + grid-template-columns: 1fr; + gap: 2rem; + padding: 2rem; + margin: 2rem 0 3rem 0; + } + + .hero-content { + order: 1; + } + + .hero-actions { + order: 2; + } + + .hero-content h1 { + font-size: 2rem; + } + + .community-cards { + grid-template-columns: 1fr; + gap: 1.5rem; + } +} + +@media (max-width: 480px) { + .hero-section { + padding: 1.5rem; + margin: 1rem 0 2rem 0; + } + + .hero-content h1 { + font-size: 1.75rem; + } + + .hero-content p { + font-size: 0.95rem; + } + + .action-card { + padding: 0.875rem 1rem; + } + + .action-card h3 { + font-size: 0.9rem; + } + + .action-card p { + font-size: 0.75rem; + } + + .community-card { + padding: 1.25rem; + } + + .community-icon { + width: 40px; + height: 40px; + } +} + From 1e4e803cc4b5dcb2a20ea87c5a46bab6d1632f93 Mon Sep 17 00:00:00 2001 From: Jwahir Sundai Date: Thu, 18 Dec 2025 09:47:07 -0600 Subject: [PATCH 2/2] consistency with rest of site --- src/components/elements/HomePageHero.js | 218 +++++++++++------------ src/css/homepage-hero.css | 224 ++++++++++-------------- 2 files changed, 198 insertions(+), 244 deletions(-) diff --git a/src/components/elements/HomePageHero.js b/src/components/elements/HomePageHero.js index 1339e1d73c..662f37db35 100644 --- a/src/components/elements/HomePageHero.js +++ b/src/components/elements/HomePageHero.js @@ -3,122 +3,122 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import "../../css/homepage-hero.css"; const Icon = ({ src, alt, className, width, height }) => { - const darkSrc = src; - const lightSrc = src.replace(".svg", "-dark.svg"); - - return ( - <> - {alt} - {alt} - - ); + const darkSrc = src; + const lightSrc = src.replace(".svg", "-dark.svg"); + + return ( + <> + {alt} + {alt} + + ); }; const HomePageHero = () => { - const actionCards = [ - { - href: "/develop", - icon: , - title: "Developer Guide", - description: "Dive into everything you need to know about building Temporal applications." - }, - { - href: "/production-deployment", - icon: , - title: "Deploy your Workflows", - description: "Deploy your Temporal Application to your environment." - }, - { - href: "https://learn.temporal.io/courses/", - icon: , - title: "Take a free Temporal 101 or 102 course", - description: "Learn the fundamentals with comprehensive courses and become a Temporal expert." - }, - { - href: "https://temporal.io/cloud", - icon: , - title: "Get started for free with $1000 in credits", - description: "Sign up for Temporal Cloud and let us host the Temporal Service for you." - } - ]; + const actionCards = [ + { + href: "/develop", + icon: , + title: "Developer Guide", + description: "Dive into everything you need to know about building Temporal applications." + }, + { + href: "/production-deployment", + icon: , + title: "Deploy your Workflows", + description: "Deploy your Temporal Application to your environment." + }, + { + href: "https://learn.temporal.io/courses/", + icon: , + title: "Take a free Temporal 101 or 102 course", + description: "Learn the fundamentals with comprehensive courses and become a Temporal expert." + }, + { + href: "https://temporal.io/cloud", + icon: , + title: "Get started for free with $1000 in credits", + description: "Sign up for Temporal Cloud and let us host the Temporal Service for you." + } + ]; - const communityCards = [ - { - href: "https://temporal.io/slack", - icon: , - title: "Slack Community", - description: "Join us on temporal.io/slack and chat with us directly." - }, - { - href: "https://community.temporal.io", - icon: , - title: "Developer Forum", - description: "Ask questions, search solutions, and learn from other developers." - }, - { - href: "#", - icon: , - title: "Ask AI", - description: "Try our Ask AI button next to the search bar for instant answers and personalized help." - } - ]; + const communityCards = [ + { + href: "https://temporal.io/slack", + icon: , + title: "Slack Community", + description: "Join us on temporal.io/slack and chat with us directly." + }, + { + href: "https://community.temporal.io", + icon: , + title: "Developer Forum", + description: "Ask questions, search solutions, and learn from other developers." + }, + { + href: "#", + icon: , + title: "Ask AI", + description: "Try our Ask AI button next to the search bar for instant answers and personalized help." + } + ]; - return ( - <> -
-
-

Build applications that never fail

-

- Temporal is an open-source platform for building reliable applications. - Temporal delivers crash-proof execution by guaranteeing that applications resume exactly where they left off after crashes, network failures, or infrastructure outages, whether that happens seconds, days, or even years later. -

-

- Temporal enables developers to focus on building features that drive the business while ensuring that mission-critical processes such as order fulfillment, customer onboarding, and payment processing never fail or disappear, regardless of what goes wrong. -

- - Quickstart → - -
-
- {actionCards.map((card, index) => ( - -
- {card.icon} -
-
-

{card.title}

-

{card.description}

-
- - ))} -
-
+ return ( +
+
+
+

Build applications that never fail

+

+ Temporal is an open-source platform for building reliable applications. + Temporal delivers crash-proof execution by guaranteeing that applications resume exactly where they left off after crashes, network failures, or infrastructure outages, whether that happens seconds, days, or even years later. +

+

+ Temporal enables developers to focus on building features that drive the business while ensuring that mission-critical processes such as order fulfillment, customer onboarding, and payment processing never fail or disappear, regardless of what goes wrong. +

+ + Quickstart → + +
+
+ {actionCards.map((card, index) => ( + +
+ {card.icon} +
+
+

{card.title}

+

{card.description}

+
+ + ))} +
+
-
- {communityCards.map((card, index) => ( - - - - ); +
+ ); }; export default HomePageHero; diff --git a/src/css/homepage-hero.css b/src/css/homepage-hero.css index 2c247fc115..dc471973f0 100644 --- a/src/css/homepage-hero.css +++ b/src/css/homepage-hero.css @@ -1,4 +1,4 @@ -.hero-section { +.homepage-hero-wrapper .hero-section { display: grid; grid-template-columns: 1fr 420px; gap: 3.5rem; @@ -10,45 +10,45 @@ min-height: 480px; } -[data-theme="light"] .hero-section { +[data-theme="light"] .homepage-hero-wrapper .hero-section { background: #ffffff; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } -.hero-content { - color: #ffffff; +.homepage-hero-wrapper .hero-content { + color: var(--ifm-color); } -[data-theme="light"] .hero-content { - color: #000000; +[data-theme="light"] .homepage-hero-wrapper .hero-content { + color: var(--ifm-color); } -.hero-content h1 { +.homepage-hero-wrapper .hero-content h1 { font-size: 2.5rem; font-weight: 700; - color: #ffffff; + color: var(--ifm-color); margin-bottom: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; } -[data-theme="light"] .hero-content h1 { - color: #000000; +[data-theme="light"] .homepage-hero-wrapper .hero-content h1 { + color: var(--ifm-color); } -.hero-content p { +.homepage-hero-wrapper .hero-content p { font-size: 1rem; line-height: 1.7; - color: #ffffff; + color: var(--ifm-color); margin-bottom: 1.5rem; } -[data-theme="light"] .hero-content p { - color: #333333; +[data-theme="light"] .homepage-hero-wrapper .hero-content p { + color: var(--ifm-color-emphasis-800); } -.hero-cta { +.homepage-hero-wrapper .hero-cta { display: inline-flex; align-items: flex-start; justify-content: center; @@ -60,7 +60,7 @@ padding: 15px 24px 12px 24px; border-radius: 0; text-decoration: none !important; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-family: "Aeonik", var(--ifm-font-family-base); font-weight: 500; font-size: 15px; line-height: 1.2; @@ -76,14 +76,14 @@ white-space: nowrap; } -.hero-cta, -.hero-cta:visited, -.hero-cta:link, -.hero-cta:active { +.homepage-hero-wrapper .hero-cta, +.homepage-hero-wrapper .hero-cta:visited, +.homepage-hero-wrapper .hero-cta:link, +.homepage-hero-wrapper .hero-cta:active { color: #ffffff !important; } -.hero-cta:hover { +.homepage-hero-wrapper .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(68, 76, 231, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15); text-decoration: none !important; @@ -92,7 +92,7 @@ border-color: rgba(68, 76, 231, 0.6); } -.hero-cta::before { +.homepage-hero-wrapper .hero-cta::before { content: ''; position: absolute; top: 0; @@ -104,64 +104,64 @@ pointer-events: none; } -.hero-cta:active { +.homepage-hero-wrapper .hero-cta:active { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(68, 76, 231, 0.35); } -.hero-cta:hover, -.hero-cta:hover:visited, -.hero-cta:hover:link, -.hero-cta:hover:active { +.homepage-hero-wrapper .hero-cta:hover, +.homepage-hero-wrapper .hero-cta:hover:visited, +.homepage-hero-wrapper .hero-cta:hover:link, +.homepage-hero-wrapper .hero-cta:hover:active { color: #ffffff !important; } /* Light mode glass morphism button */ -[data-theme="light"] .hero-cta { +[data-theme="light"] .homepage-hero-wrapper .hero-cta { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%); border: 1px solid rgba(0, 0, 0, 0.15); color: #000000 !important; backdrop-filter: blur(15px); - box-shadow: + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.06); } -[data-theme="light"] .hero-cta:hover { +[data-theme="light"] .homepage-hero-wrapper .hero-cta:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%); border-color: rgba(0, 0, 0, 0.25); color: #000000 !important; - box-shadow: + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.08); transform: translateY(-3px); } -[data-theme="light"] .hero-cta, -[data-theme="light"] .hero-cta:visited, -[data-theme="light"] .hero-cta:link, -[data-theme="light"] .hero-cta:active { +[data-theme="light"] .homepage-hero-wrapper .hero-cta, +[data-theme="light"] .homepage-hero-wrapper .hero-cta:visited, +[data-theme="light"] .homepage-hero-wrapper .hero-cta:link, +[data-theme="light"] .homepage-hero-wrapper .hero-cta:active { color: #000000 !important; } -[data-theme="light"] .hero-cta:hover, -[data-theme="light"] .hero-cta:hover:visited, -[data-theme="light"] .hero-cta:hover:link, -[data-theme="light"] .hero-cta:hover:active { +[data-theme="light"] .homepage-hero-wrapper .hero-cta:hover, +[data-theme="light"] .homepage-hero-wrapper .hero-cta:hover:visited, +[data-theme="light"] .homepage-hero-wrapper .hero-cta:hover:link, +[data-theme="light"] .homepage-hero-wrapper .hero-cta:hover:active { color: #000000 !important; } -.hero-actions { +.homepage-hero-wrapper .hero-actions { display: flex; flex-direction: column; gap: 0.625rem; } -.action-card { +.homepage-hero-wrapper .action-card { background: transparent; - border: 1px solid #30394a; + border: 1px solid var(--ifm-color-emphasis-200); border-radius: 0; padding: 1rem 1.125rem; display: flex; @@ -174,12 +174,12 @@ overflow: hidden; } -[data-theme="light"] .action-card { +[data-theme="light"] .homepage-hero-wrapper .action-card { background: transparent; - border: 1px solid #d0d0d0; + border: 1px solid var(--ifm-color-emphasis-200); } -.action-card:hover { +.homepage-hero-wrapper .action-card:hover { transform: translateY(-3px); border-image: linear-gradient(135deg, #1FF1A5, #444CE7) 1; background: transparent; @@ -188,14 +188,14 @@ box-shadow: 0 12px 32px rgba(31, 241, 165, 0.15); } -[data-theme="light"] .action-card:hover { +[data-theme="light"] .homepage-hero-wrapper .action-card:hover { transform: translateY(-3px); - border-image: linear-gradient(135deg,rgb(184, 185, 198),rgb(23, 33, 234)) 1; + border-image: linear-gradient(135deg, rgb(184, 185, 198), rgb(23, 33, 234)) 1; background: rgba(0, 0, 0, 0.02); box-shadow: 0 12px 32px rgba(31, 32, 63, 0.2); } -.action-icon { +.homepage-hero-wrapper .action-icon { width: 32px; height: 32px; background: rgba(31, 241, 165, 0.1); @@ -212,57 +212,57 @@ letter-spacing: -0.02em; } -[data-theme="light"] .action-icon { +[data-theme="light"] .homepage-hero-wrapper .action-icon { background: transparent; border: 1px solid rgba(0, 0, 0, 0.08); color: #000000; } -.action-card:hover .action-icon { +.homepage-hero-wrapper .action-card:hover .action-icon { box-shadow: 0 6px 12px rgba(31, 241, 165, 0.2), 0 0 24px rgba(31, 241, 165, 0.1); } -[data-theme="light"] .action-card:hover .action-icon { +[data-theme="light"] .homepage-hero-wrapper .action-card:hover .action-icon { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); } -.action-content { +.homepage-hero-wrapper .action-content { flex: 1; min-width: 0; } -.action-card h3 { +.homepage-hero-wrapper .action-card h3 { margin: 0 0 0.375rem 0; font-size: 0.95rem; font-weight: 600; - color: #ffffff; + color: var(--ifm-color); line-height: 1.3; } -[data-theme="light"] .action-card h3 { - color: #000000; +[data-theme="light"] .homepage-hero-wrapper .action-card h3 { + color: var(--ifm-color); } -.action-card p { +.homepage-hero-wrapper .action-card p { margin: 0; font-size: 0.8rem; line-height: 1.4; - color: #CACBF9; + color: var(--ifm-link-color); } -[data-theme="light"] .action-card p { - color: #666666; +[data-theme="light"] .homepage-hero-wrapper .action-card p { + color: var(--ifm-color-emphasis-700); } -.action-icon img { +.homepage-hero-wrapper .action-icon img { width: 16px; height: 16px; } /* Community Cards */ -.community-cards { +.homepage-hero-wrapper .community-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; @@ -271,20 +271,20 @@ } @media (max-width: 768px) { - .community-cards { + .homepage-hero-wrapper .community-cards { grid-template-columns: 1fr; gap: 2rem; } } @media (min-width: 769px) and (max-width: 1024px) { - .community-cards { + .homepage-hero-wrapper .community-cards { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } -.community-card { +.homepage-hero-wrapper .community-card { display: flex; flex-direction: column; align-items: center; @@ -297,7 +297,7 @@ border: 1px solid transparent; } -.community-card:hover { +.homepage-hero-wrapper .community-card:hover { text-decoration: none; color: inherit; transform: translateY(-4px); @@ -305,126 +305,80 @@ box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15); } -[data-theme="dark"] .community-card:hover { +[data-theme="dark"] .homepage-hero-wrapper .community-card:hover { border-color: #444CE7; box-shadow: 0 4px 16px rgba(68, 76, 231, 0.2); } -.community-icon { +.homepage-hero-wrapper .community-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } -.community-card h3 { +.homepage-hero-wrapper .community-card h3 { margin: 0; font-size: 1.1rem; font-weight: 600; - color: #1f2937; + color: var(--ifm-color-emphasis-900); letter-spacing: -0.01em; } -[data-theme="dark"] .community-card h3 { +[data-theme="dark"] .homepage-hero-wrapper .community-card h3 { color: var(--ifm-color); } -.community-card p { +.homepage-hero-wrapper .community-card p { margin: 0; - color: #6b7280; + color: var(--ifm-color-emphasis-700); line-height: 1.5; font-size: 0.85rem; } -[data-theme="dark"] .community-card p { +[data-theme="dark"] .homepage-hero-wrapper .community-card p { color: var(--ifm-color-emphasis-700); } -/* Icon theme switching */ -.icon-dark-mode { +.homepage-hero-wrapper .icon-dark-mode { display: block; } -.icon-light-mode { +.homepage-hero-wrapper .icon-light-mode { display: none; } -[data-theme="light"] .icon-dark-mode { +[data-theme="light"] .homepage-hero-wrapper .icon-dark-mode { display: none; } -[data-theme="light"] .icon-light-mode { +[data-theme="light"] .homepage-hero-wrapper .icon-light-mode { display: block; } -/* Mobile responsiveness */ -@media (max-width: 1024px) { - .hero-section { - grid-template-columns: 1fr 350px; - gap: 2.5rem; - padding: 2.5rem; - } -} - +/* Mobile responsiveness */ @media (max-width: 768px) { - .hero-section { + .homepage-hero-wrapper .hero-section { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; margin: 2rem 0 3rem 0; } - - .hero-content { + + .homepage-hero-wrapper .hero-content { order: 1; } - - .hero-actions { + + .homepage-hero-wrapper .hero-actions { order: 2; } - - .hero-content h1 { + + .homepage-hero-wrapper .hero-content h1 { font-size: 2rem; } - - .community-cards { + + .homepage-hero-wrapper .community-cards { grid-template-columns: 1fr; gap: 1.5rem; } -} - -@media (max-width: 480px) { - .hero-section { - padding: 1.5rem; - margin: 1rem 0 2rem 0; - } - - .hero-content h1 { - font-size: 1.75rem; - } - - .hero-content p { - font-size: 0.95rem; - } - - .action-card { - padding: 0.875rem 1rem; - } - - .action-card h3 { - font-size: 0.9rem; - } - - .action-card p { - font-size: 0.75rem; - } - - .community-card { - padding: 1.25rem; - } - - .community-icon { - width: 40px; - height: 40px; - } -} - +} \ No newline at end of file