{"version":3,"sources":["webpack:///./src/pages/procedures/scar-revision.tsx","webpack:///./src/components/Hero.tsx"],"names":["content","backgroundTitle","subtitle","title","otherOptions","text","to","data","header","bgImage","womanWaterfall","childImageSharp","height","color","small","outline","inverted","image","otherBreast","darkness","style","fontSize","margin","map","mr","mb","float","Container","styled","div","Content","props","BgImage","Img","FormContainer","Hero","children","noForm","fluid","showMessage"],"mappings":"8FAAA,mIAmBMA,EAAU,CACdC,gBAAiB,6BACjBC,SAAU,oFACVC,MAAO,gBACPC,aAAc,CAKZ,CACEC,KAAM,8BACNC,GAAI,0BAEN,CACED,KAAM,sBACNC,GAAI,mCAEN,CACED,KAAM,gBACNC,GAAI,6BAEN,CACED,KAAM,eACNC,GAAI,8BAKK,0BAAGC,EAAI,EAAJA,KAAI,OACpB,gBAAC,IAAU,CAACC,OAAO,SACjB,gBAAC,SAAM,KACL,6BAAQR,EAAQG,MAAK,8BAGvB,gBAAC,IAAI,CAACM,QAASF,EAAKG,eAAeC,gBAAiBC,OAAO,SACzD,0BAAKZ,EAAQG,OACb,yBAAIH,EAAQE,UACZ,gBAAC,OAAI,KACH,gBAAC,IAAM,CAACW,MAAM,OAAOC,OAAO,EAAMC,SAAS,GAAK,gBAMpD,gBAAC,IAAO,KACN,2CACA,wPAMA,qHAIA,0EACA,kCAEE,8CACA,8CACA,uCACA,yCAEF,sKAIA,sIAKA,oEACA,0BACE,6CACA,iDACA,oCACA,qHACA,+DACA,0DACA,0CACA,2DACA,wGACA,+EAGF,gBAAC,IAAI,CAACT,GAAG,aACP,gBAAC,IAAM,CAACU,UAAU,GAAK,uBAI3B,gBAAC,IAAiB,CAChBC,MAAOV,EAAKW,YAAYP,gBACxBR,MAAOH,EAAQC,gBACfW,OAAO,QACPO,SAAS,OAET,qBAAGC,MAAO,CAAEC,SAAU,GAAIC,OAAQ,iBAAiB,kFAIlDtB,EAAQI,aAAamB,KAAI,gBAAGjB,EAAE,EAAFA,GAAID,EAAI,EAAJA,KAAI,OACnC,gBAAC,OAAI,CAACmB,GAAI,EAAGC,GAAI,EAAGL,MAAO,CAAEM,MAAO,SAClC,gBAAC,IAAI,CAACpB,GAAIA,GACR,gBAAC,IAAM,CAACQ,OAAO,EAAMD,MAAM,OAAOE,SAAS,GACxCV,SAOX,gBAAC,eAAY,CAACE,KAAMA,O,kCCpIxB,sEAMMoB,EAAYC,UAAOC,IAAG,sEAAVD,CAAU,wDAUtBE,EAAUF,kBAA2B,WAAU,oEAArCA,CAAqC,qfAIzC,SAAAG,GAAK,OAAIA,EAAMnB,QAAU,UA2C/BoB,EAAUJ,kBAA2BK,KAAI,oEAA/BL,CAA+B,+GAMnC,SAAAG,GAAK,OAAIA,EAAMnB,QAAU,UAO/BsB,EAAgBN,UAAOC,IAAG,0EAAVD,CAAU,khBAiEjBO,IAZF,SAAH,OAAMvB,EAAM,EAANA,OAAQH,EAAO,EAAPA,QAAS2B,EAAQ,EAARA,SAAUC,EAAM,EAANA,OAAM,OAC/C,kBAACV,EAAS,KACR,kBAACG,EAAO,CAAClB,OAAQA,GAASwB,GACzB3B,GAAW,kBAACuB,EAAO,CAACpB,OAAQA,EAAQ0B,MAAO7B,EAAQ6B,SAClDD,GACA,kBAACH,EAAa,KACZ,kBAAC,IAAI,CAAC/B,MAAM,oBAAoBoC,aAAa","file":"component---src-pages-procedures-scar-revision-tsx-80efa4c9763b9deaaf08.js","sourcesContent":["import * as React from 'react'\nimport { Flex } from 'grid-styled'\nimport { Link } from 'gatsby'\nimport Img from 'gatsby-image'\nimport { Helmet } from 'react-helmet'\nimport Hero from '../../components/Hero'\nimport Button from '../../components/Button'\nimport BackgroundSection from '../../components/BackgroundSection'\nimport MainLayout from '../../components/Layout'\nimport { AboutContact } from '..'\nimport {\n  BeforeAfter,\n  StyledTabs,\n  StyledTabList,\n  StyledTab,\n  Content,\n} from '../../components/procedures'\nimport { TabPanel } from 'react-tabs'\n\nconst content = {\n  backgroundTitle: 'Other Body Surgery Options',\n  subtitle: `Trusted, Experienced & Ethical. Boutique plastic surgery on Sydney's North Shore.`,\n  title: 'Scar Revision',\n  otherOptions: [\n    // {\n    //   text: 'Liposuction',\n    //   to: '/procedures/liposuction',\n    // },\n    {\n      text: 'Abdominoplasty (Tummy Tuck)',\n      to: '/procedures/tummy-tuck',\n    },\n    {\n      text: 'Skin Cancer Surgery',\n      to: '/procedures/skin-cancer-surgery',\n    },\n    {\n      text: 'Scar Revision',\n      to: '/procedures/scar-revision',\n    },\n    {\n      text: 'Mole Removal',\n      to: '/procedures/mole-removal',\n    },\n  ],\n}\n\nexport default ({ data }) => (\n  <MainLayout header=\"light\">\n    <Helmet>\n      <title>{content.title} - Plastic Surgery Sydney</title>\n    </Helmet>\n\n    <Hero bgImage={data.womanWaterfall.childImageSharp} height=\"600px\">\n      <h1>{content.title}</h1>\n      <p>{content.subtitle}</p>\n      <Flex>\n        <Button color=\"#fff\" small={true} outline={true}>\n          Learn more\n        </Button>\n      </Flex>\n    </Hero>\n\n    <Content>\n      <h2>Scar Revision</h2>\n      <p>\n        Dr Sellars performs scar revision surgery. Depending on the site, size\n        and reason for the scar, these can be treated with revision surgery\n        under local anaesthetic in the rooms or sedation/general anesthetic in\n        hospital.\n      </p>\n      <p>\n        Some scars may be treated with steroid injections such as hypertrophic\n        and keloid scars.\n      </p>\n      <h4>Scars can be caused by many factors such as:</h4>\n      <ul>\n        Burns\n        <li>Previous surgery</li>\n        <li>Traumatic injury</li>\n        <li>Piercings</li>\n        <li>Infections</li>\n      </ul>\n      <p>\n        Some scars may cause not only an aesthetic issue but can sometimes cause\n        functional problems, such as tethering and contractures of skin.\n      </p>\n      <p>\n        Patients must have realistic expectations that not all scars can be\n        improved, even with revision surgery.\n      </p>\n      \n      <h4>Possible risks of any surgery include:</h4>\n      <ul>\n        <li>Wound infection</li>\n        <li>Pain and discomfort</li>\n        <li>Nausea</li>\n        <li>Haematoma (an accumulation of blood around the surgical site that may require drainage)</li>\n        <li>Heavy bleeding from the incisions</li>\n        <li>Keloid or hypertrophic scars</li>\n        <li>Slow healing</li>\n        <li>Separation of the wound edges</li>\n        <li>Allergies to anaesthetic agents, antiseptics, suture material or dressings</li>\n        <li>Deep vein thrombosis DVT (blood clot in the leg)</li>\n      </ul>\n\n      <Link to=\"/contact/\">\n        <Button inverted={true}>Contact us today!</Button>\n      </Link>\n    </Content>\n\n    <BackgroundSection\n      image={data.otherBreast.childImageSharp}\n      title={content.backgroundTitle}\n      height=\"500px\"\n      darkness=\"0.4\"\n    >\n      <p style={{ fontSize: 18, margin: '-1rem 0 2rem' }}>\n        Browse Dr. Graham Sellars' full range of surgical and non-surgical\n        procedures.\n      </p>\n      {content.otherOptions.map(({ to, text }) => (\n        <Flex mr={2} mb={3} style={{ float: 'left' }}>\n          <Link to={to}>\n            <Button small={true} color=\"#fff\" outline={true}>\n              {text}\n            </Button>\n          </Link>\n        </Flex>\n      ))}\n    </BackgroundSection>\n\n    <AboutContact data={data} />\n  </MainLayout>\n)\nexport const query = graphql`\n  query ScarRevisionQuery {\n    womanWaterfall: file(relativePath: { eq: \"scar.jpg\" }) {\n      childImageSharp {\n        fluid(quality: 98, maxWidth: 3000) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    otherBreast: file(relativePath: { eq: \"water-body-woman.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    asaps: file(relativePath: { eq: \"ASAPS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    asps: file(relativePath: { eq: \"ASPS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    drSellars: file(relativePath: { eq: \"dr-graham-sellars.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    fracs: file(relativePath: { eq: \"FRACS.png\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n`\n","import React from 'react'\nimport Img, { GatsbyImageProps } from 'gatsby-image'\nimport styled from 'styled-components'\nimport Form from './Form'\nimport { Container as FormWrapper } from './Contact'\n\nconst Container = styled.div`\n  max-width: 100vw;\n  overflow: hidden;\n  position: relative;\n`\n\ninterface IBgImageProps {\n  height: string\n}\n\nconst Content = styled<IBgImageProps, any>('section')`\n  position: absolute;\n  margin: 0 10%;\n  z-index: 99;\n  height: ${props => props.height || 'auto'};\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  text-align: left;\n\n  @media (max-width: 900px) {\n    text-align: center;\n    margin: 0;\n    width: 100%;\n    height: auto;\n    margin-top: 80px;\n\n    p,\n    button {\n      display: none;\n    }\n  }\n\n  @media (max-width: 500px) {\n    align-items: center;\n    p,\n    button {\n      display: block;\n    }\n  }\n\n  h1,\n  h2,\n  h3 {\n    font-size: 30px;\n    margin: 1rem 0;\n    color: #fff;\n    text-shadow: 0 1px 55px rgba(0, 0, 0, 0.7);\n  }\n  p {\n    color: #fff;\n    font-size: 18px;\n    max-width: 420px;\n    width: auto;\n    text-shadow: 0 1px 35px rgba(0, 0, 0, 0.7);\n  }\n`\nconst BgImage = styled<IBgImageProps, any>(Img)`\n  position: absolute;\n  top: 0;\n  left: -5%;\n  width: 110%;\n  z-index: -1;\n  height: ${props => props.height || 'auto'};\n\n  @media (max-width: 500px) {\n    height: 450px;\n  }\n`\n\nconst FormContainer = styled.div`\n  width: 320px;\n  background: #fff;\n  border-radius: 4px;\n  padding: 1.5rem 2rem;\n  position: absolute;\n  right: 10%;\n  top: calc(50% + 30px);\n  transform: translateY(-50%);\n\n  @media (max-width: 900px) {\n    left: 50%;\n    right: auto;\n    bottom: 20px;\n    top: auto;\n    transform: translateX(-50%);\n    width: 90%;\n    max-width: 340px;\n  }\n\n  @media (max-width: 500px) {\n    display: none;\n  }\n\n  input {\n    padding: 0.75rem 1rem;\n  }\n\n  h2 {\n    color: #333 !important;\n    font-size: 1.75rem;\n    margin-bottom: 0.5rem;\n    font-weight: 400;\n    text-align: center;\n    text-shadow: none;\n  }\n\n  @media (max-width: 900px) {\n    margin-top: 2rem;\n  }\n\n  @media (max-width: 480px) {\n    width: 105%;\n  }\n`\n\ninterface IHeroProps {\n  height: string\n  bgImage: GatsbyImageProps\n  children: React.ReactChild\n  noForm: boolean\n}\n\nconst Hero = ({ height, bgImage, children, noForm }: IHeroProps) => (\n  <Container>\n    <Content height={height}>{children}</Content>\n    {bgImage && <BgImage height={height} fluid={bgImage.fluid} />}\n    {!noForm && (\n      <FormContainer>\n        <Form title=\"Contact us today!\" showMessage={false} />\n      </FormContainer>\n    )}\n  </Container>\n)\n\nexport default Hero\n"],"sourceRoot":""}