fix sample project images (#6025)

oops, these should be looking for pngs not jpgs

<img width="727" alt="Screenshot 2024-06-27 at 12 02 40 PM"
src="https://github.com/concrete-utopia/utopia/assets/47405698/bed52e95-048d-4949-9c95-7e3f5192fd46">

editor/src/sample-projects/sample-project-utils.ts

@@ -214,7 +214,7 @@ function createBeachesProjectContents(): ProjectContentTreeRoot {
             lastParseSuccess: null,
             lastSavedContents: null,
             fileContents: {
-              code: "import * as React from 'react'\nimport { View } from 'utopia-api'\nimport '../public/globals.css'\n\nexport var Playground = ({ style }) => {\n  return (\n    <div\n      style={{\n        height: '100%',\n        width: '100%',\n        contain: 'layout',\n        ...style,\n      }}\n      data-uid='a7b'\n    >\n      <div\n        style={{\n          height: 'max-content',\n          position: 'absolute',\n          left: 163,\n          top: 305,\n          display: 'flex',\n          flexDirection: 'row',\n          width: 'max-content',\n          gap: 10,\n        }}\n        data-uid='b15'\n      >\n        <img\n          src='https://github.com/concrete-utopia/utopia/blob/master/editor/resources/editor/[email protected]?raw=true'\n          alt='Utopia logo'\n          style={{ width: 118, height: 150 }}\n          data-uid='b0e'\n        />\n        <img\n          src='https://github.com/concrete-utopia/utopia/blob/master/editor/resources/editor/[email protected]?raw=true'\n          alt='Utopia logo'\n          style={{ width: 118, height: 150 }}\n          data-uid='aaf'\n        />\n        <img\n          src='https://github.com/concrete-utopia/utopia/blob/master/editor/resources/editor/[email protected]?raw=true'\n          alt='Utopia logo'\n          style={{ width: 118, height: 150 }}\n          data-uid='aam'\n        />\n      </div>\n    </div>\n  )\n}\n",
+              code: "import * as React from 'react'\nimport { View } from 'utopia-api'\nimport '../public/globals.css'\n\nexport var Playground = ({ style }) => {\n  return (\n    <div\n      style={{\n        height: '100%',\n        width: '100%',\n        contain: 'layout',\n        ...style,\n      }}\n      data-uid='a7b'\n    >\n      <div\n        style={{\n          height: 'max-content',\n          position: 'absolute',\n          left: 163,\n          top: 305,\n          display: 'flex',\n          flexDirection: 'row',\n          width: 'max-content',\n          gap: 10,\n        }}\n        data-uid='b15'\n      >\n        <img\n          src='https://github.com/concrete-utopia/utopia/blob/master/editor/resources/editor/[email protected]?raw=true'\n          alt='Utopia logo'\n          style={{ width: 118, height: 150 }}\n          data-uid='b0e'\n        />\n        <img\n          src='https://github.com/concrete-utopia/utopia/blob/master/editor/resources/editor/[email protected]?raw=true'\n          alt='Utopia logo'\n          style={{ width: 118, height: 150 }}\n          data-uid='aaf'\n        />\n        <img\n          src='https://github.com/concrete-utopia/utopia/blob/master/editor/resources/editor/[email protected]?raw=true'\n          alt='Utopia logo'\n          style={{ width: 118, height: 150 }}\n          data-uid='aam'\n        />\n      </div>\n    </div>\n  )\n}\n",
               parsed: {
                 type: 'UNPARSED',
               },
@@ -231,7 +231,7 @@ function createBeachesProjectContents(): ProjectContentTreeRoot {
             lastParseSuccess: null,
             lastSavedContents: null,
             fileContents: {
-              code: "import * as React from 'react'\nimport '../public/globals.css'\nimport { FlexCol } from './utils'\n\nexport var App = () => {\n  return (\n    <FlexCol\n      style={{\n        width: '100%',\n        height: '100%',\n        background: 'white',\n\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\n    >\n      <img\n        src='https://github.com/concrete-utopia/utopia/blob/master/editor/resources/editor/pyramid_fullsize@2x.jpg?raw=true'\n        alt='Utopia logo'\n        style={{\n          width: 357,\n          height: 453,\n        }}\n      ></img>\n    </FlexCol>\n  )\n}\n",
+              code: "import * as React from 'react'\nimport '../public/globals.css'\nimport { FlexCol } from './utils'\n\nexport var App = () => {\n  return (\n    <FlexCol\n      style={{\n        width: '100%',\n        height: '100%',\n        background: 'white',\n\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\n    >\n      <img\n        src='https://github.com/concrete-utopia/utopia/blob/master/editor/resources/editor/pyramid_fullsize@2x.png?raw=true'\n        alt='Utopia logo'\n        style={{\n          width: 357,\n          height: 453,\n        }}\n      ></img>\n    </FlexCol>\n  )\n}\n",
               parsed: {
                 type: 'UNPARSED',
               },