Skip to content

Commit 8fedd88

Browse files
hmillersarahhmillersarah
committed
reusable hero section applied to all pages
1 parent e02c415 commit 8fedd88

12 files changed

Lines changed: 120 additions & 129 deletions

File tree

‎ims-devops.html‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@
7878
<!-- Hamburger menu -->
7979
<script src="wp-includes/js/navbar.js"></script>
8080

81+
<!-- Web components -->
82+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
8183
</head>
8284

8385
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -300,26 +302,15 @@ <h5>IMS support</h5>
300302
<main class="zs-main" id="main">
301303

302304
<!-- =========================== IMS DevOps =========================== -->
303-
<div class="banner innovate-bg" >
304-
<section id="intro-section" class="pure-g zs-section intro-sec">
305-
<div id="intro-header" class="pure-u-1"></div>
306-
<div class="pure-u-3-25">
307-
<img class="ims-card-icon" src="wp-content/Icon_Banner_AutomationPage.svg" alt="">
308-
</div>
309-
<div id="intro-info" class="pure-u-1 pure-u-sm-1-2">
310-
<h6>Innovate</h6>
311-
<h1>Automation</h1>
312-
<p id="p-style">Ansible® for IBM Z® helps you automate your z/OS® applications and IT infrastructure
313-
as part of your enterprise automation strategy using a proven and consistent approach.
314-
</p>
315-
<div class="pure-u-1 intro-button">
316-
<a class="zs-w-button-transparent" onfocus="closeNavMenu()" aria-label="Start your free trial of Ansible for IBM Z"
317-
href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=940&tabId=2224&w=1" target="_blank" rel="noopener noreferrer">
318-
Start your free trial →</a>
319-
</div>
320-
</div>
321-
</section>
322-
</div>
305+
<hero-section
306+
name="Automation"
307+
image="wp-content/Icon_Banner_AutomationPage.svg"
308+
section="Innovate"
309+
desc="Ansible® for IBM Z® helps you automate your z/OS® applications and IT infrastructure
310+
as part of your enterprise automation strategy using a proven and consistent approach."
311+
linktext="Start your free trial →"
312+
link="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=940&tabId=2224&w=1"
313+
></hero-section>
323314

324315
<!-- =========================== Expanded description =========================== -->
325316
<div class="zs-gray-section ibm-background-white-core desc-sec">

‎ims-docs.html‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@
7777
<!-- Hamburger menu -->
7878
<script src="wp-includes/js/navbar.js"></script>
7979

80+
<!-- Web components -->
81+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
8082
</head>
8183

8284
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -299,19 +301,12 @@ <h5>IMS support</h5>
299301
<!-- MAIN CONTENT -->
300302
<main class="zs-main" id="main">
301303
<!-- =========================== IMS Docs banner =========================== -->
302-
<div class="banner">
303-
<section id="intro-section" class="pure-g zs-section learn-bg docs-intro">
304-
<div id="intro-header" class="pure-u-1"></div>
305-
<div class="pure-u-3-25">
306-
<img class="ims-card-icon" src="wp-content/Icon_Using DDL_IMS DatabasePage.svg" alt="">
307-
</div>
308-
<div id="intro-info" class="pure-u-1 pure-u-sm-1-2 docs-intro-text">
309-
<h1>IMS Documentation</h1>
310-
<p id="p-style">Find IMS™ and other IBM product documentation.</p>
311-
<div class="pure-u-1"></div>
312-
</div>
313-
</section>
314-
</div>
304+
<hero-section
305+
name="IMS Documentation"
306+
image="wp-content/Icon_Using DDL_IMS DatabasePage.svg"
307+
section="Support"
308+
desc="Find IMS™ and other IBM product documentation."
309+
></hero-section>
315310

316311
<!-- =========================== Badges & Docs =========================== -->
317312
<div class="zs-gray-section zs-white-section docs-main">

‎ims-education.html‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080

8181
<!-- Web components -->
8282
<script src="web-components/course-card/course-card.js" type="module"></script>
83+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
8384
</head>
8485

