Skip to content

Commit 15c56ee

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

1 file changed

Lines changed: 66 additions & 62 deletions

File tree

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

Lines changed: 66 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import LogStream from "./images/log-stream.svg";
1616
import LogStreamSearch from "./images/log-stream-search.svg";
1717
import { useState } from "react";
1818
import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
19+
import DocsIcon from "../../Pricing/icons/docs.js";
1920

2021
const VisualizerFeaturesWrapper = styled.div`
2122
@@ -120,7 +121,7 @@ z-index: 10;
120121
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.3s;
121122
/* transition: transform 1s ease-in-out 0.2s; */
122123
}
123-
`;
124+
}`;
124125

125126
const KanvasisualizerFeatures = () => {
126127
const [isHovered, setisHovered] = useState(false);
@@ -140,73 +141,76 @@ const KanvasisualizerFeatures = () => {
140141

141142
return (
142143
<VisualizerFeaturesWrapper>
143-
<Row>
144-
<div className="project__block__wrap">
145-
<Col $sm={12} $md={6} $lg={4}>
146-
<div className={(isHovered && hoveredFeature != "Feature1") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(1)} onMouseOut={handleMouseOut}>
147-
<div className="feature-image">
148-
<img src={ApplicationImportBoxes} alt="Application Import" style={{ position: "absolute" }} />
149-
<img src={ApplicationImportArrows} alt="" className={hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image"} />
150-
</div>
151-
<h3>Application Import</h3>
152-
<p>Import your existing Kubernetes, Helm, or Docker Compose applications.</p>
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"} />
153151
</div>
154-
</Col>
155-
<Col $sm={12} $md={6} $lg={4}>
156-
<div className={(isHovered && hoveredFeature != "Feature2") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(2)} onMouseOut={handleMouseOut}>
157-
<div className="feature-image">
158-
<img src={PerformanceMetrics} alt="Performance Metrics" style={{ position: "absolute" }} />
159-
<img src={PerformanceMetricsGraph} alt="" className={hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image"} />
160-
</div>
161-
<h3>Real-time performance metrics</h3>
162-
<p>Monitor your clusters performing in action, set alerts and work with object-specific metrics.</p>
152+
<h3>Application Import</h3>
153+
<p>Import your existing Kubernetes, Helm, or Docker Compose applications.</p>
163154
</div>
164-
</Col>
165-
<Col $sm={12} $md={6} $lg={4}>
166-
<div className={(isHovered && hoveredFeature != "Feature3") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(3)} onMouseOut={handleMouseOut}>
167-
<div className="feature-image">
168-
<img src={InteractiveTerminal} alt="Interactive Terminal" style={{ position: "absolute", width: "80%", zIndex: "0" }} />
169-
<img src={InteractiveTerminalCode} alt="" className={hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image"} style={{ position: "relative", width: "80%", zIndex: "10" }} />
170-
</div>
171-
<h3>Interactive Terminal</h3>
172-
<p>Establish sessions with one or more pods at a time.</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} 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"} />
173161
</div>
174-
</Col>
175-
<Col $sm={12} $md={6} $lg={4}>
176-
<div className={(isHovered && hoveredFeature != "Feature4") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(4)} onMouseOut={handleMouseOut}>
177-
<div className="feature-image">
178-
<img src={TimelineDVRClock} alt="Timeline" style={{ position: "absolute", width: "80%" }} />
179-
<img src={TimelineDVR} alt="" className={hoveredFeature == "Feature4" ? "secondary-image-visible" : "secondary-image"} style={{ width: "80%" }} />
180-
</div>
181-
<h3>Timeline (DVR)</h3>
182-
<p>Playback service transactions. Scrub over the history of changes to your deployments.</p>
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" }} />
183172
</div>
184-
</Col>
185-
<Col $sm={12} $md={6} $lg={4}>
186-
<div className={(isHovered && hoveredFeature != "Feature5") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(5)} onMouseOut={handleMouseOut}>
187-
<div className="feature-image">
188-
<img src={isDark ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} />
189-
<ServicePerformanceMeter alt="" className={hoveredFeature == "Feature5" ? "meter-visible" : "secondary-image"}
190-
style={{ height: "auto", width: "70%",position: "relative", zIndex: "10", transformOrigin: "center center" }}
191-
/>
192-
</div>
193-
<h3>Service Performance</h3>
194-
<p>Continuous visibility across all of your clusters and workloads metrics.</p>
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%" }} />
195184
</div>
196-
</Col>
197-
<Col $sm={12} $md={6} $lg={4}>
198-
<div className={(isHovered && hoveredFeature != "Feature6") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(6)} onMouseOut={handleMouseOut}>
199-
<div className="feature-image">
200-
<img src={LogStream} alt="Log Stream" style={{ position: "absolute" }} />
201-
<img src={LogStreamSearch} alt="" className={hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image"} />
202-
</div>
203-
<h3>Log Stream</h3>
204-
<p>Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</p>
185+
<h3>Timeline (DVR)</h3>
186+
<p>Playback service transactions. Scrub over the history of changes to your deployments.</p>
205187
</div>
206-
</Col>
207-
</div>
208-
</Row>
209-
</VisualizerFeaturesWrapper>
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>
210214

211215
);
212216
};

0 commit comments

Comments
 (0)