diff --git a/website/src/components/sections/Architecture.tsx b/website/src/components/sections/Architecture.tsx index 3f3a0695edea9..025a85a5bc315 100644 --- a/website/src/components/sections/Architecture.tsx +++ b/website/src/components/sections/Architecture.tsx @@ -42,10 +42,10 @@ const Architecture: FC = () => (

- - Apache APISIX is based on NGINX and etcd. Compared with traditional API Gateways, APISIX - has features like dynamic routing and hot-loading plugins, etc. - + Apache APISIX is based on NGINX and etcd. + Compared with traditional API Gateways, + APISIX has features like dynamic routing
+ and hot-loading plugins, etc.

diff --git a/website/src/components/sections/HeroSection.tsx b/website/src/components/sections/HeroSection.tsx index f30f108b1461a..8da2f8d7581ed 100644 --- a/website/src/components/sections/HeroSection.tsx +++ b/website/src/components/sections/HeroSection.tsx @@ -1,5 +1,5 @@ import type { FC } from 'react'; -import React from 'react'; +import React, { useEffect } from 'react'; import Link from '@docusaurus/Link'; import Translate from '@docusaurus/Translate'; @@ -10,9 +10,6 @@ import ArrowAnim from '../ArrowAnim'; import '../../css/landing-sections/hero.scss'; const LazyLoadHeroCanvas = () => { - const windowType = useWindowType(); - if (windowType === 'mobile') return null; - return ( {() => { @@ -24,39 +21,69 @@ const LazyLoadHeroCanvas = () => { ); }; -const HeroSection: FC = () => ( -
-
-

- API Gateway & AI Gateway for APIs and AI Agents -

-

- - Open-Source, Community-Driven, Future-Ready - -

-

- - APISIX API Gateway provides rich traffic management features like load balancing, dynamic - upstream, canary release, circuit breaking, auth, and observability. - -

-
- - Getting Started - - -
-
-
+const HeroSection: FC = () => { + useEffect(() => { + const handleScroll = () => { + const heroSection = document.querySelector('.hero-sec-wrap'); + const navbar = document.querySelector('.navbar'); + + if (heroSection && navbar) { + const heroRect = heroSection.getBoundingClientRect(); + const isInHeroSection = heroRect.top <= 100 && heroRect.bottom >= 0; + + if (isInHeroSection) { + document.body.classList.add('hero-navbar'); + } else { + document.body.classList.remove('hero-navbar'); + } + } + }; + + // Set initial state + handleScroll(); + + // Add scroll listener + window.addEventListener('scroll', handleScroll); + + // Cleanup + return () => { + window.removeEventListener('scroll', handleScroll); + document.body.classList.remove('hero-navbar'); + }; + }, []); + + return ( +
+
+

+ API Gateway & AI Gateway for APIs and AI Agents +

+

+ + Open-Source, Community-Driven, Future-Ready + +

+

+ + APISIX API Gateway provides rich traffic management features like load balancing, dynamic + upstream, canary release, circuit breaking, auth, and observability. + +

+
+ + Getting Started + + +
+
-
-); + ); +}; export default HeroSection; diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 9d1950e8f7a42..ce1bca1aaf938 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -150,15 +150,236 @@ header h2 { } } -/* navbar */ -.navbar__link:hover, -.navbar__link--active { - color: var(--color-primary); +/* navbar - Default styling for all pages */ +.navbar { + background: #ffffff !important; + backdrop-filter: blur(10px) !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important; + transition: all 0.3s ease !important; } .navbar__title { font-size: 18px; height: 30px; + color: #000000 !important; + font-weight: 800 !important; +} + +.navbar__link { + color: #1a202c !important; + font-weight: 600 !important; + transition: all 0.3s ease !important; + padding: 8px 14px !important; + border-radius: 8px !important; + margin: 0 2px !important; +} + +.navbar__link:hover, +.navbar__link--active { + color: #000000 !important; + background: rgba(0, 0, 0, 0.08) !important; + font-weight: 700 !important; +} + +.navbar__toggle { + color: #1a202c !important; + font-weight: 700 !important; + background: none !important; + border: none !important; + cursor: pointer !important; + z-index: 9999 !important; +} + +.navbar__toggle:hover, +.navbar__toggle:focus { + background: rgba(0, 0, 0, 0.1) !important; + border-radius: 4px !important; +} + +.navbar__search-input { + background: rgba(0, 0, 0, 0.08) !important; + border: 1px solid rgba(0, 0, 0, 0.2) !important; + color: #000000 !important; + border-radius: 8px !important; + font-weight: 500 !important; +} + +.navbar__search-input::placeholder { + color: rgba(0, 0, 0, 0.6) !important; + font-weight: 500 !important; +} + +/* Mobile menu styling */ +.navbar-sidebar { + background: #ffffff !important; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; + z-index: 9999 !important; + position: fixed !important; + top: 0 !important; + right: 0 !important; + height: 100vh !important; + width: 300px !important; + transform: translateX(0) !important; +} + +.navbar-sidebar__brand { + background: #ffffff !important; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; + padding: 16px !important; +} + +.navbar-sidebar__items { + background: #ffffff !important; + padding: 20px 0 !important; + overflow-y: auto !important; +} + +.navbar-sidebar .menu__link { + color: #1a202c !important; + font-weight: 600 !important; + padding: 12px 16px !important; + border-radius: 8px !important; + margin: 4px 8px !important; + display: block !important; + text-decoration: none !important; +} + +.navbar-sidebar .menu__link:hover, +.navbar-sidebar .menu__link--active { + background: rgba(0, 0, 0, 0.08) !important; + color: #000000 !important; +} + +.navbar-sidebar__backdrop { + background: rgba(0, 0, 0, 0.5) !important; + z-index: 9998 !important; +} + +/* Hero section mobile menu */ +.hero-navbar .navbar-sidebar { + background: rgba(0, 0, 0, 0.95) !important; + z-index: 9999 !important; + position: fixed !important; + top: 0 !important; + right: 0 !important; + height: 100vh !important; + width: 300px !important; +} + +.hero-navbar .navbar-sidebar__brand { + background: rgba(0, 0, 0, 0.95) !important; + padding: 16px !important; +} + +.hero-navbar .navbar-sidebar__items { + background: rgba(0, 0, 0, 0.95) !important; + padding: 20px 0 !important; +} + +.hero-navbar .navbar-sidebar .menu__link { + color: #ffffff !important; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; + font-weight: 600 !important; + padding: 12px 16px !important; + border-radius: 8px !important; + margin: 4px 8px !important; + display: block !important; + text-decoration: none !important; +} + +.hero-navbar .navbar-sidebar .menu__link:hover, +.hero-navbar .navbar-sidebar .menu__link--active { + background: rgba(255, 255, 255, 0.2) !important; + color: #ffffff !important; +} + +.hero-navbar .navbar-sidebar__backdrop { + background: rgba(0, 0, 0, 0.7) !important; + z-index: 9998 !important; +} + +/* Hero section specific navbar styling - only when in hero viewport */ +.hero-navbar .navbar { + background: rgba(0, 0, 0, 0.7) !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; +} + +/* Mobile specific navbar enhancement */ +@media (max-width: 768px) { + .hero-navbar .navbar { + background: rgba(0, 0, 0, 0.85) !important; + border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important; + box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4) !important; + } + + .hero-navbar .navbar__title { + font-size: 1.1rem !important; + font-weight: 900 !important; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 1) !important; + } + + .hero-navbar .navbar__link { + font-size: 0.9rem !important; + font-weight: 700 !important; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 1) !important; + padding: 10px 14px !important; + } + + .hero-navbar .navbar__toggle { + font-size: 1.2rem !important; + font-weight: 900 !important; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 1) !important; + } +} + +.hero-navbar .navbar__title { + color: #ffffff !important; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important; +} + +.hero-navbar .navbar__link { + color: rgba(255, 255, 255, 0.9) !important; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important; + padding: 8px 16px !important; + border-radius: 20px !important; + margin: 0 4px !important; +} + +.hero-navbar .navbar__link:hover, +.hero-navbar .navbar__link--active { + color: #ffffff !important; + background: rgba(255, 255, 255, 0.2) !important; + backdrop-filter: blur(10px) !important; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important; + transform: translateY(-1px) !important; +} + +.hero-navbar .navbar__toggle { + color: #ffffff !important; + background: none !important; + border: none !important; + cursor: pointer !important; + z-index: 9999 !important; +} + +.hero-navbar .navbar__toggle:hover, +.hero-navbar .navbar__toggle:focus { + background: rgba(255, 255, 255, 0.2) !important; + border-radius: 4px !important; +} + +.hero-navbar .navbar__search-input { + background: rgba(255, 255, 255, 0.2) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + color: #ffffff !important; + backdrop-filter: blur(10px) !important; + border-radius: 20px !important; +} + +.hero-navbar .navbar__search-input::placeholder { + color: rgba(255, 255, 255, 0.7) !important; } /* button */ @@ -291,23 +512,63 @@ a:hover { } .hero-sec-wrap { - display: block; - height: fit-content; + display: flex !important; + height: 100vh !important; + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important; + position: relative !important; } .homeCanvas-overlay { position: absolute; - width: 100vw; - height: 50vh; - background: #ebe6dc; - top: -1px; - right: 0; + width: 100%; + height: 100%; + background: transparent; + top: 0; + left: 0; + z-index: 1; + pointer-events: none; } - .hero-text { - height: 50%; + .homeCanvas { + width: 100% !important; + height: 100% !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + z-index: 0 !important; + opacity: 0.2 !important; + } + + .hero-infograph { + position: absolute !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + z-index: 0 !important; + pointer-events: none !important; + } + + .add-margin { + position: absolute; + top: 0; + left: 0; width: 100%; - padding: 5rem 0 0 6vw; + height: 100%; + z-index: 0; + pointer-events: none; + } + + .hero-text { + height: 100%; + width: 50%; + padding: 0 4vw 0 6vw; + position: relative; + z-index: 2; + display: flex; + flex-wrap: wrap; + align-content: center; + box-sizing: border-box; } .hero-title { @@ -322,18 +583,6 @@ a:hover { padding-right: 20px; } - .add-margin { - margin: 30px 0 0; - } - - .homeCanvas { - width: 100vw; - height: 50vh; - } - - .hero-infograph { - overflow: hidden; - } .add-left-margin { position: relative; diff --git a/website/src/css/landing-sections/architecture.scss b/website/src/css/landing-sections/architecture.scss index b860c54ca7698..ee326583483c3 100644 --- a/website/src/css/landing-sections/architecture.scss +++ b/website/src/css/landing-sections/architecture.scss @@ -36,9 +36,10 @@ font-family: MaisonNeue-Light, sans-serif; font-weight: 700; text-align: center; - position: relative; - bottom: -15px; font-size: 1rem; + line-height: 1.6; + margin: 20px 0; + padding: 10px; } .arch-card-border { @@ -71,11 +72,18 @@ font-size: 1.13rem; position: relative; left: 16.8%; - width: 70%; + width: 60%; + max-width: 60%; color: #615d5d; letter-spacing: 0.2px; font-family: MaisonNeue-Light, sans-serif; font-weight: 700; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + box-sizing: border-box; + padding-right: 2%; + line-height: 1.5; } .add-left-margin { @@ -113,6 +121,83 @@ .docs-promo-subtitle, .oss-promo-subtitle { left: 7%; - width: 85%; + width: 80%; + max-width: 80%; + padding-right: 13%; + box-sizing: border-box; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + line-height: 1.5; + } + + .arch-card-caption > p { + width: 95%; + font-size: 0.9rem; + padding: 5px; + } +} + +/* Medium tablets and large phones */ +@media (max-width: 768px) { + .arch-card-caption > p { + width: 92%; + font-size: 0.85rem; + padding: 6px; + line-height: 1.5; + } +} + +@media (max-width: 480px) { + .arch-card-border { + width: 85% !important; + left: 7.5% !important; + height: 110% !important; + } + + .arch-card-caption { + padding: 0 10px; + overflow: hidden; + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + .arch-card-caption > p { + font-size: 0.65rem; + width: 80%; + max-width: 80%; + padding: 8px 0; + margin: 15px 0; + word-wrap: break-word !important; + overflow-wrap: break-word !important; + word-break: break-word !important; + hyphens: auto; + line-height: 1.4; + box-sizing: border-box; + overflow: hidden; + } +} + +/* Extra small devices */ +@media (max-width: 360px) { + .arch-card-border { + width: 90% !important; + left: 5% !important; + height: 115% !important; + } + + .arch-card-caption { + padding: 0 8px; + } + + .arch-card-caption > p { + font-size: 0.6rem; + width: 75%; + max-width: 75%; + word-break: break-all !important; + line-height: 1.3; + margin: 12px 0; + padding: 6px 0; } } diff --git a/website/src/css/landing-sections/endcta.module.scss b/website/src/css/landing-sections/endcta.module.scss index e8a0f320456ee..b61eb66ac27a0 100644 --- a/website/src/css/landing-sections/endcta.module.scss +++ b/website/src/css/landing-sections/endcta.module.scss @@ -42,6 +42,82 @@ $apisix-color: #e8433e; & .links { display: flex; + + :global(.btn-download) { + background: #030c16; + border-style: solid; + border-width: 1px; + border: none; + color: white; + padding: 5px 20px; + border-radius: 20px; + font-size: 1rem; + text-decoration: none; + margin: 0 10px 0 0; + transition: all 0.3s; + box-shadow: none; + + &:hover { + background: #000000; + color: white; + text-decoration: none; + box-shadow: 0 4px 12px rgba(244, 89, 89, 0.4); + } + } + + :global(.btn-docs) { + display: flex; + flex-direction: row; + align-items: center; + + &:hover { + text-decoration: none; + } + + :global(.goto) { + color: #000; + text-shadow: none; + } + + &:hover :global(.goto), + &:active :global(.goto) { + opacity: 0.8; + text-shadow: none; + } + + :global(.arrow) { + width: 30px; + height: 30px; + position: relative; + + svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + polygon, + rect { + transition: all 250ms; + } + + rect { + opacity: 0; + } + } + + &:hover :global(.arrow) { + polygon { + transform: translateX(100px); + } + + rect { + transform: translateX(240px); + opacity: 1; + } + } + } } @include respond-below(lg) { @@ -52,6 +128,30 @@ $apisix-color: #e8433e; } } + /* Medium tablets */ + @media (max-width: 768px) { + & .text { + font-size: 3.5rem; + + & .apisix { + margin: -0.8rem 0; + } + } + + & .links { + :global(.btn-download) { + font-size: 0.9rem; + padding: 4px 18px; + } + + :global(.btn-docs) { + :global(.goto) { + font-size: 0.85rem; + } + } + } + } + @include respond-below(sm) { min-height: 50vh; margin: 4rem 1rem 0; @@ -67,5 +167,36 @@ $apisix-color: #e8433e; margin: -1rem 0; } } + + & .links { + :global(.btn-download) { + font-size: 0.8rem; + padding: 4px 16px; + } + + :global(.btn-docs) { + :global(.goto) { + font-size: 0.75rem; + } + } + } + } +} + +/* Extra small devices */ +@media (max-width: 480px) { + .endcta { + & .links { + :global(.btn-download) { + font-size: 0.7rem; + padding: 3px 14px; + } + + :global(.btn-docs) { + :global(.goto) { + font-size: 0.65rem; + } + } + } } } diff --git a/website/src/css/landing-sections/features.module.scss b/website/src/css/landing-sections/features.module.scss index e2cd0e5da2ca1..fcd7a90f0c449 100644 --- a/website/src/css/landing-sections/features.module.scss +++ b/website/src/css/landing-sections/features.module.scss @@ -283,22 +283,47 @@ } } + /* Medium tablets */ + @media (max-width: 768px) { + & .head { + padding: 0 8%; + max-width: 95%; + + h2 { + font-size: 1.1rem; + } + + h3 { + font-size: 2.5rem; + line-height: 1.2; + } + + p { + font-size: 1.2rem; + line-height: 1.4; + } + } + } + @include respond-below(sm) { width: auto; & .head { - padding: 0; + padding: 0 5%; + max-width: 90%; h2 { - font-size: 1.25rem; + font-size: 1rem; } h3 { - font-size: 2.25rem; + font-size: 1.8rem; + line-height: 1.3; } p { - font-size: 1rem; + font-size: 0.85rem; + line-height: 1.4; } } @@ -320,3 +345,28 @@ } } } + +/* Extra small devices */ +@media (max-width: 480px) { + .features { + & .head { + padding: 0 3%; + max-width: 85%; + + h2 { + font-size: 0.9rem; + padding: 4px 16px; + } + + h3 { + font-size: 1.5rem; + line-height: 1.2; + } + + p { + font-size: 0.75rem; + line-height: 1.3; + } + } + } +} diff --git a/website/src/css/landing-sections/hero.scss b/website/src/css/landing-sections/hero.scss index ac00c56029e52..08822e6f27694 100644 --- a/website/src/css/landing-sections/hero.scss +++ b/website/src/css/landing-sections/hero.scss @@ -12,6 +12,35 @@ } } +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.8; + transform: scale(1.05); + } +} + +@keyframes glow { + 0%, 100% { + box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); + } + 50% { + box-shadow: 0 0 40px rgba(102, 126, 234, 0.6); + } +} + .hero-title, .hero-subtitle, .hero-ctas { @@ -23,98 +52,223 @@ .hero-subtitle { z-index: 100; - font-size: 1.1rem; + font-size: clamp(0.6rem, 2vw, 1.3rem); font-family: MaisonNeue-Light, sans-serif; position: relative; - color: #615d5d; - line-height: 30px; - letter-spacing: 0.2px; + color: #f1f5f9; + line-height: 1.6; + letter-spacing: 0.3px; margin: 25px 0; - padding-right: 20px; + padding-right: 0; animation-delay: 0.25s; + width: 100%; + max-width: 100%; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + box-sizing: border-box; + text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 0, 0, 0.4); + font-weight: 500; +} + +.hero-subtitle[style*="color: #E8433E"] { + color: #ff4757 !important; + background: none !important; + -webkit-background-clip: unset !important; + -webkit-text-fill-color: unset !important; + background-clip: unset !important; + font-weight: 800; + font-size: clamp(0.8rem, 3vw, 2.2rem); + text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5); + margin: 20px 0 30px 0; } .hero-ctas { display: flex; align-items: center; animation-delay: 0.5; + gap: 20px; + margin-top: 32px; } .hero-sec-wrap { - display: flex; - background: #f4f4f4ad; - height: 100vh; + display: block !important; + background: transparent !important; + height: 100vh !important; + position: relative !important; + width: 100% !important; + margin-top: -60px !important; + padding-top: 60px !important; } + .homeCanvas-overlay { position: absolute; - width: 50vw; - height: 100vh; - background: #fff; - top: -1px; - right: 0; + width: 100%; + height: 100%; + background: transparent; + top: 0; + left: 0; + z-index: 1; + pointer-events: none; } .homeCanvas { - width: 50vw; - height: 100vh; + width: 100% !important; + height: 100% !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + z-index: 1 !important; + opacity: 1 !important; + animation: float 6s ease-in-out infinite; + filter: contrast(1.1) brightness(1.05) saturate(1.1); +} + +.hero-infograph { + position: absolute !important; + top: -60px !important; + left: 0 !important; + width: 100% !important; + height: calc(100% + 60px) !important; + z-index: 1 !important; + pointer-events: none !important; } + .hero-text { height: 100%; display: flex; flex-wrap: wrap; align-content: center; - width: 50%; - padding: 0 0 0 6vw; + justify-content: center; + width: 80%; + max-width: 1200px; + padding: 60px 40px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + z-index: 3; + text-align: center; } .hero-title { font-family: MaisonNeue-Bold, sans-serif; - color: #121212; - width: 42vw; - font-size: 4.2rem; + color: #ffffff !important; + width: 100% !important; + max-width: 100% !important; + font-size: clamp(1rem, 4vw, 4.5rem) !important; letter-spacing: 0.2px; - margin: 0; + margin: 0 0 30px 0; + position: relative; + line-height: 1.2; + word-wrap: break-word !important; + overflow-wrap: break-word !important; + hyphens: auto !important; + text-align: center; + text-shadow: 4px 4px 12px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 0.9), 2px 2px 6px rgba(0, 0, 0, 1); + font-weight: 900; +} + +.hero-title::after { + content: ''; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 3px; + background: #E8433E; + border-radius: 2px; + opacity: 0; + animation: slideInUnderline 1.5s ease-out 1s forwards; +} + +@keyframes slideInUnderline { + from { + width: 0; + opacity: 0; + } + to { + width: 60px; + opacity: 1; + } } .btn { - background: #030c16; - border-style: solid; - border-width: 1px; - border: none; - color: white; - padding: 5px 20px; - border-radius: 20px; - font-size: 1rem; + background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%); + border: 2px solid rgba(255, 255, 255, 0.6); + color: #ffffff; + padding: 14px 28px; + border-radius: 30px; + font-size: 0.9rem; + font-weight: 800; text-decoration: none; - margin: 0 10px 0 0; - transition: all 0.3s; + margin: 0 15px 0 0; + transition: all 0.3s ease; + box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4); + position: relative; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); + width: 200px; + height: 50px; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; } .btn:hover { - background: #9b9b9b; - color: white; + color: #eae2e2; text-decoration: none; + box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4); +} + +.btn:active { + color: #ffffff; } .btn-docs { - display: flex; + display: inline-flex; flex-direction: row; align-items: center; + justify-content: center; + text-decoration: none; + transition: all 0.3s ease; + padding: 14px 28px; + border-radius: 30px; + background: rgba(255, 255, 255, 0.4); + border: 2px solid rgba(255, 255, 255, 0.7); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + width: 200px; + height: 50px; + text-align: center; + font-size: 0.9rem; + font-weight: 800; +} + +.btn-docs .goto { + color: #ffffff; + font-weight: 800; + margin-right: 8px; + transition: all 0.3s ease; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); + font-size: 0.9rem; } .btn-docs:hover { text-decoration: none; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); } -.btn-docs .goto { - color: #000; +.btn-docs:hover .goto { + color: #e8e0e0; } -.btn-docs:hover .goto, .btn-docs:active .goto { - opacity: 0.8; + color: #ffffff; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); } .btn-docs .arrow { @@ -158,3 +312,339 @@ width: 40vw; } } + +@media (max-width: 996px) { + .hero-sec-wrap { + display: block !important; + height: 100vh !important; + min-height: 100vh; + } + + .hero-text { + width: 90%; + max-width: 800px; + padding: 40px 30px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + } + + .hero-title { + width: 100%; + max-width: 100%; + font-size: 3rem; + } + + .hero-title::after { + width: 60px; + left: 50%; + transform: translateX(-50%); + } + + .hero-subtitle { + width: 100%; + padding-right: 0; + } + + .homeCanvas { + width: 100% !important; + height: 100% !important; + opacity: 0.85 !important; + } + + .hero-ctas { + justify-content: center; + gap: 15px; + } +} + +@media (max-width: 768px) { + .hero-text { + width: 95%; + max-width: 600px; + padding: 30px 25px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .hero-title { + font-size: 2.5rem; + max-width: 100%; + } + + .hero-subtitle { + font-size: 1rem; + } + + .btn { + padding: 16px 32px; + font-size: 1.1rem; + } +} + +@media (max-width: 768px) { + .hero-sec-wrap { + width: 100vw !important; + height: 100vh !important; + min-height: 100vh; + margin: 0 !important; + padding: 0 !important; + left: 50% !important; + right: 50% !important; + margin-left: -50vw !important; + margin-right: -50vw !important; + overflow: hidden; + position: relative; + } + + .homeCanvas { + width: 100% !important; + height: 100% !important; + opacity: 0.9 !important; + filter: none !important; + backdrop-filter: none !important; + } + + .hero-text { + width: 95%; + max-width: none; + padding: 20px 15px; + margin: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + filter: none !important; + backdrop-filter: none !important; + text-align: center; + background: rgba(0, 0, 0, 0.4); + border-radius: 10px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); + max-height: 85vh; + overflow-y: auto; + } + + .hero-title { + font-size: clamp(1.2rem, 4.5vw, 1.6rem); + max-width: 100%; + line-height: 1.3; + margin-bottom: 10px; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9), 1px 1px 2px rgba(0, 0, 0, 1); + font-weight: 900; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + white-space: normal; + text-align: center; + padding: 0 10px; + } + + .hero-title::after { + width: 30px; + height: 1px; + left: 50%; + transform: translateX(-50%); + } + + .hero-subtitle { + font-size: clamp(0.75rem, 2.8vw, 0.9rem); + line-height: 1.4; + margin: 8px 0; + text-shadow: 1px 1px 4px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 0.9), 1px 1px 1px rgba(0, 0, 0, 1); + font-weight: 600; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + white-space: normal; + text-align: center; + padding: 0 10px; + max-width: 100%; + } + + .hero-subtitle[style*="color: #E8433E"] { + font-size: clamp(1rem, 4vw, 1.2rem); + margin: 8px 0 12px 0; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9), 1px 1px 2px rgba(0, 0, 0, 1); + font-weight: 800; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + white-space: normal; + text-align: center; + padding: 0 10px; + max-width: 100%; + line-height: 1.3; + } + + .hero-ctas { + margin-top: 15px; + gap: 10px; + justify-content: center; + padding: 0 10px; + } + + .btn { + padding: 9px 18px; + font-size: 0.8rem; + font-weight: 700; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); + max-width: 200px; + border-radius: 20px; + } + + .btn-docs { + background: rgba(255, 255, 255, 0.3); + padding: 7px 14px; + max-width: 200px; + border-radius: 18px; + } + + .btn-docs .goto { + font-size: 0.75rem; + font-weight: 700; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); + margin-right: 6px; + } +} + +@media (max-width: 480px) { + .hero-sec-wrap { + width: 100vw !important; + height: 100vh !important; + min-height: 100vh; + margin: 0 !important; + padding: 0 !important; + left: 50% !important; + right: 50% !important; + margin-left: -50vw !important; + margin-right: -50vw !important; + overflow: hidden; + position: relative; + } + + .homeCanvas { + width: 100% !important; + height: 100% !important; + opacity: 1 !important; + filter: none !important; + backdrop-filter: none !important; + } + + .hero-text { + width: 100%; + max-width: none; + padding: 15px 10px; + margin: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + filter: none !important; + backdrop-filter: none !important; + text-align: center; + background: rgba(0, 0, 0, 0.5); + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); + max-height: 80vh; + overflow-y: auto; + } + + .hero-title { + font-size: clamp(0.9rem, 4vw, 1.2rem); + max-width: 100%; + line-height: 1.3; + margin-bottom: 8px; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9), 1px 1px 2px rgba(0, 0, 0, 1); + font-weight: 900; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + white-space: normal; + text-align: center; + padding: 0 8px; + } + + .hero-title::after { + width: 25px; + height: 1px; + left: 50%; + transform: translateX(-50%); + } + + .hero-subtitle { + font-size: clamp(0.65rem, 2.5vw, 0.8rem); + line-height: 1.4; + margin: 6px 0; + text-shadow: 1px 1px 4px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 0.9), 1px 1px 1px rgba(0, 0, 0, 1); + font-weight: 600; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + white-space: normal; + text-align: center; + padding: 0 8px; + max-width: 100%; + } + + .hero-subtitle[style*="color: #E8433E"] { + font-size: clamp(0.8rem, 3.5vw, 1rem); + margin: 6px 0 10px 0; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.9), 1px 1px 2px rgba(0, 0, 0, 1); + font-weight: 800; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + white-space: normal; + text-align: center; + padding: 0 8px; + max-width: 100%; + line-height: 1.3; + } + + .hero-ctas { + flex-direction: column; + align-items: center; + gap: 8px; + margin-top: 12px; + padding: 0 10px; + } + + .btn { + width: 100%; + max-width: 180px; + height: 45px; + text-align: center; + padding: 12px 20px; + font-size: 0.8rem; + font-weight: 800; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); + border-radius: 25px; + background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%); + border: 2px solid rgba(255, 255, 255, 0.7); + } + + .btn-docs { + width: 100%; + max-width: 180px; + height: 45px; + justify-content: center; + padding: 12px 20px; + background: rgba(255, 255, 255, 0.4); + border: 2px solid rgba(255, 255, 255, 0.7); + border-radius: 25px; + font-size: 0.8rem; + font-weight: 800; + } + + .btn-docs .goto { + font-size: 0.75rem; + font-weight: 800; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); + margin-right: 6px; + color: #ffffff; + } +} diff --git a/website/src/pages/plugins.tsx b/website/src/pages/plugins.tsx index e31c7719fbefa..c03ec3644d0b3 100644 --- a/website/src/pages/plugins.tsx +++ b/website/src/pages/plugins.tsx @@ -204,15 +204,19 @@ const Plugins: FC = () => { return (
+ - {plugin.useDefaultIcon - ? {plugin.name} - : ( + {['batch-requests', 'grpc-transcode', 'error-log-logger', 'proxy-cache', 'http-logger', 'proxy-mirror', 'proxy-rewrite', 'response-rewrite', 'request-id', 'tcp-logger', 'zipkin', 'udp-logger', 'sls-logger', 'syslog', 'limit-conn', 'api-breaker', 'consumer-restriction', 'basic-auth', 'fault-injection', 'ip-restriction', 'hmac-auth', 'key-auth', 'limit-count', 'cors', 'limit-req', 'traffic-split', 'request-validation', 'referer-restriction', 'wolf-rbac', 'jwt-auth', 'authz-casbin', 'authz-keycloak', 'kafka-logger', 'openid-connect', 'prometheus', 'skywalking', 'datadog', 'google-cloud-logging', 'uri-blocker', 'redirect', 'echo', 'gzip', 'real-ip', 'server-info', 'grpc-web', 'mocking', 'authz-casdoor', 'cas-auth', 'ldap-auth', 'opa', 'forward-auth', 'ext-plugin-pre-req', 'ext-plugin-post-req', 'ext-plugin-post-resp', 'ua-restriction', 'csrf', 'public-api', 'node-status', 'opentelemetry', 'skywalking-loggerr', 'rocketmq-logger', 'clickhouse-logger', 'log-rotate', 'splunk-hec-logging', 'file-logger', 'loggly', 'elasticsearch-logger', 'tencent-cloud-cls', 'serverless', 'azure-functions', 'openwhisk', 'aws-lambda', 'workflow', 'openfunction', 'dubbo-proxy', 'mqtt-proxy', 'kafka-proxy', 'proxy-control', 'client-control', 'CSRF'].includes(plugin.name) + + ? ( + ) : ( + {plugin.name} )} + {plugin.name} {plugin.beta && Beta} diff --git a/website/static/js/plugin-icon.js b/website/static/js/plugin-icon.js index 96e02ed6f6004..ae26b4bf72469 100644 --- a/website/static/js/plugin-icon.js +++ b/website/static/js/plugin-icon.js @@ -31,7 +31,7 @@ i, p, v = - '', + '', z = (z = document.getElementsByTagName('script'))[z.length - 1].getAttribute('data-injectcss'); if (z && !l.__iconfont__svg__cssinject__) { l.__iconfont__svg__cssinject__ = !0;