{"compiledCode":"\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _react = require('react'); var _react2 = _interopRequireDefault(_react);\n\n function StartHerePage() {\n  return (\n    _react2.default.createElement('div', { className: \"pd-page pd-start-here reading-picdrome\"  ,}\n      , _react2.default.createElement('style', null, \"\\n.reading-picdrome{--reading-ground:var(--c1gb4l3-runtime-bg, #f6f1e8);--reading-ink:var(--c1gb4l3-runtime-text, #2d3834);--reading-accent:var(--c1gb4l3-runtime-accent, #536956);--reading-soft:var(--c1gb4l3-runtime-panel, #e1e7d9);max-width:1120px!important;width:100%;margin:0 auto!important;padding:26px 40px 80px!important;background:var(--reading-ground)!important;color:var(--reading-ink)!important;font:16px/1.75 var(--c1gb4l3-font-body, Arial, sans-serif)!important;overflow-wrap:anywhere}\\n.reading-picdrome,.reading-picdrome *{box-sizing:border-box;min-width:0}\\n.reading-picdrome .reading-masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0 0 24px;margin:0 0 44px;border-bottom:1px solid var(--reading-accent)}\\n.reading-picdrome .reading-brand{font:24px/1.25 var(--c1gb4l3-font-heading, Georgia, serif);letter-spacing:-.5px;text-decoration:none;color:var(--reading-ink)!important}\\n.reading-picdrome .reading-navigation{display:flex;gap:12px 24px;flex-wrap:wrap;font-size:13px}.reading-picdrome .reading-navigation a{padding:10px 0}\\n.reading-picdrome a{color:var(--reading-accent);text-underline-offset:4px;text-decoration-thickness:1px}\\n.reading-picdrome :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--reading-accent)!important;outline-offset:4px}\\n.reading-picdrome h1{font:clamp(34px,4.8vw,56px)/1.12 var(--c1gb4l3-font-heading, Georgia, serif)!important;color:var(--reading-ink)!important;letter-spacing:-1.5px;max-width:23ch;margin:0 0 25px!important;overflow-wrap:normal}\\n.reading-picdrome h2{font:clamp(25px,3vw,34px)/1.22 var(--c1gb4l3-font-heading, Georgia, serif)!important;color:var(--reading-ink)!important;letter-spacing:-.6px;margin:42px 0 18px!important}\\n.reading-picdrome h3{font-size:19px!important;line-height:1.4!important;color:var(--reading-ink);margin:20px 0 10px}\\n.reading-picdrome p{max-width:78ch;line-height:1.8!important;margin-bottom:18px}\\n.reading-picdrome :is(.lead,.lede,.intro){font-size:18px!important;line-height:1.75!important;max-width:70ch}\\n.reading-picdrome :is(ul,ol){line-height:1.8;padding-left:24px}.reading-picdrome li{margin:7px 0}\\n.reading-picdrome .reading-hero{background:var(--reading-soft)!important;border-radius:4px!important;border:0!important;padding:40px 34px!important;margin-bottom:38px!important}.reading-picdrome .reading-hero h1{max-width:23ch}.reading-picdrome :is(section,article,nav){scroll-margin-top:24px}.reading-picdrome > section{margin-top:34px!important}\\n.reading-picdrome :is(pre,code){font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.reading-picdrome pre{padding:20px;overflow:auto;background:var(--reading-soft);border-radius:4px}\\n.reading-picdrome .reading-table{overflow-x:auto;max-width:100%;margin:24px 0;border:1px solid var(--reading-accent);border-radius:4px}.reading-picdrome .reading-table table{width:100%;min-width:560px;margin:0!important;border-collapse:collapse!important;font-size:14px;line-height:1.6}.reading-picdrome :is(th,td){text-align:left;padding:14px 16px!important;border-bottom:1px solid var(--reading-soft);vertical-align:top}.reading-picdrome th{background:var(--reading-soft)!important;color:var(--reading-ink)!important;font-weight:700}\\n.reading-picdrome :is(button,summary){min-height:44px;cursor:pointer;font:inherit}.reading-picdrome summary{padding:12px 0;font-weight:600}.reading-picdrome details{border-top:1px solid var(--reading-accent);padding:8px 0;margin:10px 0}\\n.reading-picdrome :is(input,select,textarea){max-width:100%;min-height:44px;font:inherit;line-height:1.5;padding:11px 12px;border:1px solid var(--reading-accent);border-radius:4px;background:var(--reading-ground);color:var(--reading-ink)}\\n.reading-picdrome a[style*=\\\"background\\\"]{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;padding:12px 18px!important;background:var(--reading-ink)!important;color:var(--reading-ground)!important;border-color:var(--reading-ink)!important;border-radius:4px!important;font-size:14px!important;text-decoration:none!important;line-height:1.5!important}\\n.reading-picdrome :is(img,svg,video,iframe){max-width:100%}.reading-picdrome .reading-navigation a:hover{text-decoration-thickness:2px}\\n@media(max-width:720px){.reading-picdrome{padding:22px 22px 56px!important;font-size:16px!important}.reading-picdrome .reading-masthead{align-items:flex-start;gap:20px;margin-bottom:34px}.reading-picdrome .reading-brand{font-size:21px;max-width:12ch}.reading-picdrome .reading-navigation{justify-content:flex-end;gap:4px 14px;max-width:170px;font-size:12px}.reading-picdrome h1{font-size:36px!important;letter-spacing:-.8px}.reading-picdrome h2{font-size:28px!important;margin-top:32px!important}.reading-picdrome section[style*=\\\"grid\\\"],.reading-picdrome div[style*=\\\"grid-template-columns\\\"]{grid-template-columns:1fr!important}.reading-picdrome section[style*=\\\"padding\\\"],.reading-picdrome article[style*=\\\"padding\\\"]{padding-left:18px!important;padding-right:18px!important}}\\n\\n.reading-picdrome a:is([class*=\\\"btn\\\"],[class*=\\\"button\\\"],[class*=\\\"cta\\\"]){background:var(--c1gb4l3-runtime-text, #2d3834)!important;color:var(--c1gb4l3-runtime-bg, #f6f1e8)!important;border-color:var(--c1gb4l3-runtime-text, #2d3834)!important;min-height:44px;display:inline-flex;align-items:center;padding:12px 18px;text-decoration:none}\\n\\n.reading-picdrome{width:100%;max-width:100%!important;min-width:0;box-sizing:border-box} .reading-picdrome .reading-masthead,.reading-picdrome .masthead{display:none} .reading-picdrome .reading-brand{font-family:var(--c1gb4l3-font-heading,Arial,sans-serif)} .reading-picdrome h1{font-weight:750!important;letter-spacing:-.045em} .reading-picdrome h2{font-weight:650!important} .reading-picdrome :is(code,pre,.eyebrow,.number){font-family:var(--c1gb4l3-font-mono,monospace)}\\n\")\n      , _react2.default.createElement('header', { className: \"reading-masthead\",}, _react2.default.createElement('a', { className: \"reading-brand\", href: \"/\",}, \"Picdrome\"), _react2.default.createElement('nav', { className: \"reading-navigation\", 'aria-label': \"Reading navigation\" ,}, _react2.default.createElement('a', { href: \"/\",}, \"Home\"), _react2.default.createElement('a', { href: \"/use-cases\",}, \"Start reading\" ), _react2.default.createElement('a', { href: \"/ai-image-disclosure\",}, \"Standards\")))\n\n      , _react2.default.createElement('style', null, \"\\n        .reading-picdrome.pd-start-here{\\n          --pd-ink:var(--c1gb4l3-runtime-text, #2d3834); --pd-slate:var(--c1gb4l3-runtime-text, #2d3834); --pd-muted:var(--c1gb4l3-runtime-muted, #59635c);\\n          --pd-line:var(--c1gb4l3-runtime-border, #d6d5c9); --pd-bg:var(--c1gb4l3-runtime-bg, #f6f1e8); --pd-soft:var(--c1gb4l3-runtime-panel, #ece6dc);\\n          --pd-brand:var(--c1gb4l3-runtime-accent, #536956); --pd-brand-dark:var(--c1gb4l3-runtime-accent, #536956); --pd-brand-soft:var(--c1gb4l3-runtime-accent-soft, #e4eadf);\\n          --pd-accent:var(--c1gb4l3-runtime-accent, #536956); --pd-warn:var(--c1gb4l3-runtime-text, #2d3834); --pd-warn-bg:var(--c1gb4l3-runtime-panel, #ece6dc);\\n          max-width:900px; margin:0 auto; padding:2rem 1.25rem 4rem; line-height:1.6;\\n          color:var(--pd-ink); background:var(--pd-bg);\\n          font-family:-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif;\\n        }\\n        .reading-picdrome.pd-start-here h1{font-size:2rem; line-height:1.2; margin:0 0 0.75rem;}\\n        .reading-picdrome.pd-start-here h2{font-size:1.4rem; line-height:1.3; margin:2.5rem 0 0.75rem;}\\n        .reading-picdrome.pd-start-here h3{font-size:1.08rem; line-height:1.35; margin:0 0 0.4rem;}\\n        .reading-picdrome.pd-start-here p{margin:0 0 1rem;}\\n        .reading-picdrome.pd-start-here a{color:var(--pd-brand-dark); text-decoration:underline;}\\n        .reading-picdrome.pd-start-here ul,.reading-picdrome.pd-start-here ol{margin:0 0 1rem; padding-left:1.25rem;}\\n        .reading-picdrome.pd-start-here li{margin:0 0 0.4rem;}\\n        .reading-picdrome .pd-lede{font-size:1.18rem; color:var(--pd-muted); margin-bottom:1.25rem;}\\n        .reading-picdrome .pd-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin:1.25rem 0;}\\n        .reading-picdrome .pd-card{border:1px solid var(--pd-line); border-radius:12px; padding:1rem 1.1rem; background:var(--pd-bg);}\\n        .reading-picdrome .pd-card p:last-child{margin-bottom:0;}\\n        .reading-picdrome .pd-tag{display:inline-block; font-size:0.78rem; font-weight:600; color:var(--pd-brand-dark); background:var(--pd-brand-soft); border-radius:999px; padding:0.12rem 0.65rem; margin-bottom:0.5rem;}\\n        .reading-picdrome .pd-callout{border-left:4px solid var(--pd-brand); background:var(--pd-brand-soft); border-radius:8px; padding:1rem 1.1rem; margin:1.25rem 0;}\\n        .reading-picdrome .pd-callout p:last-child{margin-bottom:0;}\\n        .reading-picdrome .pd-cta-row{display:flex; flex-wrap:wrap; gap:0.75rem; margin:1.5rem 0;}\\n        .reading-picdrome .pd-btn{background:var(--pd-brand); color:var(--c1gb4l3-runtime-action-fg, #ffffff); border-radius:10px; padding:0.7rem 1.1rem; font-weight:600; text-decoration:none; display:inline-block;}\\n        .reading-picdrome .pd-btn:hover{background:var(--pd-brand-dark);}\\n        .reading-picdrome .pd-btn--ghost{background:transparent; border:1px solid var(--pd-line); color:var(--pd-ink);}\\n        .reading-picdrome .pd-summary{background:var(--pd-soft); border:1px solid var(--pd-line); border-radius:12px; padding:1rem 1.25rem; margin:1.75rem 0; font-size:0.97rem; color:var(--pd-slate);}\\n        .reading-picdrome .pd-faq{margin:1rem 0;}\\n        .reading-picdrome .pd-faq h3{margin-bottom:0.25rem;}\\n        .reading-picdrome .pd-arrow{color:var(--pd-muted);}\\n      \\n.reading-picdrome{width:100%;max-width:100%!important;min-width:0;box-sizing:border-box} .reading-picdrome .reading-masthead,.reading-picdrome .masthead{display:none} .reading-picdrome .reading-brand{font-family:var(--c1gb4l3-font-heading,Arial,sans-serif)} .reading-picdrome h1{font-weight:750!important;letter-spacing:-.045em} .reading-picdrome h2{font-weight:650!important} .reading-picdrome :is(code,pre,.eyebrow,.number){font-family:var(--c1gb4l3-font-mono,monospace)}\\n\")\n\n        , _react2.default.createElement('h1', null, \"Start here: find the right website image fast\"       )\n        , _react2.default.createElement('p', { className: \"pd-lede\",}, \"New to Picdrome? Pick the path that matches what you're doing right now.\"            )\n      , _react2.default.createElement('p', null, \"Picdrome publishes free, plain-English guidance for entrepreneurs choosing images for their websites. The guidance is organized by where an image goes on a page, who the site is for, and what style it uses, so you can settle what you need before you start looking. Picdrome also offers original AI-generated images; the guides help you choose and check images from a source you trust. This page is a simple router: choose the path below that sounds most like your situation, and follow it.\"                                                                                  )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"pick-your-path\",}\n        , _react2.default.createElement('h2', { id: \"pick-your-path\",}, \"Pick your path\"  )\n        , _react2.default.createElement('p', null, \"There's more than one good way to work out which image you need. The fastest route depends on what you already know. Read the four options and follow the one that fits.\"                               )\n        , _react2.default.createElement('div', { className: \"pd-grid\",}\n          , _react2.default.createElement('div', { className: \"pd-card\",}, _react2.default.createElement('h3', null, \"I know the page I'm building\"     ), _react2.default.createElement('p', null, \"Working on a hero, an about section, a pricing page, or a contact block? Start from guidance grouped by where the image goes, so you know what suits that exact spot on the page. → \"                                   , _react2.default.createElement('a', { href: \"/use-cases\",}, \"Choose by page section\"   )))\n          , _react2.default.createElement('div', { className: \"pd-card\",}, _react2.default.createElement('h3', null, \"I know my type of business\"     ), _react2.default.createElement('p', null, \"A cafe, a law firm, a fitness studio, a SaaS product, a freelance portfolio. Pick your business type and see what kind of image suits that kind of site and the tone it usually needs. → \"                                    , _react2.default.createElement('a', { href: \"/business-types\",}, \"Choose by business type\"   )))\n          , _react2.default.createElement('div', { className: \"pd-card\",}, _react2.default.createElement('h3', null, \"I want to choose a style first\"      ), _react2.default.createElement('p', null, \"Have a visual direction in mind, like minimal, bright, moody, or illustrated? Settle the style and subject so every image across your site matches. → \"                         , _react2.default.createElement('a', { href: \"/categories\",}, \"Choose by style and category\"    )))\n          , _react2.default.createElement('div', { className: \"pd-card\",}, _react2.default.createElement('h3', null, \"I want a quick decision\"    ), _react2.default.createElement('p', null, \"Not sure where to begin? Answer three questions about the page and the look, and the choice narrows itself, so you can get back to building. → \"                           , _react2.default.createElement('a', { href: \"/blog/choose-the-right-image-framework\",}, \"Choose the right image for a page\"      )))\n        )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"if-you-re-brand-new-to-choosing-website-images\",}\n        , _react2.default.createElement('h2', { id: \"if-you-re-brand-new-to-choosing-website-images\",}, \"If you're brand new to choosing website images\"       )\n        , _react2.default.createElement('p', null, \"If this is your first website, choosing images can feel like guesswork. It doesn't have to. A good website image is simple: it fits the page, stays readable behind text, and loads fast. That's the whole job.\"                                    )\n        , _react2.default.createElement('p', null, \"Two short reads will get you comfortable quickly. The \"         , _react2.default.createElement('a', { href: \"/blog/beginners-guide-to-website-images\",}, \"beginner's guide to website images\"    ), \" explains the basics in plain English, including sizes, formats, and what makes an image work in a layout. The \"                    , _react2.default.createElement('a', { href: \"/blog/image-for-each-website-page\",}, \"image for each website page\"    ), \" guide walks through a typical site page by page and suggests what kind of image suits each one.\"                  )\n        , _react2.default.createElement('p', null, \"Between them they lay out a full site, section by section, so you can see at a glance what goes where before you start looking for images.\"                          )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"plan-a-matched-set\",}\n        , _react2.default.createElement('h2', { id: \"plan-a-matched-set\",}, \"Plan a matched set\"   )\n        , _react2.default.createElement('p', null, \"Sometimes you don't want to pick images one at a time. If you'd rather work from a coordinated set, use the pack structures to choose the images as one job so your pages feel like they belong to the same site.\"                                        )\n        , _react2.default.createElement('p', null, \"The \" , _react2.default.createElement('a', { href: \"/packs\",}, \"packs page\" ), \" provides six complete structures and a workflow for assembling a set; it does not provide image downloads. If you're building a whole site from scratch, \"                          , _react2.default.createElement('a', { href: \"/blog/new-website-image-checklist\",}, \"a starter image checklist for a brand-new business website\"        ), \" lists the common sections of a typical site in one place, so you can fill out a first draft fast and refine later.\"                       )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"check-the-license-before-you-publish\",}\n        , _react2.default.createElement('h2', { id: \"check-the-license-before-you-publish\",}, \"Check the license before you publish\"     )\n        , _react2.default.createElement('p', null, \"Picdrome originals use the Picdrome License; images from other sources keep their own terms. Whatever image you use, the current license at its source controls what you may do with it, so read that license before you publish. This is a plain summary, not legal advice.\"                                             )\n        , _react2.default.createElement('div', { className: \"pd-callout\",}, _react2.default.createElement('p', null, \"If you're unsure about a specific use, run it through the \"           , _react2.default.createElement('a', { href: \"/blog/image-rights-pre-publish-check\",}, \"pre-publish image rights check\"   ), \", and read \"   , _react2.default.createElement('a', { href: \"/blog/free-vs-royalty-free-vs-public-domain\",}, \"free vs royalty-free vs public domain\"     ), \" so the labels on an image source mean what you think they mean.\"             ))\n        , _react2.default.createElement('p', null, \"If the image is AI-generated, keep that in mind when you pick images of people or places: an AI-generated face is not a real customer or team member. The \"                             , _react2.default.createElement('a', { href: \"/ai-image-disclosure\",}, \"AI image disclosure guide\"   ), \" covers what to check and when to tell readers.\"         )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"building-with-code-or-an-ai-website-builder\",}\n        , _react2.default.createElement('h2', { id: \"building-with-code-or-an-ai-website-builder\",}, \"Building with code or an AI website builder?\"       )\n        , _react2.default.createElement('p', null, \"If you're wiring images into a template, CMS, or AI website builder, use the \"              , _react2.default.createElement('a', { href: \"/developers\",}, \"developers page\" ), \" as a vendor-neutral design guide. It explains how to keep source, alt text, AI-generated provenance, suggested use, and license information together. It does not document or promise a live Picdrome API.\"                               )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"your-next-step\",}\n        , _react2.default.createElement('h2', { id: \"your-next-step\",}, \"Your next step\"  )\n        , _react2.default.createElement('p', null, \"If you only do one thing today, start from the page section. It's the quickest path for most people, because you start from the spot you're actually trying to fill.\"                             )\n        , _react2.default.createElement('div', { className: \"pd-cta-row\",}\n          , _react2.default.createElement('a', { className: \"pd-btn\", href: \"/use-cases\",}, \"Choose by page section\"   )\n          , _react2.default.createElement('a', { className: \"pd-btn pd-btn--ghost\" , href: \"/business-types\",}, \"Choose by business type\"   )\n          , _react2.default.createElement('a', { className: \"pd-btn pd-btn--ghost\" , href: \"/blog/choose-the-right-image-framework\",}, \"Choose the right image for a page\"      )\n          , _react2.default.createElement('a', { className: \"pd-btn pd-btn--ghost\" , href: \"/blog/beginners-guide-to-website-images\",}, \"Read the beginner guide\"   )\n        )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"frequently-asked-questions\", className: \"pd-faq\",}\n        , _react2.default.createElement('h2', { id: \"frequently-asked-questions\",}, \"Frequently asked questions\"  )\n        , _react2.default.createElement('h3', null, \"I just need one image — where do I start?\"         )\n        , _react2.default.createElement('p', null, \"Start from the page you're filling. Go to \"        , _react2.default.createElement('a', { href: \"/use-cases\",}, \"choosing by page section\"   ), \", pick the section you're working on, like a hero or an about block, and note what that spot needs. If you'd rather work it out first, \"                           , _react2.default.createElement('a', { href: \"/blog/choose-the-right-image-framework\",}, \"the right-image framework\"  ), \" narrows it in three questions.\"     )\n        , _react2.default.createElement('h3', null, \"I don't know what image my page needs. What now?\"         )\n        , _react2.default.createElement('p', null, \"Read \" , _react2.default.createElement('a', { href: \"/blog/image-for-each-website-page\",}, \"which image belongs on each page\"     ), \", which suggests what kind of image suits each part of a typical site, section by section. For the one-page version, \"                     , _react2.default.createElement('a', { href: \"/blog/image-types-for-each-page-cheat-sheet\",}, \"a quick cheat sheet of image types for each page\"         ), \" sums it up.\"   )\n        , _react2.default.createElement('h3', null, \"Does Picdrome provide the images?\"    )\n        , _react2.default.createElement('p', null, \"Yes. Picdrome offers original AI-generated images, downloads, and the Picdrome License. This guide does not document a public image-discovery API. The guides help you choose and check images from a source you trust, and the current license at that source controls how you may use them.\"                                             )\n        , _react2.default.createElement('h3', null, \"Do I need design skills to use Picdrome?\"       )\n        , _react2.default.createElement('p', null, \"No. The guides are organized by where an image goes and who it's for, so you don't have to know design theory to make a good choice. If you want a little background, the \"                                  , _react2.default.createElement('a', { href: \"/blog/beginners-guide-to-website-images\",}, \"beginner's guide to website images\"    ), \" covers the basics in plain English.\"      )\n        , _react2.default.createElement('h3', null, \"Can I plan a whole set of images at once?\"         )\n        , _react2.default.createElement('p', null, \"Use \" , _react2.default.createElement('a', { href: \"/packs\",}, \"the pack-building guide\"  ), \" to choose one of six coordinated structures, then select the images it calls for. \"               , _react2.default.createElement('a', { href: \"/blog/new-website-image-checklist\",}, \"A starter image checklist for a brand-new business website\"        ), \" lists the common sections of a typical site so you can fill out a whole draft in one go.\"                   )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"in-short\", className: \"pd-summary\",}\n        , _react2.default.createElement('h2', { id: \"in-short\",}, \"In short\" )\n        , _react2.default.createElement('p', null, \"Picdrome is free guidance for choosing website images, and you can navigate it three ways. Start by \"                 , _react2.default.createElement('a', { href: \"/use-cases\",}, \"page section\" ), \" if you know the spot you're filling, by \"         , _react2.default.createElement('a', { href: \"/business-types\",}, \"business type\" ), \" if you know your industry, or by \"        , _react2.default.createElement('a', { href: \"/categories\",}, \"style\"), \" if you have a look in mind. New to all this? Start with the \"               , _react2.default.createElement('a', { href: \"/blog/beginners-guide-to-website-images\",}, \"beginner's guide\" ), \". Planning a coordinated set? See the \"       , _react2.default.createElement('a', { href: \"/packs\",}, \"packs\"), \". Building with code or an AI builder? Visit the \"          , _react2.default.createElement('a', { href: \"/developers\",}, \"developers page\" ), \". Before you publish, read the current license at the image's source; Picdrome originals use the Picdrome License; images from other sources keep their own terms.\"                         )\n      )\n    )\n  );\n} exports.default = StartHerePage;"}