Skip to content

Commit ec77180

Browse files
kaimmejkaimmej
committedDec 20, 2024
Usecase page built. Final styling
Signed-off-by: kaimmej <[email protected]>
1 parent 9432796 commit ec77180

17 files changed

+791
-152
lines changed
 

‎AnomalyDetection/index.html

+338-37
Large diffs are not rendered by default.

‎_data/usecases/page_anomalyDetection_datafile.json

+96-11
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"Category": "Machine Learning & AI"
1515
},
1616
"MainBody": {
17-
"BeginningParagraph": "Wherever you work with data, you’ll find anomalies. In increasingly rich information ecosystems, manually detecting and resolving those anomalies can seem like an impossible task. OpenSearch’s built-in plugin gives you the power to create automated, intelligent workflows that identify anomalies so you can resolve them proactively and minimize disruption.",
17+
"BeginningParagraph": "Wherever you work with data, you'll find anomalies. In increasingly rich information ecosystems, manually detecting and resolving those anomalies can seem like an impossible task. OpenSearch's built-in capabilities give you the power to create automated, intelligent workflows that identify anomalies so you can resolve them proactively and minimize disruption.",
1818

1919
"ThreeCard_row" : [
2020
{
@@ -25,32 +25,117 @@
2525
{
2626
"ImagePath": "/assets/img/pageAssets_usecasepages/pageGraphic-AnomalyDetection-Graph.png",
2727
"classValue": "card-usecase-img-top",
28-
"SubText": "<strong>Uncover contextual anomalies.</strong> For example - an unexpected surge in usage or consumption."
28+
"SubText": "<strong>Uncover contextual anomalies</strong> such as unexpected surges in usage or consumption."
2929
},
3030
{
3131
"ImagePath": "/assets/img/pageAssets_usecasepages/pageGraphic-AnomalyDetection-IPAddresses.png",
3232
"classValue": "card-usecase-img-top",
3333
"SubText": "<strong>Observe collective anomalies,</strong> including unusual web traffic from a cluster of IP addresses"
3434
}
3535
],
36-
"ImageLeft_row" : {
37-
"ImagePath": "",
38-
"Subheader": "View results in real time",
36+
"ImageRight_row" : {
37+
"ImagePath": "/assets/img/pageAssets_usecasepages/pageGraphic-AnomalyDetection-AnomalyImage.png",
38+
"Subheader": "Detection and resolution at scale",
3939
"SubText": "Eliminate delays to detection and resolution, minimize manual monitoring and troubleshooting, and bridge gaps in visibility to provide insights at scale. With OpenSearch, you can create and configure detectors that expose anomalies, deliver highly observable results, and send alerts in near real-time."
4040
},
41-
"TwoColumn_Row" : {
41+
"TwoColumn_FurtherResources_row" : {
4242
"left_BlogColumn" : {
43-
"title": "Correlating security events across different log sources ",
44-
"blog_array": [
43+
"Title": "Explore further resources",
44+
"Blog_array": [
45+
{
46+
"Type": "OpenSearch Blog",
47+
"Title": "Overlaying anomalies and alters on OpenSearch Dashboards visualizations",
48+
"Link": "",
49+
"Icon": "/assets/img/iconography/OpenSearch-AI.png",
50+
"SubText": "Wed, Aug 2, 2023"
51+
},
52+
{
53+
"Type": "OpenSearch Video",
54+
"Title": "Leveraging anomaly detection for UEBA at Graylog",
55+
"Link": "",
56+
"Icon": "/assets/img/iconography/Youtube-frame.png",
57+
"SubText": "Watch on YouTube"
58+
},
4559
{
46-
"title": "Correlating security events across different log sources "
60+
"Type": "OpenSearch Blog",
61+
"Title": "Anomaly detection for historical data and real-time streaming...",
62+
"Link": "",
63+
"Icon": "/assets/img/iconography/OpenSearch-AI.png",
64+
"SubText": "Thu, Nov 18, 2021"
4765
}
4866
]
4967
},
5068
"right_LargeImageColumn" : {
51-
"header": "Some kind of subheader for this section",
52-
"ImagePath": ""
69+
"Title": "Custom anomaly detection workflows powered by intelligent, scalable, highly adaptable features",
70+
"Feature_array": [
71+
{
72+
"Title": "Real time data ingestion and indexing",
73+
"SubText": "Continuously collect and index data from multiple sources to ensure you’re conducting anomaly detection on the most up-to-date information.",
74+
"Icon": "/assets/img/pageAssets_usecasepages/pageGraphic-Icon-DataConsumer-PurpleMint.png"
75+
},
76+
{
77+
"Title": "Advanced anomaly detection algorithms",
78+
"SubText": "Leverage cutting-edge AI and machine learning algorithms to identify problems in your ingested data, including univariate, multivariate, and contextual anomalies.",
79+
"Icon": "/assets/img/pageAssets_usecasepages/pageGraphic-Icon-AI-MachineLearning-PurpleMint.png"
80+
},
81+
{
82+
"Title": "Flexible alerting and notifications",
83+
"SubText": "Our Anomaly Detection tools enable customizable alerts and notifications you can use to inform your stakeholders and resolve issues proactively.",
84+
"Icon": "/assets/img/pageAssets_usecasepages/pageGraphic-Icon-DataProducer-PurpleMint.png"
85+
},
86+
{
87+
"Title": "Scalable and distributed architecture",
88+
"SubText": "OpenSearch’s distributed, highly scalable nature helps you ingest, process, and analyze large volumes of data without compromising performance.",
89+
"Icon": "/assets/img/pageAssets_usecasepages/pageGraphic-Icon-Infrastructure-PurpleMint.png"
90+
},
91+
{
92+
"Title": "Seamless integration with existing toolsets",
93+
"SubText": "Easily integrate OpenSearch into the monitoring, observability, and IT service management (ITSM) tools you already use to maintain seamless continuity with existing technology investments and workflows.",
94+
"Icon": "/assets/img/pageAssets_usecasepages/pageGraphic-Icon-Platform-PurpleMint.png"
95+
}
96+
]
97+
}
98+
},
99+
"TwoColumn_FeatureList_row" : {
100+
"left_Paragraph" : {
101+
"Text": "A proactive approach to anomaly detection puts <strong>you</strong> in control of your data. <br/><br/>By getting ahead of disruption, you improve data quality and maximize uptime to keep operations consistent and secure."
102+
},
103+
"right_FeatureList" : {
104+
"Feature_array": [
105+
{
106+
"Title": "Proactive issue identification",
107+
"SubText": "Quickly detect anomalies in your data to identify and address potential issues before they escalate, reducing the impact on business operations and customer experience."
108+
},
109+
{
110+
"Title": "Enhanced security and compliance",
111+
"SubText": "Identify and investigate security threats and demonstrate compliance with industry regulations and standards."
112+
},
113+
{
114+
"Title": "Scalability and future-proofing",
115+
"SubText": "Scalable and flexible architecture expands your anomaly detection capabilities seamlessly as data volume grows alongside infrastructure complexity."
116+
},
117+
{
118+
"Title": "Improved operational efficiency",
119+
"SubText": "Gain an AI advantage that helps you rapidly identify and resolve anomalies to optimize processes, reduce manual troubleshooting, and smooth operations."
120+
},
121+
{
122+
"Title": "Informed decision-making",
123+
"SubText": "OpenSearch delivers the insights and contextual information you need to make data-driven decisions, optimize resource allocation, and improve strategic planning."
124+
}
125+
]
53126
}
127+
},
128+
"GetStartedBanner_row" : {
129+
"Text": "See what you can accomplish with OpenSearch anomaly detection.",
130+
"ButtonText": "Get started ",
131+
"ButtonLink": "/docs/latest/observing-your-data/ad/index/"
132+
},
133+
"ImageLeft_row" : {
134+
"ImagePath": "/assets/img/pageAssets_usecasepages/pageGraphic-AnomalyDetection-NextGenPlaygrounds.png",
135+
"Subheader": "OpenSearch Dashboards Playground",
136+
"SubText": "Experience OpenSearch anomaly detection in our free demo environment.",
137+
"ButtonText": "Jump into our sandbox",
138+
"ButtonLink": "/playgrounds/"
54139
}
55140

56141
}

‎_sass/_usecasepages.scss

+356
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,356 @@
1+
2+
3+
4+
5+
6+
// HEROBANNER
7+
$mobile-banner-height: 200px;
8+
$desktop-banner-height: 450px;
9+
.usecase-hero-banner-background-wrapper {
10+
position: relative;
11+
height: $desktop-banner-height;
12+
overflow: hidden;
13+
background-image: url(/assets/img/pageAssets_usecasepages/Herobanner-AnomalyDetection.png);
14+
background-size: cover;
15+
background-repeat: no-repeat;
16+
.usecase-hero-heading-background-container {
17+
height: $desktop-banner-height;
18+
}
19+
.h4--category-text {
20+
color: white;
21+
font-size: 24px;
22+
font-family: 'Open Sans Condensed';
23+
font-weight: 700;
24+
line-height: 42px;
25+
word-wrap: break-word;
26+
}
27+
.h1--hero-heading {
28+
color: white;
29+
font-size: 64px;
30+
font-family: Open Sans;
31+
font-weight: 800;
32+
line-height: 72px;
33+
word-wrap: break-word;
34+
}
35+
.h4--text-hero-subtext {
36+
color: white;
37+
font-size: 20px;
38+
font-family: Open Sans;
39+
font-weight: 700;
40+
line-height: 30px;
41+
word-wrap: break-word;
42+
}
43+
44+
// Bottom Border
45+
&::after {
46+
content: "";
47+
position: absolute;
48+
height: 6px;
49+
width: 100%;
50+
background-color: $secondary-seafoam-mint;
51+
bottom: 0px;
52+
left: 0;
53+
}
54+
}
55+
.usecase-hero-banner-background-mobile-wrapper{
56+
position: relative;
57+
height: $mobile-banner-height;
58+
overflow: hidden;
59+
background-image: url(/assets/img/pageAssets_usecasepages/Herobanner-MobileHeader-AnomalyDetection.png);
60+
background-size: cover;
61+
background-repeat: no-repeat;
62+
.usecase-hero-heading-background-container {
63+
height: $mobile-banner-height;
64+
}
65+
.h4--category-text {
66+
color: white;
67+
font-size: 18px;
68+
font-family: 'Open Sans Condensed';
69+
font-weight: 700;
70+
line-height: 21px;
71+
word-wrap: break-word;
72+
}
73+
.h1--hero-heading {
74+
color: white;
75+
font-size: 32px;
76+
font-family: Open Sans;
77+
font-weight: 800;
78+
line-height: 32px;
79+
word-wrap: break-word;
80+
}
81+
.h4--text-hero-subtext {
82+
color: white;
83+
font-size: 15px;
84+
font-family: Open Sans;
85+
font-weight: 600;
86+
line-height: 24px;
87+
word-wrap: break-word;
88+
}
89+
90+
// Bottom Border
91+
&::after {
92+
content: "";
93+
position: absolute;
94+
height: 6px;
95+
width: 100%;
96+
background-color: $secondary-seafoam-mint;
97+
bottom: 0px;
98+
left: 0;
99+
}
100+
}
101+
102+
103+
104+
.usecase-mainbody-container {
105+
106+
107+
108+
109+
110+
111+
.card-usecase-img-top{
112+
max-width: 500px;
113+
--bs-card-border-radius: 0;
114+
border-color: $secondary-purple-sage-t1;
115+
border-top-width: 6px;
116+
border-left-width: 0px;
117+
border-right-width: 0px;
118+
border-bottom-width: 0px;
119+
120+
.card-img-top{
121+
width: 100%;
122+
}
123+
.card-text {
124+
color: #003551;
125+
font-size: 18px;
126+
font-family: Open Sans;
127+
font-weight: 400;
128+
line-height: 30px;
129+
word-wrap: break-word;
130+
131+
}
132+
133+
}
134+
135+
136+
.two-column-purpleBackground-container {
137+
.primary-section {
138+
background-color: $secondary-purple-sage-s2;
139+
}
140+
.secondary-section {
141+
background-color: $secondary-purple-sage;
142+
}
143+
.flex-image{
144+
width: 100%;
145+
}
146+
}
147+
}
148+
.flex-image{
149+
width: 100%;
150+
}
151+
.card-greenBorderLeft {
152+
--bs-card-border-radius: 0;
153+
background-color: white;
154+
border-color: $secondary-seafoam-mint-t1;
155+
border-top-width: 0px;
156+
border-left-width: 6px;
157+
border-right-width: 0px;
158+
border-bottom-width: 0px;
159+
}
160+
.green-background-container {
161+
background-color: $secondary-seafoam-mint-t1;
162+
}
163+
164+
//cards
165+
.blog-card{
166+
min-width: 150px;
167+
max-width: 500px;
168+
--bs-card-border-radius: 0;
169+
border-top-width: 0px;
170+
border-left-width: 0px;
171+
border-right-width: 0px;
172+
border-bottom-width: 6px;
173+
border-color: $primary-open-sky-s2;
174+
175+
176+
.card-title {
177+
color: #0085B8;
178+
font-size: 21px;
179+
font-family: Open Sans;
180+
font-weight: 700;
181+
line-height: 36px;
182+
word-wrap: break-word
183+
}
184+
.card-text {
185+
color: #003551;
186+
font-size: 15px;
187+
font-family: Open Sans;
188+
font-weight: 600;
189+
text-transform: uppercase;
190+
line-height: 24px;
191+
letter-spacing: 4.50px;
192+
}
193+
.card-subtext{
194+
color: #003551;
195+
font-size: 18px;
196+
font-family: Open Sans;
197+
font-weight: 400;
198+
line-height: 27px;
199+
}
200+
// Bottom Border
201+
// &::after {
202+
// content: "";
203+
// position: absolute;
204+
// height: 6px;
205+
// width: 100%;
206+
// background-color: $primary-open-sky-s2;
207+
// bottom: 0px;
208+
// left: 0;
209+
// }
210+
&:hover {
211+
// border-color: $primary-open-sky-s2;
212+
// border-width: 6px;
213+
// --bs-border-color-translucent: 0.5;
214+
background-color: $secondary-purple-sage-t3;
215+
}
216+
}
217+
218+
.usecase-icon{
219+
width: 130px;
220+
height: 130px;
221+
}
222+
.usecase-header{
223+
color: #963CBD;
224+
font-size: 20px;
225+
font-family: Open Sans;
226+
font-weight: 700;
227+
line-height: 30px;
228+
word-wrap: break-word;
229+
}
230+
.usecase-subtext{
231+
color: black;
232+
font-size: 18px;
233+
font-family: Open Sans;
234+
font-weight: 400;
235+
line-height: 30px;
236+
word-wrap: break-word;
237+
}
238+
239+
240+
241+
242+
// buttons
243+
.btn-dark-tertiary-midnight{
244+
245+
--bs-btn-padding-y: 15px;
246+
--bs-btn-padding-x: 40px;
247+
background-color: $primary-open-sky-s3;
248+
color: $secondary-sanfrancisco-fog-t1;
249+
250+
font-size: 18px;
251+
font-weight: 700;
252+
line-height: 24px;
253+
border-radius: 30px;
254+
text-wrap: nowrap;
255+
256+
257+
&:active {
258+
color: $secondary-golden-poppy;
259+
260+
}
261+
&:hover {
262+
background-color: $primary-open-sky-s2;
263+
color: $secondary-sanfrancisco-fog-t1;
264+
}
265+
&:visited {
266+
color: $secondary-sanfrancisco-fog-t1;
267+
}
268+
}
269+
270+
271+
.btn-primary-dark-usecase{
272+
273+
--bs-btn-padding-y: 5px;
274+
--bs-btn-padding-x: 40px;
275+
background-color: $primary-open-sky-s1;
276+
color: $secondary-sanfrancisco-fog-t1;
277+
278+
font-size: 17px;
279+
font-weight: 700;
280+
line-height: 35px;
281+
border-radius: 40px;
282+
text-wrap: nowrap;
283+
284+
> .button-content-icon-svg {
285+
fill: $secondary-sanfrancisco-fog-t1;
286+
margin-bottom: 2px;
287+
}
288+
&:active {
289+
background-color: $primary-open-sky-s3 !important;
290+
}
291+
&:hover {
292+
background-color: $primary-open-sky-s3;
293+
color: $secondary-sanfrancisco-fog-t1;
294+
}
295+
&:active > .button-content {
296+
297+
> .button-content-icon {
298+
> .button-content-icon-svg{
299+
fill: $secondary-golden-poppy;
300+
}
301+
}
302+
> .button-content-text {
303+
color: $secondary-golden-poppy;
304+
}
305+
306+
}
307+
&:visited {
308+
color: $secondary-sanfrancisco-fog-t1;
309+
}
310+
}
311+
312+
313+
// TYPOGRAPHY
314+
315+
.header--h1-primary {
316+
color: $primary-open-sky-s3;
317+
font-family: 'Open Sans Condensed';
318+
font-size: 30px;
319+
font-weight: 700;
320+
text-decoration: none;
321+
z-index: 1;
322+
}
323+
.h2--subheader {
324+
color: #003551;
325+
font-size: 24px;
326+
font-family: 'Open Sans Condensed';
327+
font-weight: 700;
328+
line-height: 42px;
329+
word-wrap: break-word;
330+
}
331+
.h2--subheader-secondary {
332+
color: $secondary-seafoam-mint;
333+
font-size: 24px;
334+
font-family: 'Open Sans Condensed';
335+
font-weight: 700;
336+
line-height: 42px;
337+
word-wrap: break-word;
338+
}
339+
.h4--text{
340+
color: black;
341+
font-size: 24px;
342+
font-family: 'Open Sans';
343+
font-weight: 400;
344+
line-height: 48px;
345+
word-wrap: break-word;
346+
}
347+
.bodycontent--text-secondary {
348+
color: white;
349+
font-size: 18px;
350+
font-weight: 400;
351+
line-height: 30px;
352+
font-family: 'Open Sans';
353+
word-wrap: break-word;
354+
text-decoration: none;
355+
z-index: 1;
356+
}

‎_sass/_usercasepages.scss

-103
This file was deleted.

‎assets/css/output.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,5 @@
3434
@import "navbar";
3535
@import "main-imports";
3636
@import "common/OpenSearch_typography";
37-
@import "usercasepages";
37+
@import "usecasepages";
3838
@import "usergroups";

‎assets/img/iconography/Youtube-frame.png

529 Bytes
Loading

‎assets/img/pageAssets_usecasepages/Herobanner-AnomalyDetection.png

179 KB
Loading

‎assets/img/pageAssets_usecasepages/Herobanner-MobileHeader-AnomalyDetection.png

20 KB
Loading

‎assets/img/pageAssets_usecasepages/Herobanner-VectorDB.png

264 KB
Loading

‎assets/img/pageAssets_usecasepages/pageGraphic-AnomalyDetection-AnomalyImage.png

152 KB
Loading

‎assets/img/pageAssets_usecasepages/pageGraphic-AnomalyDetection-AnomalyImage1.png

50.9 KB
Loading

‎assets/img/pageAssets_usecasepages/pageGraphic-AnomalyDetection-NextGenPlaygrounds.png

926 KB
Loading

‎assets/img/pageAssets_usecasepages/pageGraphic-Icon-AI-MachineLearning-PurpleMint.png

8.17 KB
Loading

‎assets/img/pageAssets_usecasepages/pageGraphic-Icon-DataConsumer-PurpleMint.png

8.83 KB
Loading

‎assets/img/pageAssets_usecasepages/pageGraphic-Icon-DataProducer-PurpleMint.png

12 KB
Loading

‎assets/img/pageAssets_usecasepages/pageGraphic-Icon-Infrastructure-PurpleMint.png

7.35 KB
Loading

‎assets/img/pageAssets_usecasepages/pageGraphic-Icon-Platform-PurpleMint.png

7.97 KB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.