8586
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -292,29 +293,14 @@ <h5>IMS support</h5>
292293
<!-- MAIN CONTENT -->
293294
<main id="main">
294295
<!-- =========================== Hero =========================== -->
295-
<section class="learn-bg">
296-
<div id="intro-section" class="pure-g hero">
297-
<div class="pure-u-1 pure-u-md-1-24">
298-
<img src="wp-content/course.svg" alt="" class="icon icon-xl">
299-
</div>
300-
<div class="pure-u-1 pure-u-md-23-24">
301-
<h6>Learn</h6>
302-
<h1>IMS courses</h1>
303-
<p>Get comprehensive IMS™ education by taking these self-paced, digital courses.</p>
304-
<p class="subtext">You can also earn a digital badge!</p>
305-
<div class="button-g">
306-
<a class="button button-primary"
307-
onfocus="closeNavMenu()"
308-
target="_blank"
309-
aria-label="Sign up for an IBM ID to enroll in IMS courses"
310-
href="https://login.ibm.com/authsvc/mtfim/sps/authsvc?PolicyId=urn:ibm:security:authentication:asf:basicldapuser&Target=https%3A%2F%2Flogin.ibm.com%2Foidc%2Fendpoint%2Fdefault%2Fauthorize%3FqsId%3D9fe3fe66-c22f-4c7b-8e5d-01dfc0e8defa%26client_id%3DMyIBMDallasProdCI"
311-
rel="noopener noreferrer">
312-
Sign up for an IBM ID →
313-
</a>
314-
</div>
315-
</div>
316-
</div>
317-
</section>
296+
<hero-section
297+
name="IMS courses"
298+
image="wp-content/course.svg"
299+
section="Learn"
300+
desc="<p>Get comprehensive IMS™ education by taking these self-paced, digital courses.</p><p style='font-weight: 300;'>You can also earn a digital badge!</p>"
301+
linktext="Sign up for an IBM ID →"
302+
link="https://login.ibm.com/authsvc/mtfim/sps/authsvc?PolicyId=urn:ibm:security:authentication:asf:basicldapuser&Target=https%3A%2F%2Flogin.ibm.com%2Foidc%2Fendpoint%2Fdefault%2Fauthorize%3FqsId%3D9fe3fe66-c22f-4c7b-8e5d-01dfc0e8defa%26client_id%3DMyIBMDallasProdCI"
303+
></hero-section>
318304

319305
<!-- =========================== Row for filtering =========================== -->
320306
<div class="zs-section ed-filter">

‎ims-gold.html‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@
8888
<!-- Hamburger menu -->
8989
<script src="wp-includes/js/navbar.js"></script>
9090

91+
<!-- Web components -->
92+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
9193
</head>
9294

9395
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -311,23 +313,14 @@ <h5>IMS support</h5>
311313
<main class="zs-main" id="main">
312314

313315
<!-- =========================== IMS Gold =========================== -->
314-
<div class="banner engage-bg intro-sec">
315-
<section id="intro-section" class="pure-g zs-section">
316-
<div id="intro-header" class="pure-u-1"></div>
317-
<div class="pure-u-3-25">
318-
<img class="ims-card-icon" src="wp-content/icons/icon_engage.svg" alt="">
319-
</div>
320-
<div id="intro-info" class="pure-u-1 pure-u-sm-1-2 intro-sec-g">
321-
<h6>Engage</h6>
322-
<h1>IMS Gold</h1>
323-
<p id="p-style">A client feedback program shaping the future of IMS™.</p>
324-
<div class="pure-u-1 intro-sec-b">
325-
<a class="zs-w-button-transparent" onfocus="closeNavMenu()" aria-label="Enroll now in the IMS Gold program" href="#enroll" rel="noopener noreferrer">
326-
Enroll now</a>
327-
</div>
328-
</div>
329-
</section>
330-
</div>
316+
<hero-section
317+
name="IMS Gold"
318+
image="wp-content/icons/icon_engage.svg"
319+
section="Engage"
320+
desc="A client feedback program shaping the future of IMS™."
321+
linktext="Enroll now"
322+
link="#enroll"
323+
></hero-section>
331324

332325
<!-- =========================== How do Clients Benefit from IMS Gold? =========================== -->
333326
<div class="zs-gray-section ibm-background-white-core">

‎ims-java.html‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,9 @@
7777
<!-- Hamburger menu -->
7878
<script src="wp-includes/js/navbar.js"></script>
7979

80+
<!-- Web components -->
81+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
82+
8083
</head>
8184

