Skip to content

Commit 445b800

Browse files
hmillersarahhmillersarah
authored
Merge pull request #45 from imsdev/37-reusable-component-hero-section
Reusable component hero section
2 parents 9048c00 + c62af80 commit 445b800

30 files changed

+456
-313
lines changed

ims-internship.html renamed to archive/ims-internship.html

File renamed without changes.

‎ims-advocacy.html‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@
7575

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

8083
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -286,34 +289,16 @@ <h5>IMS support</h5>
286289
<div id="content" class="main-content">
287290
<main id="main">
288291
<!-- =========================== Hero =========================== -->
289-
<section class="engage-bg">
290-
<div id="intro-section" class="pure-g hero">
291-
<div class="pure-u-1 pure-u-md-1-24">
292-
<img src="wp-content/icons/icon_engage.svg" alt="" class="icon">
293-
</div>
294-
<div class="pure-u-1 pure-u-md-23-24">
295-
<h6>Engage</h6>
296-
<h1>Advocates and ideas</h1>
297-
<p>Get an IMS advocate to represent you. Also, submit your ideas to enhance the IMS product.</p>
298-
<div class="button-g">
299-
<a class="button button-primary"
300-
onfocus="closeNavMenu()"
301-
target="_blank"
302-
aria-label="Request an IMS Advocate"
303-
href="mailto:[email protected]"
304-
rel="noopener noreferrer">
305-
Request an IMS advocate
306-
</a>
307-
<a class="button button-secondary"
308-
aria-label="Submit ideas for enhancements"
309-
href="#ideas"
310-
rel="noopener noreferrer">
311-
Submit ideas for enhancements
312-
</a>
313-
</div>
314-
</div>
315-
</div>
316-
</section>
292+
<hero-section
293+
name="Advocates and ideas"
294+
image="wp-content/icons/icon_engage.svg"
295+
section="Engage"
296+
desc="Get an IMS advocate to represent you. Also, submit your ideas to enhance the IMS product."
297+
linktext="Request an IMS advocate"
298+
link="mailto:[email protected]"
299+
linktext2="Submit ideas for enhancement"
300+
link2="#ideas"
301+
></hero-section>
317302

318303
<!-- =========================== Who are they? =========================== -->
319304
<section class="white-bg pure-g">

‎ims-apis.html‎

Lines changed: 8 additions & 15 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
<!-- --------------- SITE CONTENT --------------- -->
@@ -290,21 +292,12 @@ <h5>IMS support</h5>
290292
<main id="main" class="zs-main" >
291293

292294
<!-- =========================== IMS APIs Hero Banner =========================== -->
293-
<div class="banner innovate-bg">
294-
<section id="intro-section" class="pure-g zs-section apis-hero">
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_Banner_z OS ConnectPage.svg" alt="">
298-
</div>
299-
<div id="intro-info" class="pure-u-1 pure-u-sm-15-24 apis-hero-text">
300-
<h6>Innovate</h6>
301-
<h1 >IBM z/OS Connect</h1>
302-
<p id="p-style" >Create and deploy RESTful APIs that access IMS™ applications and data
303-
in minutes with point and click Eclipse tooling.
304-
</p>
305-
</div>
306-
</section>
307-
</div>
295+
<hero-section
296+
name="IBM z/OS Connect"
297+
image="wp-content/icons/icon_zos_connect.svg"
298+
section="Innovate"
299+
desc="Create and deploy RESTful APIs that access IMS™ applications and data in minutes with point and click Eclipse tooling."
300+
></hero-section>
308301

309302
<!-- =========================== Call APIs from Z =========================== -->
310303
<div class="zs-gray-section apis-section-white">

‎ims-db.html‎

Lines changed: 14 additions & 19 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,20 +302,13 @@ <h5>IMS support</h5>
300302
<main class="zs-main" id="main">
301303

302304
<!-- =========================== IMS Database =========================== -->
303-
<div class="banner innovate-bg">
304-
<section id="intro-section" class="pure-g zs-section db-hero">
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_IMS DatabasePage.svg" alt="">
308-
</div>
309-
<div id="intro-info" class="pure-u-1 pure-u-sm-15-24 db-hero-text">
310-
<h6>Innovate</h6>
311-
<h1 >IMS Database: fast, secure, reliable.</h1>
312-
<p id="p-style" >Data integrity, performance, simplified use of SQL, and powerful recovery tools make IMS Database Manager
313-
the best choice to protect your enterprise assets.</p>
314-
</div>
315-
</section>
316-
</div>
305+
<hero-section
306+
name="IMS Database: fast, secure, reliable"
307+
image="wp-content/icons/icon_database.svg"
308+
section="Innovate"
309+
desc="Data integrity, performance, simplified use of SQL, and powerful recovery tools make IMS Database Manager
310+
the best choice to protect your enterprise assets."
311+
></hero-section>
317312

