Merge pull request #138 from inland-empire-software-development/landi…

…ng-page-115-jg

Landing page 115 jg

Merging after it was "reviewed" during the last meeting

pages/index.tsx

@@ -1,3 +1,4 @@
+
 import SEO from "../next-seo.config";
 import {DefaultSeo} from "next-seo";
 import Footer from '../src/components/global/Footer/Footer';

src/components/global/Navigation/Navigation.tsx

@@ -17,7 +17,7 @@ export interface ListObject {
 const identifyLink = (url: string) => url.indexOf(`${process.env.HOST}`);
 
 const renderLink = (obj: ListObject, opts: object) => {
-  const {url = undefined} = obj;
+  const { url = undefined } = obj;
   return identifyLink(url ? url : '') !== -1 ?
     <Link href={url ? url : ''}>
       <a {...opts}>{obj.label}</a>
@@ -28,8 +28,8 @@ const renderLink = (obj: ListObject, opts: object) => {
 };
 
 const createListItem = (
-    obj: ListObject,
-    mobile = false,
+  obj: ListObject,
+  mobile = false,
 ) => {
   const opts = {} as Options;
 
@@ -46,7 +46,7 @@ const createListItem = (
   }
 
   return (
-    <li key={ obj.label? obj.label.toLowerCase() : "'"}
+    <li key={obj.label ? obj.label.toLowerCase() : "'"}
       className={obj.children && mobile ?
         "uk-parent uk-visible-toggle uk-visible@m" : "uk-visible@m"}>
 
@@ -76,15 +76,15 @@ const createListObject = ({
   icon = false,
   children = false,
   target,
-}: ListObject) => ({label, url, icon, children, target});
+}: ListObject) => ({ label, url, icon, children, target });
 
 
 function Navigation(): JSX.Element {
   const navigation: Array<object> = [
-    {label: "Home", url: "/"},
-    {label: "Cohorts", url: "/cohorts"},
-    {label: "Blog", url: "https://www.iesd.com/#blog", target: "_blank"},
-    {label: "Contact", url: "mailto:[email protected]", target: "_blank"},
+    { label: "Home", url: "/" },
+    { label: "Cohorts", url: "/cohorts" },
+    { label: "Blog", url: "https://www.iesd.com/#blog", target: "_blank" },
+    { label: "Contact", url: "mailto:[email protected]", target: "_blank" },
   ].map((item) => createListObject(item));
 
   return (
@@ -107,14 +107,14 @@ function Navigation(): JSX.Element {
         </div>
 
         {/* Right portion for user  */}
-        <User isMobile={false}/>
+        <User isMobile={false} />
       </nav>
 
       <div id="offcanvas-nav" className="uk-offcanvas" uk-offcanvas="mode: push; flip: true">
         <div className="uk-offcanvas-bar bg-white">
           <ul className="uk-nav uk-nav-default">
             <li className="uk-active">
-              <User isMobile={true}/>
+              <User isMobile={true} />
             </li>
             {
               navigation.map((link) =>

src/components/landing/CourseProgramCard.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export interface CourseProgramProps {
+  id: string;
+  title: string;
+  contents: string[];
+  nextDay: string;
+  nextMonth: string;
+  classTimeString: string;
+}
+
+const CourseProgramCard: React.FC<CourseProgramProps & React.HTMLAttributes<HTMLDivElement>> = (props) => (
+  <div className="uk-card uk-card-default uk-card-body">
+    <div className="uk-grid-divider uk-grid-match" data-uk-grid>
+      <div className="uk-align-center uk-margin-remove uk-width-1-3@m">
+        <h4 className="primary course-program-date-header">{props.nextDay}</h4>
+        <h5 className="course-program-date">{props.nextMonth}</h5>
+        <p className="course-program-time">{props.classTimeString}</p>
+      </div>
+      <div className="uk-align-center uk-margin-remove uk-width-2-3@m">
+        <h4 className="black course-program-detail">{props.title}</h4>
+        <ul className="course-program-detail-list">
+          {props.contents.map((item, index) => (
+            <li key={index} className="light-gray">{item}</li>
+          ),
+          )}
+        </ul>
+      </div>
+    </div>
+  </div>
+);
+
+export default CourseProgramCard;

src/components/landing/Landing.scss

@@ -0,0 +1,268 @@
+$m-breakpoint: 960px;
+$l-breakpoint: 1200px;
+
+// 1440
+.landing-page {
+  padding: 0;
+  margin: 0;
+
+  //** Top image **//
+
+  .top-image {
+    width: 100%;
+    min-height: 300px;
+  }
+
+  //** Course-Info **//
+
+  // .course-info {}
+
+  .course-info-top {
+    font-size: 46px;
+    font-family: "Heavy", sans-serif;
+    line-height: 0.7;
+    margin: 0;
+  }
+
+  .course-info-mid {
+    font-size: 32px;
+    font-family: "Medium", sans-serif;
+    margin: 0;
+  }
+
+  .course-info-bottom {
+    font-size: 14px;
+    font-family: "Light", sans-serif;
+    margin: 0;
+    margin-top: 18px;
+  }
+
+  .course-info-section {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 24px;
+  }
+
+  .course-info-description {
+    padding: 0;
+
+    @media screen and (min-width: $m-breakpoint) {
+      transform: translate(0, -25%);
+      max-width: 1200px;
+    }
+
+    @media screen and (min-width: $l-breakpoint) {
+      transform: translate(0, -50%);
+      max-width: 1200px;
+    }
+  }
+
+  //** Course-Program **//
+  .course-program {
+    margin-top: 0;
+    margin-bottom: 48px;
+    max-width: 1200px;
+
+    @media screen and (max-width: ($m-breakpoint - 1px)) {
+      margin-top: 64px;
+      margin-bottom: 64px;
+    }
+  }
+
+  .course-program-description {
+    align-items: center;
+  }
+
+  .course-program-label {
+    @media screen and (max-width: $m-breakpoint - 1px) {
+      margin-left: 16px;
+      margin-right: 16px;
+    }
+  }
+
+  .course-program-card {
+    li {
+      cursor: pointer;
+    }
+
+    .uk-slider {
+      @media screen and (max-width: $m-breakpoint - 1px) {
+        margin-left: 16px;
+        margin-right: 16px;
+      }
+    }
+
+    .uk-dotnav > .uk-active > * {
+      background-color: $primary;
+    }
+  }
+
+  .course-program-header {
+    font-size: 32px;
+    font-family: "Black", sans-serif;
+  }
+
+  .course-program-header-detail {
+    font-size: 24px;
+    font-family: "Book", sans-serif;
+  }
+
+  .course-program-date-header {
+    font-size: 54px;
+    font-family: "Heavy", sans-serif;
+    margin: 0;
+  }
+
+  .course-program-date {
+    font-size: 46px;
+    font-family: "Book", sans-serif;
+    margin: 0 0 20px 0;
+    line-height: 0.7;
+  }
+
+  .course-program-time {
+    font-size: 12px;
+    font-family: "Light", sans-serif;
+    margin-top: 40px;
+  }
+
+  .course-program-detail {
+    font-size: 32px;
+    font-family: "Medium", sans-serif;
+    margin: 0 0 5px 0;
+    padding: 10px 10px 0 10px;
+  }
+
+  .course-program-detail-list {
+    font-size: 14px;
+    padding-left: 0;
+    margin: 0 0 10px 10px;
+  }
+
+  .course-program-detail-list > li {
+    font-family: "Light", sans-serif;
+    margin-bottom: 6px;
+    list-style-type: none;
+
+    &::before {
+      color: $primary;
+      content: "\2022";
+      font-size: 14px;
+      margin-right: 10px;
+    }
+  }
+
+  //** Student Quote **//
+
+  .student-quote {
+    font-size: 20px;
+    font-family: "Light", sans-serif;
+    max-width: 600px;
+  }
+
+  .student {
+    font-size: 16px;
+    font-family: "Light", sans-serif;
+  }
+
+  // ** Random Quote **//
+
+  // .random-quote-section {
+  //   // width: 100%;
+  // }
+
+  .random-quote {
+    font-size: 22px;
+    font-family: "Light", sans-serif;
+    max-width: 600px;
+  }
+
+  .random-author {
+    font-size: 22px;
+    font-family: "Light", sans-serif;
+    position: relative;
+    top: 65%;
+  }
+
+  //** Venue **//
+
+  .venue-body {
+    min-height: 300px;
+    padding-right: 48px;
+  }
+
+  .venue-title {
+    font-size: 48px;
+    font-family: "Black", sans-serif;
+  }
+
+  .venue-description {
+    font-size: 32px;
+    font-family: "Book", sans-serif;
+  }
+
+  .venue-image {
+    min-height: 300px;
+  }
+
+  .venue-street-address {
+    font-family: "Medium", sans-serif;
+    font-size: 32px;
+    text-align: left;
+    margin: 36px 0 0 0;
+  }
+
+  .venue-county-state {
+    font-family: "Medium", sans-serif;
+    font-size: 32px;
+    text-align: left;
+    margin: 0 0 0 0;
+  }
+
+  // ** Program ** //
+
+  .program-body {
+    min-height: 300px;
+    // padding-left: 48px;
+  }
+
+  .program-title {
+    font-size: 48px;
+    font-family: "Black", sans-serif;
+  }
+  // Help with alignment
+  .program-description {
+    font-size: 32px;
+    font-family: "Book", sans-serif;
+  }
+
+  .request-button {
+    font-size: 22px;
+    font-family: "Book", sans-serif;
+
+    &:hover {
+      background-color: $tertiary;
+    }
+  }
+
+  .program-image {
+    min-height: 300px;
+  }
+
+  .footer {
+    text-align: center;
+    text-align: -webkit-center;
+  }
+
+  .copywrite {
+    font-size: 10px;
+    margin: 20px 0 0 0;
+  }
+
+  .footer-description {
+    font-size: 10px;
+    margin: 0 0 20px 0;
+  }
+}