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

Added mission and contact us pages

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "^2.3.0",
     "@carbon/icons-react": "^11.36.0",
+    "@carbon/pictograms-react": "^11.69.0",
     "@carbon/react": "^1.50.0",
     "@octokit/core": "5.1.0",
     "next": "^14.1.0",

src/app/contact/contact.scss

@@ -0,0 +1,77 @@
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/breakpoint' as *;
+@use '@carbon/react/scss/theme' as *;
+
+
+.cds--content {
+    padding-top: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.contact__grid {
+    max-inline-size: 100%;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.contact_banner__row {
+    display: flex;
+    width: 100%;
+    height: 260px;
+    background-color: #F4F4F4;
+    margin-left: 0;
+    margin-right: 0;
+    vertical-align: middle;
+
+}
+
+.body__row {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    justify-content: center;
+}
+
+.title__column {
+    flex: 1 1 auto;
+    position: relative;
+}
+
+.banner-title {
+    @include type-style ('heading-06');
+    padding-top: 64px;
+    padding-left: 32px;
+}
+
+.assistant_img__container {
+    background-image: url("./assistant.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 50%;
+}
+
+.form__column {
+    margin-top: 5vh;
+    margin-left: 10vw;
+    margin-right: 10vw;
+    margin-bottom: 5vh;
+    max-width: 70%;
+    display: flex;
+}
+
+
+.monday__form {
+    border: 0;
+    justify-self: center;
+    //box-shadow: 5px 5px 56px 0px rgba(0,0,0,0.25);
+}
+
+.form-wrapper-component .form-content-component {
+    border-style: solid;
+    border-color: #E0E0E0;
+    border-width: 4px;
+    box-shadow: none;
+}

src/app/contact/page.js

@@ -0,0 +1,30 @@
+'use client';
+
+import React, { useState } from 'react';
+import './contact.scss';
+import {Row, Column, FlexGrid, TextInput, TextArea, Button} from '@carbon/react';
+
+
+const ContactUs = () => {
+
+  return (
+    <FlexGrid className="contact__grid">
+      <Row className='contact_banner__row'>
+        <Column className="title__column" lg={8}>
+          <p className="banner-title">Contact Us</p>
+        </Column>
+        <Column className='assistant_img__container' lg={8}>
+        </Column>
+
+      </Row>
+      <Row className="body__row" lg={10}>
+        <Column className='form__column' lg={6}>
+        <iframe src="https://forms.monday.com/forms/embed/4414a889642bf5258f8c63f7155748cb?r=use1" width="1400" height="1200" align="center" className="monday__form"></iframe>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
+
+export default ContactUs;
+

src/app/home/_landing-page.scss

@@ -3,6 +3,13 @@
 @use '@carbon/react/scss/breakpoint' as *;
 @use '@carbon/react/scss/theme' as *;
 
+.cds--content {
+  padding: 0;
+}
+
+.landing-page {
+  padding-top: 2rem;
+}
 
 .landing-page__banner {
     font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
@@ -25,6 +32,7 @@
 }
 .row-padding {
   padding-bottom: $spacing-07 * 2;
+  margin-inline: 0;
 }
 .clickable-tile-title {
   @include type-style ('heading-03');

src/app/home/page.js

@@ -2,7 +2,7 @@
 
 import { FlexGrid, Column, ClickableTile, Row, Tag } from '@carbon/react';
 import React from "react";
-import { Add, WatsonxAi, WorkflowAutomation, IbmSecurity, Data_1, CloudApp, ZSystems, Launch, WatsonHealthEdgeEnhancement_01, WatsonHealthEdgeEnhancement_02, WatsonHealthEdgeEnhancement_03 } from '@carbon/icons-react';
+import { Add, WatsonxAi, WorkflowAutomation, IbmSecurity, Data_1, CloudApp, ZSystems, Launch, WatsonHealthEdgeEnhancement_01, WatsonHealthEdgeEnhancement_02, WatsonHealthEdgeEnhancement_03, ArrowRight } from '@carbon/icons-react';
 import RecentProjectsTiles from "./RecentProjectsTiles";
 import data from "../../../repoData.json";
 import Link from 'next/link';
@@ -23,7 +23,7 @@ export default function LandingPage() {
         <Column lg={4} md={2} sm={1}>
           <ClickableTile
               className="clickable-tile-1"
-              renderIcon={Launch}
+              renderIcon={ArrowRight}
               style={{ height: '240px' }}
               href="/ce-solutions-hub/projects?topic=generative-ai"
             >
@@ -32,7 +32,7 @@ export default function LandingPage() {
               <h4 className="clickable-tile-title">Generative AI</h4>
               <p1 className="clickable-tile-description">Easily deploy and embed AI across your business, manage all data sources, and accelerate responsible AI workflows—all on one platform</p1>
           </ClickableTile>
-          <ClickableTile className="clickable-tile-2" renderIcon={Launch} style={{ height: '240px' }}
+          <ClickableTile className="clickable-tile-2" renderIcon={ArrowRight} style={{ height: '240px' }}
             href="/ce-solutions-hub/projects">
             <IbmSecurity size={32} />
             <br /><br /><br /><br />
@@ -41,15 +41,15 @@ export default function LandingPage() {
           </ClickableTile>
         </Column>
         <Column lg={4} md={2} sm={1}>
-          <ClickableTile className="clickable-tile-3" renderIcon={Launch} style={{ height: '240px' }}
+          <ClickableTile className="clickable-tile-3" renderIcon={ArrowRight} style={{ height: '240px' }}
             href="/ce-solutions-hub/projects?topic=data"
             >
             <Data_1 size={32} />
             <br /><br /><br /><br />
             <h4 className="clickable-tile-title">Data</h4>
             <p1 className="clickable-tile-description">Predict outcomes faster using a platform built with data fabric architecture. Collect, organize and analyze data, no matter where it resides</p1>
           </ClickableTile>
-          <ClickableTile className="clickable-tile-4" renderIcon={Launch} style={{ height: '240px' }}
+          <ClickableTile className="clickable-tile-4" renderIcon={ArrowRight} style={{ height: '240px' }}
             href="/ce-solutions-hub/projects"
             >
             <WorkflowAutomation size={32} />
@@ -59,14 +59,14 @@ export default function LandingPage() {
           </ClickableTile>
         </Column>
         <Column lg={4} md={2} sm={1}>
-          <ClickableTile className="clickable-tile-5" renderIcon={Launch} style={{ height: '240px' }}
+          <ClickableTile className="clickable-tile-5" renderIcon={ArrowRight} style={{ height: '240px' }}
             href="/ce-solutions-hub/projects">
             <CloudApp size={32} />
             <br /><br /><br /><br />
             <h4 className="clickable-tile-title">Hybrid Cloud</h4>
             <p1 className="clickable-tile-description">Hybrid cloud allows for the seamless integration of platforms, applications, and infrastructure built on public cloud, private cloud and on-prem</p1>
           </ClickableTile>
-          <ClickableTile className="clickable-tile-6" renderIcon={Launch} style={{ height: '240px' }}
+          <ClickableTile className="clickable-tile-6" renderIcon={ArrowRight} style={{ height: '240px' }}
             href="/ce-solutions-hub/projects">
             <ZSystems size={32} />
             <br /><br /><br /><br />

src/app/mission/mission.scss

@@ -3,39 +3,86 @@
 @use '@carbon/react/scss/breakpoint' as *;
 @use '@carbon/react/scss/theme' as *;
 
-.mission-page {
-  padding: 20px;
-  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-  max-width: 60%; 
-  margin-left: 20px; 
+.cds--content {
+  padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.mission-page h1 {
-  font-size: 2.5em;
-  margin-bottom: 20px;
+.mission__grid {
+  max-inline-size: 100%;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.mission-page p {
-  font-size: 1.2em;
-  line-height: 1.6;
-  margin-bottom: 20px;
-  max-width: 80%;
+.mission_banner__row {
+    display: flex;
+    width: 100%;
+    height: 260px;
+    background-color: #F4F4F4;
+    margin-left: 0;
+    margin-right: 0;
+    vertical-align: middle;
 }
 
-.mission-page a {
-  color: blue;
-  text-decoration: none;
-  font-size: 1.2em;
+.body__row {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    justify-content: center;
+    @include type-style ('heading-03');
+    padding-top: 32px;
 }
 
-.image-container {
-  margin-top: 15px;
-  text-align: left;
+.title__column {
+    flex: 1 1 auto;
+    position: relative;
 }
 
-.image-container img {
-  max-width: 80%;
-  height: auto;
+.banner-title {
+  @include type-style ('heading-06');
+  padding-top: 64px;
+  padding-left: 32px;
+  padding-bottom: 16px;
 }
 
-
+.banner-subtitle {
+  @include type-style ('heading-03');
+  padding-left: 32px;
+}
+
+.mission_img__container {
+  background-image: url("./mission.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  size: 200%;
+}
+
+.body__column {
+  margin-top: 5vh;
+  margin-left: 10vw;
+  margin-right: 10vw;
+  max-width: 60%;
+}
+
+.pillar__column {
+  width: 50%;
+  display: inline-block;
+  vertical-align: top;
+  @include type-style ('heading-03');
+  padding-bottom: 15%;
+}
+
+.pictogram {
+  fill: #078205;
+  stroke: #078205;
+  stroke-width: .25;
+  height: 64px;
+  width: 64px;
+  margin-bottom: 36px;
+}
+
+.pillar__column__list {
+  @include type-style ('heading-03');
+}