Merge pull request #3 from DesignSystemsOSS/development

Careers, Products views added

src/App.js

@@ -1,7 +1,11 @@
 import { BrowserRouter, Route } from "react-router-dom";
+// import Footer from "./components/section-components/Footer";
 import Header from "./components/section-components/Header";
 import './styles/index.css';
+import Careers from "./views/Careers";
 import LandingPage from "./views/LandingPage";
+import Products from "./views/Products";
+import Team from "./views/Team";
 
 function App() {
   return (
@@ -10,7 +14,12 @@ function App() {
       <Header />
       <BrowserRouter>
         <Route path="/" exact component={LandingPage} />
+        <Route path="/team" exact component={Team} />
+        <Route path="/products" exact component={Products} />
+        <Route path="/careers" exact component={Careers} />
       </BrowserRouter>
+      {/* footer component */}
+      {/* <Footer /> */}
     </div>
   );
 }

src/components/section-components/Footer/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './style.footer.css';
+
+export default function Footer() {
+  return (
+    <div className="footer">
+      {/* <div className="logo-wrapper">
+        <h1 className="demo-logo-icon">DS</h1>
+        <p className="logo-title">The DesignSystems</p>
+      </div>
+      <div className="footer-col-1">
+        <div className="useful-links-section">
+          <p className="useful-links-title links-title">Useful links</p>
+          <ul className="useful-links-list">
+            <li className="useful-link-item"></li>
+          </ul>
+        </div>
+      </div> */}
+    </div>
+  )
+}

src/components/section-components/Footer/style.footer.css

@@ -0,0 +1 @@
+/* No CSS *//*# sourceMappingURL=style.footer.css.map */

src/components/section-components/Footer/style.footer.scss

@@ -0,0 +1,15 @@
+div.footer {
+  // border-top: 1.2px solid #ffffff33;
+  // margin-top: 6em;
+  // padding-top: 6em;
+  // display: grid;
+  // grid-template-columns: auto auto auto;
+  // > div.logo-wrapper {
+  //   display: flex;
+  //   align-items: center;
+  //   gap: 14px;
+  //   > p.logo-title {
+  //     font-weight: 500;
+  //   }
+  // }
+}

src/components/section-components/Header/index.js

@@ -7,10 +7,12 @@ export default function Header() {
   const [headerOptions] = useState(HeaderOptions);
   return (
     <header className="header">
-      <div className="logo-wrapper">
-        <h1 className="demo-logo-icon">DS</h1>
-        <p className="logo-title">The DesignSystems</p>
-      </div>
+      <a href="/" className="logo-wrapper-link">
+        <div className="logo-wrapper">
+          <h1 className="demo-logo-icon">DS</h1>
+          <p className="logo-title">The DesignSystems</p>
+        </div>
+      </a>
       <div className="header-options-wrapper">
         <ul className="header-options-list">
           {headerOptions.map((data, index) => {
@@ -22,8 +24,7 @@ export default function Header() {
           })}
         </ul>
         <div className="account-cta-buttons-wrapper">
-          <Button type="outline" value="Login" />
-          <Button type="primary" value="Create an account" />
+          <Button type="primary" value="Contact Us" />
         </div>
       </div>
     </header>

src/components/section-components/Header/style.header.scss

@@ -3,12 +3,14 @@ header.header {
   align-items: center;
   justify-content: space-between;
   margin-top: 3.4em;
-  > div.logo-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    > p.logo-title {
-      font-weight: 500;
+  > a.logo-wrapper-link {
+    > div.logo-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      > p.logo-title {
+        font-weight: 500;
+      }
     }
   }
   > div.header-options-wrapper {

src/components/widgets/Button/button-styles/style.widgets.button-styles.scss

@@ -12,6 +12,9 @@ button.button {
   &:hover {
     cursor: pointer;
   }
+  &:focus {
+    outline: none;
+  }
 }
 
 button.button {

src/components/widgets/Cards/CareerOpeningCard/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Button from '../../Button';
+import './style.widgets.cards.career-opening-card.css';
+
+export default function CareerOpeningCard(__CareerOpeningCardDetails) {
+  return (
+    <div className="career-opening-card">
+      <h3 className="career-role-title">{__CareerOpeningCardDetails.RoleTitle}</h3>
+      <p className="career-role-description">{__CareerOpeningCardDetails.RoleDescription}</p>
+      <Button type="primary" value="Apply for this role" onClick={() => window.open(__CareerOpeningCardDetails.RegistrationFormURL)} />
+    </div>
+  )
+}

src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.scss

@@ -0,0 +1,19 @@
+div.career-opening-card {
+  width: 360px;
+  margin: auto;
+  padding: 2.4em 1.2em;
+  background-color: #ffffff;
+  border-radius: 6px;
+  color: black;
+  transition: 0.2s ease-in-out;
+  &:hover {
+    cursor: pointer;
+    background-color: #fefefe;
+    transform: translateY(-2px);
+  }
+  > p.career-role-description {
+    max-width: 40ch;
+    margin-top: 0.6em;
+    margin-bottom: 1.4em;
+  }
+}

src/components/widgets/Cards/ProductCard/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Button from '../../Button';
+import './style.widgets.cards.product-card.css';
+
+export default function ProductCard(__ProductCardProperties) {
+  return (
+    <div className="product-card">
+      <div className="product-details-wrapper">
+        <h4 className="product-name">{__ProductCardProperties.ProductName}</h4>
+        <p className="product-description">{__ProductCardProperties.ProductDescription}</p>
+      </div>
+      <div className="product-cta-button-wrapper">
+        <a href={__ProductCardProperties.GitHubURL} className="check-github-url"><i className="fab fa-github"></i> Check GitHub</a>
+        <Button type="primary" value="Get Started" onClick={() => window.open(__ProductCardProperties.GetStartedURL)} />
+      </div>
+    </div>
+  )
+}

src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.scss

@@ -0,0 +1,36 @@
+div.product-card {
+  width: 90%;
+  border-radius: 8px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 2.4em;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  justify-content: space-between;
+  color: black;
+  background-color: white;
+  border: 1.2px solid #f2f2f2;
+  box-shadow: 0 8px 32px 0 rgba(31, 135, 95, 0.250);
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0px 4px 12px 0 rgba(31, 135, 95, 0.500);
+  }
+  > div.product-details-wrapper {
+    width: 80%;
+    > p.product-description {
+      max-width: 70ch;
+    }
+  }
+  > div.product-cta-button-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 36px;
+    > a.check-github-url {
+      color: black;
+      font-weight: 600;
+    }
+  }
+}