<file_sep>import React from 'react';
import styled from 'styled-components';
import Img from 'gatsby-image';
import { Link, useStaticQuery, graphql } from 'gatsby';

const LogoWrap = styled.div`
  ${(props) => (props.footer === 'true' ? '' : 'margin: auto 0')};
  ${(props) => (props.footer === 'true' ? '' : 'flex: 0 0 207px')};

  @media (max-width: 860px) {
    flex: 0 0 150px;
  }
`;
export default function Logo({ footer }) {
  const data = useStaticQuery(graphql`
    query {
      file(name: { eq: "logo" }, extension: { eq: "png" }) {
        childImageSharp {
          fluid(quality: 100, maxWidth: 207) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `);

  return (
    <LogoWrap as={Link} to="/" footer={footer}>
      <Img fluid={data.file.childImageSharp.fluid} alt="logo" />
    </LogoWrap>
  );
}
<file_sep>import { createGlobalStyle } from 'styled-components';

import latoBlackwoff2 from '../assets/fonts/lato-black-webfont.woff2';
import latoBlackwoff from '../assets/fonts/lato-black-webfont.woff';
import latoBoldwoff2 from '../assets/fonts/lato-bold-webfont.woff2';
import latoBoldwoff from '../assets/fonts/lato-bold-webfont.woff';
import latoLightwoff2 from '../assets/fonts/lato-light-webfont.woff2';
import latoLightwoff from '../assets/fonts/lato-light-webfont.woff';
import latoRegularwoff2 from '../assets/fonts/lato-regular-webfont.woff2';
import latoRegularwoff from '../assets/fonts/lato-regular-webfont.woff';

const Typography = createGlobalStyle`
@font-face {
    font-family: 'latoblack';
    src: url(${latoBlackwoff2}) format('woff2'),
         url(${latoBlackwoff}) format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'latobold';
    src: url(${latoBoldwoff2}) format('woff2'),
         url(${latoBoldwoff}) format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'latolight';
    src: url(${latoLightwoff2}) format('woff2'),
         url(${latoLightwoff}) format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'latoregular';
    src: url(${latoRegularwoff2}) format('woff2'),
         url(${latoRegularwoff}) format('woff');
    font-weight: normal;
    font-style: normal;

}


  html {
    font-family: 'latolight';
    color: var(--blue-vogue);
    font-size: 62.5%
  }
  
  h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    margin: 0;
  }
`;

export default Typography;
<file_sep>import React from 'react';
import styled from 'styled-components';
import { Link } from 'gatsby';

const NavItem = styled(Link)`
  font-family: 'latobold';
  text-decoration: none;
  color: var(--blue-vogue);
  display: inline-block;
  white-space: nowrap;
  margin: 1vw 1vw;
  transition: all 200ms ease-in;
  position: relative;
  --scaleX: 1;

  :after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0%;
    content: '.';
    color: transparent;
    background: var(--burnt-sienna);
    height: 2px;
    transition: all 0.4s ease-in;
    transform: skew(-20deg) rotate(1.64deg) scaleX(var(--scaleX));
  }

  :hover {
    color: var(--burnt-sienna);
    ::after {
      width: 100%;
    }
  }

  @media (max-width: 768px) {
    padding: 1vw 0;
    z-index: 6;
  }
`;

export default function NavbarLinks({ onChange }) {
  function handleClick() {
    // Here, we invoke the callback with the new value
    onChange();
  }
  return (
    <>
      <NavItem to="/" onClick={handleClick} activeClassName="link-active">
        Inicio
      </NavItem>
      <NavItem
        to="/servicios/"
        onClick={handleClick}
        activeClassName="link-active"
      >
        Servicios
      </NavItem>
      <NavItem
        to="/acerca-de/"
        onClick={handleClick}
        activeClassName="link-active"
      >
        Acerca De
      </NavItem>
      <NavItem
        to="/contacto/"
        onClick={handleClick}
        activeClassName="link-active"
      >
        Contacto
      </NavItem>
    </>
  );
}
<file_sep>import React from 'react';
import S from '@sanity/desk-tool/structure-builder';
import { GiCctvCamera } from 'react-icons/gi';

