@@ -156,49 +156,49 @@ const KanvasisualizerFeatures = () => {
156156 < Row >
157157 < div className = "project__block__wrap" >
158158 < Col $sm = { 12 } $md = { 6 } $lg = { 4 } >
159- < a href = "https://docs.layer5.io/kanvas/getting-started/import-designs/" style = { { textDecoration : 'none' , color : 'inherit' , display : 'block' } } >
160- < div className = { ( isHovered && hoveredFeature != "Feature1" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 1 ) } onMouseOut = { handleMouseOut } >
161- < div className = "docs-icon-wrapper" >
162- < DocsIcon style = { { color : '#00D3A9' } } className = "docs" />
159+ < a href = "https://docs.layer5.io/kanvas/getting-started/import-designs/" style = { { textDecoration : "none" , color : "inherit" , display : "block" } } >
160+ < div className = { ( isHovered && hoveredFeature != "Feature1" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 1 ) } onMouseOut = { handleMouseOut } >
161+ < div className = "docs-icon-wrapper" >
162+ < DocsIcon style = { { color : "#00D3A9" } } className = "docs" />
163+ </ div >
164+ < div className = "feature-image" >
165+ < img src = { ApplicationImportBoxes } alt = "Application Import" style = { { position : "absolute" } } />
166+ < img src = { ApplicationImportArrows } alt = "" className = { hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image" } />
167+ </ div >
168+ < h3 > Application Import</ h3 >
169+ < p > Import your existing Kubernetes, Helm, or Docker Compose applications.</ p >
163170 </ div >
164- < div className = "feature-image" >
165- < img src = { ApplicationImportBoxes } alt = "Application Import" style = { { position : "absolute" } } />
166- < img src = { ApplicationImportArrows } alt = "" className = { hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image" } />
167- </ div >
168- < h3 > Application Import</ h3 >
169- < p > Import your existing Kubernetes, Helm, or Docker Compose applications.</ p >
170- </ div >
171171 </ a >
172172 </ Col >
173173 < Col $sm = { 12 } $md = { 6 } $lg = { 4 } >
174- < a href = "https://docs.layer5.io/kanvas/operator/resource-details/" style = { { textDecoration : 'none' , color : 'inherit' , display : 'block' } } >
175- < div className = { ( isHovered && hoveredFeature != "Feature2" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 2 ) } onMouseOut = { handleMouseOut } >
176- < div className = "docs-icon-wrapper" >
177- < DocsIcon style = { { color : '#00D3A9' } } className = "docs" />
174+ < a href = "https://docs.layer5.io/kanvas/operator/resource-details/" style = { { textDecoration : "none" , color : "inherit" , display : "block" } } >
175+ < div className = { ( isHovered && hoveredFeature != "Feature2" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 2 ) } onMouseOut = { handleMouseOut } >
176+ < div className = "docs-icon-wrapper" >
177+ < DocsIcon style = { { color : "#00D3A9" } } className = "docs" />
178+ </ div >
179+ < div className = "feature-image" >
180+ < img src = { PerformanceMetrics } alt = "Performance Metrics" style = { { position : "absolute" } } />
181+ < img src = { PerformanceMetricsGraph } alt = "" className = { hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image" } />
182+ </ div >
183+ < h3 > Real-time performance metrics</ h3 >
184+ < p > Monitor your clusters performing in action, set alerts and work with object-specific metrics.</ p >
178185 </ div >
179- < div className = "feature-image" >
180- < img src = { PerformanceMetrics } alt = "Performance Metrics" style = { { position : "absolute" } } />
181- < img src = { PerformanceMetricsGraph } alt = "" className = { hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image" } />
182- </ div >
183- < h3 > Real-time performance metrics</ h3 >
184- < p > Monitor your clusters performing in action, set alerts and work with object-specific metrics.</ p >
185- </ div >
186186 </ a >
187187 </ Col >
188188 < Col $sm = { 12 } $md = { 6 } $lg = { 4 } >
189- < a href = "https://docs.layer5.io/kanvas/operator/#understanding-interactive-terminal" style = { { textDecoration : 'none' , color : 'inherit' , display : 'block' } } >
190- < div className = { ( isHovered && hoveredFeature != "Feature3" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 3 ) } onMouseOut = { handleMouseOut } >
191- < div className = "docs-icon-wrapper" >
192- < DocsIcon style = { { color : '#00D3A9' } } className = "docs" />
189+ < a href = "https://docs.layer5.io/kanvas/operator/#understanding-interactive-terminal" style = { { textDecoration : "none" , color : "inherit" , display : "block" } } >
190+ < div className = { ( isHovered && hoveredFeature != "Feature3" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 3 ) } onMouseOut = { handleMouseOut } >
191+ < div className = "docs-icon-wrapper" >
192+ < DocsIcon style = { { color : "#00D3A9" } } className = "docs" />
193+ </ div >
194+ < div className = "feature-image" >
195+ < img src = { InteractiveTerminal } alt = "Interactive Terminal" style = { { position : "absolute" , width : "80%" , zIndex : "0" } } />
196+ < img src = { InteractiveTerminalCode } alt = "" className = { hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image" } style = { { position : "relative" , width : "80%" , zIndex : "10" } } />
197+ </ div >
198+ < h3 > Interactive Terminal</ h3 >
199+ < p > Establish sessions with one or more pods at a time.</ p >
193200 </ div >
194- < div className = "feature-image" >
195- < img src = { InteractiveTerminal } alt = "Interactive Terminal" style = { { position : "absolute" , width : "80%" , zIndex : "0" } } />
196- < img src = { InteractiveTerminalCode } alt = "" className = { hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image" } style = { { position : "relative" , width : "80%" , zIndex : "10" } } />
197- </ div >
198- < h3 > Interactive Terminal</ h3 >
199- < p > Establish sessions with one or more pods at a time.</ p >
200- </ div >
201- </ a >
201+ </ a >
202202 </ Col >
203203 < Col $sm = { 12 } $md = { 6 } $lg = { 4 } >
204204 < div className = { ( isHovered && hoveredFeature != "Feature4" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 4 ) } onMouseOut = { handleMouseOut } >
@@ -223,18 +223,18 @@ const KanvasisualizerFeatures = () => {
223223 </ div >
224224 </ Col >
225225 < Col $sm = { 12 } $md = { 6 } $lg = { 4 } >
226- < a href = "https://docs.layer5.io/kanvas/operator/#understanding-log-streamer" style = { { textDecoration : 'none' , color : 'inherit' , display : 'block' } } >
227- < div className = { ( isHovered && hoveredFeature != "Feature6" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 6 ) } onMouseOut = { handleMouseOut } >
228- < div className = "docs-icon-wrapper" >
229- < DocsIcon style = { { color : '#00D3A9' } } className = "docs" />
226+ < a href = "https://docs.layer5.io/kanvas/operator/#understanding-log-streamer" style = { { textDecoration : "none" , color : "inherit" , display : "block" } } >
227+ < div className = { ( isHovered && hoveredFeature != "Feature6" ) ? "project__block__inner darken" : "project__block__inner" } onMouseOver = { ( ) => handleMouseOver ( 6 ) } onMouseOut = { handleMouseOut } >
228+ < div className = "docs-icon-wrapper" >
229+ < DocsIcon style = { { color : "#00D3A9" } } className = "docs" />
230+ </ div >
231+ < div className = "feature-image" >
232+ < img src = { LogStream } alt = "Log Stream" style = { { position : "absolute" } } />
233+ < img src = { LogStreamSearch } alt = "" className = { hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image" } />
234+ </ div >
235+ < h3 > Log Stream</ h3 >
236+ < p > Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</ p >
230237 </ div >
231- < div className = "feature-image" >
232- < img src = { LogStream } alt = "Log Stream" style = { { position : "absolute" } } />
233- < img src = { LogStreamSearch } alt = "" className = { hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image" } />
234- </ div >
235- < h3 > Log Stream</ h3 >
236- < p > Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</ p >
237- </ div >
238238 </ a >
239239 </ Col >
240240 </ div >
0 commit comments