Skip to content

Commit

Permalink
Merge branch 'master' into #49-homepage-solar-section
Browse files Browse the repository at this point in the history
  • Loading branch information
samgildea committed Apr 17, 2021
2 parents 4d557be + 760bc5b commit f80120c
Show file tree
Hide file tree
Showing 11 changed files with 2,312 additions and 251 deletions.
2,118 changes: 1,976 additions & 142 deletions package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,15 @@
"dependencies": {
"@walltowall/gatsby-source-prismic-schemas": "^1.1.0",
"gatsby": "^2.26.1",
"gatsby-background-image": "^1.5.0",
"gatsby-plugin-exclude": "^1.0.2",
"gatsby-plugin-netlify-headers": "^1.0.1",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sass": "^4.0.2",
"gatsby-source-prismic": "^3.3.3",
"install": "^0.13.0",
"node-sass": "^5.0.0",
"npm": "^7.9.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0",
Expand Down
128 changes: 118 additions & 10 deletions src/components/footer/footer-styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import styled from "styled-components"
import dimensions from "../../style/dimensions"
import colors from "../../style/colors"
import {
layoutPaddingDesktop,
layoutPaddingMobile,
} from "../../style/variables"

export const FooterContainer = styled.div`
background-color: #848484;
background-color: ${colors.black_overlay};
width: 100%;
color: #ffffff;
position: relative;
color: ${colors.white900};
position: absolute;
`

export const FooterMainContent = styled.div`
Expand All @@ -16,6 +22,8 @@ export const FooterMainContent = styled.div`
export const SocialSection = styled.div`
padding-left: 80px;
padding-top: 50px;
@media (max-width: ${dimensions.maxwidthTablet}px) {
padding-left: 32px;
}
Expand All @@ -29,12 +37,15 @@ export const FooterHeader = styled.div`
export const SocialIcons = styled.div`
display: flex;
padding-top: 15px;
img {
padding-right: 16px;
}
`

export const SocialPlaceholder = styled.div`
width: 24px;
height: 24px;
background-color: #a4a4a4;
background-color: ${colors.gray_icon};
border-radius: 8px;
margin-right: 16px;
`
Expand Down Expand Up @@ -62,7 +73,7 @@ export const LinkSection = styled.div`
a {
text-decoration: none;
color: #ffffff;
color: ${colors.white900};
}
ul {
Expand All @@ -85,15 +96,15 @@ export const EmailSection = styled.div`
width: 20vw;
height: 36px;
margin-top: 10px;
border: solid #626262 1px;
border: solid ${colors.blue900} 1px;
}
@media (max-width: ${dimensions.maxwidthTablet}px) {
input {
width: 80%;
height: 36px;
margin-top: 10px;
border: solid #626262 1px;
border: solid ${colors.blue900} 1px;
}
}
Expand Down Expand Up @@ -141,10 +152,107 @@ export const AddressSection = styled.div`
padding-top: 16px;
`
export const ScoutSection = styled.div`
margin-top: 32px;
color: #ffffff;
margin-top: 65px;
color: ${colors.white900};
@media (max-width: ${dimensions.maxwidthTablet}px) {
padding-bottom: 48px;
}
`
`

export const FooterSection = styled.div`
position: relative;
`

export const SockContainer = styled.div`
z-index: 1;
position: relative;
`

export const SockContent = styled.div`
padding-left: ${layoutPaddingDesktop};
padding-right: ${layoutPaddingDesktop};
padding-top: 89px;
margin-bottom: 91px;
@media (max-width: ${dimensions.maxwidthTablet}px) {
padding-left: ${layoutPaddingMobile};
padding-right: ${layoutPaddingMobile};
}
`

export const ConnectTitle = styled.div`
color: ${colors.blue900};
`

export const SockEmailForm = styled.form`
margin-top: 32px;
margin-bottom: 32px;
input[type="text"] {
padding-top: 32px;
background: transparent;
border: none;
width: 36vw;
border-bottom: 4px solid ${colors.blue900};
}
input[type="text"]::placeholder {
color: ${colors.blue900};
}
@media (max-width: ${dimensions.maxwidthTablet}px) {
input[type="text"] {
padding-top: 32px;
background: transparent;
border: none;
width: 100%;
border-bottom: 4px solid ${colors.blue900};
}
}
input[type="text"],
select {
font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1440 - 320)));
color: ${colors.blue900};
}
`

export const SockDescription = styled.div`
width: 36vw;
margin-bottom: 48px;
@media (max-width: ${dimensions.maxwidthTablet}px) {
width: 100%;
}
`

export const SockCTA = styled.a`
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};
`
export const FooterImage = styled.div`
position: absolute;
z-index: 0;
height: 768px;
@media (max-width: ${dimensions.maxwidthTablet}px) {
height: 1080px;
}
img {
width: 100vw;
object-fit: cover;
height: 100%;
}
`
160 changes: 101 additions & 59 deletions src/components/footer/footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,21 @@ import {
SocialSection,
FooterHeader,
SocialIcons,
SocialPlaceholder,
LinkSection,
LinkColumn,
EmailSection,
AddressSection,
ScoutSection,
FooterSection,
SockContainer,
SockContent,
ConnectTitle,
SockEmailForm,
SockDescription,
SockCTA,
FooterImage,
} from "./footer-styles"
import { Sub1, Body } from "../../style/type-styles"

export default function footer({ data }) {
return (
Expand All @@ -22,8 +30,17 @@ export default function footer({ data }) {
query prismicFooter {
prismicFooter {
data {
powerhouse_title
sock_description
sock_title
address
footer_image_alt
footer_image {
url
}
email
social_media {
social_type
social_icon {
url
}
Expand All @@ -34,68 +51,93 @@ export default function footer({ data }) {
}
`}
render={data => (
<FooterContainer>
<FooterMainContent>
<SocialSection>
<FooterHeader>Powerhouse</FooterHeader>
<AddressSection>
123 Lorem Ipsum Dolor Tempor Incididunt YZ, 12345 123-456-7890
</AddressSection>
</SocialSection>
<FooterSection>
<FooterImage>
<img
alt={data.prismicFooter.data.footer_image_alt}
src={data.prismicFooter.data.footer_image.url}
/>
</FooterImage>
<SockContainer>
<SockContent>
<ConnectTitle>
<Sub1>
<label>{data.prismicFooter.data.sock_title}</label>
</Sub1>
<SockEmailForm>
<input type="text" placeholder="Enter your email" />
</SockEmailForm>
<SockDescription>
<Body>{data.prismicFooter.data.sock_description}</Body>
</SockDescription>

<SockCTA role="button" type="submit">
Sign Up
</SockCTA>
</ConnectTitle>
</SockContent>
</SockContainer>

<FooterContainer>
<FooterMainContent>
<SocialSection>
<FooterHeader>
{data.prismicFooter.data.powerhouse_title}
</FooterHeader>
<AddressSection>
{data.prismicFooter.data.address}{" "}
</AddressSection>
</SocialSection>

<LinkSection>
<LinkColumn>
<ul>
<li>
<a href="/about">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/about">Process</a>
</li>
</ul>
</LinkColumn>
<LinkSection>
<LinkColumn>
<ul>
<li>
<a href="/about">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/about">Process</a>
</li>
</ul>
</LinkColumn>

<LinkColumn>
<ul>
<li>
<a href="/about">Products</a>
</li>
<li>
<a href="/about">Solutions</a>
</li>
<li>
<a href="/about">FAQ</a>
</li>
</ul>
</LinkColumn>
</LinkSection>
<LinkColumn>
<ul>
<li>
<a href="/about">Products</a>
</li>
<li>
<a href="/about">Solutions</a>
</li>
<li>
<a href="/about">FAQ</a>
</li>
</ul>
</LinkColumn>
</LinkSection>

<EmailSection>
<form>
<input
type="text"
placeholder="your@email.com"
name="email"
required
/>
</form>
<SocialIcons>
{data.prismicFooter.data.social_media.map(social => {
return (
<a href={social.social_link}>
<SocialPlaceholder />
</a>
)
})}
</SocialIcons>
<EmailSection>
<SocialIcons>
{data.prismicFooter.data.social_media.map((social, idx) => {
return (
<a key={idx} href={social.social_link}>
<img
alt={social.social_type}
src={social.social_icon.url}
/>
</a>
)
})}
</SocialIcons>

<ScoutSection>Made with love by Scout</ScoutSection>
</EmailSection>
</FooterMainContent>
</FooterContainer>
<ScoutSection>Made with love by Scout</ScoutSection>
</EmailSection>
</FooterMainContent>
</FooterContainer>
</FooterSection>
)}
/>
)
Expand Down
Loading

0 comments on commit f80120c

Please sign in to comment.