diff --git a/_includes/BottomFooter.jsx b/_includes/BottomFooter.jsx index 4744474..746300b 100644 --- a/_includes/BottomFooter.jsx +++ b/_includes/BottomFooter.jsx @@ -3,7 +3,8 @@ const { ContainerFluid } = require("@layouts/Container") const { RegularButton } = require("./CTA") const { Paragraph } = require("./Texts") const { BodyHead } = require("./Texts") -import { CNCFLogo, CnSVG, LitmusLogoDark } from "@components/SVG/FooterSVG" +import Image from "next/image" +import { CNCFLogo, CnSVG, LitmusLogo } from "@components/SVG/FooterSVG" import { GithubButton } from "@components/SVG/NavbarSVG" import styles from "@includes/scss/Footer.module.scss" import Link from "next/link" @@ -11,11 +12,11 @@ import { FooterData } from "./Footer.data" const PreFooter = props => { return ( - - + +
- Chaos Engineering made easy - + Chaos Engineering made easy + Litmus is highly extensible and integrates with other tools to enable the creation of custom experiments. Kubernetes developers & SREs use Litmus to manage chaos in a declarative manner and find @@ -50,15 +51,20 @@ const BottomFooter = props => {
- - - - - - - Copyright © 2020 LitmusChaos Authors. All rights reserved. + + + Litmus + + + + Copyright © {new Date().getFullYear()} LitmusChaos Authors. All rights reserved. - + The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our{" "} @@ -120,7 +126,7 @@ const BottomFooter = props => { - + Originally created by diff --git a/_includes/Texts.jsx b/_includes/Texts.jsx index fd35b76..0281520 100644 --- a/_includes/Texts.jsx +++ b/_includes/Texts.jsx @@ -24,7 +24,7 @@ const HeroHead = props => { return (

{ Litmus diff --git a/_includes/scss/About.module.scss b/_includes/scss/About.module.scss index 5dad3cf..a0b4ed2 100644 --- a/_includes/scss/About.module.scss +++ b/_includes/scss/About.module.scss @@ -25,3 +25,101 @@ div.partDiv { } } } + +/* GetStarted Section Styles */ +.getStartedLeftContainer { + background-color: rgb(230, 230, 252); + border-radius: 12px; + box-shadow: rgba(50, 87, 120, 0.09) 0px 0.796192px 0.796192px -0.4375px, + rgba(50, 87, 120, 0.1) 0px 2.41451px 2.41451px -0.875px, + rgba(50, 87, 120, 0.11) 0px 6.38265px 6.38265px -1.3125px, + rgba(50, 87, 120, 0.16) 0px 20px 20px -1.75px; + opacity: 1; + height: 100%; + padding: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + gap: 24px; +} + +.getStartedRightContainer { + background-color: white; + border-radius: 12px; + box-shadow: rgba(50, 87, 120, 0.09) 0px 0.796192px 0.796192px -0.4375px, + rgba(50, 87, 120, 0.1) 0px 2.41451px 2.41451px -0.875px, + rgba(50, 87, 120, 0.11) 0px 6.38265px 6.38265px -1.3125px, + rgba(50, 87, 120, 0.16) 0px 20px 20px -1.75px; + padding: 0; + width: 100%; + border: 1px solid rgb(228, 223, 220); + + @include mediumScreens { + min-height: 300px; + } +} + +.iconContainer { + width: 64px; + height: 64px; +} + +.iconSvg { + user-select: none; + width: 100%; + height: 100%; + display: inline-block; + fill: rgb(90, 68, 185); + color: rgb(90, 68, 185); + flex-shrink: 0; +} + +.quickStartText { + color: rgb(90, 68, 185); + font-size: 1.125rem; /* 18px - mobile base */ + font-weight: 600; + + @include mediumScreens { + font-size: 1.25rem; /* 20px - tablet */ + } + + @include mediumScreensDesk { + font-size: 1.5rem; /* 24px - desktop */ + } +} + +.tabButton { + border-radius: 12px; +} + +.tabButtonActive { + border-top-right-radius: 0; +} + +.tabButtonInactive { + border-top-left-radius: 0; +} + +.stepIcon { + width: 48px; + height: 48px; + flex-shrink: 0; + position: relative; + z-index: 10; + background-color: white; + border-radius: 8px; + padding: 8px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); + border: 1px solid rgb(243, 244, 246); +} + +.stepIconSvg { + user-select: none; + width: 100%; + height: 100%; + display: inline-block; + fill: rgb(91, 68, 186); + color: rgb(91, 68, 186); + flex-shrink: 0; +} diff --git a/_includes/scss/Adopters.module.scss b/_includes/scss/Adopters.module.scss index c24627f..2bc14b6 100644 --- a/_includes/scss/Adopters.module.scss +++ b/_includes/scss/Adopters.module.scss @@ -1,6 +1,72 @@ @import "@styles/scss/layoutMixins"; @import "@styles/scss/Variables.scss"; +// Floating logo animations +@keyframes scrollLeft { + 0% { + transform: translateX(0%); + } + 100% { + transform: translateX(-50%); + } +} + +@keyframes scrollRight { + 0% { + transform: translateX(-50%); + } + 100% { + transform: translateX(0%); + } +} + +.scrollLeft { + animation: scrollLeft 150s linear infinite; +} + +.scrollRight { + animation: scrollRight 150s linear infinite; +} + +.logoContainer { + mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%); + -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%); + overflow: hidden; +} + +// Modern adopter cards with enhanced styling +.modernAdopterCard { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + overflow: hidden; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); + } +} + +.adopterLogoCard { + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); + pointer-events: none; + } +} + +// Legacy styles for backward compatibility div.adopterListCardCont { display: flex; flex-direction: column; diff --git a/_includes/scss/Blog.module.scss b/_includes/scss/Blog.module.scss new file mode 100644 index 0000000..ee98e7a --- /dev/null +++ b/_includes/scss/Blog.module.scss @@ -0,0 +1,215 @@ +// Blog Components Styles + +.blogHero { + .statsGrid { + @apply grid grid-cols-1 md:grid-cols-3 gap-8; + + .statItem { + @apply text-center; + + .statNumber { + @apply text-4xl font-bold text-purple-600 mb-2; + background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .statLabel { + @apply text-gray-600; + } + } + } + + .featuredCard { + @apply relative rounded-2xl shadow-xl bg-white transition-all duration-300; + + &:hover { + transform: scale(1.02); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + } + + .decorativeElement { + @apply absolute rounded-full; + backdrop-filter: blur(4px); + + &.topRight { + @apply top-4 right-4 w-8 h-8 bg-purple-100 opacity-60; + } + + &.bottomLeft { + @apply bottom-4 left-4 w-6 h-6 bg-purple-200 opacity-40; + } + } + } +} + +.blogCard { + .imageContainer { + @apply relative w-full h-48 overflow-hidden; + + .gradientOverlay { + @apply absolute inset-0 z-10; + background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%); + } + + .image { + @apply w-full h-full object-cover transition-transform duration-300; + + .group:hover & { + transform: scale(1.1); + } + } + + .emptyState { + @apply w-full h-full flex items-center justify-center; + background: linear-gradient(135deg, #f3e8ff 0%, #dbeafe 100%); + + img { + @apply w-24 h-24 object-contain opacity-60; + } + } + + .decorativeElements { + .topRight { + @apply absolute top-4 right-4 w-6 h-6 bg-white/30 rounded-full; + backdrop-filter: blur(4px); + } + + .bottomLeft { + @apply absolute bottom-4 left-4 w-4 h-4 bg-white/20 rounded-full; + backdrop-filter: blur(4px); + } + } + } + + .content { + @apply p-6 flex-1 flex flex-col; + + .authorInfo { + @apply flex items-center gap-3 mb-4; + + .avatar { + @apply w-10 h-10 rounded-full ring-2 ring-purple-100; + } + + .authorDetails { + .name { + @apply text-sm font-medium text-gray-900; + } + + .date { + @apply text-xs text-gray-500; + } + } + } + + .title { + @apply text-lg md:text-xl font-semibold text-gray-900 mb-3 leading-tight flex-1; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .excerpt { + @apply text-gray-600 text-sm leading-relaxed mb-4; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .readTime { + @apply flex items-center justify-between text-xs text-gray-500 mt-auto; + + .arrow { + @apply opacity-0 transition-opacity duration-300 text-purple-600; + + .group:hover & { + opacity: 1; + } + } + } + } +} + +.blogsContainer { + .header { + @apply text-center mb-16; + + .title { + @apply mb-4; + } + + .description { + @apply text-gray-600 max-w-2xl mx-auto; + } + } + + .grid { + @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10; + } + + .loadMore { + @apply text-center mt-16; + + .button { + @apply inline-flex items-center justify-center px-8 py-3 text-white rounded-full font-medium transition-all duration-300 cursor-pointer; + background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); + + &:hover { + background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); + transform: translateY(-2px); + box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.4); + } + } + } +} + +// Animations +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fade-in { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInAnimation { + animation: fadeInUp 0.6s ease-out; + animation-fill-mode: forwards; +} + +.animate-fade-in { + animation: fade-in 0.6s ease-out; +} + +// Responsive adjustments +@media (max-width: 768px) { + .blogCard { + .content { + @apply p-4; + } + } + + .blogHero { + .featuredCard { + @apply p-6; + } + } +} diff --git a/_includes/scss/CTA.module.scss b/_includes/scss/CTA.module.scss index 79d3a6e..1a9fea3 100644 --- a/_includes/scss/CTA.module.scss +++ b/_includes/scss/CTA.module.scss @@ -2,11 +2,11 @@ @import "@styles/scss/Variables.scss"; a.regularButton { - background: $button-gradient; + background: $button-background; color: #fff; font-size: 0.9rem; line-height: 1; - border-radius: 4px; + border-radius: 12px; box-shadow: $button-shadow; font-weight: 500; padding: 12px 20px 12px 20px; @@ -18,14 +18,13 @@ a.regularButton { padding: 0.85rem 1.4rem; font-size: 1rem; } -} - + } a.outlinedButton { background: transparent; color: $litmus-blue; font-size: 0.9rem; line-height: 1; - border-radius: 4px; + border-radius: 12px; box-shadow: 0 0 0 1px $litmus-blue, $button-shadow; font-weight: 500; padding: 12px 20px 12px 20px; diff --git a/_includes/scss/Community.module.scss b/_includes/scss/Community.module.scss index 75388fa..5d06b77 100644 --- a/_includes/scss/Community.module.scss +++ b/_includes/scss/Community.module.scss @@ -1,6 +1,157 @@ @import "@styles/scss/layoutMixins"; @import "@styles/scss/Variables.scss"; +// Hero section styles +.heroImageContainer { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem 0; +} + + + +.heroImage { + border-radius: 15px; + transition: transform 0.3s ease; +} + +// Modern card styles +.modernCard { + background: white; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + border: 1px solid rgba(0, 0, 0, 0.05); + + &:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + } +} + +.cardContent { + display: flex; + flex-direction: column; + height: 100%; + + @include mediumScreens { + flex-direction: row; + align-items: center; + } +} + +.reverseLayout { + @include mediumScreens { + flex-direction: row-reverse; + } +} + +.modernImageCard { + position: relative; + width: 100%; + height: 200px; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + + @include mediumScreens { + width: 50%; + height: 250px; + } +} + +.cardImage { + max-width: 60%; + max-height: 60%; + object-fit: contain; + z-index: 2; + position: relative; + transition: transform 0.3s ease; + + .modernCard:hover & { + transform: scale(1.05); + } +} + +.decorativeElement { + position: absolute; + top: 20px; + right: 20px; + width: 60px; + height: 60px; + background: rgba(255, 255, 255, 0.2); + border-radius: 50%; + backdrop-filter: blur(5px); +} + +.textContent { + padding: 2rem; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + + @include mediumScreens { + width: 50%; + } +} + +.ctaButton { + margin-top: auto; + padding-top: 1rem; +} + +.modernCTA { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); + color: white !important; + padding: 0.75rem 1.5rem; + border-radius: 50px; + text-decoration: none; + font-weight: 500; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4); + background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%); + } +} + +.arrowIcon { + width: 16px; + height: 16px; + transition: transform 0.3s ease; + + .modernCTA:hover & { + transform: translateX(3px); + } +} + +// Animation +.fadeIn { + opacity: 0; + animation: fadeInUp 0.6s ease forwards; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +// Legacy styles (for backward compatibility) div.communityHeadCont { width: 100%; @include mediumScreens { diff --git a/_includes/scss/Features.module.scss b/_includes/scss/Features.module.scss index f8487c4..176928c 100644 --- a/_includes/scss/Features.module.scss +++ b/_includes/scss/Features.module.scss @@ -3,13 +3,43 @@ div.featureCard { padding: 2.5rem 1.5rem; - border-radius: 9px; + border-radius: 16px; overflow: hidden; min-height: 260px; - box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.04), - 0px 2px 4px rgba(96, 97, 112, 0.16), 0 0 0 1px rgba(40, 41, 61, 0.04); + background: #f6fbff; + box-shadow: rgba(16, 49, 77, 0.05) 0px 0.706592px 0.706592px -0.291667px, rgba(16, 49, 77, 0.06) 0px 1.80656px 1.80656px -0.583333px, rgba(16, 49, 77, 0.06) 0px 3.62176px 3.62176px -0.875px, rgba(16, 49, 77, 0.06) 0px 6.8656px 6.8656px -1.16667px, rgba(16, 49, 77, 0.07) 0px 13.6468px 13.6468px -1.45833px, rgba(16, 49, 77, 0.1) 0px 30px 30px -1.75px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 0; + @include mediumScreens { min-height: auto; + flex-direction: row-reverse; + align-items: center; + justify-content: space-between; + gap: 2rem; + } + + .featureContent { + flex: 1; + min-width: 0; + + h3 { + color: #483953; + } + } + + .featureMascot { + flex-shrink: 0; + width: 150px; + height: 150px; + + @include mediumScreens { + width: 100px; + height: 100px; + } } } div.cardBackImg { @@ -38,6 +68,58 @@ div.featureCardCont { max-width: none; margin-left: 0; margin-right: 0; - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +div.moreFeatureCard { + margin-top: 2rem; + padding: 2rem; + border-radius: 16px; + overflow: hidden; + background: #f6fbff; + box-shadow: rgba(16, 49, 77, 0.05) 0px 0.706592px 0.706592px -0.291667px, rgba(16, 49, 77, 0.06) 0px 1.80656px 1.80656px -0.583333px, rgba(16, 49, 77, 0.06) 0px 3.62176px 3.62176px -0.875px, rgba(16, 49, 77, 0.06) 0px 6.8656px 6.8656px -1.16667px, rgba(16, 49, 77, 0.07) 0px 13.6468px 13.6468px -1.45833px, rgba(16, 49, 77, 0.1) 0px 30px 30px -1.75px; + display: flex; + align-items: center; + justify-content: space-between; + min-height: 120px; + max-width: 320px; + margin-left: auto; + margin-right: auto; + + @include mediumScreens { + padding: 2.5rem; + min-height: 140px; + max-width: none; + margin-left: 0; + margin-right: 0; + } + + .content { + flex: 1; + padding-right: 2rem; + + h3 { + color: #483953; + } + + @include mediumScreens { + padding-right: 3rem; + } + } + + .mascot { + flex-shrink: 0; + width: 80px; + height: 80px; + background-image: url("/landing_images/feature-back.png"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include mediumScreens { + width: 100px; + height: 100px; + } } } diff --git a/_includes/scss/Footer.module.scss b/_includes/scss/Footer.module.scss index b50b4f8..51f2879 100644 --- a/_includes/scss/Footer.module.scss +++ b/_includes/scss/Footer.module.scss @@ -11,6 +11,7 @@ div.cncfLogoCont { justify-content: center; align-items: center; min-height: 300px; + @include mediumScreens { padding: 2rem; min-height: 400px; @@ -39,7 +40,7 @@ div.cncfLogoCont { } } div.footerFluidCont { - background: #1c0732; + background: #f1f0fa; div.footerCont { padding-top: 5rem; padding-bottom: 5rem; @@ -68,7 +69,7 @@ div.footerFluidCont { } div.linkContainer { flex-grow: 1; - color: #ffffff; + color: #808080; gap: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); diff --git a/_includes/scss/Hero.module.scss b/_includes/scss/Hero.module.scss index 423861e..18e3bcd 100644 --- a/_includes/scss/Hero.module.scss +++ b/_includes/scss/Hero.module.scss @@ -153,8 +153,9 @@ left: -24px; align-items: center; justify-content: center; - z-index: 2; + z-index: 10; cursor: pointer; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .nextQuote { width: 48px; @@ -166,8 +167,9 @@ right: -24px; align-items: center; justify-content: center; - z-index: 2; + z-index: 10; cursor: pointer; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* COMMUNITY */ .slideNavigator { @@ -277,8 +279,6 @@ div.heroCont { display: inline-block; background-color: #1c0732; } - span.incubationLink { - } } } } @@ -305,3 +305,83 @@ div.heroCont { } } } + +/* HERO IMAGE CONTAINER */ +.heroImageContainer { + --border-bottom-width: 0px; + --border-color: #ffffff; + --border-left-width: 2px; + --border-right-width: 2px; + --border-style: solid; + --border-top-width: 2px; + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + background: linear-gradient(140deg, rgba(204, 205, 255, .7) 4%, rgba(235, 203, 247, .7) 60.07376126126126%, rgba(166, 140, 225, .7) 103%); + border-top-left-radius: 20px; + border-top-right-radius: 20px; + border-left: var(--border-left-width) var(--border-style) var(--border-color); + border-right: var(--border-right-width) var(--border-style) var(--border-color); + border-top: var(--border-top-width) var(--border-style) var(--border-color); + border-bottom: var(--border-bottom-width) var(--border-style) var(--border-color); + box-shadow: 0 0 16px 4px #b49cc51a; + display: block; + max-width: 996px; + width: 100%; + padding: 16px; + position: relative; + z-index: 10; + + img { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + width: 100%; + height: auto; + display: block; + } +} + +.whiteFadeOverlay { + position: absolute; + bottom: -24px; + left: 0px; + right: 16px; + height: 50%; + width: 100%; + background: linear-gradient(to top, rgb(255 255 255) 0%, rgb(255 255 255) 20%, rgb(255 255 255 / 53%) 60%, rgba(255, 255, 255, 0) 100%); + pointer-events: none; + z-index: 1; +} + +/* VIEW MORE STORIES BUTTON */ +.viewMoreStoriesBtn { + --border-bottom-width: 2px; + --border-color: #ffffff; + --border-left-width: 2px; + --border-right-width: 2px; + --border-style: solid; + --border-top-width: 2px; + align-content: center; + align-items: center; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 11px; + box-shadow: 0 0 16px 4px rgba(180, 156, 197, 0.08); + display: flex; + flex: none; + flex-direction: row; + flex-wrap: nowrap; + gap: 8px; + height: 48px; + justify-content: center; + overflow: visible; + padding: 12px 18px; + position: relative; + border: 2px solid #ffffff; + text-decoration: none; + color: inherit; + transition: all 0.2s ease; + + &:hover { + background-color: rgba(255, 255, 255, 0.7); + transform: translateY(-1px); + } +} diff --git a/_includes/scss/Navbar.module.scss b/_includes/scss/Navbar.module.scss index c4e83c7..0f2ef10 100644 --- a/_includes/scss/Navbar.module.scss +++ b/_includes/scss/Navbar.module.scss @@ -2,8 +2,9 @@ @import "@styles/scss/Variables.scss"; div.navbarContFluidScrolled { - box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), - 0px 6.4px 14.4px rgba(0, 0, 0, 0.13); + box-shadow: none; + // box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), + // 0px 6.4px 14.4px rgba(0, 0, 0, 0.13); } div.navbarContFluid { @@ -12,7 +13,8 @@ div.navbarContFluid { width: 100%; top: 0; left: 0; - background: #fafbfc; + backdrop-filter: blur(15px); + // background: #fafbfc; div.navbarCont { nav.navbar { width: 100%; @@ -297,7 +299,7 @@ div.gitPart { display: flex; align-items: center; border-radius: 6px; - box-shadow: 0px 1.6px 3.5px 0px #00000021, 0px 0.3px 0.9px 0px #0000001a; + // box-shadow: 0px 1.6px 3.5px 0px #00000021, 0px 0.3px 0.9px 0px #0000001a; @include mediumScreens { margin-right: 1rem; } diff --git a/_includes/scss/Support.module.scss b/_includes/scss/Support.module.scss index b53fe06..e0ec271 100644 --- a/_includes/scss/Support.module.scss +++ b/_includes/scss/Support.module.scss @@ -32,8 +32,8 @@ div.supportCont { } div.courseCont { - padding-top: 2.5rem; - padding-bottom: 2.5rem; + padding-top: 1.5rem; + padding-bottom: 1.5rem; height: fit-content; @include mediumScreens { padding-top: 5rem; @@ -66,11 +66,8 @@ div.courseCont { } .hceContainer { - box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), - 0px 6.4px 14.4px rgba(0, 0, 0, 0.13); - background-color: #ffffff; + border-radius: 10px; - padding: 2rem; margin-top: 3rem; display: flex; justify-content: space-between; diff --git a/_includes/scss/Texts.module.scss b/_includes/scss/Texts.module.scss index 9334238..d266c58 100644 --- a/_includes/scss/Texts.module.scss +++ b/_includes/scss/Texts.module.scss @@ -20,7 +20,7 @@ h2.bodyHead { font-size: 1.9rem; } @include largeScreens { - font-size: 2.3rem; + font-size: 3.2rem; } } diff --git a/components/AdoptersPage/adoptersHero.jsx b/components/AdoptersPage/adoptersHero.jsx index 0f62240..6a03e85 100644 --- a/components/AdoptersPage/adoptersHero.jsx +++ b/components/AdoptersPage/adoptersHero.jsx @@ -1,20 +1,36 @@ -import { HeroHead, Paragraph } from "@includes/Texts" +import { HeroHead, Paragraph, BodyHead } from "@includes/Texts" import { Container } from "@layouts/Container" const AdoptersHero = () => { return ( <> - - - LitmusChaos platform is adopted by various end user organisations - - - Hundreds of the most innovative companies choose LitmusChaos to - increase resiliency and ensure smooth functioning of their systems. - + +
+ + Adopted by Industry Leaders + + + Hundreds of the most innovative companies choose LitmusChaos to + increase resiliency and ensure smooth functioning of their systems. + + + + {/* Stats section */} +
+
+
140+
+
Organizations
+
+
+
50+
+
Countries
+
+
+
2M+
+
Chaos Experiments
+
+
+
) diff --git a/components/AdoptersPage/adoptersList.jsx b/components/AdoptersPage/adoptersList.jsx index 4f5a368..e8a6541 100644 --- a/components/AdoptersPage/adoptersList.jsx +++ b/components/AdoptersPage/adoptersList.jsx @@ -1,54 +1,87 @@ -import { TextLink } from "@includes/CTA" -import styles from "@includes/scss/Adopters.module.scss" +import { RegularButton } from "@includes/CTA" import { Paragraph } from "@includes/Texts" -import { SkewedContainerFluid, SkewedGradient } from "@layouts/Container" -import { bgadopter } from "@layouts/gradColor" +import { Container } from "@layouts/Container" import { Adopters } from "./adopter.data" const AdoptersList = () => { return ( <> - - -
- {Adopters.map(adopter => { - return ( -
+
+ +
+ {Adopters.map((adopter, index) => { + return (
- {`${adopter.link} -
-
-

- {adopter.subHeading} -

- - {adopter.paragraph} - - - Read the case study - + {/* Logo Card */} +
+
+ {`${adopter.link} + + {/* Decorative elements */} +
+
+
+
+ + {/* Content */} +
+

+ {adopter.subHeading} +

+ + {adopter.paragraph} + + + + + Read the case study + + + + + +
-
- ) - })} -
- + ) + })} +
+ +
) } diff --git a/components/BlogIndex/BlogDeskCard.jsx b/components/BlogIndex/BlogDeskCard.jsx index 5f5f83a..a37496a 100644 --- a/components/BlogIndex/BlogDeskCard.jsx +++ b/components/BlogIndex/BlogDeskCard.jsx @@ -13,51 +13,90 @@ const BlogDeskCard = ({ data, slug }) => { ttr, profileImage } = data + return ( -

+ + {/* Content */} +

+ {content} +

+ + {/* Read Time */} + {ttr && ( +
+ {ttr} min read + + -

{author}

-
+
-

- {title} -

-

{content}

-
+ )} diff --git a/components/BlogIndex/BlogIndexHero.jsx b/components/BlogIndex/BlogIndexHero.jsx index 35248b9..113c4f6 100644 --- a/components/BlogIndex/BlogIndexHero.jsx +++ b/components/BlogIndex/BlogIndexHero.jsx @@ -1,5 +1,5 @@ -import { TextLink } from "@includes/CTA" -import { HeroHead, Paragraph, SubHeading } from "@includes/Texts" +import { TextLink, RegularButton } from "@includes/CTA" +import { HeroHead, Paragraph, SubHeading, BodyHead } from "@includes/Texts" import { Container, ContainerFluid } from "@layouts/Container" import Image from "next/image" import Link from "next/link" @@ -7,85 +7,101 @@ import { useState } from "react" const BlogIndexHero = () => { return ( - - - All Blogs - - Blogs on LitmusChaos posted by community members - + <> + +
+ + Insights & Knowledge Hub + + + Discover the latest insights, tutorials, and best practices in chaos engineering. + Learn from our community of experts and practitioners who are pushing the boundaries + of system resilience. + + +
- - Featured - - + + {/* Featured Blog Section */} +
-
-
-

- Exploring litmusctl: A Comprehensive Guide -

-
- Alt Text -
-

- Nagesh Bansal -

- {/*

- Engineering Manager at Harness.io -

*/} +
+ Featured Article +
+ +
+
+ {/* Content */} +
+

+ Exploring litmusctl: A Comprehensive Guide +

+ +
+ Nagesh Bansal +
+

Nagesh Bansal

+

Chaos Engineering Expert

+
+
+ + + This comprehensive guide explains how to run LitmusChaos on a remote cluster using Litmusctl. + Learn about scheduling Chaos Scenarios, managing remote clusters, and leveraging the powerful + command-line utility developed by the LitmusChaos community. + + + + + Read Full Article + + + + + +
+ + {/* Featured Image */} +
+
+ Exploring litmusctl Guide +
- - This blog is a guide that explains how to run LitmusChaos on a - remote cluster using Litmusctl. It's not just about - scheduling Chaos Scenarios on your main cluster – Litmus also - lets you set up Chaos on a remote cluster. Litmusctl, a - command-line utility developed by the LitmusChaos community, - offers a powerful set of commands to manage, configure, and - control various aspects of chaos engineering experiments. In - this guide, we will dive into the syntax, usage, and - capabilities of litmusctl, making it easier for you to leverage - this tool effectively. - - - Read More - -
-
- Alt
+ + {/* Decorative elements */} +
+
- - +
+ ) } diff --git a/components/BlogIndex/BlogsContainer.jsx b/components/BlogIndex/BlogsContainer.jsx index 9df2b29..d5221a4 100644 --- a/components/BlogIndex/BlogsContainer.jsx +++ b/components/BlogIndex/BlogsContainer.jsx @@ -1,35 +1,149 @@ +import { useState } from 'react' import BlogDeskCard from "@components/BlogIndex/BlogDeskCard" -import { SubHeading } from "@includes/Texts" +import { SubHeading, BodyHead } from "@includes/Texts" import { Container } from "@layouts/Container" +import styles from "@includes/scss/Blog.module.scss" const BlogsContainer = ({ posts }) => { + const filteredPosts = posts.filter(post => post.markdown !== "") + + // Pagination state + const [currentPage, setCurrentPage] = useState(1) + const postsPerPage = 9 // 3x3 grid + + // Calculate pagination + const totalPosts = filteredPosts.length + const totalPages = Math.ceil(totalPosts / postsPerPage) + const startIndex = (currentPage - 1) * postsPerPage + const endIndex = startIndex + postsPerPage + const currentPosts = filteredPosts.slice(startIndex, endIndex) + + const handlePageChange = (page) => { + setCurrentPage(page) + // Smooth scroll to top of blog section + document.querySelector('.blog-container')?.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }) + } + return ( - - Other Blogs -
- {posts - .filter(post => post.markdown !== "") - .map((post, idx) => { +
+ +
+ Latest Articles +

+ Explore our collection of in-depth articles, tutorials, and insights from chaos engineering experts and practitioners. +

+
+ +
+ {currentPosts.map((post, idx) => { return ( - + > + +
) })} -
- +
+ + {/* Pagination */} + {totalPages > 1 && ( +
+ {/* Previous Button */} + + + {/* Page Numbers */} + {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => { + const isActive = page === currentPage + // More restrictive on mobile + const isMobile = typeof window !== 'undefined' && window.innerWidth < 768 + const maxVisible = isMobile ? 1 : 2 + const isNearCurrent = Math.abs(page - currentPage) <= maxVisible + const isFirstOrLast = page === 1 || page === totalPages + const showEllipsis = totalPages > (isMobile ? 5 : 7) + + if (!isNearCurrent && !isFirstOrLast && showEllipsis) { + if (page === currentPage - (maxVisible + 1) || page === currentPage + (maxVisible + 1)) { + return ( + + ... + + ) + } + if (Math.abs(page - currentPage) > maxVisible) { + return null + } + } + + return ( + + ) + })} + + {/* Next Button */} + +
+ )} + + + + +
) } export default BlogsContainer diff --git a/components/BlogPost/Blog.module.scss b/components/BlogPost/Blog.module.scss index 3e7096f..5eba994 100644 --- a/components/BlogPost/Blog.module.scss +++ b/components/BlogPost/Blog.module.scss @@ -41,17 +41,23 @@ div.summaryCont { // Summary Ends .markdownCont { + // Enhanced typography with better spacing and modern styling h1, h2, h3, h4, h5, h6 { - color: #0b0b0d; + color: #1f2937; font-weight: 700; - line-height: 1.5; - margin-bottom: 24px; - margin-top: 8px; + line-height: 1.4; + margin-bottom: 1.5rem; + margin-top: 2rem; + scroll-margin-top: 2rem; + + &:first-child { + margin-top: 0; + } } h1 + hr, h2 + hr, @@ -62,52 +68,82 @@ div.summaryCont { margin-top: -8px; } h1 { - font-size: 1.4rem; + font-size: 1.75rem; + color: #111827; + border-bottom: 3px solid #e5e7eb; + padding-bottom: 0.5rem; @include mediumScreens { - font-size: 1.8rem; + font-size: 2.25rem; } } h2 { - font-size: 1.2rem; + font-size: 1.5rem; + color: #1f2937; + padding-bottom: 0.25rem; @include mediumScreens { - font-size: 1.5rem; + font-size: 1.875rem; } } h3 { - font-size: 22px; + font-size: 1.25rem; + color: #374151; + @include mediumScreens { + font-size: 1.5rem; + } } h4 { - font-size: 20px; + font-size: 1.125rem; + color: #4b5563; + @include mediumScreens { + font-size: 1.25rem; + } } h5 { - font-size: 18px; + font-size: 1rem; + color: #6b7280; + @include mediumScreens { + font-size: 1.125rem; + } } h6 { - font-size: 16px; + font-size: 0.875rem; + color: #6b7280; + text-transform: uppercase; + letter-spacing: 0.05em; + @include mediumScreens { + font-size: 1rem; + } } p { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; - margin: 0 0 32px; - color: #4f5162; - font-size: 0.9rem; + margin: 0 0 1.5rem; + color: #374151; + font-size: 1rem; + line-height: 1.75; @include mediumScreens { - font-size: 1rem; + font-size: 1.125rem; + line-height: 1.8; } } a { - color: #5b44ba; + color: #7c3aed; text-decoration: none; - font-size: 0.9rem; + font-weight: 500; + border-bottom: 1px solid transparent; + transition: all 0.2s ease; + font-size: 1rem; @include mediumScreens { - font-size: 1rem; + font-size: 1.125rem; } } a:focus, a:hover, a:active { - text-decoration: underline; + color: #5b21b6; + border-bottom-color: #7c3aed; + text-decoration: none; } a, ins, @@ -140,7 +176,7 @@ div.summaryCont { } ul, ol { - margin: 32px 0 32px 32px; + margin: 1.5rem 0 1.5rem 2rem; padding: 0; } ul ul, @@ -151,10 +187,12 @@ div.summaryCont { } ul li, ol li { - margin-top: 8px; - font-size: 0.9rem; + margin-top: 0.5rem; + font-size: 1rem; + line-height: 1.6; + color: #374151; @include mediumScreens { - font-size: 1rem; + font-size: 1.125rem; } } ul { @@ -173,7 +211,9 @@ div.summaryCont { border: 0; height: auto; max-width: 100%; - margin: 0 auto; + margin: 2rem auto; + border-radius: 12px; + } img + em { color: #dbdbdb; @@ -183,13 +223,27 @@ div.summaryCont { width: 100%; } blockquote { - background: #fafafa; - padding: 1rem; - margin: 1.5rem 0; - border-radius: 8px; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + padding: 1.5rem; + margin: 2rem 0; + border-radius: 12px; + border-left: 4px solid #7c3aed; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + position: relative; @include mediumScreens { - margin: 2rem 0; - padding: 1.5rem; + margin: 2.5rem 0; + padding: 2rem; + } + + &::before { + content: '"'; + position: absolute; + top: -10px; + left: 20px; + font-size: 4rem; + color: #7c3aed; + opacity: 0.3; + font-family: serif; } } blockquote::before { @@ -206,46 +260,64 @@ div.summaryCont { table { border-collapse: collapse; border-spacing: 0; - margin: 32px 0; + margin: 2rem 0; text-align: left; width: 100%; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } table tbody tr:nth-of-type(odd) { - background: #fafafa; + background: #f8fafc; + } + table tbody tr:hover { + background: #e2e8f0; + transition: background-color 0.2s ease; } table td, table th { - border-bottom: 1px solid #ededed; - padding: 8px 4px; + border-bottom: 1px solid #e2e8f0; + padding: 12px 16px; } table th { - border-bottom-width: 2px; + background: #7c3aed; + color: white; + font-weight: 600; + border-bottom: none; } code { - background: #231a47; - color: #fff; - font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, - monospace; - padding: 0.05em; - font-size: 0.75em; + background: #f1f5f9; + color: #7c3aed; + font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; + padding: 0.125rem 0.25rem; + font-size: 0.875em; + border-radius: 4px; + font-weight: 500; @include mediumScreens { - font-variation-settings: 0.8rem; + font-size: 0.9em; } } pre { - background: #231a47; - color: #fff; + background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); + color: #e2e8f0; overflow-x: auto; - border-radius: 8px; - margin: 1.5rem 0; + border-radius: 12px; + margin: 2rem 0; + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25); + border: 1px solid #334155; @include mediumScreens { - margin: 2rem 0; + margin: 2.5rem 0; } } pre code { + background: transparent; color: inherit; display: block; - line-height: inherit; - padding: 16px; + line-height: 1.6; + padding: 1.5rem; + font-size: 0.875rem; + @include mediumScreens { + font-size: 0.9rem; + } } } diff --git a/components/BlogPost/PostContent.jsx b/components/BlogPost/PostContent.jsx index 96ab2ad..0541c29 100644 --- a/components/BlogPost/PostContent.jsx +++ b/components/BlogPost/PostContent.jsx @@ -2,58 +2,62 @@ import { Container } from "@layouts/Container" import ReactMarkdown from "react-markdown" import rehypeRaw from "rehype-raw" import styled from "@components/BlogPost/Blog.module.scss" -import { OutlinedButton } from "@includes/CTA" +import { RegularButton } from "@includes/CTA" +import Link from "next/link" const PostContent = ({ links, body }) => { return ( - -
-
- - {body} - -
-
- {/*
- {links?.back ? ( -
-
- + {/* Main Content */} +
+ +
+
+ - Prev - -
-
- {links.back.title} -
+ {body} + +
- ) : ( -
- )} - {links?.next ? ( -
-
- +
+ + + {/* Call to Action Section */} +
+ +
+

+ Ready to Start Your Chaos Engineering Journey? +

+

+ Join thousands of engineers who are building more resilient systems with LitmusChaos. +

+
+ - Next - -
-
- {links.next.title} + + Get Started + + + + + + + Read More Articles +
- ) : ( -
- )} -
*/} - + +
+ ) } diff --git a/components/BlogPost/PostHero.jsx b/components/BlogPost/PostHero.jsx index 3045d57..017bc34 100644 --- a/components/BlogPost/PostHero.jsx +++ b/components/BlogPost/PostHero.jsx @@ -1,74 +1,113 @@ import React from "react" import { Container, ContainerFluid } from "@layouts/Container" +import { BodyHead, Paragraph } from "@includes/Texts" import styles from "@components/BlogPost/Blog.module.scss" import moment from "moment" import Link from "next/link" const PostHero = ({ data }) => { return ( - - -
- - Blog - -

>

-

{data.title}

-
-
-
-
- {data.author} -
-

- {data.author} -

-

{data.author_role}

-
-
-
-

- {moment(data.date).format("Do MMMM YYYY")} -

-

{data.ttr} Minute Read

-
+ <> + {/* Breadcrumb and Header Section */} +
+ + {/* Breadcrumb */} +
+ + + Blog + + + + + +

{data.title}

-
- {data.author_twitter !== null && ( - - - - + + {/* Article Header */} +
+ + {data.title} + + + {/* Author and Meta Info */} +
+
+ {data.author} +
+

{data.author}

+

{data.author_role}

+
+
+ +
+ +
+
+ + + + - - - )} + {moment(data.date).format("MMM DD, YYYY")} +
+
+ + + + + {data.ttr} min read +
+
+ + {data.author_twitter && ( + <> +
+ + + + + + Follow + + + + )} +
+ +
+ + {/* Featured Image Section */} + {data.blog_image && ( +
+ +
+
+ {data.title} + {/* Decorative elements */} +
+
+
+
- {data.blog_image && ( - {data.title} - )} - - + )} + ) } diff --git a/components/CommunityPage/communityHero.jsx b/components/CommunityPage/communityHero.jsx index e2ff887..d84784f 100644 --- a/components/CommunityPage/communityHero.jsx +++ b/components/CommunityPage/communityHero.jsx @@ -1,38 +1,40 @@ -import styles from "@includes/scss/Community.module.scss" import { HeroHead, Paragraph } from "@includes/Texts" -import { Container, SkewedGradient } from "@layouts/Container" -import { bgcolor1 } from "@layouts/gradColor" -import Image from "next/image" +import { Container } from "@layouts/Container" + const CommunityHero = () => { return ( <> - -
- - Get involved with community! + +
+ + Get Involved with Community! - + This is the starting point for joining and contributing to the LitmusChaos community - improving docs, improving code, discussing new features and use cases etc. For all collaboration and communication going on in all LitmusChaos projects, please read and follow our Code of Conduct. -
-
- LitmusChaos + + {/* Stats section */} +
+
+
2.5K+
+
Community Members
+
+
+
4.8K+
+
GitHub Stars
+
+
+
250+
+
Contributors
+
+
-
- -
) } diff --git a/components/CommunityPage/communityList.jsx b/components/CommunityPage/communityList.jsx index a52aa3f..76d6c49 100644 --- a/components/CommunityPage/communityList.jsx +++ b/components/CommunityPage/communityList.jsx @@ -1,34 +1,31 @@ -import { TextLink } from "@includes/CTA" -import styles from "@includes/scss/Community.module.scss" +import { RegularButton } from "@includes/CTA" import { Paragraph } from "@includes/Texts" -import { SkewedContainerFluid } from "@layouts/Container" +import { Container } from "@layouts/Container" const CommunityList = () => { const List = [ { - bgColor: "bg-bg1", + bgColor: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", subHeading: "Join Slack Channel", paragraph: - "For live conversation and quick questions, join the Litmus Slack workspace. Don’t forget to say hi!", + "For live conversation and quick questions, join the Litmus Slack workspace. Don't forget to say hi!", linkText: "Join Slack", imgUrl: "/communityPage/slackAndLitmus.svg", - width: "w-1/3", link: "https://slack.litmuschaos.io/" }, { - bgColor: "bg-white", + bgColor: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", subHeading: "Contributing to Github", paragraph: - "Community members can contribute chaos experiments, file issues, raise pull requests, and provide feedback to help enhance the user experience and bring in new enhancements to developLitmusChaos.", + "Community members can contribute chaos experiments, file issues, raise pull requests, and provide feedback to help enhance the user experience and bring in new enhancements to LitmusChaos.", paragraph2: "Check out the CONTRIBUTING.md page on Litmus repository for instructions on how to contribute.", - linkText: "About Contriuting on Github", + linkText: "Read Contribution Guide", imgUrl: "/communityPage/githubCard.png", - width: "w-1/3", link: "https://github.com/litmuschaos/litmus/blob/master/CONTRIBUTING.md" }, { - bgColor: "bg-black", + bgColor: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", subHeading: "Meetups and sync ups", paragraph: "Want real-time, live conversation with LitmusChaos maintainers and contributors? Join our community meetings.", @@ -37,7 +34,7 @@ const CommunityList = () => { link: "https://www.meetup.com/Chaos-Engineering-Meetup-Group/events/" }, { - bgColor: "bg-bg1", + bgColor: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)", subHeading: "Blog", paragraph: "Join us in writing blogs about experiments, features, and your experience. Use the #litmuschaos tag for your blog to get featured.", @@ -48,43 +45,87 @@ const CommunityList = () => { ] return ( - -
- {List.map(item => { - return ( -
-
- {item.subHeading} -
-
-

- {item.subHeading} -

- - {item.paragraph} - - {item.paragraph2 && ( - - {item.paragraph2} +
+ +
+ {List.map((item, index) => { + return ( +
+ {/* Logo Card */} +
+
+ {item.subHeading} + + {/* Decorative elements */} +
+
+
+
+ + {/* Content */} +
+

+ {item.subHeading} +

+ + {item.paragraph} - )} - - {item.linkText} - + {item.paragraph2 && ( + + {item.paragraph2} + + )} + + + + {item.linkText} + + + + + +
-
- ) - })} -
- + ) + })} +
+ +
) } diff --git a/components/SVG/FooterSVG.jsx b/components/SVG/FooterSVG.jsx index 8bcc13d..a6c5537 100644 --- a/components/SVG/FooterSVG.jsx +++ b/components/SVG/FooterSVG.jsx @@ -51,7 +51,7 @@ const FaqSVG = () => { > ) @@ -78,15 +78,17 @@ const TwitterSVG = () => { return ( - + ) } @@ -102,7 +104,7 @@ const DevSVG = () => { > ) @@ -172,6 +174,73 @@ const LitmusLogoDark = () => { ) } +const LitmusLogo = () => { + return ( + + + + + + + + + + + + + + + + + + + + ) +} + const GithubFooterSVG = () => { return ( { > ) @@ -232,47 +301,47 @@ const CnSVG = () => { /> ) @@ -340,5 +409,6 @@ export { SlackFooterSVG, CnSVG, SupportSVG, - LinkedInSVG + LinkedInSVG, + LitmusLogo } diff --git a/components/Support/Courses.jsx b/components/Support/Courses.jsx index 1f2e518..8de51f8 100644 --- a/components/Support/Courses.jsx +++ b/components/Support/Courses.jsx @@ -1,26 +1,30 @@ -import { MoreSVG } from "@components/SVG/FeatureSVG" -import styles from "@includes/scss/Support.module.scss" -import { Paragraph, SubHeading } from "@includes/Texts" +import { Paragraph, BodyHead } from "@includes/Texts" import { Container } from "@layouts/Container" import Link from "next/link" import { CourseData } from "./utils" const Courses = () => { return ( - - Trainings & Certifications -
+ + Trainings & Certifications + + Enhance your chaos engineering skills with comprehensive training programs and certifications from our trusted partners. + +
{CourseData.map(support => { return ( -
- {support.name} - +
+
+ {support.name} + +
+ {support.desc}
@@ -30,13 +34,15 @@ const Courses = () => { })} -
-

+
+

Offering training for Litmus?

- - {" "} -

+ + + + +

Add your company

diff --git a/components/Support/HCE.jsx b/components/Support/HCE.jsx index cb1f5c6..82c888f 100644 --- a/components/Support/HCE.jsx +++ b/components/Support/HCE.jsx @@ -1,7 +1,6 @@ import React from "react" import { Container } from "@layouts/Container" -import styles from "@includes/scss/Support.module.scss" -import { Paragraph, SubHeading } from "@includes/Texts" +import { Paragraph, BodyHead } from "@includes/Texts" import { RegularButton } from "@includes/CTA" const HCE = () => { @@ -36,72 +35,77 @@ const HCE = () => { } ] return ( - - - Harness Chaos Engineering - - - Whether you want to explore advanced chaos engineering for your target - system or find a partner to help you build a custom solution, we can - help. - -
-
- Harness Chaos Engineering - - Improve application resiliency and reduce costly downtime. - - - Harness enables enterprises to securely scale chaos engineering - across their entire organization with the support from the creators - of Litmus. - -
- - Get Started - + + {/* HCE Hero Section */} +
+
+
+ Harness Chaos Engineering
-
- Features -
- {HCEData.map(feature => ( -
+ + Harness Chaos Engineering + + + Improve application resiliency and reduce costly downtime with enterprise-grade chaos engineering. + Harness enables organizations to securely scale chaos engineering across their entire infrastructure + with expert support from the creators of Litmus, whether you are exploring advanced chaos testing + or need a partner to build custom reliability solutions. + +
+ + Try now! + +
+
+ + {/* Features Section */} +
+
+ {HCEData.map(feature => ( +
+
{feature.title} -

+

{feature.title} -

- {feature.description && ( -

- {feature.description} -

- )} - {feature.image2 && ( - Feature - )} +

- ))} -
+ {feature.description && ( +

+ {feature.description} +

+ )} + {feature.image2 && ( + Feature + )} +
+ ))}
+ ) } diff --git a/components/Support/Hero.jsx b/components/Support/Hero.jsx index 7c8fc87..04289bf 100644 --- a/components/Support/Hero.jsx +++ b/components/Support/Hero.jsx @@ -1,15 +1,12 @@ -import { GithubButton, SlackSVG } from "@components/SVG/NavbarSVG" -import { OutlinedButton, RegularButton } from "@includes/CTA" -import styles from "@includes/scss/Hero.module.scss" import { HeroHead, Paragraph } from "@includes/Texts" import { Container, ContainerFluid } from "@layouts/Container" const Hero = () => { return ( - -
- + +
+ Enterprise Editions & Trainings @@ -22,7 +19,7 @@ const Hero = () => { commercial support for LitmusChaos.
-
+
LitmusChaos - An end to end{" "} - Chaos Engineering platform - - ), - img: "p1", - desc: "Litmus is an end-to-end chaos engineering platform for cloud native infrastructure and applications. Litmus is designed to orchestrate and analyze chaos in their environments.", - footerImg: null - }, - { - name: "rocket", - heading: ( - - Get Started in minutes - - ), - img: "p2", - desc: "A chaos experiment can be scheduled within minutes from scratch with almost no learning curve. The initial start of your chaos engineering journey is straight forward.", - footerImg: null - } -] - -const Steps = ({ about, index }) => { +6 +const OverviewSection = () => { return ( -
+
- {about.name} - {about.heading} - - {about.desc} + + An end to end{" "} + Chaos Engineering platform + + + Litmus is an end-to-end chaos engineering platform for cloud native infrastructure and applications. Litmus is designed to orchestrate and analyze chaos in their environments. - {about.footerImg ? ( - {about.name} - ) : ( - "" - )}
{about.name} @@ -75,16 +28,173 @@ const Steps = ({ about, index }) => { ) } -const AboutLitmus = () => { - const skewBg = - "radial-gradient(70.56% 155.58% at 56.93% 16.11%, #EB8172 16.67%, #5B44BA 61.41%), radial-gradient(34.96% 33.39% at 56.66% 50%, #F19389 44.79%, rgba(133, 140, 221, 0) 83.19%), radial-gradient(13.35% 23.03% at 6.58% 67.25%, #AFE9FF 0%, #90E0FF 41.45%, rgba(144, 224, 255, 0) 100%), radial-gradient(19.75% 48.55% at 19.59% 56.88%, #B8EBFF 0%, #90E0FF 60.58%, rgba(169, 96, 238, 0) 83.24%), radial-gradient(10.9% 23.5% at 7.65% 84.98%, #A960EE 25.96%, rgba(255, 51, 61, 0) 100%), radial-gradient(27.77% 40.9% at 19.29% 57.22%, rgba(144, 224, 255, 0.1) 50.74%, rgba(169, 96, 238, 0) 100%), radial-gradient(20.43% 35.1% at 45.83% 17.78%, #19C2FF 31.7%, rgba(199, 33, 255, 0.75) 100%), radial-gradient(26.67% 62.22% at 0% 100%, #ECB22E 19.21%, #FB9C40 54.54%), radial-gradient(18.22% 46.29% at 5.34% 39.33%, #FFCB57 41.18%, rgba(183, 120, 225, 0) 71.99%), conic-gradient(from 3.28deg at 22.11% 40.38%, rgba(169, 96, 238, 0) 0deg, #5469D4 178.27deg, rgba(136, 99, 228, 0.383199) 290.36deg, rgba(169, 96, 238, 0) 360deg), radial-gradient(34.48% 62.34% at 21.35% 32.43%, #19C2FF 0%, #858CDD 100%)" +const GetStartedSection = () => { + const [activeTab, setActiveTab] = useState('cluster') + + return ( +
+
+
+
+ + + + + + +
+ Quick Start +
+ + Get Started
+ in minutes,
+ not days + + +
+ + {/* White tabbed container - twice the width of leftCont */} +
+ {/* Tab Headers */} +
+ + +
+ + {/* Tab Content */} +
+ {activeTab === 'cluster' && ( +
+
+ Get started with the following command +
+
+
+ helm install litmuschaos/litmus + +
+
+
+ )} + + {activeTab === 'saas' && ( +
+ {/* Vertical connecting line */} +
+ +
+ {/* Step 1: Sign up for Harness */} +
+
+ Harness Logo +
+

+ Sign up for a free plan on Harness.io +

+

+ Get started with Harness's free tier to access chaos engineering capabilities +

+
+
+
+ + {/* Step 2: Auto-create experiments */} +
+
+
+ + + + + +
+
+

+ Auto-create experiments with ease +

+

+ Automatically generate chaos experiments tailored to your infrastructure +

+
+
+
+ + {/* Step 3: Run tests and get resilience score */} +
+
+
+ + + + + +
+
+

+ Run tests and Get your resilience score +

+

+ Execute chaos experiments and receive detailed resilience metrics +

+
+
+
+
+
+ )} +
+
+
+ ) +} + +const AboutLitmus = () => { return ( - - - {AboutData.map((data, index) => ( - - ))} + + + + ) diff --git a/components/homepage/Adopters.jsx b/components/homepage/Adopters.jsx index 04754d8..07f65d6 100644 --- a/components/homepage/Adopters.jsx +++ b/components/homepage/Adopters.jsx @@ -1,6 +1,9 @@ import { BodyHead } from "@includes/Texts" import { Container, SkewedContainerFluid } from "@layouts/Container" import Link from "next/link" +import { useEffect, useState } from "react" +import { RegularButton } from "@includes/CTA" +import styles from "@includes/scss/Adopters.module.scss" const Adopters = () => { const AdopterList = [ @@ -51,34 +54,72 @@ const Adopters = () => { "emirates-nbd" ] - return ( - - - From startups to the world's - largest companies, Litmus is used to increase reliability - -
- {AdopterList.map(adopter => { - return ( + // Distribute logos across 4 rows (11-12 logos per row) + const getRowLogos = (rowIndex) => { + const logosPerRow = Math.ceil(AdopterList.length / 4) + const startIndex = rowIndex * logosPerRow + const endIndex = Math.min(startIndex + logosPerRow, AdopterList.length) + return AdopterList.slice(startIndex, endIndex) + } + + const LogoRow = ({ logos, direction, rowIndex }) => { + // Create enough duplicates to ensure seamless infinite scroll + const duplicatedLogos = [...logos, ...logos, ...logos, ...logos, ...logos, ...logos] + + const animationClass = direction === 'left' ? styles.scrollLeft : styles.scrollRight + + return ( +
+
+ {duplicatedLogos.map((adopter, index) => ( {adopter} - ) - })} - - - Add yourself - - + ))} +
- + ) + } + + return ( + + + Trusted by startups and enterprises to improve reliability + + +
+ + + + +
+ + {/* Add yourself button */} +
+ + + Add Your Organization + + + + + +
+ ) } diff --git a/components/homepage/Community.jsx b/components/homepage/Community.jsx index a40a08a..e8607de 100644 --- a/components/homepage/Community.jsx +++ b/components/homepage/Community.jsx @@ -1,14 +1,25 @@ import React from "react" import { eventUtils } from "@components/homepage/utils/eventUtils" -import { TextLink } from "@includes/CTA" +import { TextLink, RegularButton } from "@includes/CTA" import styles from "@includes/scss/Hero.module.scss" import { BodyHead, Paragraph } from "@includes/Texts" import { Container } from "@layouts/Container" import { useState } from "react" import Link from "next/link" -const Slide = ({ events, count, changeState }) => { +const CommunityCard = ({ events, changePrevState, changeNextState, count }) => { const [touchStart, setTouchStart] = useState({}) + const [isMobile, setIsMobile] = useState(false) + + React.useEffect(() => { + const checkMobile = () => { + setIsMobile(window.innerWidth < 1024) + } + checkMobile() + window.addEventListener('resize', checkMobile) + return () => window.removeEventListener('resize', checkMobile) + }, []) + const handleTouchStart = e => { const firstTouchEvent = e.touches[0] const location = { @@ -28,101 +39,93 @@ const Slide = ({ events, count, changeState }) => { x: touchStart.x - location.x, y: touchStart.y - location.y } - if (differences.x >= 0.5) { - changeState("prev") - } else if (differences.x <= -0.5) { - changeState("next") + if (differences.x >= 50) { + changeNextState() + } else if (differences.x <= -50) { + changePrevState() } } + return ( -
-
-
- {events.map((event, idx) => { - return ( -
-
-
-

+

) } -const Navigator = ({ changePrevState, changeNextState, count, length }) => { +const DotNavigator = ({ handleChange, count, length }) => { return ( -