{"version":3,"sources":["webpack:///./src/components/Type/Heading2.js","webpack:///./src/components/Layout/Button/ImageRoundButton.js","webpack:///./src/components/Layout/Grid1/Grid1.js","webpack:///./src/components/Layout/PageHeader/PageHeader.js","webpack:///./src/pages/buying-guides/guides.js","webpack:///./src/components/Layout/Spacer/Spacer.js","webpack:///./src/components/Layout/Section/Section.js","webpack:///./src/components/SideDrawer/DrawerToogleButton.js","webpack:///./src/components/Navigation/MainNavigation.js","webpack:///./src/components/SideDrawer/SideDrawer.js","webpack:///./src/components/Backdrop/Backdrop.js","webpack:///./src/components/Header/Header.js","webpack:///./src/components/Layout/Section/SectionPageMarginGradient.js","webpack:///./src/components/Type/PageTitle.js","webpack:///./src/components/Type/Paragraph1.js","webpack:///./src/components/Footer/Footer.js","webpack:///./src/components/Layout/Layout.js","webpack:///./src/components/Layout/Grid2/Grid2Auto.js"],"names":["Heading2","color","children","Heading","styled","h2","props","ImageRoundButton","size","url","Btn","onClick","path","navigate","div","Grid1","Grid","PageHeader","bgColor","title","text","textColor","marginBottom","breadcrumb","SectionPageMarginGradient","PageTitle","Paragraph1","Spacer","height","articlesPage","location","data","description","order","align","HeadingLink","to","fluid","bmwX3","childImageSharp","style","gridColumnStart","backgroundSize","backgroundPosition","backgroundRepeat","width","clipPath","cursor","porscheMacan","mercedesBenzGlc250","bmwM3Competition","porche911CarreraGts","toyotaLandcruiser","Link","Space","Section","marginTop","Wrapper","Content","section","drawerToggleButton","className","click","mainNavigation","activeStyles","borderBottom","hideBG","drawClickHandler","alt","activeStyle","partiallyActive","sideDrawer","drawerClasses","show","backdrop","aria-label","Header","state","sideDrawerOpen","drawerToggleClickHandler","setState","prevState","backdropClickHandler","render","backDrop","this","Component","Title","h1","Paragraph","p","handleClick","a","document","createElement","href","target","rel","CopyContainer","ACNContainer","StyledLink","IconContainer","footer","SectionPageMargin","Grid2","paddingTop","paddingBottom","GridItem","whiteSpace","Date","getFullYear","IconButton","event","Layout","Footer","Grid2Auto"],"mappings":"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","file":"component---src-pages-buying-guides-guides-js-00a2164b5e8ac4c0777c.js","sourcesContent":["import React from \"react\"\nimport styled from 'styled-components'\n\nconst Heading2 = ({ color, children }) => {\n   if(!color) {\n       color = \"black\";  \n   }\n    return (\n        <Heading color={color}>{children}</Heading>\n  )\n} \n\nexport default Heading2;\n\nconst Heading = styled.h2`\n    color: ${props => props.color};\n    font-size: 2.5rem;\n    line-height: 3rem;\n    font-weight: 600;\n    letter-spacing: -0.1rem;\n    margin-bottom: 0px;\n`\n","import React from \"react\"\nimport styled from 'styled-components'\nimport { navigate } from \"gatsby\"\n\nconst ImageRoundButton = ({size, url, children }) => {\n  const goTo = (path) => {\n    navigate(path);\n  }\n\n  return (\n    <Btn onClick={()=> goTo(url)} size={size}>{children}</Btn>\n  )\n} \nexport default ImageRoundButton\n\nconst Btn = styled.div`\n    display: flex;\n    padding: 12px;\n    width:  ${props => props.size};\n    height: ${props => props.size};\n    cursor: pointer;\n    border-radius: 50%;\n    overflow: visible;\n    align-items: center;\n    justify-content: center;\n\n    &:hover {\n      background-color: rgba(0,0,0,0.10);\n      @media (hover: none): {\n        background-color: transparent;\n      }\n    },\n`;\n","import React from \"react\"\nimport styled from 'styled-components'\n\nconst Grid1 = ({children }) => {\n  return (\n    <>\n        <Grid>\n            {children}\n        </Grid>\n    </>\n  )\n} \n\nexport default Grid1\n\nconst Grid = styled.div`\n    display: block;\n    max-width: 800px;\n`;\n","import React from \"react\"\nimport SectionPageMarginGradient from '../Section/SectionPageMarginGradient'\nimport Grid1 from '../Grid1/Grid1'\nimport PageTitle from '../../Type/PageTitle'\nimport Paragraph1 from '../../Type/Paragraph1'\nimport Spacer from '../Spacer/Spacer'\n\nconst PageHeader = ({ bgColor, title, text, textColor, marginBottom, breadcrumb }) => {\n    if(!bgColor) bgColor = \"#3479ae\";\n    if(!textColor) textColor = \"white\";\n    \n  return (\n    <>\n       <SectionPageMarginGradient marginBottom={marginBottom} >\n            <Grid1>\n                <PageTitle color={textColor}>{title}</PageTitle>\n                <Paragraph1 color={textColor}>\n                    {text}\n                </Paragraph1>\n                {breadcrumb}\n                <Spacer height=\"40px\" />\n            </Grid1>\n        </SectionPageMarginGradient>\n    </>\n  )\n} \n\nexport default PageHeader\n\n\n\n","import React from \"react\"\nimport { graphql, Link } from \"gatsby\"\nimport Layout from \"../../components/Layout/Layout\"\nimport SEO from \"../../components/Seo/Seo\"\nimport styled from 'styled-components'\nimport BackgroundImage from 'gatsby-background-image'\nimport PageHeader from '../../components/Layout/PageHeader/PageHeader'\nimport SectionPageMargin from '../../components/Layout/Section/SectionPageMargin'\nimport Grid2Auto from '../../components/Layout/Grid2/Grid2Auto'\nimport GridItem from '../../components/Layout/GridItem/GridItem'\nimport Heading2 from '../../components/Type/Heading2'\nimport Paragraph1 from '../../components/Type/Paragraph1'\nimport ImageRoundButton from '../../components/Layout/Button/ImageRoundButton'\n\n\nconst articlesPage = ({ location, data }) =>\n(\n\t<Layout>\n\n\t\t<SEO title=\"Summon Buyer Guides\"\n\t\t\tdescription=\"Buying a prestige car? Read our Buyer Guides for tips on getting the best price and the right car.\"\n\t\t\tlocation={location}\n\t\t/>\n\n\t\t<PageHeader\n\t\t\ttitle=\"Summon Buyer Guides\"\n\t\t\ttext=\"Buying a prestige car? Read our Buyer Guides for tips on getting the best price and the right car. \n\t\t\tBelow are popular cars with Summon customers, buyers and sellers. Also, some of our personal favourites.\"\n\t\t/>\n\t\t\n\t\t\n\t\t<SectionPageMargin>\n\t\t\t<Grid2Auto >\n\t\t\t\t<GridItem order=\"1\" align=\"right\">\n\t\t\t\t\t<Heading2>\n\t\t\t\t\t\t<HeadingLink to=\"/buying-guides/bmw-x3-buying-guide/\">\n\t\t\t\t\t\tBuying a BMW X3? Read more for X3 prices and our advice on buying the best example\n\t\t\t\t\t\t</HeadingLink>\n\t\t\t\t\t</Heading2>\n\t\t\t\t\t<Paragraph1>\n\t\t\t\t\tRead our market analysis for ​​BMW X3 xDrive30d (G01), 2017-2019\n\t\t\t\t\t</Paragraph1>\n\t\t\t\t</GridItem>\n\n\t\t\t\t<GridItem order=\"2\" >\n\t\t\t\t\t<ImageRoundButton size=\"200px\" url=\"/buying-guides/bmw-x3-buying-guide/\">\n\t\t\t\t\t\t<BackgroundImage\n\t\t\t\t\t\t\tfluid={data.bmwX3.childImageSharp.fluid}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tgridColumnStart: '1',\n\t\t\t\t\t\t\t\tbackgroundSize: 'cover',\n\t\t\t\t\t\t\t\tbackgroundPosition: 'center',\n\t\t\t\t\t\t\t\tbackgroundRepeat: 'no-repeat',\n\t\t\t\t\t\t\t\twidth: '220px',\n\t\t\t\t\t\t\t\theight: '220px',\n\t\t\t\t\t\t\t\tclipPath: 'circle(100px at center)',\n\t\t\t\t\t\t\t\tcursor: 'pointer'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImageRoundButton>\n\t\t\t\t</GridItem>\n\n\t\t\t</Grid2Auto>\n\t\t</SectionPageMargin>\n\n\t\t<SectionPageMargin>\n\t\t\t<Grid2Auto >\n\t\t\t\t<GridItem order=\"2\" >\n\t\t\t\t\t<ImageRoundButton size=\"200px\" url=\"/buying-guides/porsche-macan-buying-guide/\">\n\t\t\t\t\t\t<BackgroundImage\n\t\t\t\t\t\t\tfluid={data.porscheMacan.childImageSharp.fluid}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tgridColumnStart: '1',\n\t\t\t\t\t\t\t\tbackgroundSize: 'cover',\n\t\t\t\t\t\t\t\tbackgroundPosition: 'center',\n\t\t\t\t\t\t\t\tbackgroundRepeat: 'no-repeat',\n\t\t\t\t\t\t\t\twidth: '220px',\n\t\t\t\t\t\t\t\theight: '220px',\n\t\t\t\t\t\t\t\tclipPath: 'circle(100px at center)',\n\t\t\t\t\t\t\t\tcursor: 'pointer'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImageRoundButton>\n\t\t\t\t</GridItem>\n\t\t\t\t<GridItem order=\"1\" align=\"right\">\n\t\t\t\t\t<Heading2>\n\t\t\t\t\t\t<HeadingLink to=\"/buying-guides/porsche-macan-buying-guide/\">\n\t\t\t\t\t\tBuying a Porsche Macan? Read more for Macan prices and our advice on buying the best car\n\t\t\t\t\t\t</HeadingLink>\n\t\t\t\t\t</Heading2>\n\t\t\t\t\t<Paragraph1>\n\t\t\t\t\tRead our market analysis for ​​Porsche Macan, Macan S and Macan S Diesel\n\t\t\t\t\t</Paragraph1>\n\t\t\t\t</GridItem>\n\t\t\t</Grid2Auto>\n\t\t</SectionPageMargin>\n\n\n\n\t\t<SectionPageMargin>\n\t\t\t<Grid2Auto >\n\t\t\t\t<GridItem order=\"1\" align=\"right\">\n\t\t\t\t\t<Heading2>\n\t\t\t\t\t\t<HeadingLink to=\"/buying-guides/mercedes-benz-glc-250-buying-guide/\">\n\t\t\t\t\t\t\tBuying a Mercedes-Benz GLC 250? Read our buyers guide for prices, specs and advice on how to buy a good one\n\t\t\t\t\t\t</HeadingLink>\n\t\t\t\t\t</Heading2>\n\t\t\t\t\t<Paragraph1>\n\t\t\t\t\t\tRead our market analysis for Mercedes-Benz GLC 250 & 250d\n\t\t\t\t\t</Paragraph1>\n\t\t\t\t</GridItem>\n\n\t\t\t\t<GridItem order=\"2\" >\n\t\t\t\t\t<ImageRoundButton size=\"200px\" url=\"/buying-guides/mercedes-benz-glc-250-buying-guide/\">\n\t\t\t\t\t\t<BackgroundImage\n\t\t\t\t\t\t\tfluid={data.mercedesBenzGlc250.childImageSharp.fluid}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tgridColumnStart: '1',\n\t\t\t\t\t\t\t\tbackgroundSize: 'cover',\n\t\t\t\t\t\t\t\tbackgroundPosition: 'center',\n\t\t\t\t\t\t\t\tbackgroundRepeat: 'no-repeat',\n\t\t\t\t\t\t\t\twidth: '220px',\n\t\t\t\t\t\t\t\theight: '220px',\n\t\t\t\t\t\t\t\tclipPath: 'circle(100px at center)',\n\t\t\t\t\t\t\t\tcursor: 'pointer'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImageRoundButton>\n\t\t\t\t</GridItem>\n\n\t\t\t</Grid2Auto>\n\t\t</SectionPageMargin>\n\n\n\t\t<SectionPageMargin>\n\t\t\t<Grid2Auto >\n\t\t\t\t<GridItem order=\"2\" >\n\t\t\t\t\t<ImageRoundButton size=\"200px\" url=\"/buying-guides/bmw-m3-competition-buying-guide/\">\n\t\t\t\t\t\t<BackgroundImage\n\t\t\t\t\t\t\tfluid={data.bmwM3Competition.childImageSharp.fluid}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tgridColumnStart: '1',\n\t\t\t\t\t\t\t\tbackgroundSize: 'cover',\n\t\t\t\t\t\t\t\tbackgroundPosition: 'center',\n\t\t\t\t\t\t\t\tbackgroundRepeat: 'no-repeat',\n\t\t\t\t\t\t\t\twidth: '220px',\n\t\t\t\t\t\t\t\theight: '220px',\n\t\t\t\t\t\t\t\tclipPath: 'circle(100px at center)',\n\t\t\t\t\t\t\t\tcursor: 'pointer'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImageRoundButton>\n\t\t\t\t</GridItem>\n\t\t\t\t<GridItem order=\"1\" align=\"right\">\n\t\t\t\t\t<Heading2>\n\t\t\t\t\t\t<HeadingLink to=\"/buying-guides/bmw-m3-competition-buying-guide/\">\n\t\t\t\t\t\t\tBuying a BMW M3 Competition? Read our buyers guide for prices, specs and advice on how to buy a good one\n\t\t\t\t\t\t</HeadingLink>\n\t\t\t\t\t</Heading2>\n\t\t\t\t\t<Paragraph1>\n\t\t\t\t\t\tRead our market analysis for the BMW M3 Competition (F80, LCI), 2016-2018\n\t\t\t\t\t</Paragraph1>\n\t\t\t\t</GridItem>\n\t\t\t</Grid2Auto>\n\t\t</SectionPageMargin>\n\n\n\n\n\t\t<SectionPageMargin>\n\t\t\t<Grid2Auto >\n\t\t\t\t<GridItem order=\"1\" align=\"right\">\n\t\t\t\t\t<Heading2>\n\t\t\t\t\t\t<HeadingLink to=\"/buying-guides/porsche-911-carrera-gts-buying-guide/\">\n\t\t\t\t\t\t\tBuying a Porsche 911 Carrera GTS? Carrera GTS prices, specs and how to buy a good one\n\t\t\t\t\t\t</HeadingLink>\n\t\t\t\t\t</Heading2>\n\t\t\t\t\t<Paragraph1>\n\t\t\t\t\t\tRead our market analysis for ​​Porsche 911 Carrera GTS 991.1 and 991.2\n\t\t\t\t\t</Paragraph1>\n\t\t\t\t</GridItem>\n\n\t\t\t\t<GridItem order=\"2\" >\n\t\t\t\t\t<ImageRoundButton size=\"200px\" url=\"/buying-guides/porsche-911-carrera-gts-buying-guide/\">\n\t\t\t\t\t\t<BackgroundImage\n\t\t\t\t\t\t\tfluid={data.porche911CarreraGts.childImageSharp.fluid}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tgridColumnStart: '1',\n\t\t\t\t\t\t\t\tbackgroundSize: 'cover',\n\t\t\t\t\t\t\t\tbackgroundPosition: 'center',\n\t\t\t\t\t\t\t\tbackgroundRepeat: 'no-repeat',\n\t\t\t\t\t\t\t\twidth: '220px',\n\t\t\t\t\t\t\t\theight: '220px',\n\t\t\t\t\t\t\t\tclipPath: 'circle(100px at center)',\n\t\t\t\t\t\t\t\tcursor: 'pointer'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImageRoundButton>\n\t\t\t\t</GridItem>\n\n\t\t\t</Grid2Auto>\n\t\t</SectionPageMargin>\n\n\n\t\t<SectionPageMargin>\n\t\t\t<Grid2Auto >\n\t\t\t\t<GridItem order=\"2\" >\n\t\t\t\t\t<ImageRoundButton size=\"200px\" url=\"/buying-guides/toyota-landcruiser-buying-guide/\">\n\t\t\t\t\t\t<BackgroundImage\n\t\t\t\t\t\t\tfluid={data.toyotaLandcruiser.childImageSharp.fluid}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tgridColumnStart: '1',\n\t\t\t\t\t\t\t\tbackgroundSize: 'cover',\n\t\t\t\t\t\t\t\tbackgroundPosition: 'center',\n\t\t\t\t\t\t\t\tbackgroundRepeat: 'no-repeat',\n\t\t\t\t\t\t\t\twidth: '220px',\n\t\t\t\t\t\t\t\theight: '220px',\n\t\t\t\t\t\t\t\tclipPath: 'circle(100px at center)',\n\t\t\t\t\t\t\t\tcursor: 'pointer'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImageRoundButton>\n\t\t\t\t</GridItem>\n\t\t\t\t<GridItem order=\"1\" align=\"right\">\n\t\t\t\t\t<Heading2>\n\t\t\t\t\t\t<HeadingLink to=\"/buying-guides/toyota-landcruiser-buying-guide/\">\n\t\t\t\t\t\t\tBuying a Toyota Landcruiser? Landcruiser prices, specs and how to buy a good one\n\t\t\t\t\t\t</HeadingLink>\n\t\t\t\t\t</Heading2>\n\t\t\t\t\t<Paragraph1>\n\t\t\t\t\t\tRead our market analysis for ​​Toyota Land Cruiser 200-series mk2: GXL, VX and Sahara\n\t\t\t\t\t</Paragraph1>\n\t\t\t\t</GridItem>\n\t\t\t</Grid2Auto>\n\t\t</SectionPageMargin>\n\n\n\t</Layout>\n)\n\nexport default articlesPage\n\nconst HeadingLink = styled(Link)`\n\ttext-decoration: none;\n`;\n\nexport const query = graphql`\n\tquery  {\n\n\t\tbmwX3: file(relativePath: { eq: \"buying-guides/article-bmw-x3.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(maxWidth: 286) {\n\t\t\t\t\t...GatsbyImageSharpFluid\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\n\t\tporscheMacan: file(relativePath: { eq: \"buying-guides/porsche-macan-articles-circle.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(maxWidth: 286) {\n\t\t\t\t\t...GatsbyImageSharpFluid\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tmercedesBenzGlc250: file(relativePath: { eq: \"buying-guides/glc-articles-circle.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(maxWidth: 286) {\n\t\t\t\t\t...GatsbyImageSharpFluid\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tbmwM3Competition: file(relativePath: { eq: \"buying-guides/articles-circle-bmw-m3.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(maxWidth: 286) {\n\t\t\t\t\t...GatsbyImageSharpFluid\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\n\t\tporche911CarreraGts: file(relativePath: { eq: \"buying-guides/articles-circle-911-gts.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(maxWidth: 286) {\n\t\t\t\t\t...GatsbyImageSharpFluid\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\n\t\ttoyotaLandcruiser: file(relativePath: { eq: \"buying-guides/articles-circle-toyotalandcruiser.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(maxWidth: 286) {\n\t\t\t\t\t...GatsbyImageSharpFluid\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t}`;\n","import React from \"react\"\nimport styled from 'styled-components'\n\nconst Spacer = ({ height }) => {\n  return (\n        <Space height={height}></Space>\n  )\n} \nexport default Spacer\n\nconst Space = styled.div`\n    display: block;\n    width: 100%;\n    height: ${props => props.height};\n`;\n","import React from \"react\"\nimport styled from 'styled-components'\n\nconst Section = ({ bgColor, children, marginTop, marginBottom }) => {\n  if(!marginTop) marginTop = \"0px\";\n  if(!marginBottom) marginBottom = \"100px\";\n\n  return (\n    <>\n        <Wrapper bgColor={bgColor} marginTop={marginTop} marginBottom={marginBottom}>\n            <Content>{children}</Content>\n        </Wrapper>\n    </>\n  )\n} \n\nexport default Section\n\nconst Wrapper = styled.section`\n    display: grid;\n    margin-top:  ${props => props.marginTop};\n    margin-bottom:  ${props => props.marginBottom};\n    grid-template-columns: minmax(400px, 1300px);\n    background-color: ${props => props.bgColor};\n    justify-content: center;\n`;\n\nconst Content = styled.div`\n    margin-left: 10px;\n    margin-right: 10px;\n\n    @media (max-width: 800px) {\n      margin-left: 30px;\n      margin-right: 30px;\n    }\n`;\n","import React from 'react'\n\nimport './DrawerToggleButton.css'\n\nconst drawerToggleButton = props => (\n  <button className=\"toggle-button\" title=\"navigation\" onClick={props.click}>\n    <div className=\"toggle-button__line\" />\n    <div className=\"toggle-button__line\" />\n    <div className=\"toggle-button__line\" />\n  </button>\n)\n\nexport default drawerToggleButton","import React from 'react';\nimport { Link } from \"gatsby\"\nimport Section from \"../Layout/Section/Section\"\nimport '../SideDrawer/DrawerToogleButton';\nimport Logo from \"./assets/summon-logo-white.svg\";\n\nimport './MainNavigation.css';\nimport DrawerToggleButton from '../SideDrawer/DrawerToogleButton';\n\nconst mainNavigation = props => {\n    \n    const activeStyles ={\n        borderBottom: '2px solid white'\n    }\n\n\n    return (\n    \n    <Section bgColor={props.hideBG? \"\" : \"#3988c4\"} marginBottom=\"0px\">\n        <div className=\"main-navigation\">\n        \n            <div className=\"toolbar__toggle-button\"><DrawerToggleButton click={props.drawClickHandler}/></div>\n            <div className=\"main-navigation__logo\">\n                <Link title=\"Summon Home\" to=\"/\"><Logo width=\"170px\" alt=\"Summon\"/></Link>            \n            </div>\n            <div className=\"spacer\"></div>\n        \n            <nav className=\"main-navigation__items\">\n                <ul>\n                    \n                    <li><Link to=\"https://value.summon.com.au//\"  activeStyle={activeStyles} partiallyActive={true}>Free valuation</Link></li>\n                    <li><Link to=\"/articles/\" activeStyle={activeStyles} partiallyActive={true}>Articles</Link></li>\n                    <li><Link to=\"/sell-with-summon/\" activeStyle={activeStyles} partiallyActive={true}>Sell your car</Link></li>\n                    <li><Link to=\"/recent-listings/\"  activeStyle={activeStyles} partiallyActive={true}>Listings</Link></li>\n                    <li><Link to=\"/reviews/\" activeStyle={activeStyles} partiallyActive={true}>Reviews</Link></li>\n                    <li><Link to=\"/faq/\" activeStyle={activeStyles} partiallyActive={true}>FAQ</Link></li> \n                    <li><Link to=\"/about/\" activeStyle={activeStyles} partiallyActive={true}>About</Link></li>\n                    {/* <li><Link to=\"/contact\" activeStyle={activeStyles} partiallyActive={true}>Contact</Link></li> */}\n                </ul>\n            </nav>\n        </div>\n        \n    </Section>\n\n    );\n}\n\nexport default mainNavigation;","import React from 'react'\nimport { Link } from \"gatsby\"\n\n\nimport './SideDrawer.css';\n\nconst sideDrawer = props => {\n\n            \n    let drawerClasses = 'side-drawer';\n    if (props.show) {\n        drawerClasses = 'side-drawer open'; \n    }\n\n    return (\n        \n        <nav className={drawerClasses}>\n            <ul>\n                <li><Link onClick={props.click} to=\"/\">Home</Link></li>\n                <li><Link onClick={props.click} to=\"https://value.summon.com.au//\">Free valuation</Link></li>\n                <li><Link onClick={props.click} to=\"/articles/\">Articles</Link></li>\n                <li><Link onClick={props.click} to=\"/sell-with-summon/\">Sell your car</Link></li>\n                <li><Link onClick={props.click} to=\"/recent-listings/\">Listings</Link></li>\n                <li><Link onClick={props.click} to=\"/reviews/\">Reviews</Link></li>\n                <li><Link onClick={props.click} to=\"/faq/\">FAQ</Link></li> \n                <li><Link onClick={props.click} to=\"/about/\">About</Link></li>\n                <li><Link onClick={props.click} to=\"/contact/\">Contact</Link></li> \n            </ul>\n        </nav>\n\n    );\n       \n};\n\nexport default sideDrawer","import React from 'react';\n\nimport './Backdrop.css';\n\nconst backdrop = props => (\n    <button className=\"backdrop\" aria-label=\"back drop\" onClick={props.click}/>\n);\n\nexport default backdrop;","import React, { Component } from \"react\";\n\nimport MainNavigation from \"../Navigation/MainNavigation\";\nimport SideDrawer from \"../SideDrawer/SideDrawer\";\nimport Backdrop from \"../Backdrop/Backdrop\";\n\nclass Header extends Component {\n\n    state = {sideDrawerOpen: false };\n\n    drawerToggleClickHandler = () => {\n\t\tthis.setState(prevState => {\n\t\t\treturn { sideDrawerOpen: !prevState.sideDrawerOpen };\n\t\t});\n\t};\n\n\tbackdropClickHandler = () => {\n\t\tthis.setState({ sideDrawerOpen: false });\n    };\n    \n\n    render() {\n\n        let backDrop;\n\t\tif (this.state.sideDrawerOpen) {\n\t\t\tbackDrop = <Backdrop click={this.backdropClickHandler} />;\n        }\n        \n        return (\n            <header>\n                <MainNavigation\n\t\t\t\tdrawClickHandler={this.drawerToggleClickHandler}\n                hideBG={this.props.hideBG}\n                />\n                <SideDrawer\n                    show={this.state.sideDrawerOpen}\n                    click={this.backdropClickHandler}\n                />\n                {backDrop}\n            </header>                 \n        );\n\n    }\n\n}\n\nexport default Header;\n","import React from \"react\"\nimport styled from 'styled-components'\n\nconst SectionPageMarginGradient = ({ bgColor, children, marginTop, marginBottom }) => {\n  if(!marginTop) marginTop = \"0px\";\n  if(!marginBottom) marginBottom = \"100px\";\n\n  return (\n    <>\n        <Wrapper bgColor={bgColor} marginTop={marginTop} marginBottom={marginBottom}>\n            <Content>{children}</Content>\n        </Wrapper>\n    </>\n  )\n} \n\nexport default SectionPageMarginGradient\n\nconst Wrapper = styled.section`\n    display: grid;\n    margin-top:  ${props => props.marginTop};\n    margin-bottom:  ${props => props.marginBottom};\n    grid-template-columns: minmax(400px, 1300px);\n    background: rgb(57,136,196);\n    background: linear-gradient(180deg, rgba(57,136,196,1) 0%, rgba(49,117,169,1) 100%);\n    justify-content: center;\n`;\n\nconst Content = styled.div`\n    margin-left: 100px;\n    margin-right: 100px;\n\n    @media (max-width: 800px) {\n      justify-content: center;\n      margin-left: 30px;\n      margin-right: 30px;\n    }\n`;\n","import React from \"react\"\nimport styled from 'styled-components'\n\nconst PageTitle = ({ color, children }) => {\n   if(!color) {\n       color = \"black\";  \n   }\n    return (\n        <Title color={color}>{children}</Title>\n  )\n} \n\nexport default PageTitle;\n\nconst Title = styled.h1`\n    margin-top: 30px;\n    font-weight: 600;\n    color: ${props => props.color};\n    font-size: 3rem;\n    line-height: 3rem;\n    letter-spacing: -0.1rem;\n`\n","import React from \"react\"\nimport styled from 'styled-components'\n\nconst Paragraph1 = ({ color, children }) => {\n   if(!color) {\n       color = \"black\";  \n   }\n    return (\n        <Paragraph color={color}>{children}</Paragraph>\n  )\n} \n\nexport default Paragraph1;\n\nconst Paragraph = styled.p`\n    color: ${props => props.color};\n    font-size: 1.1rem;\n    line-height: 1.7rem;\n    letter-spacing: -0.05rem;\n    margin-top: 10px;\n`\n","import React from 'react';\nimport { Link } from \"gatsby\"\nimport SectionPageMargin from '../Layout/Section/SectionPageMargin'\nimport Grid2 from '../Layout/Grid2/Grid2'\nimport GridItem from '../Layout/GridItem/GridItem'\nimport styled from 'styled-components'\nimport FacebookIcon from '../../images/assets/facebook.svg'\nimport TwitterIcon from '../../images/assets/twitter.svg'\nimport InstagramIcon from '../../images/assets/instagram.svg'\nimport IconButton from '../Layout/Button/IconButton'\n\n\nconst footer = props => (\n\n         <SectionPageMargin bgColor=\"#3479ae\" marginTop=\"0px\" marginBottom=\"0px\">\n       \n                <Grid2 style={{paddingTop: '50px', paddingBottom: '50px'}}>\n                    <GridItem order=\"2\">\n                        <StyledLink to=\"/terms/\"><span style={{whiteSpace: \"nowrap\"}}>Terms and conditions</span></StyledLink>\n                        <StyledLink to=\"/privacy/\"><span style={{whiteSpace: \"nowrap\"}}>Privacy policy</span></StyledLink>\n                        <StyledLink to=\"/contact/\">Contact</StyledLink>\n                        <StyledLink to=\"/covid-safe-measures/\"><span style={{whiteSpace: \"nowrap\"}}>Covid Measures</span></StyledLink>\t\n                        <CopyContainer>\n                            {'Copyright © Summon IO Pty Ltd'}\n                                {' '}\n                                {new Date().getFullYear()}\n                                {'.'} <br/>\n                            <ACNContainer>ACN: 640 473 463</ACNContainer>\n                        </CopyContainer>\n                    </GridItem>\n                    <GridItem order=\"1\" align=\"right\">\n                        <IconContainer>\n                            <IconButton onClick={(event) => handleClick(\"https://www.facebook.com/summoncars\")}>\n                                <FacebookIcon/> \n                            </IconButton>\n                            <IconButton onClick={(event) => handleClick(\"https://www.twitter.com/summon_cars\")}>\n                                <TwitterIcon/> \n                            </IconButton>\n                            <IconButton onClick={(event) => handleClick(\"https://www.instagram.com/summoncars\")}>\n                                <InstagramIcon/> \n                            </IconButton>\n                        </IconContainer>\n                    </GridItem>\n                </Grid2>\n    \n         </SectionPageMargin>\n   \n);\n\nconst handleClick = (url) => {\n    const a = document.createElement(\"a\");\n    a.href = url;\n    a.target = \"_blank\";\n    a.rel = \"noopener\";\n    a.click();\n}\n\n\nconst CopyContainer = styled.div`\n    padding-top: 10px;\n    padding-bottom: 20px;\n    color: white;\n`;\n\nconst ACNContainer = styled.div`\n    padding-top: 5px;\n    color: white;\n`;\n\n\nconst StyledLink = styled(Link)`\n\n font-weight: bold;\n text-decoration: none;\n color: white;\n margin-right: 30px;\n line-height: 2rem;\n\n &:hover {\n    color: #c7edfb;\n  }\n\n\n @media (max-width: 800px) {\n    display: block;\n    margin-bottom: 10px; \n  }\n\n`\n\nconst IconContainer = styled.div`\n\n    padding-bottom: 20px;\n`;\n\n\n\nexport default footer;","/**\n * Layout component that queries for data\n * with Gatsby's useStaticQuery component\n *\n * See: https://www.gatsbyjs.org/docs/use-static-query/\n */\n\nimport React from \"react\"\nimport PropTypes from \"prop-types\"\n\nimport Footer from \"../Footer/Footer\"\nimport Header from \"../Header/Header\"\nimport \"./Layout.css\"\n\nconst Layout = ({ children }) => {\n  \n  return (\n    <>\n        <Header />\n      \n          <main>{children}</main>\n\n        <Footer />\n      \n    </>\n  )\n} \n\nLayout.propTypes = {\n  children: PropTypes.node.isRequired,\n}\n\nexport default Layout\n","// import React from \"react\"\n// import styled from 'styled-components'\n\n// const Grid2Auto = ({children }) => {\n//   return (\n//     <>\n//         <Grid>\n//             {children}\n//         </Grid>\n//     </>\n//   )\n// } \n\n// export default Grid2Auto\n\n// const Grid = styled.div`\n//     display: grid;\n//     grid-template-columns: auto auto;\n//     column-gap: 40px;\n    \n//     @media (max-width: 800px) {\n//       grid-template-columns: 100%;\n//       grid-template-rows: auto auto;\n//       justify-items: center;\n//     }\n\n// `;\n\nimport styled from 'styled-components';\n\nconst Grid2Auto = styled.div`\n  display: grid;\n  grid-template-columns: auto auto;\n  column-gap: 40px;\n\n  @media (max-width: 800px) {\n    grid-template-columns: 100%;\n    grid-template-rows: auto auto;\n    justify-items: center;\n  }\n\n`;\n\nexport default Grid2Auto;\n\n\n"],"sourceRoot":""}