{"size": 2539, "ext": "js", "max_stars_repo_path": "src/components/Footer.js", "max_stars_repo_name": "Danielx00/travel-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Footer.js", "max_issues_repo_name": "Danielx00/travel-app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Footer.js", "max_forks_repo_name": "Danielx00/travel-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.597826087, "max_line_length": 85, "alphanum_fraction": 0.5951161875}
import React from 'react'
import styled from 'styled-components'
import {Link} from 'gatsby'
const Footer = () => {
    return (
        <FooterContainer>
            <FooterLinksWrapper>
                <FooterDesc>
                    <h1>Explorix</h1>
                    <p>We strive to create the best experiences for our customers</p>
                </FooterDesc>
                <FooterLinkItems>
                <FooterLinkTitle>Contact Us</FooterLinkTitle>
                <FooterLink to="/">Contact</FooterLink>
                <FooterLink to="/">Support</FooterLink>
                <FooterLink to="/">Destinations</FooterLink>
                <FooterLink to="/">Sponsors</FooterLink>
                </FooterLinkItems>
            </FooterLinksWrapper>
            <FooterLinksWrapper>
            <FooterLinkItems>
                <FooterLinkTitle>Videos</FooterLinkTitle>
                <FooterLink to="/">Submit Video</FooterLink>
                <FooterLink to="/">Ambasadors</FooterLink>
                <FooterLink to="/">Agency</FooterLink>
                <FooterLink to="/">Influencer</FooterLink>
                </FooterLinkItems>
                <FooterLinkItems>
                <FooterLinkTitle>Social Media</FooterLinkTitle>
                <FooterLink to="/">Instagram</FooterLink>
                <FooterLink to="/">Facebook</FooterLink>
                <FooterLink to="/">Youtube</FooterLink>
                <FooterLink to="/">Twitter</FooterLink>
                </FooterLinkItems>

            </FooterLinksWrapper>
        </FooterContainer>
    )
}

export default Footer

const FooterContainer = styled.div`
padding: 5rem calc((100vw - 1100px) /2);
display: grid;
grid-template-columns: repeat(2, 1fr);
color: #000;
background: #fafafb;
`
const FooterDesc = styled.div`
padding: 0 2rem;
h1 {
    margin-bottom: 3rem;
    color: #f26a2e;
}
@media screen and (max-width: 400px) {
    padding: 1rem;
}
`
const FooterLinksWrapper = styled.div`
display: grid;
grid-template-columns: repeat(2, 1fr);
@media screen and (max-width: 820px) {
    grid-template-columns:1fr;
    }
`
const FooterLinkItems = styled.div`
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 2rem;

@media screen and (max-width: 400px){
    padding: 1rem;
}
`
const FooterLinkTitle = styled.h2`
font-size:14px;
margin-bottom: 16px;
`
const FooterLink = styled(Link)`
text-decoration: none;
margin-bottom: 0.5rem;
font-size: 14px;
color: #3d3d43;

&:hover {
    color: #f26a2e;
    transition: .3s ease-out;
}
`
