#57 solutions page

Scout-NU · May 3, 2021 · accf78c · accf78c
1 parent b38f2c5
commit accf78c
Show file tree

Hide file tree

Showing 8 changed files with 429 additions and 28 deletions.
diff --git a/src/components/contact/contact-styles.js b/src/components/contact/contact-styles.js
@@ -0,0 +1,114 @@
+import styled from "styled-components"
+import colors from "../../style/colors"
+import dimensions from "../../style/dimensions"
+
+import { fontSizes } from "../../style/type-styles"
+import {
+  layoutPaddingDesktop,
+  layoutPaddingMobile,
+} from "../../style/variables"
+export const ContactContainer = styled.div`
+  min-height: 100vh;
+`
+
+export const ContactForm = styled.div`
+  padding-top: 172px;
+  width: 100%;
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    width: 36vw;
+
+  }
+  color: ${colors.blue900};
+  input {
+    border-width: 0 0 2px;
+    border-color: ${colors.input_gray};
+    width: 100%;
+    margin-bottom: 32px;
+  }
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    input {
+      border-width: 0 0 2px;
+      border-color: ${colors.input_gray};
+      width: 36vw;
+      margin-bottom: 32px;
+    }
+  }
+  input::placeholder {
+    font-size: ${fontSizes.body};
+    color: ${colors.input_gray};
+  }
+`
+
+export const ContactSection = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    justify-content: space-between;
+  }
+`
+export const ContactDescription = styled.div`
+  margin-bottom: 64px;
+`
+export const ContactButton = styled.button`
+  font-size: 16px;
+  padding-right: 60px;
+  padding-left: 60px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  background-color: ${colors.orange900};
+  text-transform: uppercase;
+  color: ${colors.white900};
+
+  border: none;
+`
+
+export const ContactImageSection = styled.div`
+  margin-right: -${layoutPaddingDesktop};
+  img {
+    margin-top: 172px;
+    right: 0px;
+    width: 50vw;
+    height: 531px;
+    object-fit: cover;
+  }
+
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    margin-right: -${layoutPaddingMobile};
+
+    img {
+      margin-top: 172px;
+      right: 0px;
+      width: 100%;
+      height: 263px;
+      object-fit: cover;
+    }
+
+  }
+
+`
+
+export const SpecificContactInfo = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    justify-content: space-apart;
+  }
+`
+
+export const EmailSection = styled.div`
+  margin-right: 127px;
+  margin-top: 64px;
+  color: ${colors.blue900};
+`
+
+export const AddressSection = styled.div`
+  margin-top: 64px;
+  color: ${colors.blue900};
+  width: 228px;
+  margin-bottom: 110px;
+`
+
+export const UseCaseSection = styled.div`
+
+
+`
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -44,7 +44,7 @@ export const Header = ({ home }) => {
         <NavLink href="/products">
           <NavText>PRODUCTS</NavText>
         </NavLink>
-        <NavLink href="/UseCases">
+        <NavLink href="/solutions">
           <NavText>SOLUTIONS</NavText>
         </NavLink>
       </NavLinks>

diff --git a/src/components/solutions/solutions-styles.js b/src/components/solutions/solutions-styles.js
@@ -0,0 +1,154 @@
+import styled from "styled-components"
+import colors from "../../style/colors"
+import dimensions from "../../style/dimensions"
+import {
+  layoutPaddingDesktop,
+  layoutPaddingMobile,
+} from "../../style/variables"
+
+export const SolutionsContainer = styled.div``
+
+export const TaglineSection = styled.div``
+
+export const TaglineHeader = styled.div`
+  color: ${colors.blue900};
+`
+export const TaglineDescription = styled.div`
+  color: ${colors.blue900};
+`
+
+export const TaglineImage = styled.div`
+  img {
+    width: 100%;
+    height: 464px;
+    object-fit: cover;
+    margin-bottom: 28px;
+    margin-top: 141px;
+  }
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    img {
+      position: absolute;
+      right: 0;
+      top: 127px;
+      width: 56vw;
+      height: 464px;
+      object-fit: cover;
+      margin-top: 0px;
+    }
+  }
+`
+
+export const TaglineText = styled.div`
+  width: 100%;
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    padding-top: 180px;
+    width: 35vw;
+  }
+`
+
+export const UseCaseSection = styled.div`
+  margin-top: 98px;
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    margin-top: 286px;
+  }
+`
+
+export const UseCaseCard = styled.div`
+  margin-bottom: 80px;
+  width: 100%;
+  a {
+    text-decoration: none;
+    color: ${colors.blue900};
+  }
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    width: 25vw;
+  }
+`
+
+export const UseCaseCTA = styled.div`
+margin-top: 50px;
+a {
+    padding-right: 60px;
+    padding-left: 60px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    border: solid ${colors.orange900}; 1px;
+    font-size: 16px;
+    font-weight: bold;
+    text-decoration: none;
+    text-transform: uppercase;
+    color: ${colors.orange900};
+  }
+
+`
+export const UseCaseCards = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+    justify-content: space-between;
+  }
+`
+
+export const ModelsCTA = styled.div`
+  margin-top: 160px;
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+  }
+`
+
+export const ModelCTAContent = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+  }
+`
+
+export const ModelCTAImage = styled.div`
+  img {
+    width: 100%;
+    height: 464px;
+    object-fit: cover;
+  }
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    img {
+      width: 45vw;
+      height: 464px;
+      object-fit: cover;
+      margin-left: -${layoutPaddingDesktop};
+    }
+  }
+`
+
+export const ModelCTAText = styled.div`
+  margin-bottom: 116px;
+  margin-top: 116px;
+
+  color: ${colors.blue900};
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    margin-left: 76px;
+    margin-top: 72px;
+    margin-bottom: 0px;
+  }
+`
+
+export const ModelsButton = styled.div`
+  margin-top: 42px;
+
+  a {
+    background-color: ${colors.orange900};
+    text-transform: uppercase;
+    color: ${colors.white900};
+    padding-left: 48px;
+    font-size: 16px;
+    padding-right: 48px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    text-decoration: none;
+  }
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    margin-top: 0px;
+  }
+`
diff --git a/src/components/solutions/solutions.js b/src/components/solutions/solutions.js
@@ -0,0 +1,94 @@
+import React from "react"
+import { H1, P, H2, H3, Body } from "../../style/type-styles"
+import TreeIcon from "../../vectors/renewable-tree-icon.svg"
+import SunIcon from "../../vectors/sun-icon.svg"
+import { Helmet } from "react-helmet"
+import {
+  SolutionsContainer,
+  TaglineSection,
+  TaglineHeader,
+  TaglineDescription,
+  TaglineImage,
+  TaglineText,
+  UseCaseSection,
+  UseCaseCard,
+  UseCaseCards,
+  UseCaseCTA,
+  ModelsCTA,
+  ModelCTAContent,
+  ModelCTAImage,
+  ModelCTAText,
+  ModelsButton,
+} from "./solutions-styles"
+import PurchaseIcon from "../../vectors/solar-panel.svg"
+export default function Solutions({ data }) {
+  return (
+    <>
+      <SolutionsContainer>
+        <TaglineSection>
+          <TaglineImage>
+            <img src={data.prismicUseCasesPage.data.tagline_image.url} />
+          </TaglineImage>
+
+          <TaglineText>
+            <SunIcon />
+            <TaglineHeader>
+              <H2>{data.prismicUseCasesPage.data.tagline_heading}</H2>
+            </TaglineHeader>
+            <TaglineDescription>
+              <Body>{data.prismicUseCasesPage.data.tagline_description}</Body>
+            </TaglineDescription>
+          </TaglineText>
+        </TaglineSection>
+
+        <UseCaseSection>
+          <UseCaseCards>
+            {data.prismicUseCasesPage.data.use_cases.map((use_case, idx) => {
+              return (
+                <UseCaseCard key={idx}>
+                  <a href={use_case.use_case.document.uid}>
+                    <img
+                      alt={use_case.use_case.document.data.preview_title}
+                      src={use_case.use_case.document.data.preview_image.url}
+                    />
+                    <H3>{use_case.use_case.document.data.preview_title}</H3>
+                    <Body>
+                      {use_case.use_case.document.data.preview_description}
+                    </Body>
+
+                    <UseCaseCTA>
+                      <a href={use_case.use_case.document.uid}>Learn More</a>
+                    </UseCaseCTA>
+                  </a>
+                </UseCaseCard>
+              )
+            })}
+          </UseCaseCards>
+        </UseCaseSection>
+
+        <ModelsCTA>
+          <ModelCTAContent>
+            <ModelCTAImage>
+              <img src={data.prismicUseCasesPage.data.cta_image.url} />
+            </ModelCTAImage>
+
+            <ModelCTAText>
+              <PurchaseIcon />
+              <H2>{data.prismicUseCasesPage.data.call_to_action_heading}</H2>
+
+              <ModelsButton>
+                <a
+                  href={
+                    data.prismicUseCasesPage.data.cta_button_destination.url
+                  }
+                >
+                  {data.prismicUseCasesPage.data.cta_button_text}
+                </a>
+              </ModelsButton>
+            </ModelCTAText>
+          </ModelCTAContent>
+        </ModelsCTA>
+      </SolutionsContainer>
+    </>
+  )
+}
diff --git a/src/pages/process.js b/src/pages/process.js
@@ -18,7 +18,6 @@ export const query = graphql`
       data {
         find_button_destination
         find_button_text
-        find_description
         find_header
         header_image {
           url
@@ -27,9 +26,6 @@ export const query = graphql`
             height
           }
         }
-        how_description {
-          text
-        }
         how_header
         how_images {
           how_image {