8285
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -299,20 +302,13 @@ <h5>IMS support</h5>
299302
<main class="zs-main" id="main">
300303

301304
<!-- =========================== IMS Java =========================== -->
302-
<div class="banner innovate-bg">
303-
<section id="intro-section" class="pure-g zs-section intro-sec">
304-
<div id="intro-header" class="pure-u-1"></div>
305-
<div class="pure-u-3-25">
306-
<img class="ims-card-icon intro-icon" src="wp-content/Icon_Banner_Java and IMSPage.svg" alt="">
307-
</div>
308-
<div id="intro-info" class="pure-u-1 pure-u-sm-1-2 intro-info">
309-
<h6>Innovate</h6>
310-
<h1>Java and IMS</h1>
311-
<p id="p-style">With 14 million developers using Java™, there's no learning curve for learning the mainframe.
312-
Write your code once, and deploy anywhere, including in IMS on IBM Z®.</p>
313-
</div>
314-
</section>
315-
</div>
305+
<hero-section
306+
name="Java and IMS"
307+
image="wp-content/Icon_Banner_Java and IMSPage.svg"
308+
section="Innovate"
309+
desc="With 14 million developers using Java™, there's no learning curve for learning the mainframe.
310+
Write your code once, and deploy anywhere, including in IMS on IBM Z®."
311+
></hero-section>
316312

317313
<!-- =========================== Java inside/outside =========================== -->
318314
<div class="zs-section run-java-sec">

‎ims-repos.html‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,8 @@
8080
<!-- Hamburger menu -->
8181
<script src="wp-includes/js/navbar.js"></script>
8282

83+
<!-- Web components -->
84+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
8385
</head>
8486

8587
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -290,22 +292,14 @@ <h5>IMS support</h5>
290292

291293
<!-- Container -->
292294
<main id="main">
293-
<div class="intro-sec">
294-
<section id="intro-section" class="pure-g zs-section learn-bg">
295-
<div id="intro-header" class="pure-u-1"></div>
296-
<div class="pure-u-3-25">
297-
<img class="ims-card-icon" src="wp-content/Icon_Homepage_IMS GitHub.svg" alt="">
298-
</div>
299-
<div id="intro-info" class="pure-u-1 pure-u-sm-1-2 intro-sec-g">
300-
<h6>Engage</h6>
301-
<h1>IMS on GitHub</h1>
302-
<p id="p-style">Accelerate your application development and deployment needs by using the samples provided in these repositories.</p>
303-
<div class="pure-u-1 intro-sec-b">
304-
<a class="zs-w-button-transparent" onfocus="closeNavMenu()" href="https://github.com/imsdev" target="_blank" rel="noopener noreferrer">IMS on GitHub →</a>
305-
</div>
306-
</div>
307-
</section>
308-
</div>
295+
<hero-section
296+
name="IMS on GitHub"
297+
image="wp-content/Icon_Homepage_IMS GitHub.svg"
298+
section="Learn"
299+
desc="Accelerate your application development and deployment needs by using the samples provided in these repositories."
300+
linktext="IMS on GitHub →"
301+
link="https://github.com/imsdev"
302+
></hero-section>
309303

310304
<div class="zs-section repo-sec">
311305
<h2 id="section-title">Available repositories</h2>

‎ims-support.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
href="wp-content/IMS_logo_small.png">
1818

1919
<!-- Pageittle -->
20-
<title>IMS Documentation</title>
20+
<title>IMS Support</title>
2121

2222
<!-- Meta -->
2323
<link rel="canonical" href="ims-docs.html" />
@@ -76,6 +76,9 @@
7676

7777
<!-- Hamburger menu -->
7878
<script src="wp-includes/js/navbar.js"></script>
79+
80+
<!-- Web components -->
81+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
7982
</head>
8083

8184
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -292,18 +295,12 @@ <h5>IMS support</h5>
292295
<main class="zs-main" >
293296

