{"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 UseCasesPage() {\n  return (\n    _react2.default.createElement('div', { className: \"pd-page pd-use-cases 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: \"/ai-image-disclosure\",}, \"Standards\")))\n\n      , _react2.default.createElement('style', null, \"\\n        .reading-picdrome.pd-use-cases {\\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;\\n          background:var(--pd-bg); color:var(--pd-ink);\\n          font-family:-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif;\\n          line-height:1.6;\\n        }\\n        .reading-picdrome.pd-use-cases h1 { font-size:clamp(28px,5vw,40px); line-height:1.15; margin:0 0 .75rem; color:var(--pd-ink); }\\n        .reading-picdrome.pd-use-cases h2 { font-size:clamp(21px,3vw,27px); line-height:1.25; margin:2.5rem 0 .75rem; color:var(--pd-ink); }\\n        .reading-picdrome.pd-use-cases h3 { font-size:18px; line-height:1.3; margin:0 0 .4rem; color:var(--pd-ink); }\\n        .reading-picdrome.pd-use-cases p { margin:0 0 1rem; }\\n        .reading-picdrome.pd-use-cases .pd-lede { font-size:clamp(17px,2.2vw,20px); color:var(--pd-muted); max-width:760px; margin-bottom:1.5rem; }\\n        .reading-picdrome.pd-use-cases a { color:var(--pd-brand-dark); text-decoration:underline; }\\n        .reading-picdrome.pd-use-cases .pd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin:1.25rem 0; }\\n        .reading-picdrome.pd-use-cases .pd-card { border:1px solid var(--pd-line); border-radius:12px; padding:1rem 1.1rem; background:var(--pd-bg); }\\n        .reading-picdrome.pd-use-cases .pd-card h3 a { text-decoration:none; }\\n        .reading-picdrome.pd-use-cases .pd-card h3 a:hover { text-decoration:underline; }\\n        .reading-picdrome.pd-use-cases .pd-card p { margin:0; color:var(--pd-slate); font-size:15px; }\\n        .reading-picdrome.pd-use-cases .pd-callout { border-left:4px solid var(--pd-brand); background:var(--pd-brand-soft); padding:1rem 1.1rem; border-radius:8px; margin:1.5rem 0; }\\n        .reading-picdrome.pd-use-cases .pd-callout p { margin:0; color:var(--pd-slate); }\\n        .reading-picdrome.pd-use-cases .pd-summary { background:var(--pd-soft); border:1px solid var(--pd-line); border-radius:12px; padding:1rem 1.25rem; margin:1.5rem 0; }\\n        .reading-picdrome.pd-use-cases .pd-summary p { margin:0; color:var(--pd-slate); }\\n        .reading-picdrome.pd-use-cases .pd-cta-row { display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0 .5rem; }\\n        .reading-picdrome.pd-use-cases .pd-btn { background:var(--pd-brand); color:var(--c1gb4l3-runtime-action-fg, #ffffff); border-radius:10px; padding:.7rem 1.1rem; font-weight:600; text-decoration:none; display:inline-block; }\\n        .reading-picdrome.pd-use-cases .pd-btn:hover { background:var(--pd-brand-dark); }\\n        .reading-picdrome.pd-use-cases .pd-btn-secondary { border:1px solid var(--pd-line); color:var(--pd-ink); border-radius:10px; padding:.7rem 1.1rem; font-weight:600; text-decoration:none; display:inline-block; background:var(--pd-bg); }\\n        .reading-picdrome.pd-use-cases .pd-btn-secondary:hover { background:var(--pd-soft); }\\n        .reading-picdrome.pd-use-cases .pd-faq { border-top:1px solid var(--pd-line); padding:1rem 0; }\\n        .reading-picdrome.pd-use-cases .pd-faq:last-of-type { border-bottom:1px solid var(--pd-line); }\\n        .reading-picdrome.pd-use-cases .pd-faq p { margin:0; color:var(--pd-slate); }\\n        .reading-picdrome.pd-use-cases ul { margin:0 0 1rem; padding-left:1.25rem; }\\n        .reading-picdrome.pd-use-cases li { margin:0 0 .4rem; }\\n        .reading-picdrome.pd-use-cases .pd-note { color:var(--pd-muted); font-size:14px; }\\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, \"Website image use cases: the right image for every page\"         )\n      , _react2.default.createElement('p', { className: \"pd-lede\",}, \"Guidance for choosing the image for a specific spot on your website — homepage hero, landing-page background, about, service, pricing, blog, email, and social previews. Everything here is grouped by where the image goes, so you start from the spot you're filling instead of scrolling a generic gallery.\"\n\n\n      )\n\n      , _react2.default.createElement('div', { className: \"pd-summary\",}\n        , _react2.default.createElement('p', null\n          , _react2.default.createElement('strong', null, \"In short:\" ), \" choose website images by the page section they fit. Pick a section below, or run the spot you're filling through\"                    , \" \", _react2.default.createElement('a', { href: \"/blog/choose-the-right-image-framework\",}, \"the right-image framework\"  ), \".\"\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-labelledby': \"why-organize\",}\n        , _react2.default.createElement('h2', { id: \"why-organize\",}, \"Why organize images by page section\"     )\n        , _react2.default.createElement('p', null, \"A hero at the top of your homepage and a header on a blog post are not doing the same job, so they should not be chosen the same way. The hero usually carries a headline and a button, so it needs calm space and good contrast where text sits on top. A blog header sets a mood and reads at a glance. A pricing page often needs no big image at all — just a clean layout.\"\n\n\n\n\n        )\n        , _react2.default.createElement('p', null, \"This is the core idea behind Picdrome's guidance: choose an image by where it goes on the page. When you start from the section you're filling, you settle composition, aspect ratio, and how much room you need for words before you look at a single candidate.\"\n\n        )\n        , _react2.default.createElement('p', null, \"It also helps when an AI website builder or tool is choosing for you. A request for \\\"a homepage hero for a coffee roaster\\\" names a section and a business type, instead of a broad keyword search that returns a busy photo with no room for a headline.\"\n\n\n\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-labelledby': \"browse-section\",}\n        , _react2.default.createElement('h2', { id: \"browse-section\",}, \"Browse by page section\"   )\n        , _react2.default.createElement('p', null, \"Pick the spot you're filling. Each entry links to maintained guidance for choosing an image for that section.\"                 )\n        , _react2.default.createElement('div', { className: \"pd-grid\", 'aria-label': \"Image guidance by page section\"    ,}\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, _react2.default.createElement('a', { href: \"/blog/homepage-hero-image-mistakes\",}, \"Homepage hero images\"  ))\n            , _react2.default.createElement('p', null, \"Wide, uncluttered backdrops with room for a headline, subhead, and a button. Read: five homepage hero image mistakes.\"                 )\n          )\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, _react2.default.createElement('a', { href: \"/blog/landing-page-background-vs-solid-color\",}, \"Landing-page backgrounds\" ))\n            , _react2.default.createElement('p', null, \"Calm, low-detail images that hold up behind text and a single call to action. Read: background image vs solid color.\"                   )\n          )\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, _react2.default.createElement('a', { href: \"/blog/about-page-images-no-team-photo\",}, \"About page images\"  ))\n            , _react2.default.createElement('p', null, \"Warmer, human-feeling scenes that suit a story without overpowering it. Read: an About page with no team photos.\"                 )\n          )\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, _react2.default.createElement('a', { href: \"/blog/service-page-images-that-explain\",}, \"Service page images\"  ))\n            , _react2.default.createElement('p', null, \"Clear visuals that show the kind of work or setting a service describes. Read: service page images that explain.\"                  )\n          )\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, _react2.default.createElement('a', { href: \"/blog/pricing-page-image-ideas\",}, \"Pricing & testimonial\"  ))\n            , _react2.default.createElement('p', null, \"Quiet, supportive images for plans and quotes — often best kept minimal. Read: what to show behind your plans.\"                  )\n          )\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, _react2.default.createElement('a', { href: \"/blog/do-blog-header-images-matter\",}, \"Blog header images\"  ))\n            , _react2.default.createElement('p', null, \"Topic-setting headers that read fast at the top of an article. Read: do blog header images still matter?\"                 )\n          )\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, _react2.default.createElement('a', { href: \"/blog/email-newsletter-image-tips\",}, \"Email & newsletter\"  ))\n            , _react2.default.createElement('p', null, \"Simple, lightweight images that render well in inboxes and load quickly. Read: newsletter images that don't break in inboxes.\"                  )\n          )\n          , _react2.default.createElement('div', { className: \"pd-card\",}\n            , _react2.default.createElement('h3', null, _react2.default.createElement('a', { href: \"/blog/website-image-sizes-cheat-sheet\",}, \"Social preview / OG\"   ))\n            , _react2.default.createElement('p', null, \"Share-card images sized for the link previews that appear on social and chat. Read: the sizes and aspect ratios cheat sheet.\"                    )\n          )\n        )\n        , _react2.default.createElement('p', { className: \"pd-note\",}, \"Prefer to browse another way? See all \"\n                 , _react2.default.createElement('a', { href: \"/categories\",}, \"categories\"), \" or browse\"  , \" \"\n          , _react2.default.createElement('a', { href: \"/business-types\",}, \"by business type\"  ), \".\"\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-labelledby': \"not-sure\",}\n        , _react2.default.createElement('h2', { id: \"not-sure\",}, \"Not sure which section you mean?\"     )\n        , _react2.default.createElement('p', null, \"If you're unsure what a spot is called, you don't have to know the label. Name what the place on your page has to do, and the right kind of image follows from that.\"\n\n\n        )\n        , _react2.default.createElement('ul', null\n          , _react2.default.createElement('li', null, \"Use \"\n             , _react2.default.createElement('a', { href: \"/blog/choose-the-right-image-framework\",}, \"the right-image framework\"  ), \" to turn the spot into three answers: what the section needs, who it is for, and which style you are holding to.\"\n\n          )\n          , _react2.default.createElement('li', null, \"Read \"\n             , _react2.default.createElement('a', { href: \"/blog/image-for-each-website-page\",}, \"which image belongs on each page\"     ), \" to see common page sections matched to the image type that usually works there.\"\n\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-labelledby': \"when-to-use\",}\n        , _react2.default.createElement('h2', { id: \"when-to-use\",}, \"When to use this hub\"    )\n        , _react2.default.createElement('p', null, \"Reach for this hub when you're building or refreshing a specific page and you want an image that fits that section and stays readable behind text. Maybe you're adding a hero to a new homepage, swapping a tired background on a landing page, or finding a header for a post.\"\n\n\n\n        )\n        , _react2.default.createElement('p', null, \"Start from the section, not from a search box. That keeps the focus on the job the image has to do — leaving space for words, holding up at the right shape, and loading fast — rather than on finding the prettiest single picture.\"\n\n\n\n        )\n        , _react2.default.createElement('h3', null, \"Who this is for\"   )\n        , _react2.default.createElement('p', null, \"Entrepreneurs and small teams building their own sites, people assembling a page in a no-code builder, and anyone briefing an AI website builder to fill a layout. If you know roughly where an image goes but not which one to use, this is the right starting point.\"\n\n\n        )\n        , _react2.default.createElement('div', { className: \"pd-callout\",}\n          , _react2.default.createElement('p', null\n            , _react2.default.createElement('strong', null, \"Before you publish:\"  ), \" Some sections — like pricing or a testimonial block — often read better with restraint or no image at all; use one only where it helps the page. Picdrome originals use the Picdrome License; images from other sources keep their own terms: for any image you use, the current license at its source controls. This isn't legal advice.\"\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-labelledby': \"cta\",}\n        , _react2.default.createElement('h2', { id: \"cta\",}, \"Find your image\"  )\n        , _react2.default.createElement('p', null, \"Name the spot you're filling, then choose against that answer rather than against a keyword.\"              )\n        , _react2.default.createElement('div', { className: \"pd-cta-row\",}\n          , _react2.default.createElement('a', { className: \"pd-btn\", href: \"/blog/choose-the-right-image-framework\",}, \"Choose the right image for a page\"      )\n          , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/blog/homepage-hero-image-mistakes\",}, \"Homepage hero images\"  )\n          , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/business-types\",}, \"Browse by business type\"   )\n          , _react2.default.createElement('a', { className: \"pd-btn-secondary\", href: \"/blog/image-for-each-website-page\",}, \"Read: which image for each page\"     )\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-labelledby': \"faq\",}\n        , _react2.default.createElement('h2', { id: \"faq\",}, \"Frequently asked questions\"  )\n\n        , _react2.default.createElement('div', { className: \"pd-faq\",}\n          , _react2.default.createElement('h3', null, \"What does \\\"image use case\\\" mean?\"     )\n          , _react2.default.createElement('p', null, \"It's the specific spot on a website where an image goes — a homepage hero, a landing-page background, a blog header, an email banner, and so on. Grouping by use case means each image is chosen for the job that spot has to do, not just for its subject.\"\n\n\n\n          )\n        )\n\n        , _react2.default.createElement('div', { className: \"pd-faq\",}\n          , _react2.default.createElement('h3', null, \"How do I pick an overlay-friendly background?\"      )\n          , _react2.default.createElement('p', null, \"Look for a calm image with low detail and even tone in the area where your text will sit. A clear sky, a soft gradient, or an open corner all give you room. Strong contrast between the image and your text color keeps words readable. Both the landing-page background and the homepage hero have to be chosen with this in mind.\"\n\n\n\n\n          )\n        )\n\n        , _react2.default.createElement('div', { className: \"pd-faq\",}\n          , _react2.default.createElement('h3', null, \"Which image goes on a homepage hero?\"      )\n          , _react2.default.createElement('p', null, \"A wide image with open space for your headline, a short subhead, and a button. Avoid busy compositions that compete with the words. The\"\n\n                 , \" \"\n            , _react2.default.createElement('a', { href: \"/blog/homepage-hero-image-mistakes\",}, \"five homepage hero image mistakes\"    ), \" covers that shape and that breathing room.\"\n\n          )\n        )\n\n        , _react2.default.createElement('div', { className: \"pd-faq\",}\n          , _react2.default.createElement('h3', null, \"Can I use an image commercially?\"     )\n          , _react2.default.createElement('p', null, \"It depends on where the image comes from. Picdrome originals use the Picdrome License; images from other sources keep their own terms, so read the current license at the image's source; if it doesn't clearly cover commercial use, choose another image.\"\n                                                    , \" \", _react2.default.createElement('a', { href: \"/blog/use-free-and-ai-images-safely\",}, \"Using free and AI images safely\"     ), \" lists what to check. This isn't legal advice.\"\n          )\n        )\n\n        , _react2.default.createElement('div', { className: \"pd-faq\",}\n          , _react2.default.createElement('h3', null, \"What size should each image be?\"     )\n          , _react2.default.createElement('p', null, \"It depends on the section. Heroes and backgrounds are usually wide (landscape), blog headers tend toward a banner shape, and social preview cards have their own fixed dimensions for link sharing.\"\n\n                          , \" \"\n            , _react2.default.createElement('a', { href: \"/blog/image-for-each-website-page\",}, \"Which image belongs on each page\"     ), \" spells out the common cases.\"\n          )\n        )\n      )\n\n      , _react2.default.createElement('section', { 'aria-labelledby': \"summary\",}\n        , _react2.default.createElement('h2', { id: \"summary\",}, \"Plain-language summary\" )\n        , _react2.default.createElement('div', { className: \"pd-summary\",}\n          , _react2.default.createElement('p', null, \"Picdrome groups its image guidance by the page section an image fills — homepage hero, landing-page background, about, service, pricing and testimonial, blog header, email and newsletter, and social preview. If you're not sure which section you mean, use the\"\n\n\n                    , \" \"\n            , _react2.default.createElement('a', { href: \"/blog/choose-the-right-image-framework\",}, \"right-image framework\" ), \" or read\"  , \" \"\n            , _react2.default.createElement('a', { href: \"/blog/image-for-each-website-page\",}, \"which image belongs on each page\"     ), \". Whatever image you choose, the current license at its source controls.\"\n          )\n        )\n      )\n    )\n  );\n} exports.default = UseCasesPage;"}