Merge pull request #354 from jstruve-catalysis/main

update home and Build IA hero sections
Azure · Sep 25, 2024 · 4e6b090 · 4e6b090
2 parents 5899456 + ec03356
commit 4e6b090
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 29 deletions.
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -418,4 +418,36 @@ hr {
 
 .sidebar_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module, .tableOfContents_node_modules-\@docusaurus-theme-classic-lib-theme-TOC-styles-module {
   top: 1rem!important;
+}
+
+.heroAzure {
+  padding: 2rem 0;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  background-color: #0078d4 !important;
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: cover;
+}
+
+.heroAzureHome {
+  padding: 2rem 0;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  background-color: #0078d4 !important;
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: cover;
+}
+
+@media screen and (max-width: 572px) {
+  .heroAzure {
+    background-image: none!important;
+  }
+  .heroAzureHome {
+    padding: 2rem 0!important;
+    background-image: none!important;
+  }
 }
diff --git a/website/src/pages/Build-IA/CommunityGallery.tsx b/website/src/pages/Build-IA/CommunityGallery.tsx
@@ -128,12 +128,28 @@ function useFilteredUsers() {
 
 function ShowcaseHeader() {
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary heroAzure")} style={{ backgroundImage: 'url(../img/hero-bg.png)' }}>
       <div className="container text--center">
-          <h1 className="hero__title">
-              Community Gallery
-          </h1>
-          <p>Explore the Community Showcase for videos, blog posts and open-source projects from the community.</p>
+        <div className="row" style={{ alignItems: 'center' }}>
+          <div className="col col--6 text--left">
+              <h1 className="hero__title">
+                  Community Gallery
+              </h1>
+              <p>Explore the Community Showcase for videos, blog posts and open-source projects from the community.</p>
+          </div>
+          <div className="col col--1 hide-on-mobile">
+
+</div>
+<div className="col col--5">
+<img
+    className="hide-on-mobile"
+    src="../img/30-days-of-ia/30-days-of-ia-2024-hero-image.png"
+    alt=""
+    role="presentation"
+    width="100%"
+/>
+</div>
+        </div>
       </div>
     </header>
   );

diff --git a/website/src/pages/Build-IA/DemoBytes.js b/website/src/pages/Build-IA/DemoBytes.js
@@ -10,16 +10,32 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 // Section Header
 function SectionHeader({title, description}) {
     return (
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+        <header className={clsx("hero hero--primary heroAzure")} style={{ backgroundImage: 'url(../img/hero-bg.png)' }}>
         <div className="container text--center">
-            <h1 className="hero__title">
-                {title}
-            </h1>
-            <p>{description}</p>
-            <div className={styles.buttonsFFIA}>
-              <Link className="button button--primary button--lg" to="https://aka.ms/demo-bytes?ocid=biafy25h1_demobytes_webpage_azuremktg" data-bi-area="Hero" data-bi-name="#DemoBytes">
-              Register for the series
-              </Link>
+            <div className="row" style={{ alignItems: 'center' }}>
+                <div className="col col--6 text--left">
+                    <h1 className="hero__title">
+                        {title}
+                    </h1>
+                    <p>{description}</p>
+                    <div className={styles.buttonsFFIA}>
+                    <Link className="button button--primary button--lg" to="https://aka.ms/demo-bytes?ocid=biafy25h1_demobytes_webpage_azuremktg" data-bi-area="Hero" data-bi-name="#DemoBytes">
+                    Register for the series
+                    </Link>
+                    </div>
+                </div>
+                <div className="col col--1 hide-on-mobile">
+
+</div>
+<div className="col col--5">
+<img
+    className="hide-on-mobile"
+    src="../img/30-days-of-ia/30-days-of-ia-2024-hero-image.png"
+    alt=""
+    role="presentation"
+    width="100%"
+/>
+</div>
             </div>
         </div>
       </header>

diff --git a/website/src/pages/Build-IA/LearnLive.js b/website/src/pages/Build-IA/LearnLive.js
@@ -10,16 +10,32 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 // Section Header
 function SectionHeader({title, description}) {
     return (
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
-        <div className="container text--center">
-            <h1 className="hero__title">
-                {title}
-            </h1>
-            <p>{description}</p>
-            <div className={styles.buttonsFFIA}>
-              <Link className="button button--primary button--lg" to="https://aka.ms/bia/learn-live?ocid=biafy25h1_learnlive_webpage_azuremktg" data-bi-area="Hero" data-bi-name="#LearnLive">
-              Register for the series
-              </Link>
+        <header className={clsx("hero hero--primary heroAzure")} style={{ backgroundImage: 'url(../img/hero-bg.png)' }}>
+        <div className="container">
+            <div className="row" style={{ alignItems: 'center' }}>
+                <div className="col col--6 text--left">
+                    <h1 className="hero__title">
+                        {title}
+                    </h1>
+                    <p>{description}</p>
+                    <div className={styles.buttonsFFIA}>
+                    <Link className="button button--primary button--lg" to="https://aka.ms/bia/learn-live?ocid=biafy25h1_learnlive_webpage_azuremktg" data-bi-area="Hero" data-bi-name="#LearnLive">
+                    Register for the series
+                    </Link>
+                    </div>
+                </div>
+                <div className="col col--1 hide-on-mobile">
+
+                    </div>
+                    <div className="col col--5">
+                    <img
+                        className="hide-on-mobile"
+                        src="../img/30-days-of-ia/30-days-of-ia-2024-hero-image.png"
+                        alt=""
+                        role="presentation"
+                        width="100%"
+                    />
+</div>
             </div>
         </div>
       </header>

diff --git a/website/src/pages/Build-IA/index.js b/website/src/pages/Build-IA/index.js
@@ -95,7 +95,7 @@ function Feature({ svgpath, title, linkTitle, description, link, className }) {
 
 function CampaignHeader() {
   return (
-    <header className={clsx("hero hero--primary", styles.heroBannerImg)}>
+    <header className={clsx("hero hero--primary heroAzure")} style={{ backgroundImage: 'url(../img/hero-bg.png)' }}>
       <div className="container">
         <div className="row" style={{ alignItems: 'center' }}>
           <div className="col col--6">

diff --git a/website/src/pages/Build-IA/styles.module.css b/website/src/pages/Build-IA/styles.module.css
@@ -6,6 +6,34 @@
   background-color: #004277;
 }
 
+.heroBannerImg {
+  padding: 1rem 0;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(to right, 
+  #004277 20%,
+    #1172B0 60%,
+    #8DC8E8 70%,
+    #FFB3BB 80%,
+    #FFB900 90%,
+    #FFE399 100%
+    /* Add more color stops or adjust percentages as needed */
+  );
+
+}
+
+.heroAzure {
+  padding: 8rem 0;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  background-color: #004277 !important;
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: cover;
+}
+
 .featureImg {
   width: 100%;
 }

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -11,20 +11,24 @@ import styles from './index.module.css';
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header className={clsx("hero hero--primary heroAzureHome")} style={{ backgroundImage: 'url(./img/hero-bg.png)', padding: '8rem 0rem' }}>
       <div className="container">
+      <div className="row" style={{ alignItems: 'center' }}>
+      <div className="col col--6 text--left">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p>{siteConfig.customFields.description}</p>
         <div className={styles.buttons}>
           <Link
-            className="button button--primary button--lg"
+            className="button button--primary button--lg text--left"
             to="/Build-IA/"
             data-bi-area="Hero"
             data-bi-name="Build Intelligent Apps"
           >
             Build Intelligent Apps
           </Link>
         </div>
+        </div>
+        </div>
       </div>
     </header>
   );

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -27,14 +27,26 @@
   );
 
 }
+
+.heroAzure {
+  padding: 8rem 0;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+  background-color: #004277 !important;
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: cover;
+}
+
 .featureImg {
   width: 100%;
 }
 
 .buttons {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
 }
 
 .buttonsFFIA {
@@ -72,6 +84,6 @@
   .buttonsFFIA {
     display: flex;
     align-items: center!important;
-    justify-content: center!important;
+    justify-content: left!important;
   }
 }
diff --git a/website/static/img/hero-bg.png b/website/static/img/hero-bg.png