318313
<!-- =========================== Managed ACBs =========================== -->
319314
<div class="zs-gray-section ibm-background-white-core macb-section">
@@ -378,15 +373,15 @@ <h4>More resources</h4>
378373
<div class="pure-g">
379374
<!-- left contents -->
380375
<div class="pure-u-1-3 resource-card">
381-
<div class="pure-u-1-8"><img src="wp-content/Icon_Using DDL_IMS DatabasePage.svg" alt="Documentation"></div>
376+
<div class="pure-u-1-8"><img src="wp-content/icons/icon_documentation.svg" alt="Documentation"></div>
382377
<div class="pure-u-3-4">
383378
<h3>IMS catalog</h3>
384379
<a href="https://www.ibm.com/docs/en/ims/latest?topic=administration-ims-catalog" aria-label="Read more about the IMS catalog" target="_blank" rel="noopener noreferrer">Read more →</a>
385380
</div>
386381
</div>
387382
<!-- mid contents -->
388383
<div class="pure-u-1-3 resource-card">
389-
<div class="pure-u-1-8"><img src="wp-content/Icon_Using DDL_IMS DatabasePage.svg" alt="Documentation"></div>
384+
<div class="pure-u-1-8"><img src="wp-content/icons/icon_documentation.svg" alt="Documentation"></div>
390385
<div class="pure-u-3-4">
391386
<h3>IMS management of ACBs</h3>
392387
<a href="https://www.ibm.com/docs/en/ims/latest?topic=tailoring-ims-management-acbs" aria-label="Read more about managed ACBs" target="_blank" rel="noopener noreferrer">Read more →</a>
@@ -421,7 +416,7 @@ <h4>More resources</h4>
421416
<div class="pure-g">
422417
<!-- left contents -->
423418
<div class="pure-u-1-3 resource-card">
424-
<div class="pure-u-1-8"><img src="wp-content/Icon_Using DDL_IMS DatabasePage.svg" alt="Documentation"></div>
419+
<div class="pure-u-1-8"><img src="wp-content/icons/icon_documentation.svg" alt="Documentation"></div>
425420
<div class="pure-u-3-4">
426421
<h3>IMS Native z/OS DDL utility (Data Definition utility)</h3>
427422
<a href="https://community.ibm.com/community/user/ibmz-and-linuxone/blogs/deepak-kohli/2022/06/03/ims-zddl-intro"
@@ -430,7 +425,7 @@ <h3>IMS Native z/OS DDL utility (Data Definition utility)</h3>
430425
</div>
431426
<!-- mid contents -->
432427
<div class="pure-u-1-3 resource-card">
433-
<div class="pure-u-1-8"><img src="wp-content/Icon_Using DDL_IMS DatabasePage.svg" alt="Documentation"></div>
428+
<div class="pure-u-1-8"><img src="wp-content/icons/icon_documentation.svg" alt="Documentation"></div>
434429
<div class="pure-u-3-4">
435430
<h3>Using DDL to define databases and program views</h3>
436431
<a href="https://www.ibm.com/docs/en/ims/latest?topic=design-using-ddl-define-databases-program-views"
@@ -439,7 +434,7 @@ <h3>Using DDL to define databases and program views</h3>
439434
</div>
440435
<!-- right contents -->
441436
<div class="pure-u-1-3 resource-card">
442-
<div class="pure-u-1-8"><img src="wp-content/Icon_Using DDL_IMS DatabasePage.svg" alt="Documentation"></div>
437+
<div class="pure-u-1-8"><img src="wp-content/icons/icon_documentation.svg" alt="Documentation"></div>
443438
<div class="pure-u-3-4">
444439
<h3>Data Definition utility (DFS3ID00) batch enhancement</h3>
445440
<a href="https://www.ibm.com/docs/en/ims/latest?topic=idme-ims-data-definition-utility-dfs3id00-dli-batch-enhancement"

‎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/icons/icon_automation.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/icons/icon_documentation.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/icons/icon_bookmark.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-internship-2025.html‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@
7474

7575
<!-- Hamburger menu -->
7676
<script src="wp-includes/js/navbar.js"></script>
77+
78+
<!-- Web components -->
79+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
7780
</head>
7881

7982
<body id="ibm-com" class="ibm-com ibm-type">
@@ -277,27 +280,14 @@ <h5>IMS support</h5>
277280
<main id="content" class="main-content">
278281
<div id="main">
279282
<!-- =========================== Hero =========================== -->
280-
<section class="internship-bg">
281-
<div id="intro-section" class="pure-g blur-bg hero">
282-
<div class="pure-u-1 pure-u-md-1-24">
283-
<img src="wp-content/icons/icon_engage.svg" alt="" class="icon">
284-
</div>
285-
<div class="pure-u-1 pure-u-md-23-24">
286-
<h6>Engage</h6>
287-
<h1>IMS Customer Internship 2025</h1>
288-
<p>Take your skills to the next level with our annual, in-person, one-week training event.</p>
289-
<p><b>May 19 - 23, 2025</b></p>
290-
<a class="button button-primary"
291-
onfocus="closeNavMenu()"
292-
target="_blank"
293-
aria-label="Register now for the IMS Internship"
294-
href="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html"
295-
rel="noopener noreferrer">
296-
Register now →
297-
</a>
298-
</div>
299-
</div>
300-
</section>
283+
<hero-section
284+
name="IMS Customer Internship 2025"
285+
image="wp-content/icons/icon_engage.svg"
286+
section="Engage"
287+
desc="<p>Take your skills to the next level with our annual, in-person, one-week training event.</p><p><b>May 19 - 23, 2025</b></p>"
288+
linktext="Register now →"
289+
link="https://www.ibm.com/it-infrastructure/us-en/resources/campaignmail/z/ims/eventsignup.html"
290+
></hero-section>
301291

302292
<!-- =========================== Why attend? =========================== -->
303293
<section class="white-bg pure-g">

0 commit comments

Comments
 (0)