export default function Sidebar() {
  return S.list()
    .title(`Seguridad Electrónica Integral`)
    .items([
      S.listItem()
        .title('Inicio')
        .icon(() => <GiCctvCamera />)
        .child(S.editor().schemaType('siteSettings').documentId('central')),
      ...S.documentTypeListItems().filter(
        (item) => item.getId() !== 'siteSettings'
      ),
    ]);
}
<file_sep>import React, { useState, useEffect } from 'react';
import Nav from './Nav';
import GlobalStyles from '../styles/GlobalStyles';
import Typography from '../styles/Typography';
import Footer from './Footer';

export default function Layout({ children }) {
  // determined if page has scrolled and if the view is on mobile
  const [scrolled, setScrolled] = useState(false);

  // change state on scroll
  useEffect(() => {
    const handleScroll = () => {
      const isScrolled = window.scrollY > 100;
      if (isScrolled) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };

    document.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      // clean up the event handler when the component unmounts
      document.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  return (
    <>
      <GlobalStyles />
      <Typography />
      <Nav scrolled={scrolled} />
      {children}
      <Footer />
    </>
  );
}
<file_sep>import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';
import React from 'react';
import styled from 'styled-components';
import { ButtonStyles } from '../styles/Button';

const TechnologyStyles = styled.section`
  height: 100%;
  width: 100%;
  min-height: 100vh;
  display: grid;
  --columns: 2;
  grid-template-columns: repeat(var(--columns), 1fr);
  font-family: 'latoblack';
  background-color: var(--titan-white);

  @media (max-width: 720px) {
    --columns: 1;
  }
`;

const TextSideStyles = styled.div`
  padding: 12rem 5vw 5rem;
  color: var(--blue-vogue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: clamp(1.2rem, 3vw, 1.8rem);

  @media (max-width: 720px) {
    order: 2;
    padding: 0px 5vw 5rem;
  }

  h2 {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: 1rem;
  }

  h3 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    margin-bottom: 2rem;

    a {
      text-decoration: underline;
    }
  }
`;

const SideImageStyles = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 10rem;
  padding-bottom: 10rem;

  @media (max-width: 720px) {
    padding: 10rem 5vw 0;
  }
`;

export default function Technology() {
  const { image } = useStaticQuery(graphql`
    query {
      image: file(relativePath: { eq: "cameras.png" }) {
        sharp: childImageSharp {
          fluid(quality: 90, maxWidth: 1920) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `);

  return (
    <TechnologyStyles>
      <TextSideStyles>
        <h2>TECNOLOGÍA</h2>
        <h3>
          DISTRIBUIDORES AUTORIZADOS DE{' '}
          <a
            href="https://www.hikvision.com/"
            title="Hikvision"
            target="_blank"
            rel="noopener noreferrer"
          >
            HIKVISION
          </a>{' '}
          Y{' '}
          <a
            href="https://www.epcom.net/"
            title="Epcom"
            target="_blank"
            rel="noopener noreferrer"
          >
            EPCOM
          </a>
          , MARCAS LÍDERES EN EL MERCADO DE SEGURIDAD.
        </h3>
        <ButtonStyles>CONTACTANOS</ButtonStyles>
      </TextSideStyles>
      <SideImageStyles>
        <Img fluid={image.sharp.fluid} />
      </SideImageStyles>
    </TechnologyStyles>
  );
}
<file_sep>import { AiFillProject as icon } from 'react-icons/ai';

export default {
  name: 'project',
  title: 'Proyecto',
  type: 'document',
  icon,
  fields: [
    {
      name: 'title',
      title: 'Título',
      type: 'string',
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
    },
    {
      name: 'subtitle',
      title: 'Introducción',
      type: 'text',
    },
    {
      name: 'mainImage',
      title: 'Imagen Principal',
      type: 'image',
      options: {
        hotspot: true,
      },
    },
    {
      name: 'categories',
      title: 'Categorías',
      type: 'array',
      of: [{ type: 'reference', to: { type: 'category' } }],
    },
    {
      name: 'publishedAt',
      title: 'Fecha de Publicación',
      type: 'datetime',
    },
    {
      name: 'body',
      title: 'Contenido',
      type: 'blockContent',
    },
  ],
  preview: {
    select: {
      title: 'title',
      media: 'mainImage',
      subtitle: 'publishedAt',
    },
  },
};
<file_sep>import React from 'react';
import { LayoutStyles } from '../styles/LayoutStyles';

export default function Services() {
  return (
    <LayoutStyles>
      <span>Servicios</span>
    </LayoutStyles>
  );
}
<file_sep>import React from 'react';
import styled from 'styled-components';

const ProjectStyles = styled.article`
  height: 460px;
  background-color: var(--titan-white);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(166, 173, 201, 0.2);
`;

export default function Project() {
  return <ProjectStyles>Project</ProjectStyles>;
}
<file_sep>import * as React from 'react';
import { Link } from 'gatsby';
import styled from 'styled-components';

const PageStyles = styled.main`
  padding: 8rem 10rem 5rem 10rem;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  .container {
    background-color: var(--cape-cod-70);
    color: var(--white);
    padding: 2rem;
  }

  @media (max-width: 48rem) {
    padding: 8rem 1rem 5rem 1rem;
  }
`;

// markup
const NotFoundPage = () => (
  <PageStyles>
    <div className="container">
      <title>No Encontrada</title>
      <h1>Pagina no encontrada</h1>
      <p>
        Lo Siento{' '}
        <span role="img" aria-label="Pensive emoji">
          😔
        </span>{' '}
        No pudimos encontrar la página que buscabas.
        <br />
        <strong>
          <Link to="/">ir a Inicio.</Link>
        </strong>
        .
      </p>
    </div>
  </PageStyles>
);

export default NotFoundPage;
<file_sep>import React from 'react';
import styled from 'styled-components';
import { ButtonStyles } from '../styles/Button';
import Project from './Project';

const ProjectsStyles = styled.section`
  padding: 12rem 5vw 5rem;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  font-family: 'latoblack';

  h2 {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: 1rem;
  }

  h3 {
    font-size: clamp(2.5rem, 5vw, 5rem);
  }

  .button-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
`;

const ProjectsGrid = styled.div`
  display: grid;
  --columns: 3;
  grid-template-columns: repeat(var(--columns), 1fr);
  margin-top: 2rem;
  margin-bottom: 4rem;
  gap: 2rem;

  @media (max-width: 720px) {
    --columns: 1;
  }
`;

export default function Projects() {
  return (
    <ProjectsStyles>
      <h2>PROYECTOS</h2>
      <h3>Un proyecto de seguridad adaptado a tus necesidades</h3>
      <ProjectsGrid>
        {[1, 2, 3].map((_, i) => (
          <Project key={i} />
        ))}
      </ProjectsGrid>
      <div className="button-container">
        <ButtonStyles>CONTACTANOS</ButtonStyles>
      </div>
    </ProjectsStyles>
  );
}
<file_sep>import { IoMdSettings as icon } from 'react-icons/io';

export default {
  name: 'siteSettings',
  type: 'document',
  title: 'Ajustes del Sitio',
  icon,
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Título',
    },
    {
      name: 'description',
      type: 'text',
      title: 'Descripción',
      description:
        'Describe tu sitio para busquedas en google y redes sociales.',
    },
    {
      name: 'phone',
      type: 'string',
      title: 'Teléfono',
      description: 'Teléfono de contacto que será usado en el pié de página',
    },
    {
      name: 'email',
      type: 'string',
      title: 'E-mail',
      description: 'mail de contacto que será usado en el pié de página',
    },
    {
      name: 'facebook',
      type: 'string',
      title: 'Facebook',
      description: 'Facebook que será usado en el pié de página',
    },
    {
      name: 'whatsapp',
      type: 'string',
      title: 'Whatsapp',
      description: 'Whatsapp que será usado en el pié de página',
    },
    {
      name: 'address',
      type: 'string',
      title: 'Dirección',
      description: 'Dirección que será usada en el pié de página',
    },
    {
      name: 'addressUrl',
      type: 'string',
      title: 'Url Dirección',
      description: 'Url para Google Maps que será usada en el pié de página',
    },
    {
      name: 'projects',
      title: 'Proyectos a Mostrar',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'project' }] }],
      validation: (Rule) => Rule.max(3),
    },
  ],
};
<file_sep>import React from 'react';
import { LayoutStyles } from '../styles/LayoutStyles';

export default function Contact() {
  return (
    <LayoutStyles>
      <span>Contacto</span>
    </LayoutStyles>
  );
}
<file_sep>import { graphql, useStaticQuery } from 'gatsby';
import BackgroundImage from 'gatsby-background-image';
import React from 'react';
import styled from 'styled-components';
import { ButtonStyles } from '../styles/Button';

const DescriptionStyles = styled.section`
  margin-top: -1px;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-family: 'latoblack';
  position: relative;

  @media (max-width: 720px) {
    display: block;
  }
`;

const SideImageStyles = styled(BackgroundImage)`
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  @media (max-width: 720px) {
    height: 100vh;
  }
`;

const TextSideStyles = styled.div`
  padding: 12rem 5vw 5rem;
  background-color: var(--texas-rose);
  color: var(--blue-vogue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: clamp(1.2rem, 3vw, 1.8rem);

  @media (max-width: 720px) {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(
      80deg,
      var(--texas-rose-70) 75%,
      transparent 100%
    );
  }

  h2 {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: 1rem;
  }

  h3 {
    font-size: clamp(2.5rem, 5vw, 5rem);
  }

  p {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: 3rem;
  }
`;

export default function Description() {
  const { image } = useStaticQuery(graphql`
    query {
      image: file(relativePath: { eq: "side-camera.jpg" }) {
        sharp: childImageSharp {
          fluid(quality: 90, maxWidth: 1920) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `);

  return (
    <DescriptionStyles>
      <SideImageStyles Tag="div" fluid={image.sharp.fluid} />
      <TextSideStyles>
        <h2>PROYECTOS PERSONALIZADOS</h2>
        <h3>COTIZAMOS, DISEÑAMOS E IMPLEMENTAMOS TU PROYECTO</h3>
        <p>
          Todos nuestros productos trabajan juntos para proveer máxima eficacia
          y así asegurar la entera satisfacción de nuestros clientes.
        </p>
        <ButtonStyles>CONTACTANOS</ButtonStyles>
      </TextSideStyles>
    </DescriptionStyles>
  );
}
<file_sep>import React from 'react';
import styled from 'styled-components';
import { LayoutStyles } from '../styles/LayoutStyles';

const AboutStyles = styled(LayoutStyles)`
  padding: 15rem 12vw 5rem;
  --scaleX: 1;
  .title {
    position: relative;
    font-family: 'latoblack';
    font-size: clamp(2.5rem, 5vw, 5rem);

    &::before {
      height: 5px;
      content: '';
      position: absolute;
      width: 100%;
      background: var(--burnt-sienna);
      bottom: -2px;
      z-index: -1;
      transition: transform 0.1s ease 0s;
      transform: skew(-20deg) rotate(1.64deg) scaleX(var(--scaleX));
    }
  }
`;

export default function About() {
  return (
    <AboutStyles>
      <div className="container">
        <h2 className="title">QUIENES SOMOS</h2>
      </div>
    </AboutStyles>
  );
}
<file_sep>import styled from 'styled-components';

export const ButtonStyles = styled.button`
  font-family: 'latobold';
  border-radius: 25px;
  height: 50px;
  width: 16rem;
  padding: 0.5rem;
  cursor: pointer;
  background-color: var(--burnt-sienna);
  border: none;
  color: var(--blue-vogue);
  box-shadow: 2px 3px 6px 0 rgba(0, 0, 0, 0.5);
  font-size: 1.2rem;
  transition: 0.6s;

  @media (max-width: 768px) {
    width: 14rem;
  }

  @media (max-width: 368px) {
    width: 12rem;
    font-size: 1rem;
  }

  &:focus {
    outline: none;
  }

  &:disabled {
    background-color: #aaa;
    color: grey !important;
    border: 1px solid grey;
    pointer-events: none;
  }

  &:hover {
    background-color: var(--blue-vogue);
    color: var(--white);
    transition: 0.6s;
  }
`;
