diff --git a/docs/learn/security/key-splitting.md b/docs/learn/security/key-splitting.md index e3949617..200c92b6 100644 --- a/docs/learn/security/key-splitting.md +++ b/docs/learn/security/key-splitting.md @@ -8,7 +8,7 @@ sidebar_position: 1 This page describes the security aspects of the key-splitting procedure. It focuses on the core functions in the `ssv-keys` library of [the SSV-SDK](https://github.com/ssvlabs/ssv-sdk), which is used to split validator keys. ## Flow Overview - +![Key Splitting Flow](/img/flow_chart_keysplit.png) The whole flow can be described in 4 steps: 1. Prepare `keystore-m` files and their respective password(s). diff --git a/docs/stakers/validator-onboarding/README.md b/docs/stakers/validator-onboarding/README.md index 96173313..e0f2e0e7 100644 --- a/docs/stakers/validator-onboarding/README.md +++ b/docs/stakers/validator-onboarding/README.md @@ -5,7 +5,9 @@ sidebar_position: 3 # Validator Onboarding -Use this section to move validators from a standard setup to SSV Network. +Use this section to move validators from a standard setup to SSV Network. For context, see [Security of Key Splitting](/learn/security/key-splitting). + +![Key Splitting Flow](/img/flow_chart_keysplit.png) Follow the guides in this order: 1. [Split Keys](split-keys) diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index f537c882..00000000 --- a/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import clsx from 'clsx'; -import Heading from '@theme/Heading'; -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - description: JSX.Element; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Decentralized Staking', - description: ( - <> - Secure & Distributed validator operations through DVT technology. - Split your validator key across multiple operators for enhanced security - and true decentralization. - - ), - }, - { - title: 'Developer Tools', - description: ( - <> - Comprehensive SDK and tooling to build the next generation - of staking applications. Integrate SSV seamlessly with our developer-first - approach. - - ), - }, - { - title: 'Enterprise Ready', - description: ( - <> - Production Grade Infrastructure for institutional staking needs. - Leverage our battle-tested network of operators with built-in redundancy - and monitoring. - - ), - }, -]; - -function Feature({title, description}: FeatureItem) { - return ( -
-
-
- - {title} - -

{description}

-
-
-
- ); -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
-
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b6a8db54..00000000 --- a/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,134 +0,0 @@ -.features { - padding: 8rem 0; - background: linear-gradient(180deg, #0a0a2e 0%, #1e1e7a 100%); - position: relative; - overflow: hidden; -} - -.featuresGlow { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at 50% 0%, rgba(99,102,241,0.15) 0%, transparent 70%); -} - -.features::before, -.features::after { - content: ''; - position: absolute; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); -} - -.features::before { - top: 0; -} - -.features::after { - bottom: 0; -} - -.featureCard { - height: 100%; - padding: 3rem; - border-radius: 24px; - background: rgba(255, 255, 255, 0.03); - backdrop-filter: blur(10px); - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid rgba(255, 255, 255, 0.05); - position: relative; - overflow: hidden; -} - -.featureCard::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient( - to bottom right, - transparent, - rgba(255, 255, 255, 0.05) - ); - opacity: 0; - transition: opacity 0.4s ease; -} - -.featureCard:hover { - transform: translateY(-5px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); - border-color: rgba(255, 255, 255, 0.1); -} - -.featureCard:hover::before { - opacity: 1; -} - -.featureImageContainer { - display: flex; - justify-content: center; - align-items: center; - height: 180px; - margin-bottom: 2rem; -} - -.featureImg { - max-width: 140px; - height: auto; - transition: transform 0.4s ease; - filter: drop-shadow(0 0 20px rgba(99,102,241,0.2)); -} - -.featureCard:hover .featureImg { - transform: scale(1.05) translateY(-5px); -} - -.featureContent { - text-align: center; - position: relative; -} - -.featureTitle { - font-size: 1.75rem; - margin-bottom: 1.5rem; - color: #ffffff; - font-weight: 700; - background: linear-gradient(90deg, #ffffff, #a8a8ff); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} - -.featureDescription { - font-size: 1.1rem; - line-height: 1.7; - color: rgba(255, 255, 255, 0.8); - margin: 0; -} - -@media screen and (max-width: 996px) { - .features { - padding: 4rem 0; - } - - .featureCard { - margin-bottom: 2rem; - padding: 2rem; - } - - .featureImageContainer { - height: 140px; - margin-bottom: 1.5rem; - } - - .featureTitle { - font-size: 1.5rem; - } - - .featureDescription { - font-size: 1rem; - } -} diff --git a/src/components/HomepageLanding/index.tsx b/src/components/HomepageLanding/index.tsx new file mode 100644 index 00000000..52fa34b8 --- /dev/null +++ b/src/components/HomepageLanding/index.tsx @@ -0,0 +1,456 @@ +import type {ReactElement, SVGProps} from 'react'; +import Link from '@docusaurus/Link'; +import Heading from '@theme/Heading'; + +import styles from './styles.module.css'; + +type Pathway = { + title: string; + description: string; + to: string; + label: string; + icon: ReactElement; + iconTone: 'blue' | 'yellow' | 'red' | 'green'; + featured?: boolean; +}; + +type CardItem = { + title: string; + description: string; + to: string; +}; + +type SectionData = { + id: string; + title: string; + items: CardItem[]; +}; + +type QuickLinkItem = { + label: string; + href: string; + icon: ReactElement; +}; + +type SupportItem = { + title: string; + description: string; + href: string; + action: string; + icon: ReactElement; + tone?: 'default' | 'highlight' | 'orange'; +}; + +export function SSVIcon(props: SVGProps) { + return ( + + ); +} + +function BookIcon(props: SVGProps) { + return ( + + ); +} + +function GearIcon(props: SVGProps) { + return ( + + ); +} + +function CodeIcon(props: SVGProps) { + return ( + + ); +} + +function NodeIcon(props: SVGProps) { + return ( + + ); +} + +function GithubIcon(props: SVGProps) { + return ( + + ); +} + +function ExplorerIcon(props: SVGProps) { + return ( + + ); +} + +function AppIcon(props: SVGProps) { + return ( + + ); +} + +function GlobeIcon(props: SVGProps) { + return ( + + ); +} + +function DiscordIcon(props: SVGProps) { + return ( + + ); +} + +function BlogIcon(props: SVGProps) { + return ( + + ); +} + +function ForumIcon(props: SVGProps) { + return ( + + ); +} + +const pathways: Pathway[] = [ + { + title: 'What is SSV Network?', + description: 'Learn the core concepts of SSV Network, tokenomics, and related topics.', + to: '/learn/introduction', + label: 'Getting started', + icon: , + iconTone: 'blue', + featured: true, + }, + { + title: 'Integrate with SSV Network', + description: 'Integrate and onboard validators with our step-by-step guides.', + to: '/stakers/', + label: 'Integrate', + icon: , + iconTone: 'yellow', + }, + { + title: 'Develop with SSV Network', + description: 'Automate validator operations with SSV SDK using our guides and examples.', + to: '/developers/', + label: 'Develop', + icon: , + iconTone: 'red', + }, + { + title: 'Operate SSV Node', + description: 'Join SSV Network as a node operator and earn fees by securing validator operations.', + to: '/operators/', + label: 'Operate', + icon: , + iconTone: 'green', + }, +]; + +const sections: SectionData[] = [ + { + id: 'integrate', + title: 'Integrate with SSV Network', + items: [ + { + title: 'Stakers Quickstart', + description: 'Get started and integrate with SSV Network', + to: '/stakers/', + }, + { + title: 'Calculate Costs', + description: 'Estimate the cost of distributing a validator', + to: '/stakers/validator-onboarding/calculate-costs', + }, + { + title: 'Security Overview', + description: 'Learn more about SSV Network security', + to: '/learn/security', + }, + { + title: 'Incentivized Mainnet Program', + description: 'Increase APR by running validators on SSV Network', + to: '/stakers/incentivized-mainnet', + }, + ], + }, + { + id: 'develop', + title: 'Develop with SSV Network', + items: [ + { + title: 'Developers Quickstart', + description: 'Start automating validator onboarding on SSV Network', + to: '/developers/', + }, + { + title: 'Tutorials', + description: 'Follow tutorials and examples to integrate with SSV Network', + to: '/developers/examples/', + }, + { + title: 'SSV SDK', + description: 'Explore the SSV SDK modules and how to use them', + to: '/developers/SSV-SDK/', + }, + { + title: 'Smart Contracts', + description: 'Explore our smart contracts and their functions in detail', + to: '/developers/smart-contracts/', + }, + ], + }, +]; + +const quickLinks: QuickLinkItem[] = [ + { + label: 'ssvlabs/ssv', + href: 'https://github.com/ssvlabs/ssv', + icon: , + }, + { + label: 'ssvlabs/ssv-sdk', + href: 'https://github.com/ssvlabs/ssv-sdk', + icon: , + }, + { + label: 'ssvlabs/ssv-stack', + href: 'https://github.com/ssvlabs/ssv-stack', + icon: , + }, + { + label: 'SSV Explorer', + href: 'https://explorer.ssv.network/', + icon: , + }, + { + label: 'SSV Web App', + href: 'https://app.ssv.network/', + icon: , + }, + { + label: 'SSV Network', + href: 'https://ssv.network/', + icon: , + }, +]; + +const supportItems: SupportItem[] = [ + { + title: 'Join the community on Discord', + description: 'Chat with the community and get in contact with the fellow builders and the SSV team.', + href: 'https://discord.gg/5vT22pRBrf', + action: 'Join Discord', + icon: , + tone: 'highlight', + }, + { + title: 'Get insights from the SSV team', + description: 'Stay current with the latest updates, announcements, and technical deep-dives from the SSV team.', + href: 'https://ssv.network/blog/', + action: 'Read Blog', + icon: , + }, + { + title: 'Participate in discussions on the SSV DAO forum', + description: 'Join the governance conversation, vote on proposals, and shape the future of SSV Network.', + href: 'https://forum.ssv.network/', + action: 'Visit Forum', + icon: , + tone: 'orange', + }, +]; + +function PathwayCard({title, description, to, label, icon, iconTone, featured}: Pathway) { + return ( + + +
{label}
+ + {title} + +

{description}

+ + ); +} + +function SectionCard({title, description, to}: CardItem) { + return ( + + + {title} + +

{description}

+ + ); +} + +function ContentSection({id, title, items}: SectionData) { + return ( +
+
+ + {title} + + +
+ {items.map((item) => ( + + ))} +
+
+ ); +} + +export default function HomepageLanding(): ReactElement { + return ( +
+
+
+
+ + Build with SSV Network + +

+ Use Distributed Validator Technology for secure, decentralized, and scalable staking infrastructure. +

+
+
+ +
+ {pathways.map((pathway) => ( + + ))} +
+ + {sections.map((section) => ( + + ))} + +
+
+ + Quick Links + + +
+ {quickLinks.map((item) => ( + + {item.icon} + {item.label} + + ))} +
+
+ +
+
+ + Connect with us + + +
+ {supportItems.map((item) => ( +
+ + {item.title} + +

{item.description}

+
+ + {item.icon} + {item.action} + +
+
+ ))} +
+
+
+
+ ); +} diff --git a/src/components/HomepageLanding/styles.module.css b/src/components/HomepageLanding/styles.module.css new file mode 100644 index 00000000..4d8e6628 --- /dev/null +++ b/src/components/HomepageLanding/styles.module.css @@ -0,0 +1,442 @@ +.homepage { + --home-bg: var(--ssv-surface); + --home-surface: var(--ssv-page-bg); + --home-surface-soft: var(--ssv-surface-soft); + --home-border: var(--ssv-border); + --home-primary: #50a4f0; + --home-primary-dark: #3c80c0; + --home-primary-light: var(--ssv-surface-soft); + --home-primary-muted: #9ccff7; + --home-yellow: #e6a817; + --home-yellow-bg: #fff8e1; + --home-red: #e05252; + --home-red-bg: #fce8e8; + --home-green: #27ae60; + --home-green-bg: #eaf7ef; + --home-orange: #c96a00; + --home-orange-bg: #fff4e5; + --home-orange-border: #f5c98c; + --home-text: var(--ssv-text-strong); + --home-muted: var(--ssv-text-muted); + --home-shadow-sm: 0 1px 3px rgba(26, 32, 53, 0.07), 0 1px 2px rgba(26, 32, 53, 0.04); + --home-shadow-md: 0 4px 16px rgba(26, 32, 53, 0.09), 0 1px 4px rgba(26, 32, 53, 0.05); + --home-shadow-hover: 0 8px 28px rgba(26, 32, 53, 0.13), 0 2px 8px rgba(26, 32, 53, 0.07); + background: var(--home-bg); + color: var(--home-text); + padding: 2rem 0 5rem; +} + +:global([data-theme='dark']) .homepage { + --home-bg: var(--ssv-page-bg); + --home-surface: var(--ssv-surface); + --home-surface-soft: #1c3750; + --home-border: var(--ssv-border); + --home-primary: var(--ifm-color-primary); + --home-primary-dark: var(--ifm-color-primary-dark); + --home-primary-light: rgba(80, 164, 240, 0.14); + --home-primary-muted: var(--ifm-color-primary-lightest); + --home-yellow: #f2c14e; + --home-yellow-bg: rgba(242, 193, 78, 0.12); + --home-red: #ff8b8b; + --home-red-bg: rgba(255, 139, 139, 0.12); + --home-green: #57d08a; + --home-green-bg: rgba(87, 208, 138, 0.12); + --home-orange: #ffb15c; + --home-orange-bg: rgba(255, 177, 92, 0.13); + --home-orange-border: rgba(255, 177, 92, 0.32); + --home-text: var(--ssv-text-strong); + --home-muted: var(--ssv-text-muted); + --home-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.14); + --home-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.24); + --home-shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.28); +} + +.hero { + padding: 3rem 0 2.75rem; + text-align: center; +} + +.heroCopy { + max-width: 42rem; + margin: 0 auto; +} + +.heroTitle { + color: var(--home-text); + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 800; + letter-spacing: -0.05em; + line-height: 1.1; + margin-bottom: 1rem; +} + +.heroTitle span { + background: linear-gradient(135deg, var(--home-primary), var(--home-primary-dark)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.heroDescription { + color: var(--home-muted); + font-size: 1rem; + font-weight: 500; + line-height: 1.6; + max-width: 32.5rem; + margin: 0 auto; +} + +.pathways { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0.875rem; + margin-bottom: 2.75rem; +} + +.pathwayCard, +.sectionCard, +.supportCard, +.quickLink { + background: var(--home-surface); + border: 1.5px solid var(--home-border); + box-shadow: var(--home-shadow-sm); +} + +.pathwayCard, +.sectionCard, +.quickLink { + text-decoration: none; + color: inherit; +} + +.pathwayCard, +.sectionCard, +.supportCard { + border-radius: 12px; + transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease; +} + +.pathwayCard:hover, +.sectionCard:hover, +.supportCard:hover, +.quickLink:hover { + transform: translateY(-2px); + box-shadow: var(--home-shadow-hover); +} + +.pathwayCard:hover, +.sectionCard:hover, +.quickLink:hover { + border-color: var(--home-primary-muted); +} + +.pathwayCard { + display: flex; + flex-direction: column; + min-height: 100%; + padding: 1.125rem 1.125rem 1.25rem; +} + +.pathwayCardFeatured { + border-color: var(--home-primary); + background: linear-gradient(145deg, var(--home-surface-soft), var(--home-surface)); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-primary) 8%, transparent), var(--home-shadow-md); +} + +.pathwayIcon { + width: 2rem; + height: 2rem; + border-radius: 8px; + display: inline-flex; + align-items: center; + justify-content: center; + margin-bottom: 0.75rem; +} + +.pathwayIconBlue { + background: var(--home-primary-light); + color: var(--home-primary); +} + +.pathwayIconYellow { + background: var(--home-yellow-bg); + color: var(--home-yellow); +} + +.pathwayIconRed { + background: var(--home-red-bg); + color: var(--home-red); +} + +.pathwayIconGreen { + background: var(--home-green-bg); + color: var(--home-green); +} + +.pathwaySvg { + width: 1rem; + height: 1rem; +} + +.cardLabel { + font-size: 0.656rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + margin-bottom: 0.375rem; +} + +.cardLabelBlue { + color: var(--home-primary); +} + +.cardLabelYellow { + color: var(--home-yellow); +} + +.cardLabelRed { + color: var(--home-red); +} + +.cardLabelGreen { + color: var(--home-green); +} + +.pathwayTitle, +.sectionCardTitle, +.sectionTitle { + color: var(--home-text); +} + +.pathwayTitle { + font-size: 0.92rem; + font-weight: 700; + line-height: 1.35; + margin-bottom: 0; +} + +.sectionCardTitle { + font-size: 0.92rem; + font-weight: 700; + line-height: 1.35; + margin-bottom: 0; +} + +.cardDescription { + color: var(--home-muted); + font-size: 0.82rem; + font-weight: 500; + line-height: 1.55; + margin: 0; +} + +.pathwayDescription, +.sectionCardDescription, +.supportDescription { + margin-top: 0.7rem; +} + +.contentSection { + margin-bottom: 2.5rem; +} + +.sectionHeader { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1rem; +} + +.sectionTitle { + font-size: 1.375rem; + font-weight: 800; + letter-spacing: -0.025em; + line-height: 1.2; + margin: 0; + flex-shrink: 0; +} + +.sectionDivider { + flex: 1; + height: 1px; + background: var(--home-border); +} + +.sectionGrid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0.75rem; +} + +.sectionCard { + display: flex; + flex-direction: column; + min-height: 100%; + padding: 1.25rem; +} + +.quickLinks { + display: flex; + flex-wrap: wrap; + gap: 0.625rem; +} + +.quickLink { + display: inline-flex; + align-items: center; + gap: 0.5rem; + border-radius: 999px; + color: var(--home-text); + font-size: 0.8125rem; + font-weight: 600; + padding: 0.625rem 1rem; + transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.12s ease; +} + +.quickLink:hover { + color: var(--home-primary); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-primary) 10%, transparent), var(--home-shadow-sm); +} + +.quickLinkIcon { + width: 0.95rem; + height: 0.95rem; + flex-shrink: 0; +} + +.supportGrid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; +} + +.supportCard { + display: flex; + flex-direction: column; + min-height: 100%; + padding: 1.75rem 1.5rem; +} + +.supportCardHighlight { + border-color: var(--home-primary-muted); + background: linear-gradient(145deg, var(--home-surface-soft), var(--home-surface)); +} + +.supportCardOrange { + background: linear-gradient(145deg, color-mix(in srgb, var(--home-orange-bg) 68%, var(--home-surface) 32%), var(--home-surface)); +} + +.supportTitle { + font-size: 1rem; + letter-spacing: -0.015em; +} + +.supportFooter { + margin-top: auto; + padding-top: 1.25rem; +} + +.supportLink { + display: inline-flex; + align-items: center; + gap: 0.45rem; + min-height: 2.5rem; + border-radius: 8px; + padding: 0.5rem 0.875rem; + font-size: 0.8125rem; + font-weight: 700; + text-decoration: none; + transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; +} + +.supportActionIcon { + width: 0.875rem; + height: 0.875rem; + flex-shrink: 0; +} + +.supportLinkHighlight { + background: var(--home-primary-light); + border: 1.5px solid var(--home-primary-muted); + color: var(--home-primary); +} + +.supportLinkHighlight:hover { + color: var(--home-primary-dark); + background: color-mix(in srgb, var(--home-primary-light) 72%, var(--home-surface) 28%); +} + +.supportLinkOutline { + background: var(--home-bg); + border: 1.5px solid var(--home-border); + color: var(--home-muted); +} + +.supportLinkOutline:hover { + color: var(--home-primary); + border-color: var(--home-primary-muted); +} + +.supportLinkOrange { + background: var(--home-orange-bg); + border: 1.5px solid var(--home-orange-border); + color: var(--home-orange); +} + +.supportLinkOrange:hover { + color: var(--home-orange); + border-color: color-mix(in srgb, var(--home-orange) 40%, var(--home-orange-border) 60%); +} + +@media (max-width: 996px) { + .homepage { + padding-top: 1.5rem; + } + + .hero { + padding-top: 2.25rem; + } + + .pathways, + .sectionGrid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .supportGrid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .hero { + padding: 2rem 0 2.25rem; + } + + .heroTitle { + font-size: clamp(2rem, 11vw, 2.5rem); + } + + .pathways, + .sectionGrid { + grid-template-columns: 1fr; + } + + .sectionHeader { + align-items: flex-start; + } + + .quickLinks { + flex-direction: column; + } + + .quickLink { + width: 100%; + justify-content: flex-start; + } + + .pathwayCard, + .sectionCard, + .supportCard { + padding: 1rem; + } +} diff --git a/src/css/custom.css b/src/css/custom.css index a2823b53..5d79dcfc 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,40 +6,169 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2db1ff; - --ifm-color-primary-dark: #0fa6ff; - --ifm-color-primary-darker: #00a0ff; - --ifm-color-primary-darkest: #0084d2; - --ifm-color-primary-light: #4bbcff; - --ifm-color-primary-lighter: #5ac2ff; - --ifm-color-primary-lightest: #87d2ff; + --ifm-color-primary: #1BA5F8; + --ifm-color-primary-dark: #0792E8; + --ifm-color-primary-darker: #067BC4; + --ifm-color-primary-darkest: #045588; + --ifm-color-primary-light: #49B6F9; + --ifm-color-primary-lighter: #76C8FB; + --ifm-color-primary-lightest: #BBE4FD; + --ifm-background-color: #f5f7fa; + --ifm-font-color-base: #384458; + --ssv-page-bg: #ffffff; + --ssv-surface: #f5f7fa; + --ssv-surface-soft: #ebf6fd; + --ssv-text-strong: #101050; + --ssv-text-muted: #384458; + --ssv-border: #e7edf5; --editable-code-var-bg: #ffffff; + --ssv-code-block-bg: #ECF0F3; + --ssv-code-block-border: #CBD3E5; + --ssv-info-bg: #E8F6FE; + --ssv-info-text: #033A5D; + --ssv-info-border: #0792E8; + --ssv-info-title: #067BC4; + --ssv-note-bg: #F9FBFC; + --ssv-note-text: #062031; + --ssv-note-border: #97A5BA; + --ssv-note-title: #34455A; + --ssv-hover-text-color: var(--ifm-color-primary); + --ssv-hover-background-color: var(--ssv-surface-soft); + --ifm-navbar-link-hover-color: var(--ssv-hover-text-color); + --ifm-navbar-link-active-color: var(--ssv-hover-text-color); + --ifm-dropdown-link-color: var(--ssv-text-muted); + --ifm-dropdown-hover-background-color: var(--ssv-hover-background-color); + --ifm-menu-color: var(--ssv-text-muted); + --ifm-menu-color-active: var(--ssv-hover-text-color); + --ifm-menu-color-background-hover: var(--ssv-hover-background-color); + --ifm-menu-color-background-active: var(--ssv-hover-background-color); --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { - --ifm-color-primary: #2db1ff; - --ifm-color-primary-dark: #0fa6ff; - --ifm-color-primary-darker: #00a0ff; - --ifm-color-primary-darkest: #0084d2; - --ifm-color-primary-light: #4bbcff; - --ifm-color-primary-lighter: #5ac2ff; - --ifm-color-primary-lightest: #87d2ff; - --ifm-background-color: #0E0E52; + --ifm-color-primary: #50a4f0; + --ifm-color-primary-dark: #3394ee; + --ifm-color-primary-darker: #1e89eb; + --ifm-color-primary-darkest: #1070c8; + --ifm-color-primary-light: #6db4f2; + --ifm-color-primary-lighter: #8bc4f5; + --ifm-color-primary-lightest: #bddff9; + --ifm-background-color: #051526; + --ifm-font-color-base: #c4c8d0; + --ssv-page-bg: #051526; + --ssv-surface: #14293b; + --ssv-surface-soft: #0d1f30; + --ssv-text-strong: #f4f8f8; + --ssv-text-muted: #c4c8d0; + --ssv-border: #1f3447; --editable-code-var-bg: #000000; + --ssv-code-block-bg: #0B2A3C; + --ssv-code-block-border: #34455A; + --ssv-info-bg: #033A5D; + --ssv-info-text: #E8F6FE; + --ssv-info-border: #49B6F9; + --ssv-info-title: #76C8FB; + --ssv-note-bg: #062031; + --ssv-note-text: #F9FBFC; + --ssv-note-border: #97A5BA; + --ssv-note-title: #CBD3E5; + --ssv-hover-background-color: #16395a; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } +body, +.main-wrapper { + background-color: var(--ssv-page-bg); + color: var(--ssv-text-muted); +} + +.navbar { + background-color: var(--ssv-surface); + border-bottom: 1px solid var(--ssv-border); +} + +[data-theme='light'] body:has(main[class*='homepage']) .navbar { + background-color: var(--ssv-page-bg); + border-bottom-color: var(--ssv-border); +} + +[data-theme='dark'] .navbar { + background-color: var(--ssv-surface); + border-bottom-color: var(--ssv-border); +} + +.navbar__brand, +.navbar__title { + color: var(--ssv-text-strong); +} + +.navbar__link, +.navbar__toggle, +.navbar-sidebar__back { + color: var(--ssv-text-muted); +} + +.navbar__link:hover, +.navbar__link--active, +.navbar__brand:hover, +.navbar__title:hover, +.navbar-sidebar__back:hover, +.menu__link--active { + color: var(--ssv-hover-text-color); +} + +.navbar-sidebar, +.navbar-sidebar__brand, +.menu { + background-color: var(--ssv-surface); +} + +.navbar-sidebar { + border-left: 1px solid var(--ssv-border); +} + +.navbar-sidebar__brand { + border-bottom: 1px solid var(--ssv-border); +} + +.menu__link { + color: var(--ssv-text-muted); +} + +.menu__link:hover { + color: var(--ssv-hover-text-color); + background-color: var(--ssv-hover-background-color); +} + +[data-theme='dark'] .menu__link:hover, +[data-theme='dark'] .navbar-sidebar__back:hover { + background-color: var(--ssv-hover-background-color); +} + +.navbar__link:hover, +.dropdown__link:hover, +.theme-doc-sidebar-item-link > .menu__link:hover, +.theme-doc-sidebar-item-category > .menu__list-item-collapsible:hover { + background-color: var(--ssv-hover-background-color); +} + +.dropdown__link:hover, +.theme-doc-sidebar-item-link > .menu__link:hover, +.theme-doc-sidebar-item-category > .menu__list-item-collapsible:hover > .menu__link, +.theme-doc-sidebar-item-category > .menu__list-item-collapsible:hover > .menu__caret { + color: var(--ssv-hover-text-color); +} + .editable-code-var-wrapper { display: inline-flex; align-items: center; gap: 0.2rem; background-color: var(--editable-code-var-bg); - border: 1px solid rgba(96, 166, 196, 0.4); - border-radius: 3px; - padding: 0.08rem 0.18rem; + border: 1px solid var(--ssv-code-block-border); + border-radius: 4px; + padding: 0.08rem 0.25rem; line-height: 1.15; vertical-align: baseline; white-space: nowrap; @@ -47,7 +176,7 @@ } .editable-code-var { - color: #60a6c4; + color: color-mix(in srgb, var(--ssv-text-strong) 0%, var(--ifm-color-primary) 100%); background: transparent; outline: none; padding: 0; @@ -55,56 +184,99 @@ white-space: nowrap; display: inline; min-width: 0; + caret-color: var(--ifm-color-primary); } .editable-code-var-icon { font-size: 1em; - opacity: 0.6; + color: color-mix(in srgb, var(--ssv-text-muted) 78%, var(--ssv-code-block-border) 22%); + opacity: 1; user-select: none; pointer-events: none; line-height: 1; - margin-left: 5px; + margin-left: 0.3rem; +} + +:is(.theme-code-block pre, pre[class*='language-']) { + background-color: var(--ssv-code-block-bg) !important; + border: 1px solid var(--ssv-code-block-border); +} + +:is(.theme-code-block, div[class*='codeBlockContainer']) { + --prism-background-color: var(--ssv-code-block-bg); } -.ssv-dark-blue { - color: #0E0E52; +.theme-code-block code { + background-color: transparent; } -.ssv-light-blue { - color: #2db1ff; +.theme-admonition.alert--info { + --ifm-alert-background-color: var(--ssv-info-bg); + --ifm-alert-background-color-highlight: var(--ssv-info-bg); + --ifm-alert-foreground-color: var(--ssv-info-text); + --ifm-alert-border-color: var(--ssv-info-border); + color: var(--ssv-info-text); + border-color: var(--ssv-info-border); +} + +.theme-admonition.alert--info :is(.alert__heading, [class*='admonitionHeading']) { + color: var(--ssv-info-title); +} + +.theme-admonition.alert--info :is(.alert__icon, [class*='admonitionIcon']) svg { + color: var(--ssv-info-title); + fill: var(--ssv-info-title); +} + +.theme-admonition.alert--secondary { + --ifm-alert-background-color: var(--ssv-note-bg); + --ifm-alert-background-color-highlight: var(--ssv-note-bg); + --ifm-alert-foreground-color: var(--ssv-note-text); + --ifm-alert-border-color: var(--ssv-note-border); + color: var(--ssv-note-text); + border-color: var(--ssv-note-border); +} + +.theme-admonition.alert--secondary :is(.alert__heading, [class*='admonitionHeading']) { + color: var(--ssv-note-title); +} + +.theme-admonition.alert--secondary :is(.alert__icon, [class*='admonitionIcon']) svg { + color: var(--ssv-note-title); + fill: var(--ssv-note-title); } /* Light mode footer */ [data-theme='light'] .footer { - background-color: #f7f7f7; /* Light gray for light mode */ - color: #333333; /* Dark text for light mode */ + background-color: #f4f7fa; + color: var(--ssv-text-muted); } /* Dark mode footer */ [data-theme='dark'] .footer { - background-color: #0a0a2e; /* Keep your dark theme color */ - color: #ffffff; /* Light text for dark mode */ + background-color: var(--ssv-surface); + color: var(--ssv-text-strong); } /* Footer link colors for light mode */ [data-theme='light'] .footer .footer__link-item { - color: #333333; + color: var(--ssv-text-muted); } /* Footer title colors for light mode */ [data-theme='light'] .footer .footer__title { - color: #0E0E52; /* SSV dark blue */ + color: var(--ssv-text-strong); font-weight: bold; } /* Footer link colors for dark mode */ [data-theme='dark'] .footer .footer__link-item { - color: #ffffff; + color: var(--ssv-text-muted); } /* Footer title colors for dark mode */ [data-theme='dark'] .footer .footer__title { - color: #2db1ff; /* SSV light blue */ + color: var(--ifm-color-primary); font-weight: bold; } @@ -122,4 +294,4 @@ [data-theme='dark'] .dark-mode-only { display: block; -} \ No newline at end of file +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css deleted file mode 100644 index 68993fb5..00000000 --- a/src/pages/index.module.css +++ /dev/null @@ -1,220 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - position: relative; - padding: 6rem 0; - text-align: center; - overflow: hidden; - min-height: 80vh; - display: flex; - align-items: center; - background: linear-gradient(135deg, #0a0a2e 0%, #1e1e7a 100%); -} - -.heroContent { - position: relative; - z-index: 1; - width: 100%; -} - -.heroPattern { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0.05; - background: - linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), - linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px); - background-size: 30px 30px; - transform: perspective(500px) rotateX(30deg); - animation: patternMove 20s linear infinite; -} - -@keyframes patternMove { - 0% { - background-position: 0 0; - } - 100% { - background-position: 30px 30px; - } -} - -.heroGlow { - position: absolute; - top: -50%; - left: -10%; - width: 120%; - height: 200%; - background: radial-gradient(circle at center, rgba(99,102,241,0.15) 0%, transparent 70%); - pointer-events: none; - z-index: 0; -} - -.heroTitle { - font-size: 4rem; - font-weight: 800; - color: #ffffff; - margin-bottom: 1.5rem; - background: linear-gradient(90deg, #ffffff 0%, #a8a8ff 100%); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - text-shadow: 0 0 30px rgba(168, 168, 255, 0.3); - position: relative; - line-height: 1.2; - animation: glow 1.5s ease-in-out infinite alternate; -} - -.heroSubtitle { - font-size: 1.5rem; - color: rgba(255, 255, 255, 0.9); - margin-bottom: 2rem; - max-width: 800px; - margin-left: auto; - margin-right: auto; - line-height: 1.6; - animation: fadeInUp 1s ease-out; - animation-delay: 0.3s; - opacity: 0; - animation-fill-mode: forwards; -} - -.buttonContainer { - display: flex; - gap: 1.5rem; - justify-content: center; - margin-top: 3rem; - animation: fadeInUp 1s ease-out; - animation-delay: 0.6s; - opacity: 0; - animation-fill-mode: forwards; -} - -.heroButton { - padding: 1.2rem 3rem; - font-size: 1.1rem; - font-weight: 600; - border-radius: 12px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - text-decoration: none !important; - position: relative; - overflow: hidden; - border: none; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); -} - -.heroButton.primary { - background: linear-gradient(135deg, #4f46e5, #6366f1); -} - -.heroButton.secondary { - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.heroButton:hover { - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); -} - -.heroButton::after { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: linear-gradient( - 45deg, - transparent, - rgba(255, 255, 255, 0.1), - transparent - ); - transform: rotate(45deg); - transition: 0.5s; -} - -.heroButton:hover::after { - left: 100%; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 4rem 1rem; - min-height: 60vh; - } - - .heroTitle { - font-size: 2.5rem; - } - - .heroSubtitle { - font-size: 1.2rem; - padding: 0 1rem; - } - - .buttonContainer { - flex-direction: column; - align-items: center; - gap: 1rem; - } - - .heroButton { - width: 100%; - max-width: 300px; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} - -.logoContainer { - margin-bottom: 2rem; - animation: fadeInDown 1s ease-out; -} - -.logo { - height: 80px; - width: auto; -} - -@keyframes glow { - from { - text-shadow: 0 0 10px rgba(168, 168, 255, 0.3); - } - to { - text-shadow: 0 0 20px rgba(168, 168, 255, 0.6), - 0 0 30px rgba(168, 168, 255, 0.4); - } -} - -@keyframes fadeInDown { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 372b3700..ebcdf962 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,56 +1,13 @@ -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import type {ReactElement} from 'react'; import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; -import Heading from '@theme/Heading'; +import HomepageLanding from '@site/src/components/HomepageLanding'; -import styles from './index.module.css'; - -function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); - return ( -
-
-
-
-
-
- SSV Network -
- - Build the Future of Ethereum Staking - -

- Distributed Validator Technology for secure, decentralized, and scalable staking infrastructure -

-
- - Start Building - -
-
-
-
- ); -} - -export default function Home(): JSX.Element { - const {siteConfig} = useDocusaurusContext(); +export default function Home(): ReactElement { return ( - -
- -
+ ); } diff --git a/static/img/flow_chart_keysplit.png b/static/img/flow_chart_keysplit.png old mode 100755 new mode 100644 index 00d492c1..0b28dad5 Binary files a/static/img/flow_chart_keysplit.png and b/static/img/flow_chart_keysplit.png differ