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..662f37db35 --- /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..dc471973f0 --- /dev/null +++ b/src/css/homepage-hero.css @@ -0,0 +1,384 @@ +.homepage-hero-wrapper .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"] .homepage-hero-wrapper .hero-section { + background: #ffffff; + border: 1px solid #e0e0e0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.homepage-hero-wrapper .hero-content { + color: var(--ifm-color); +} + +[data-theme="light"] .homepage-hero-wrapper .hero-content { + color: var(--ifm-color); +} + +.homepage-hero-wrapper .hero-content h1 { + font-size: 2.5rem; + font-weight: 700; + color: var(--ifm-color); + margin-bottom: 1.5rem; + line-height: 1.2; + letter-spacing: -0.02em; +} + +[data-theme="light"] .homepage-hero-wrapper .hero-content h1 { + color: var(--ifm-color); +} + +.homepage-hero-wrapper .hero-content p { + font-size: 1rem; + line-height: 1.7; + color: var(--ifm-color); + margin-bottom: 1.5rem; +} + +[data-theme="light"] .homepage-hero-wrapper .hero-content p { + color: var(--ifm-color-emphasis-800); +} + +.homepage-hero-wrapper .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: "Aeonik", var(--ifm-font-family-base); + 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; +} + +.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; +} + +.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; + color: #ffffff !important; + background: linear-gradient(255.4deg, #5a5ce7 0%, #c474ff 100%); + border-color: rgba(68, 76, 231, 0.6); +} + +.homepage-hero-wrapper .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; +} + +.homepage-hero-wrapper .hero-cta:active { + transform: translateY(-1px); + box-shadow: 0 6px 16px rgba(68, 76, 231, 0.35); +} + +.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"] .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: + 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"] .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: + 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"] .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"] .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; +} + +.homepage-hero-wrapper .hero-actions { + display: flex; + flex-direction: column; + gap: 0.625rem; +} + +.homepage-hero-wrapper .action-card { + background: transparent; + border: 1px solid var(--ifm-color-emphasis-200); + 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"] .homepage-hero-wrapper .action-card { + background: transparent; + border: 1px solid var(--ifm-color-emphasis-200); +} + +.homepage-hero-wrapper .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"] .homepage-hero-wrapper .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); +} + +.homepage-hero-wrapper .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"] .homepage-hero-wrapper .action-icon { + background: transparent; + border: 1px solid rgba(0, 0, 0, 0.08); + color: #000000; +} + +.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"] .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); +} + +.homepage-hero-wrapper .action-content { + flex: 1; + min-width: 0; +} + +.homepage-hero-wrapper .action-card h3 { + margin: 0 0 0.375rem 0; + font-size: 0.95rem; + font-weight: 600; + color: var(--ifm-color); + line-height: 1.3; +} + +[data-theme="light"] .homepage-hero-wrapper .action-card h3 { + color: var(--ifm-color); +} + +.homepage-hero-wrapper .action-card p { + margin: 0; + font-size: 0.8rem; + line-height: 1.4; + color: var(--ifm-link-color); +} + +[data-theme="light"] .homepage-hero-wrapper .action-card p { + color: var(--ifm-color-emphasis-700); +} + +.homepage-hero-wrapper .action-icon img { + width: 16px; + height: 16px; +} + +/* Community Cards */ +.homepage-hero-wrapper .community-cards { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 3rem; + margin: 3rem 0 2rem 0; + text-align: center; +} + +@media (max-width: 768px) { + .homepage-hero-wrapper .community-cards { + grid-template-columns: 1fr; + gap: 2rem; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .homepage-hero-wrapper .community-cards { + grid-template-columns: 1fr 1fr; + gap: 2.5rem; + } +} + +.homepage-hero-wrapper .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; +} + +.homepage-hero-wrapper .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"] .homepage-hero-wrapper .community-card:hover { + border-color: #444CE7; + box-shadow: 0 4px 16px rgba(68, 76, 231, 0.2); +} + +.homepage-hero-wrapper .community-icon { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.5rem; +} + +.homepage-hero-wrapper .community-card h3 { + margin: 0; + font-size: 1.1rem; + font-weight: 600; + color: var(--ifm-color-emphasis-900); + letter-spacing: -0.01em; +} + +[data-theme="dark"] .homepage-hero-wrapper .community-card h3 { + color: var(--ifm-color); +} + +.homepage-hero-wrapper .community-card p { + margin: 0; + color: var(--ifm-color-emphasis-700); + line-height: 1.5; + font-size: 0.85rem; +} + +[data-theme="dark"] .homepage-hero-wrapper .community-card p { + color: var(--ifm-color-emphasis-700); +} + +.homepage-hero-wrapper .icon-dark-mode { + display: block; +} + +.homepage-hero-wrapper .icon-light-mode { + display: none; +} + +[data-theme="light"] .homepage-hero-wrapper .icon-dark-mode { + display: none; +} + +[data-theme="light"] .homepage-hero-wrapper .icon-light-mode { + display: block; +} + +/* Mobile responsiveness */ +@media (max-width: 768px) { + .homepage-hero-wrapper .hero-section { + grid-template-columns: 1fr; + gap: 2rem; + padding: 2rem; + margin: 2rem 0 3rem 0; + } + + .homepage-hero-wrapper .hero-content { + order: 1; + } + + .homepage-hero-wrapper .hero-actions { + order: 2; + } + + .homepage-hero-wrapper .hero-content h1 { + font-size: 2rem; + } + + .homepage-hero-wrapper .community-cards { + grid-template-columns: 1fr; + gap: 1.5rem; + } +} \ No newline at end of file