{"version":3,"file":"component---src-pages-accomodation-services-tsx-6040c866920ecce31b79.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/components/buttons/Enquirebutton.tsx","webpack://gatsby-starter-default/./src/components/lines/Line.tsx","webpack://gatsby-starter-default/./src/components/sections/AccomodationHero.tsx","webpack://gatsby-starter-default/./src/components/sections/AccomodationSection.tsx","webpack://gatsby-starter-default/./src/components/sections/AccomodationNew.tsx","webpack://gatsby-starter-default/./src/pages/accomodation-services.tsx","webpack://gatsby-starter-default/./src/styles/HeroElement.tsx"],"sourcesContent":["import { Link } from \"gatsby\"\nimport React, { FunctionComponent } from \"react\"\nimport styled from \"styled-components\"\nimport { H4 } from \"../../styles/TextStyles\"\n\ninterface EnquireButtonProps {\n  title?: string\n}\n\nconst EnquireButton: FunctionComponent<EnquireButtonProps> = ({\n  title = \"Enquire now\",\n}) => {\n  return (\n    <Button>\n      <Link to=\"/enquire\">\n        <Wrapper>\n          <Title>{title}</Title>\n        </Wrapper>\n      </Link>\n    </Button>\n  )\n}\n\nexport default EnquireButton\nconst Button = styled.div`\n  a {\n    text-decoration: none;\n  }\n`\nconst Wrapper = styled.div`\n  display: grid;\n  justify-content: center;\n  align-items: center;\n  width: 280px;\n  height: 77px;\n  background: blue;\n  color: white;\n  border-radius: 12px;\n  font-size: 17px;\n  cursor: pointer;\n  font-weight: 400;\n  @media (max-width: 640px) {\n    width: 230px;\n    height: 55px;\n  }\n`\nconst Title = styled(H4)``\n","import React, { FunctionComponent } from \"react\"\nimport styled from \"styled-components\"\n\ninterface LineProps {\n  title?: string\n}\n\nconst Line: FunctionComponent<LineProps> = props => {\n  const { title = \"Think Big, Think Joshua Organisation\" } = props\n  return (\n    <Wrapper>\n      <Title>{title}</Title>\n    </Wrapper>\n  )\n}\n\nexport default Line\n\nconst Wrapper = styled.div`\n  padding: 30px 0 30px 0;\n  width: 1438px;\n  background: blue;\n  height: 80px;\n\n  @keyframes blink-caret {\n    from,\n    to {\n      border-color: transparent;\n    }\n    50% {\n      border-color: #fff;\n    }\n  }\n  @keyframes typing {\n    0% {\n      width: 0%;\n    }\n    30% {\n      width: 100%;\n    }\n    80% {\n      width: 100%;\n    }\n    90% {\n      width: 0%;\n    }\n    100% {\n      width: 0%;\n    }\n  }\n\n  @media (max-width: 1024px) {\n    width: 800px;\n  }\n  @media (max-width: 768px) {\n    width: 700px;\n  }\n  @media (max-width: 640px) {\n    width: 300px;\n    height: 40px;\n  }\n`\nconst Title = styled.h1`\n  /* color: rgba(103, 128, 159, 1); */\n  color: white;\n  text-transform: uppercase;\n\n  text-align: center;\n  font-size: 19px;\n  @media (max-width: 640px) {\n    font-size: 14px;\n  }\n  //Aninmation\n  white-space: nowrap;\n  overflow: hidden;\n  animation: typing 15s steps(300) forwards, blink-caret 0.15s step-end infinite;\n  animation-iteration-count: infinite;\n`\n","import React, { FunctionComponent } from \"react\"\nimport styled from \"styled-components\"\nimport { H2, Paragraph } from \"../../styles/TextStyles\"\n\ninterface AccomadationProps {\n  title?: string\n  subtitle?: string\n}\n\nconst AccomodationHero: FunctionComponent<AccomadationProps> = props => {\n  const {\n    title = \"Find your place \",\n    subtitle = \"We offer self-catering apartments and exquisite hotels stays that will leave you breathless and wanting to come back for me.\",\n  } = props\n  return (\n    <Wrapper>\n      <ContentWrapper>\n        <TextWrapper>\n          <Title>{title}</Title>\n          <Subtitle>{subtitle}</Subtitle>\n        </TextWrapper>\n        <ListWrapper>\n          <Image src=\"assets/backgrounds/c1.jpeg\" />\n          <Image src=\"assets/backgrounds/c2.jpeg\" />\n          <Image src=\"assets/backgrounds/c3.jpeg\" />\n        </ListWrapper>\n      </ContentWrapper>\n    </Wrapper>\n  )\n}\n\nexport default AccomodationHero\n\nconst Wrapper = styled.div`\n  padding: 100px 38px;\n`\nconst ContentWrapper = styled.div`\n  display: grid;\n  gap: 50px;\n`\nconst Title = styled(H2)`\n  font-weight: 700;\n  @media (max-width: 640px) {\n    font-size: 30px;\n    line-height: 130%;\n  }\n`\nconst Subtitle = styled(Paragraph)`\n  max-width: 600px;\n  line-height: 130%;\n`\nconst Image = styled.img`\n  border-radius: 10px;\n  width: 400px;\n  height: 300px;\n  @media (max-width: 1024px) {\n    width: 300px;\n    height: 200px;\n  }\n  @media (max-width: 768px) {\n    width: 200px;\n    height: 200px;\n  }\n  @media (max-width: 640px) {\n    width: 300px;\n    height: 200px;\n  }\n`\nconst ListWrapper = styled.div`\n  display: grid;\n  grid-template-columns: 400px 400px 400px;\n\n  @media (max-width: 1024px) {\n    grid-template-columns: 300px 300px 300px;\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: 200px 200px 200px;\n  }\n  gap: 20px;\n  justify-content: center;\n  @media (max-width: 640px) {\n    grid-template-columns: 300px;\n  }\n`\nconst TextWrapper = styled.div`\n  display: grid;\n  gap: 20px;\n`\n","import { graphql, useStaticQuery } from \"gatsby\"\n// import Img from \"gatsby-image\"\nimport { GatsbyImage } from \"gatsby-plugin-image\"\nimport React, { FunctionComponent } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  ContentWrapper,\n  Description,\n  // Image,\n  TextWrapperWrapper,\n  Title,\n  Wrapper,\n} from \"../../styles/HeroElement\"\n// import Circle from \"../cards/Circle\"\n// import Enquirebutton from \"../buttons/Enquirebutton\"\n\ninterface AccomodationSectionProps {\n  title?: string\n  description?: string\n  // image?: string\n}\n\nconst AccomodationSection: FunctionComponent<AccomodationSectionProps> =\n  props => {\n    const {\n      title = \"Accommodation\",\n      description = \"We will help with finding short-term, long-term and student accommodation at top-tier facilities with premium service to cater to your every desire.\",\n      // image = \"/assets/backgrounds/accommodatation.jpeg\",\n    } = props\n\n    const data = useStaticQuery(graphql`\n      query MyQuery {\n        file(relativePath: { eq: \"accommodation.jpeg\" }) {\n          childImageSharp {\n            gatsbyImageData(layout: CONSTRAINED, quality: 10)\n          }\n        }\n      }\n    `)\n\n    return (\n      <Wrapper>\n        <ContentWrapper>\n          <TextWrapperWrapper>\n            <Title>{title}</Title>\n            <Description>{description}</Description>\n            {/* <Enquirebutton /> */}\n          </TextWrapperWrapper>\n          <FileWrapper>\n            <GatsbyImage\n              alt=\"image\"\n              image={data.file.childImageSharp.gatsbyImageData}\n              style={styles}\n            />\n          </FileWrapper>\n        </ContentWrapper>\n      </Wrapper>\n    )\n  }\n\nexport default AccomodationSection\n\nconst FileWrapper = styled.div``\n\nconst styles = {\n  borderRadius: \"20px\",\n}\n","import React, { FunctionComponent } from \"react\"\nimport styled from \"styled-components\"\nimport { H3, H4 } from \"../../styles/TextStyles\"\n\ninterface AccommodationNewProps {}\n\nconst AccommodationNew: FunctionComponent<AccommodationNewProps> = () => {\n  return (\n    <Wrapper>\n      <TextWrapper>\n        <Title>Long term, Short term and Student</Title>\n        <Description>\n          We at Joshua Organisation can help you with all your accommodation\n          needs whether its\n          <span> short term, long term, even student accommodation</span>.\n        </Description>\n        <Description>\n          We will help you find the best accommodation at top tier facilities\n          with premium service to cater for your every desire.\n        </Description>\n        <Description>\n          We offer self-catering apartments and exquisite hotels stays that will\n          leave you breathless and wanting to come back for me.\n        </Description>\n        <Subtitle>Types of Accommodation offered:</Subtitle>\n        <List> GUEST HOUSES</List>\n        <List> FLATS</List>\n        <List> APARTMENTS</List>\n        <List> HOTEL ROOMS</List>\n      </TextWrapper>\n    </Wrapper>\n  )\n}\n\nexport default AccommodationNew\n\nconst Wrapper = styled.div`\n  padding: 0px 0 0px 0;\n`\nconst TextWrapper = styled.div`\n  max-width: 820px;\n  display: grid;\n  margin: 0 auto;\n  gap: 20px;\n  @media (max-width: 640px) {\n    max-width: 300px;\n  }\n`\nconst Title = styled(H3)`\n  @media (max-width: 640px) {\n    font-size: 18px;\n    font-weight: 500;\n  }\n`\nconst Description = styled.p`\n  font-size: 14px;\n  line-height: 180%;\n  span {\n    font-weight: bold;\n  }\n`\nconst Subtitle = styled(H4)`\n  @media (max-width: 640px) {\n    font-size: 18px;\n  }\n`\nconst List = styled.li`\n  font-size: 14px;\n`\n","import React, { FunctionComponent } from \"react\"\nimport EnquireButton from \"../components/buttons/Enquirebutton\"\nimport Layout from \"../components/layout/Layout\"\nimport SEO from \"../components/layout/SEO\"\nimport Line from \"../components/lines/Line\"\nimport AccomodationHero from \"../components/sections/AccomodationHero\"\nimport AccomodationSection from \"../components/sections/AccomodationSection\"\nimport styled from \"styled-components\"\nimport AccommodationNew from \"../components/sections/AccomodationNew\"\ninterface AccomodationProps {\n  title: string\n  name: string\n  content: string\n}\n\nconst Accomodation: FunctionComponent<AccomodationProps> = props => {\n  const {\n    title = \"accommodation\",\n    name = \"Keywords\",\n    content = \"Education\",\n  } = props\n  return (\n    <Layout>\n      <SEO title={title} />\n      <meta name={name} content={content} />\n      <AccomodationSection />\n      <LineWrapper>\n        <Line />\n      </LineWrapper>\n      <AccomodationHero />\n      <AccommodationNew />\n      <ButtonWrapper>\n        <EnquireButton />\n      </ButtonWrapper>\n    </Layout>\n  )\n}\n\nexport default Accomodation\n\nconst LineWrapper = styled.div`\n  margin: 50px 0 0 0;\n  display: grid;\n  justify-content: center;\n`\nconst ButtonWrapper = styled.div`\n  display: grid;\n  justify-content: center;\n  padding: 0 0 120px 0;\n  @media (max-width: 640px) {\n    padding: 10px 0 40px 0;\n  }\n`\n","import styled from \"styled-components\"\nimport { H1, Paragraph } from \"./TextStyles\"\n\nexport const Wrapper = styled.div`\n  padding: 100px 100px 0 100px;\n`\nexport const ContentWrapper = styled.div`\n  justify-content: center;\n  max-width: 1234px;\n  display: grid;\n  grid-template-columns: 500px auto;\n  gap: 40px;\n  align-items: center;\n  @media (max-width: 1024px) {\n    grid-template-columns: 500px;\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: 500px;\n  }\n  @media (max-width: 640px) {\n    grid-template-columns: auto;\n  }\n`\nexport const TextWrapperWrapper = styled.div`\n  max-width: 500px;\n  display: grid;\n  gap: 30px;\n\n  @media (max-width: 640px) {\n    max-width: 360px;\n    grid-template-columns: 300px;\n  }\n`\nexport const FileWrapper = styled.div``\nexport const Image = styled.img`\n  width: 600px;\n  border-radius: 20px;\n  @media (max-width: 1024px) {\n    width: 500px;\n  }\n  @media (max-width: 768px) {\n    width: 500px;\n  }\n  @media (max-width: 640px) {\n    width: 300px;\n  }\n`\n\nexport const Title = styled(H1)`\n  @media (max-width: 640px) {\n    width: 300px;\n    font-size: 30px;\n  }\n  color: black;\n  font-weight: bold;\n`\nexport const Description = styled(Paragraph)`\n  line-height: 160%;\n`\n"],"names":["title","Button","Link","to","Wrapper","Title","styled","H4","props","subtitle","ContentWrapper","TextWrapper","Subtitle","ListWrapper","Image","src","H2","Paragraph","description","data","useStaticQuery","FileWrapper","G","alt","image","file","childImageSharp","gatsbyImageData","style","styles","borderRadius","Description","List","H3","name","content","Layout","SEO","LineWrapper","Line","ButtonWrapper","TextWrapperWrapper","H1"],"sourceRoot":""}