{"version":3,"sources":["pages/ThinkingPage/styles.js","pages/ThinkingPage/index.tsx"],"names":["Hero","styled","div","withConfig","componentId","media","lg","_templateObject","_taggedTemplateLiteral","color","Cards","grid","gutterSmall","md","_templateObject2","_templateObject3","gutter","Card","article","_templateObject4","CardImage","CardContent","textStyles","H3Condensed","_templateObject5","PSmall","ReadMore","span","buttons","textLinkPrimary","getType","filename","ext","substr","indexOf","Picture","_ref","imagename","alt","sources","path","getAssetUrl","map","attributes","srcSet","style","aspectRatio","type","startsWith","images","lastSource","length","React","createElement","className","source","idx","Object","assign","key","src","width","height","topics","description","heading","href","TopicItem","_ref2","topic","NavLink","to","aria-label","concat","ThinkingPageContainer","connect","state","document","_ref3","doc","Fragment","Container","index"],"mappings":"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","file":"assets/js/pages-ThinkingPage.chunk.js?cb=a70edc4b41ded89eeda0","sourcesContent":["import styled from \"styled-components\";\nimport { color, media, grid, textStyles, buttons } from \"@utils/style-utils\";\n\nexport const Hero = styled.div`\n\tmargin-bottom: 50px;\n\tpadding: 130px 0 80px;\n\tposition: relative;\n\n\t${media.lg`\n\t\tmargin-bottom: 80px;\n\t\tpadding: 165px 0 100px;\n\t`}\n\n\th1 {\n\t\tposition: relative;\n\t\ttext-align: center;\n\t\tz-index: 9;\n\t}\n\n\t&::after {\n\t\tbackground: ${color(\"blue\", 4)};\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 100%;\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: 100%;\n\t\tz-index: 0;\n\t}\n`;\n\nexport const Cards = styled.div`\n\t> div,\n\t> article {\n\t\tmargin-bottom: ${grid.gutterSmall}px;\n\t}\n\n\t${media.md`\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: space-between;\n\n\t\t> div,\n\t\t> article {\n\t\t\tflex-basis: calc((100% - ${grid.gutterSmall}px) / 2);\n\t\t}\n\t`}\n\n\t${media.lg`\n\t\t> div,\n\t\t> article {\n\t\t\tflex-basis: calc((100% - ${grid.gutter * 2}px) / 3);\n\t\t\tmargin-bottom: ${grid.gutter}px;\n\t\t}\n\t`}\n`;\n\nexport const Card = styled.article`\n\tborder: 1px solid ${color(\"grey\", 5)};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 10px 25px -15px rgba(0, 0, 0, 0.1);\n\tdisplay: block;\n\toverflow: hidden;\n\ttransition: box-shadow 150ms, border-color 150ms, transform 150ms;\n\ttransform: scale(1);\n\n\t&:hover {\n\t\tborder-color: ${color(\"blue\", 4)};\n\t\tbox-shadow: 0px 5px 25px 0 rgba(0, 0, 0, 0.1);\n\t}\n\n\t&:active {\n\t\tbox-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.1);\n\t\ttransform: scale(0.98);\n\t}\n\n\t${media.md`\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t`}\n\n\t> a {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\theight: 100%;\n\t\ttext-decoration: none;\n\t}\n`;\n\nexport const CardImage = styled.div`\n\tbackground: ${color(\"grey\", 7)};\n\theight: 0;\n\toverflow: hidden;\n\tpadding-bottom: 50.45%;\n\tposition: relative;\n\n\timg {\n\t\tdisplay: block;\n\t\tleft: 50%;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t\twidth: 100%;\n\t}\n`;\n\nexport const CardContent = styled.div`\n\tbackground: ${color(\"white\")};\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-grow: 1;\n\tpadding: 30px 30px 40px;\n\n\th3 {\n\t\t${textStyles.H3Condensed}\n\t\tflex-grow: 1;\n\t\tmargin-bottom: 15px;\n\t\tmargin-top: 0;\n\n\t\t${media.md`\n\t\t\tmargin-bottom: 24px;\n\t\t`}\n\t}\n\n\tp {\n\t\t${textStyles.PSmall}\n\t\tcolor: ${color(\"grey\", 2)};\n\t\tflex-grow: 2;\n\t\tmargin-bottom: 35px;\n\t}\n`;\n\nexport const ReadMore = styled.span`\n\t${buttons.textLinkPrimary}\n\n\t&::after {\n\t\topacity: 0;\n\t\ttransform: translateX(-6px);\n\t\ttransition: opacity 150ms, transform 150ms, color 150ms;\n\t}\n\n\t${Card}:hover & {\n\t\t&::after {\n\t\t\topacity: 1;\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n`;\n","import React, { Fragment } from \"react\";\nimport { IDocument } from \"@redux/document\";\nimport { IApplicationState } from \"@redux\";\nimport { connect } from \"react-redux\";\nimport { Container } from \"@components/Grid\";\nimport { getAssetUrl } from \"@utils/index\";\n\nimport { NavLink } from \"react-router-dom\";\n\nimport { Hero, Card, CardImage, CardContent, ReadMore, Cards } from \"./styles\";\n\ninterface ITopic {\n\tdescription: string;\n\theading: string;\n\timagename: string;\n\thref: string;\n}\n\nconst images = (imagename: string) => {\n\tconst path = getAssetUrl(\"/assets/images/km-2022/pohtimassa/\");\n\tconst extensions = [\"@2x.png\", \".png\"];\n\n\treturn extensions.map(ext => {\n\t\tconst attributes: any = {\n\t\t\tsrcSet: path + imagename + ext,\n\t\t\tstyle: {\n\t\t\t\taspectRatio: \"auto 426 / 215\",\n\t\t\t},\n\t\t\ttype: \"image/\" + getType(ext),\n\t\t};\n\n\t\tif (ext.startsWith(\"@2x\")) {\n\t\t\tattributes[\"media\"] = `(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)`;\n\t\t}\n\n\t\treturn attributes;\n\t});\n};\n\nconst getType = (filename: string) => {\n\tconst ext = filename.substr(filename.indexOf(\".\") + 1);\n\n\tif (ext === \"jpg\") {\n\t\treturn \"jpeg\";\n\t}\n\n\treturn ext;\n};\n\nconst Picture = ({ imagename, alt }) => {\n\tconst sources = images(imagename);\n\tconst lastSource = sources[sources.length - 1];\n\n\treturn (\n\t\t<picture className=\"thinking-picture\">\n\t\t\t{sources.map((source, idx: number) => (\n\t\t\t\t<source key={imagename + idx} {...source} />\n\t\t\t))}\n\t\t\t<img\n\t\t\t\talt={alt}\n\t\t\t\tsrc={lastSource.srcSet}\n\t\t\t\tstyle={{\n\t\t\t\t\taspectRatio: 'auto ' + lastSource.width + ' / ' + lastSource.height,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</picture>\n\t);\n};\n\nconst topics: ITopic[] = [\n\t{\n\t\tdescription:\n\t\t\t\"Harkitsetko myyntiä? Me uskomme, että oikein hinnoiteltu on puoliksi myyty. Arvioimme asuntosi hinnan 98 % tarkkuudella. Tutustu tarkemmin!\",\n\t\theading: \"Asunnon arviointi\",\n\t\thref: \"/asunnon-arviointi\",\n\t\timagename: \"asunnon-arviointi\",\n\t},\n\t{\n\t\tdescription:\n\t\t\t\"Mitä kannattaa ottaa huomioon, kun ostat tai myyt asuntoa? Entä mitkä ovat myyjän ja ostajan vastuut?\",\n\t\theading: \"Asunnon ostoon ja myyntiin liittyvät käytännöt\",\n\t\thref: \"/asunnon-ostamisen-myymisen-kaytannot\",\n\t\timagename: \"asunnon-ostoon-ja-myyntiin-liittyvat-kaytannot\",\n\t},\n\t{\n\t\tdescription: \"Onko nykyinen asunto jäämässä pieneksi? Harkitsetko kodin vaihtoa?\",\n\t\theading: \"Asunnon vaihto\",\n\t\thref: \"/asunnon-vaihto\",\n\t\timagename: \"asunnon-vaihto\",\n\t},\n\t{\n\t\tdescription:\n\t\t\t\"Suunnitteletko asunnon jättämistä perintönä tai oletko perimässä läheisen asuntoa? Kokosimme asunto perintönä -osioon ajankohtaisimman tiedon.\",\n\t\theading: \"Asunto perintönä\",\n\t\thref: \"/asunto-perintona\",\n\t\timagename: \"asunto-perintona\",\n\t},\n\t{\n\t\tdescription:\n\t\t\t\"Mikä on asuntomarkkinoiden tilanne? Entäpä asuntojen hintakehitys sinua kiinnostavalla alueella? Meiltä löydät tuoreinta tietoa!\",\n\t\theading: \"Asuntojen hintakehitys\",\n\t\thref: \"/asuntojen-hintakehitys\",\n\t\timagename: \"asuntojen-hintakehitys\",\n\t},\n\t{\n\t\tdescription:\n\t\t\t\"Oletko ostamassa asuntoa? Mitä kannattaa ottaa huomioon asuntolainan ottamisessa? Kannattaako pankkien kilpailuttaminen?\",\n\t\theading: \"Asuntolaina\",\n\t\thref: \"/asuntolaina\",\n\t\timagename: \"asuntolaina\",\n\t},\n\t{\n\t\tdescription:\n\t\t\t\"Harkitsetko sijoitusasunnon ostoa? Asiantuntijamme auttavat sinua löytämään oikean kohteen, jotta saat rahoillesi parhaan tuoton!\",\n\t\theading: \"Asuntosijoittaminen\",\n\t\thref: \"/asuntosijoittaminen\",\n\t\timagename: \"asuntosijoittaminen\",\n\t},\n\t{\n\t\tdescription:\n\t\t\t\"Ensiasuntoa ostamassa? Lue parhaat vinkit elämäsi tärkeimpään hankintaan ja löydä unelma-asuntosi jo tänään!\",\n\t\theading: \"Ensiasunnon osto\",\n\t\thref: \"/ensiasunnon-ostaminen\",\n\t\timagename: \"ensiasunnon-osto\",\n\t},\n\t{\n\t\tdescription:\n\t\t\t\"Haetko helppoa ja turvallista asumisen muotoa? Entä mietityttääkö omien vanhempien asuminen, kun he ikääntyvät?\",\n\t\theading: \"Senioriasuminen\",\n\t\thref: \"/senioriasuminen\",\n\t\timagename: \"senioriasuminen\",\n\t},\n];\n\nconst TopicItem = ({ topic }) => {\n\tconst { description, heading, imagename, href } = topic;\n\treturn (\n\t\t<Card>\n\t\t\t<NavLink to={href} aria-label={heading}>\n\t\t\t\t<CardImage>\n\t\t\t\t\t<Picture imagename={imagename} alt={heading + \" - Kiinteistömaailma.fi\"} />\n\t\t\t\t</CardImage>\n\t\t\t\t<CardContent>\n\t\t\t\t\t<h3>{heading}</h3>\n\t\t\t\t\t<p>{description}</p>\n\t\t\t\t\t<ReadMore aria-label={`Lue lisää aiheesta ${heading}`}>Lue lisää</ReadMore>\n\t\t\t\t</CardContent>\n\t\t\t</NavLink>\n\t\t</Card>\n\t);\n};\n\ninterface IProps {\n\tdocument: IDocument;\n}\n\nconst ThinkingPage = ({ document: doc }: IProps) => {\n\treturn (\n\t\t<Fragment>\n\t\t\t<Hero className=\"page-hero\">\n\t\t\t\t<Container>\n\t\t\t\t\t<h1>Pohtimassa</h1>\n\t\t\t\t</Container>\n\t\t\t</Hero>\n\t\t\t<Container>\n\t\t\t\t<Cards>\n\t\t\t\t\t{topics.map((topic: ITopic, index: number) => (\n\t\t\t\t\t\t<TopicItem key={index} topic={topic} />\n\t\t\t\t\t))}\n\t\t\t\t</Cards>\n\t\t\t</Container>\n\t\t</Fragment>\n\t);\n};\n\nconst mapStateToProps = (state: IApplicationState) => ({\n\tdocument: state.document,\n});\n\nconst ThinkingPageContainer = connect(mapStateToProps)(ThinkingPage);\n\nexport default ThinkingPageContainer;\n"],"sourceRoot":""}