Skip to content

Commit 079eae6

Browse files
vr-varadvr-varad
authored
Merge pull request #6696 from Rajesh-Nagarajan-11/link-cards-kanvas-operate
Fix: Add hyperlinks to cards on Kanvas Operate page to redirect to docs
2 parents f72519c + a718986 commit 079eae6

1 file changed

Lines changed: 51 additions & 27 deletions

File tree

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

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ z-index: 10;
4040
}
4141
}
4242
.project__block__inner {
43+
position: relative;
4344
display: flex;
4445
flex-direction: column;
4546
background: ${props => props.theme.grey212121ToWhite};
@@ -121,7 +122,15 @@ z-index: 10;
121122
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.3s;
122123
/* transition: transform 1s ease-in-out 0.2s; */
123124
}
124-
}`;
125+
}
126+
127+
.docs-icon-wrapper {
128+
position: absolute;
129+
top: 16px;
130+
right: 16px;
131+
color: ${props => props.theme.secondaryColor};
132+
}
133+
`;
125134

126135
const KanvasisualizerFeatures = () => {
127136
const [isHovered, setisHovered] = useState(false);
@@ -144,35 +153,47 @@ const KanvasisualizerFeatures = () => {
144153
<Row>
145154
<div className="project__block__wrap">
146155
<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"} />
156+
<a href="https://docs.layer5.io/kanvas/getting-started/import-designs/" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
157+
<div className={(isHovered && hoveredFeature != "Feature1") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(1)} onMouseOut={handleMouseOut}>
158+
<div className="docs-icon-wrapper">
159+
<DocsIcon/>
160+
</div>
161+
<div className="feature-image">
162+
<img src={ApplicationImportBoxes} alt="Application Import" style={{ position: "absolute" }} />
163+
<img src={ApplicationImportArrows} alt="" className={hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image"} />
164+
</div>
165+
<h3>Application Import</h3>
166+
<p>Import your existing Kubernetes, Helm, or Docker Compose applications.</p>
151167
</div>
152-
<h3>Application Import</h3>
153-
<p>Import your existing Kubernetes, Helm, or Docker Compose applications.</p>
154-
</div>
168+
</a>
155169
</Col>
156170
<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"} />
171+
<a href="https://docs.layer5.io/kanvas/operator/resource-details/" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
172+
<div className={(isHovered && hoveredFeature != "Feature2") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(2)} onMouseOut={handleMouseOut}>
173+
<div className="docs-icon-wrapper">
174+
<DocsIcon/>
175+
</div>
176+
<div className="feature-image">
177+
<img src={PerformanceMetrics} alt="Performance Metrics" style={{ position: "absolute" }} />
178+
<img src={PerformanceMetricsGraph} alt="" className={hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image"} />
179+
</div>
180+
<h3>Real-time performance metrics</h3>
181+
<p>Monitor your clusters performing in action, set alerts and work with object-specific metrics.</p>
161182
</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>
183+
</a>
165184
</Col>
166185
<Col $sm={12} $md={6} $lg={4}>
167-
<a href="https://docs.layer5.io/kanvas/operator/" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
186+
<a href="https://docs.layer5.io/kanvas/operator/#understanding-interactive-terminal" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
168187
<div className={(isHovered && hoveredFeature != "Feature3") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(3)} onMouseOut={handleMouseOut}>
188+
<div className="docs-icon-wrapper">
189+
<DocsIcon/>
190+
</div>
169191
<div className="feature-image">
170192
<img src={InteractiveTerminal} alt="Interactive Terminal" style={{ position: "absolute", width: "80%", zIndex: "0" }} />
171193
<img src={InteractiveTerminalCode} alt="" className={hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image"} style={{ position: "relative", width: "80%", zIndex: "10" }} />
172194
</div>
173195
<h3>Interactive Terminal</h3>
174196
<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" />
176197
</div>
177198
</a>
178199
</Col>
@@ -191,28 +212,31 @@ const KanvasisualizerFeatures = () => {
191212
<div className="feature-image">
192213
<img src={isDark ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} />
193214
<ServicePerformanceMeter alt="" className={hoveredFeature == "Feature5" ? "meter-visible" : "secondary-image"}
194-
style={{ height: "auto", width: "70%", position: "relative", zIndex: "10", transformOrigin: "center center" }}
215+
style={{ height: "auto", width: "70%",position: "relative", zIndex: "10", transformOrigin: "center center" }}
195216
/>
196217
</div>
197218
<h3>Service Performance</h3>
198219
<p>Continuous visibility across all of your clusters and workloads metrics.</p>
199220
</div>
200221
</Col>
201222
<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"} />
223+
<a href="https://docs.layer5.io/kanvas/operator/#understanding-log-streamer" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
224+
<div className={(isHovered && hoveredFeature != "Feature6") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(6)} onMouseOut={handleMouseOut}>
225+
<div className="docs-icon-wrapper">
226+
<DocsIcon/>
227+
</div>
228+
<div className="feature-image">
229+
<img src={LogStream} alt="Log Stream" style={{ position: "absolute" }} />
230+
<img src={LogStreamSearch} alt="" className={hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image"} />
231+
</div>
232+
<h3>Log Stream</h3>
233+
<p>Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</p>
206234
</div>
207-
<h3>Log Stream</h3>
208-
<p>Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</p>
209-
</div>
235+
</a>
210236
</Col>
211237
</div>
212238
</Row>
213239
</VisualizerFeaturesWrapper>
214-
215240
);
216241
};
217-
218242
export default KanvasisualizerFeatures;

0 commit comments

Comments
 (0)