294297
<!-- =========================== IMS Support banner =========================== -->
295-
<div class="banner">
296-
<section id="intro-section" class="pure-g zs-section learn-bg intro-sec">
297-
<div id="intro-header" class="pure-u-1"></div>
298-
<div class="pure-u-3-25">
299-
<img class="ims-card-icon" src="wp-content/Icon_Banner_IMS SupportPage.svg" alt="">
300-
</div>
301-
<div id="intro-info" class="pure-u-1 pure-u-sm-1-2 intro-sec-g">
302-
<h1>Get help</h1>
303-
<p id="p-style">Find answers or get support for IMS™ or other IBM® products.</p>
304-
</div>
305-
</section>
306-
</div>
298+
<hero-section
299+
name="Get help"
300+
image="wp-content/Icon_Banner_IMS SupportPage.svg"
301+
section="Support"
302+
desc="Find answers or get support for IMS™ or other IBM® products."
303+
></hero-section>
307304

308305
<!-- =========================== Cards =========================== -->
309306
<div class="zs-gray-section zs-white-section supp-sec">

‎ims-tm.html‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@
7979
<!-- Hamburger menu -->
8080
<script src="wp-includes/js/navbar.js"></script>
8181

82+
<!-- Web components -->
83+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
8284
</head>
8385

8486
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -301,7 +303,7 @@ <h5>IMS support</h5>
301303
<main class="zs-main" id="main">
302304

303305
<!-- =========================== IMS TM =========================== -->
304-
<section id="intro-section" class="pure-g zs-section tm-hero banner innovate-bg">
306+
<!-- <section id="intro-section" class="pure-g zs-section tm-hero banner innovate-bg">
305307
<div>
306308
<img class="ims-card-icon" src="wp-content/Icon_Banner_IMS DatabasePage.svg" alt="">
307309
</div>
@@ -314,7 +316,19 @@ <h1 >IMS Transaction Manager: Fast, secure, connected</h1>
314316
transactions per day.<a href="https://www.ibm.com/case-studies/atruvia-ag" target="_blank" rel="noopener noreferrer" aria-label="Atruvia case study"><sup>1</sup></a>
315317
</p>
316318
</div>
317-
</section>
319+
</section> -->
320+
321+
<hero-section
322+
name="IMS Transaction Manager: Fast, secure, connected"
323+
image="wp-content/Icon_Banner_IMS DatabasePage.svg"
324+
section="Innovate"
325+
desc='<p>
326+
By using APIs and distributed connectivity, IMS can integrate with modern tools and emerging
327+
technologies, enabling it to host mission-critical applications to support billions of
328+
transactions per day.<a href="https://www.ibm.com/case-studies/atruvia-ag" target="_blank" rel="noopener noreferrer"
329+
aria-label="Atruvia case study"><sup>1</sup></a>
330+
</p>'
331+
></hero-section>
318332

319333
<!-- =========================== Learn more =========================== -->
320334
<section class="zs-gray-section ibm-background-white-core lm-section">

‎web-components/hero-section/hero-section.css‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,26 @@
3232
backdrop-filter: blur(6px);
3333
}
3434

35+
section {
36+
/* Button Color */
37+
--btn-prim: #0f62fe;
38+
--btn-prim-hover: #0050e6;
39+
--btn-secnd: #6f6f6f;
40+
--btn-scnd-hover: #5e5e5e;
41+
}
42+
3543
.hero {
3644
display: grid;
3745
grid-template-columns: 4em 2fr;
38-
grid-template-rows: 4em 4em 6em 1fr;
46+
/* grid-template-rows: 4em 4em 6em 1fr; */
47+
grid-template-rows: 4em repeat(3, 1fr);
3948
padding: 3em;
4049
padding-top: 2em;
4150
align-items: center;
51+
}
4252

43-
/* Button Color */
44-
--btn-prim: #0f62fe;
45-
--btn-prim-hover: #0050e6;
46-
--btn-secnd: #6f6f6f;
47-
--btn-scnd-hover: #5e5e5e;
53+
.hero-no-buttons {
54+
grid-template-rows: 4em repeat(2, 1fr);
4855
}
4956

5057
img {
@@ -53,9 +60,23 @@ img {
5360
max-width: 2em;
5461
}
5562

56-
h2, h6, p {
63+
a {
64+
text-decoration: none;
65+
}
66+
67+
sup {
68+
color: var(--btn-prim);
69+
}
70+
71+
h2 {
72+
line-height: 1.2;
73+
margin: 0.2em 0em;
5774
padding: 0em;
75+
}
76+
77+
h6, p {
5878
margin: 0em;
79+
padding: 0em;
5980
}
6081

6182
.section {

0 commit comments

Comments
 (0)