Merge pull request #92 from ibm-client-engineering/sam-updates

Fixed alignment of landing page tiles, updated spacing for subheadings
ibm-client-engineering · Jul 5, 2024 · da3f310 · da3f310
2 parents b0e01e1 + c1d4a82
commit da3f310
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 65 deletions.
diff --git a/src/app/home/RecentProjectsTiles.js b/src/app/home/RecentProjectsTiles.js
@@ -8,11 +8,13 @@ import {
   Column,
 } from "@carbon/react";
 
+const alignment = ['left', 'center', 'right'];
+
 const RecentProjectsTiles = ({ data }) => {
   return (
     <>
       {data.map((repo, index) => (
-        <Column lg={4} md={2} sm={1} key={index}><ClickableTile id={repo.name} className="projectTile" key={index} href={repo.homepageUrl} target="_blank" rel="noopener noreferrer" renderIcon={Launch} style={{ height: '400px' }}>
+        <Column lg={4} md={2} sm={1} key={index} className='project-col' style={{justifyContent: alignment[index], alignItems: alignment[index]}}><ClickableTile id={repo.name} className="projectTile-home" key={index} href={repo.homepageUrl} target="_blank" rel="noopener noreferrer" renderIcon={Launch} style={{ height: '400px' }}>
           <RecentlyViewed size={32} />
           <h6 className="projectTile__title">{repo.title}</h6>
           <p3 className="projectTile__description">{repo.description}</p3>

diff --git a/src/app/home/_landing-page.scss b/src/app/home/_landing-page.scss
@@ -7,70 +7,83 @@
 .landing-page__banner {
     font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
     padding-top: $spacing-05;
-  }
+}
 
-  .landing-page__header {
-    @include type-style ('heading-07');
-    padding-right: $spacing-07 * 3;
+.landing-page__header {
+  @include type-style ('heading-07');
+  padding-right: $spacing-07 * 3;
 
-  }
-  .landing-page__header-description {
-    @include type-style ('heading-06');
-    padding-right: $spacing-07 * 3;
-  }
+}
+.landing-page__header-description {
+  @include type-style ('heading-06');
+  padding-right: $spacing-07 * 3;
+}
 
 .landing-page__subheader {
     @include type-style ('heading-03');
     padding-right: $spacing-07 * 3;
-  }
+}
 .row-padding {
   padding-bottom: $spacing-07 * 2;
 }
-  .clickable-tile-title {
-    @include type-style ('heading-03');
-  }
-  .clickable-tile-description {
-    @include type-style ('body-01');
-  }
+.clickable-tile-title {
+  @include type-style ('heading-03');
+}
+.clickable-tile-description {
+  @include type-style ('body-01');
+}
 
-  .clickable-tile-1 {
-    background: #FFD7D9,
-  }
-  .clickable-tile-1:hover {
-    background: #ffebec,
-  }
+.clickable-tile-1 {
+  background: #FFD7D9,
+}
+.clickable-tile-1:hover {
+  background: #ffebec,
+}
 
-  .clickable-tile-2 {
-    background: #A7F0BA,
-  }
-  .clickable-tile-2:hover {
-    background: #d3f7dc,
-  }
+.clickable-tile-2 {
+  background: #A7F0BA,
+}
+.clickable-tile-2:hover {
+  background: #d3f7dc,
+}
 
-  .clickable-tile-3 {
-    background: #DCC7FF,
-  }
-  .clickable-tile-3:hover {
-    background: #ede3ff,
-  }
+.clickable-tile-3 {
+  background: #DCC7FF,
+}
+.clickable-tile-3:hover {
+  background: #ede3ff,
+}
 
-  .clickable-tile-4 {
-    background: #C6C6C6,
-  }
-  .clickable-tile-4:hover {
-    background: #e2e2e2,
-  }
+.clickable-tile-4 {
+  background: #C6C6C6,
+}
+.clickable-tile-4:hover {
+  background: #e2e2e2,
+}
 
-  .clickable-tile-5 {
-    background: #D0E2FF,
-  }
-  .clickable-tile-5:hover {
-    background: #e7f0ff,
-  }
+.clickable-tile-5 {
+  background: #D0E2FF,
+}
+.clickable-tile-5:hover {
+  background: #e7f0ff,
+}
 
-  .clickable-tile-6 {
-    background: #F1C21B,
-  }
-  .clickable-tile-6:hover {
-    background: #f8e08d,
-  }
+.clickable-tile-6 {
+  background: #F1C21B,
+}
+.clickable-tile-6:hover {
+  background: #f8e08d,
+}
+
+.projectTile-home {
+  height: 400px;
+  width: 370px;
+}
+
+.project-col {
+  display: flex;
+}
+
+.subheading-text {
+  padding-right: 30%;
+}
diff --git a/src/app/home/page.js b/src/app/home/page.js
@@ -77,23 +77,23 @@ export default function LandingPage() {
         </Column>
       </Row>
 
-      <Row fullWidth className='row-padding'>
+      <Row condensed className='row-padding'>
         <Column md={2} lg={4} sm={1} className="landing-page__subheader">
           <h3>Recent Projects</h3>
-          <br /><br />
-          <h4>Recently published projects from the Client Engineering Team</h4>
+          <br />
+          <h4 className='subheading-text'>Recently published projects from the Client Engineering Team</h4>
         </Column>
         <RecentProjectsTiles data={recentRepos}></RecentProjectsTiles>
       </Row>
 
-      <Row fullWidth className='row-padding'>
+      <Row condensed className='row-padding'>
         <Column md={2} lg={4} sm={1} className="landing-page__subheader">
           <h3>Popular Projects</h3>
-          <br /><br />
-          <h4>Highly valueable and most used projects</h4>
+          <br />
+          <h4 className='subheading-text'>Highly valuable and most used projects</h4>
         </Column>
-        <Column lg={4} md={2} sm={1}>
-          <ClickableTile className="projectTile" href={"https://ibm-client-engineering.github.io/solution-sfg-aws/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch} style={{ height: '400px' }}>
+        <Column lg={4} md={2} sm={1} className='project-col' style={{justifyContent: 'left', alignItems: 'left'}}>
+          <ClickableTile className="projectTile-home" href={"https://ibm-client-engineering.github.io/solution-sfg-aws/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch}>
             <WatsonHealthEdgeEnhancement_01 size={34} />
             <h6 className="projectTile__title">Sterling File Gateway on AWS EKS</h6>
             <p3 className="projectTile__description">Installing IBM Sterling File Gateway (and other B2Bi Components) on Amazon EKS</p3>
@@ -105,8 +105,8 @@ export default function LandingPage() {
             </Tag>
           </ClickableTile>
         </Column>
-        <Column lg={4} md={2} sm={1}>
-          <ClickableTile className="projectTile" href={"https://ibm-client-engineering.github.io/solution-watsonx-assistant/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch} style={{ height: '400px' }}>
+        <Column lg={4} md={2} sm={1} className='project-col' style={{justifyContent: 'center', alignItems: 'center'}}>
+          <ClickableTile className="projectTile-home" href={"https://ibm-client-engineering.github.io/solution-watsonx-assistant/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch}>
             <WatsonHealthEdgeEnhancement_02 size={34} />
             <h6 className="projectTile__title">Customer Care Virtual Agents</h6>
             <p3 className="projectTile__description">Enhancing Customer Care Journeys Using IBM Watsonx Products</p3>
@@ -118,8 +118,8 @@ export default function LandingPage() {
             </Tag>
           </ClickableTile>
         </Column>
-        <Column lg={4} md={2} sm={1}>
-          <ClickableTile className="projectTile" href={"https://ibm-client-engineering.github.io/solution-processmining/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch} style={{ height: '400px' }}>
+        <Column lg={4} md={2} sm={1} className='project-col' style={{justifyContent: 'right', alignItems: 'right'}}>
+          <ClickableTile className="projectTile-home" href={"https://ibm-client-engineering.github.io/solution-processmining/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch}>
             <WatsonHealthEdgeEnhancement_03 size={34} />
             <h6 className="projectTile__title">Process Mining on Red Hat OpenShift</h6>
             <p3 className="projectTile__description">IBM Cloud Pak for Business Automation Process Mining on Red Hat OpenShift</p3>