Skip to content

Commit b722433

Browse files
ARYANSHAH1567ARYANSHAH1567
committed
Added the hyperlink to the interactive terminal card
Signed-off-by: Aryan Shah <aryanashah11@gmail.com>
1 parent 15c56ee commit b722433

1 file changed

Lines changed: 64 additions & 64 deletions

File tree

‎src/sections/Kanvas/Kanvas-visualize/kanvas-visualize-features.js‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -141,76 +141,76 @@ const KanvasisualizerFeatures = () => {
141141

142142
return (
143143
<VisualizerFeaturesWrapper>
144-
<Row>
145-
<div className="project__block__wrap">
146-
<Col $sm={12} $md={6} $lg={4}>
147-
<div className={(isHovered && hoveredFeature != "Feature1") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(1)} onMouseOut={handleMouseOut} style={{ position: 'relative' }}>
148-
<div className="feature-image">
149-
<img src={ApplicationImportBoxes} alt="Application Import" style={{ position: "absolute" }} />
150-
<img src={ApplicationImportArrows} alt="" className={hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image"} />
144+
<Row>
145+
<div className="project__block__wrap">
146+
<Col $sm={12} $md={6} $lg={4}>
147+
<div className={(isHovered && hoveredFeature != "Feature1") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(1)} onMouseOut={handleMouseOut}>
148+
<div className="feature-image">
149+
<img src={ApplicationImportBoxes} alt="Application Import" style={{ position: "absolute" }} />
150+
<img src={ApplicationImportArrows} alt="" className={hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image"} />
151+
</div>
152+
<h3>Application Import</h3>
153+
<p>Import your existing Kubernetes, Helm, or Docker Compose applications.</p>
151154
</div>
152-
<h3>Application Import</h3>
153-
<p>Import your existing Kubernetes, Helm, or Docker Compose applications.</p>
155+
</Col>
156+
<Col $sm={12} $md={6} $lg={4}>
157+
<div className={(isHovered && hoveredFeature != "Feature2") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(2)} onMouseOut={handleMouseOut}>
158+
<div className="feature-image">
159+
<img src={PerformanceMetrics} alt="Performance Metrics" style={{ position: "absolute" }} />
160+
<img src={PerformanceMetricsGraph} alt="" className={hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image"} />
161+
</div>
162+
<h3>Real-time performance metrics</h3>
163+
<p>Monitor your clusters performing in action, set alerts and work with object-specific metrics.</p>
154164
</div>
155-
</Col>
156-
<Col $sm={12} $md={6} $lg={4}>
157-
<div className={(isHovered && hoveredFeature != "Feature2") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(2)} onMouseOut={handleMouseOut} style={{ position: 'relative' }}>
158-
<div className="feature-image">
159-
<img src={PerformanceMetrics} alt="Performance Metrics" style={{ position: "absolute" }} />
160-
<img src={PerformanceMetricsGraph} alt="" className={hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image"} />
165+
</Col>
166+
<Col $sm={12} $md={6} $lg={4}>
167+
<a href="https://docs.layer5.io/kanvas/operator/" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
168+
<div className={(isHovered && hoveredFeature != "Feature3") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(3)} onMouseOut={handleMouseOut}>
169+
<div className="feature-image">
170+
<img src={InteractiveTerminal} alt="Interactive Terminal" style={{ position: "absolute", width: "80%", zIndex: "0" }} />
171+
<img src={InteractiveTerminalCode} alt="" className={hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image"} style={{ position: "relative", width: "80%", zIndex: "10" }} />
172+
</div>
173+
<h3>Interactive Terminal</h3>
174+
<p>Establish sessions with one or more pods at a time.</p>
175+
<DocsIcon style={{ position: 'absolute', top: '16px', right: '16px', color: '#00D3A9' }} className="docs" />
161176
</div>
162-
<h3>Real-time performance metrics</h3>
163-
<p>Monitor your clusters performing in action, set alerts and work with object-specific metrics.</p>
164-
</div>
165-
</Col>
166-
<Col $sm={12} $md={6} $lg={4}>
167-
<a href="https://docs.layer5.io/kanvas/operator/" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
168-
<div className={(isHovered && hoveredFeature != "Feature3") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(3)} onMouseOut={handleMouseOut} style={{ position: 'relative' }}>
169-
<div className="feature-image">
170-
<img src={InteractiveTerminal} alt="Interactive Terminal" style={{ position: "absolute", width: "80%", zIndex: "0" }} />
171-
<img src={InteractiveTerminalCode} alt="" className={hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image"} style={{ position: "relative", width: "80%", zIndex: "10" }} />
177+
</a>
178+
</Col>
179+
<Col $sm={12} $md={6} $lg={4}>
180+
<div className={(isHovered && hoveredFeature != "Feature4") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(4)} onMouseOut={handleMouseOut}>
181+
<div className="feature-image">
182+
<img src={TimelineDVRClock} alt="Timeline" style={{ position: "absolute", width: "80%" }} />
183+
<img src={TimelineDVR} alt="" className={hoveredFeature == "Feature4" ? "secondary-image-visible" : "secondary-image"} style={{ width: "80%" }} />
184+
</div>
185+
<h3>Timeline (DVR)</h3>
186+
<p>Playback service transactions. Scrub over the history of changes to your deployments.</p>
172187
</div>
173-
<h3>Interactive Terminal</h3>
174-
<p>Establish sessions with one or more pods at a time.</p>
175-
<DocsIcon style={{ position: 'absolute', top: '16px', right: '16px', color: '#00D3A9' }} className="docs" />
176-
</div>
177-
</a>
178-
</Col>
179-
<Col $sm={12} $md={6} $lg={4}>
180-
<div className={(isHovered && hoveredFeature != "Feature4") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(4)} onMouseOut={handleMouseOut} style={{ position: 'relative' }}>
181-
<div className="feature-image">
182-
<img src={TimelineDVRClock} alt="Timeline" style={{ position: "absolute", width: "80%" }} />
183-
<img src={TimelineDVR} alt="" className={hoveredFeature == "Feature4" ? "secondary-image-visible" : "secondary-image"} style={{ width: "80%" }} />
188+
</Col>
189+
<Col $sm={12} $md={6} $lg={4}>
190+
<div className={(isHovered && hoveredFeature != "Feature5") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(5)} onMouseOut={handleMouseOut}>
191+
<div className="feature-image">
192+
<img src={isDark ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} />
193+
<ServicePerformanceMeter alt="" className={hoveredFeature == "Feature5" ? "meter-visible" : "secondary-image"}
194+
style={{ height: "auto", width: "70%",position: "relative", zIndex: "10", transformOrigin: "center center" }}
195+
/>
196+
</div>
197+
<h3>Service Performance</h3>
198+
<p>Continuous visibility across all of your clusters and workloads metrics.</p>
184199
</div>
185-
<h3>Timeline (DVR)</h3>
186-
<p>Playback service transactions. Scrub over the history of changes to your deployments.</p>
200+
</Col>
201+
<Col $sm={12} $md={6} $lg={4}>
202+
<div className={(isHovered && hoveredFeature != "Feature6") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(6)} onMouseOut={handleMouseOut}>
203+
<div className="feature-image">
204+
<img src={LogStream} alt="Log Stream" style={{ position: "absolute" }} />
205+
<img src={LogStreamSearch} alt="" className={hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image"} />
206+
</div>
207+
<h3>Log Stream</h3>
208+
<p>Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</p>
187209
</div>
188-
</Col>
189-
<Col $sm={12} $md={6} $lg={4}>
190-
<div className={(isHovered && hoveredFeature != "Feature5") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(5)} onMouseOut={handleMouseOut} style={{ position: 'relative' }}>
191-
<div className="feature-image">
192-
<img src={isDark ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} />
193-
<ServicePerformanceMeter alt="" className={hoveredFeature == "Feature5" ? "meter-visible" : "secondary-image"}
194-
style={{ height: "auto", width: "70%",position: "relative", zIndex: "10", transformOrigin: "center center" }}
195-
/>
196-
</div>
197-
<h3>Service Performance</h3>
198-
<p>Continuous visibility across all of your clusters and workloads metrics.</p>
199-
</div>
200-
</Col>
201-
<Col $sm={12} $md={6} $lg={4}>
202-
<div className={(isHovered && hoveredFeature != "Feature6") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(6)} onMouseOut={handleMouseOut} style={{ position: 'relative' }}>
203-
<div className="feature-image">
204-
<img src={LogStream} alt="Log Stream" style={{ position: "absolute" }} />
205-
<img src={LogStreamSearch} alt="" className={hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image"} />
206-
</div>
207-
<h3>Log Stream</h3>
208-
<p>Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</p>
209-
</div>
210-
</Col>
211-
</div>
212-
</Row>
213-
</VisualizerFeaturesWrapper>
210+
</Col>
211+
</div>
212+
</Row>
213+
</VisualizerFeaturesWrapper>
214214

215215
);
216216
};

0 commit comments

Comments
 (0)