{"size": 1292, "ext": "js", "max_stars_repo_path": "frontend/src/pages/LandingPage.js", "max_stars_repo_name": "andyrutherford/sweet-and-sour", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "frontend/src/pages/LandingPage.js", "max_issues_repo_name": "andyrutherford/sweet-and-sour", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/src/pages/LandingPage.js", "max_forks_repo_name": "andyrutherford/sweet-and-sour", "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": 23.0714285714, "max_line_length": 79, "alphanum_fraction": 0.5921052632}
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

import bg from '../assets/img/landing.jpg';

const LandingPageWrapper = styled.div`
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(${bg});
  background-size: cover;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 clamp(5%, 5vw, 10%);
  padding-top: 30vh;

  h1 {
    font-size: clamp(3em, 5vw, 5.5em);
    color: #fff;
  }

  h3 {
    color: #fff;
    font-size: clamp(1em, 2vw, 2em);
    margin: 0 10vw;
  }
`;

const LandingPage = () => {
  return (
    <LandingPageWrapper>
      <h1 className='mb-4'>Sweet and Sour</h1>
      <h3>
        Discover desserts, cakes, and sweets from around the world, one bite at
        a time.
      </h3>
      <div className='my-3'>
        <Link className='btn btn-primary my-3' to='/'>
          Browse <i className='fas fa-angle-right'></i>
        </Link>{' '}
        <Link className='btn btn-outline-secondary my-3' to='/login'>
          Log in <i className='fas fa-sign-in-alt'></i>
        </Link>
      </div>
    </LandingPageWrapper>
  );
};

export default LandingPage;
