{"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 PacksPage() {\n  return (\n    _react2.default.createElement('div', { className: \"pd-page pd-packs 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-packs {\\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          font-family:-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif;\\n          line-height:1.6; color:var(--pd-ink); background:var(--pd-bg);\\n          max-width:900px; margin:0 auto; padding:2rem 1.25rem 4rem;\\n        }\\n        .reading-picdrome.pd-packs h1 { font-size:2rem; line-height:1.25; margin:0 0 .75rem; letter-spacing:-.01em; }\\n        .reading-picdrome.pd-packs h2 { font-size:1.4rem; line-height:1.3; margin:2.5rem 0 .75rem; letter-spacing:-.01em; }\\n        .reading-picdrome.pd-packs h3 { font-size:1.08rem; margin:1.25rem 0 .35rem; }\\n        .reading-picdrome.pd-packs p { margin:0 0 1rem; }\\n        .reading-picdrome.pd-packs a { color:var(--pd-brand-dark); }\\n        .reading-picdrome.pd-packs .lede { font-size:1.18rem; color:var(--pd-muted); margin-bottom:1.5rem; }\\n        .reading-picdrome.pd-packs .grid {\\n          display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));\\n          gap:1rem; margin:1.25rem 0;\\n        }\\n        .reading-picdrome.pd-packs .card {\\n          border:1px solid var(--pd-line); border-radius:12px; padding:1rem 1.1rem;\\n          background:var(--pd-bg);\\n        }\\n        .reading-picdrome.pd-packs .card h3 { margin-top:0; }\\n        .reading-picdrome.pd-packs .card p { margin-bottom:.5rem; color:var(--pd-slate); font-size:.95rem; }\\n        .reading-picdrome.pd-packs .card a.cardlink { font-weight:600; text-decoration:none; }\\n        .reading-picdrome.pd-packs .cta-row { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.5rem 0 .5rem; }\\n        .reading-picdrome.pd-packs a.btn-primary {\\n          background:var(--pd-brand); color:var(--c1gb4l3-runtime-action-fg, #ffffff); border-radius:10px; padding:.7rem 1.1rem;\\n          font-weight:600; text-decoration:none; display:inline-block;\\n        }\\n        .reading-picdrome.pd-packs a.btn-primary:hover { background:var(--pd-brand-dark); }\\n        .reading-picdrome.pd-packs a.btn-secondary {\\n          border:1px solid var(--pd-line); color:var(--pd-ink); border-radius:10px;\\n          padding:.7rem 1.1rem; font-weight:600; text-decoration:none; display:inline-block;\\n        }\\n        .reading-picdrome.pd-packs .callout {\\n          border-left:4px solid var(--pd-brand); background:var(--pd-brand-soft);\\n          padding:1rem 1.1rem; border-radius:8px; margin:1.25rem 0;\\n        }\\n        .reading-picdrome.pd-packs .callout p:last-child { margin-bottom:0; }\\n        .reading-picdrome.pd-packs .note {\\n          border-left:4px solid var(--pd-warn); background:var(--pd-warn-bg);\\n          padding:1rem 1.1rem; border-radius:8px; margin:1.25rem 0; color:var(--pd-slate);\\n        }\\n        .reading-picdrome.pd-packs .note p:last-child { margin-bottom:0; }\\n        .reading-picdrome.pd-packs .soft {\\n          background:var(--pd-soft); border:1px solid var(--pd-line); border-radius:12px;\\n          padding:1.1rem 1.25rem; margin:1.25rem 0;\\n        }\\n        .reading-picdrome.pd-packs .soft p:last-child { margin-bottom:0; }\\n        .reading-picdrome.pd-packs ul, .reading-picdrome.pd-packs ol { margin:0 0 1rem; padding-left:1.25rem; }\\n        .reading-picdrome.pd-packs li { margin:.3rem 0; }\\n        .reading-picdrome.pd-packs .faq h3 { margin-top:1.5rem; }\\n        .reading-picdrome.pd-packs .faq p { color:var(--pd-slate); }\\n        .reading-picdrome.pd-packs .muted { color:var(--pd-muted); font-size:.95rem; }\\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('header', { className: \"pd-hero reading-hero\" ,}\n        , _react2.default.createElement('h1', null, \"Build an image pack for a business website\"       )\n        , _react2.default.createElement('p', { className: \"lede\",}, \"A complete guide to planning a coherent set of website images by page need or business type, with a licensing check before publication.\"                      )\n      )\n      , _react2.default.createElement('div', { className: \"cta-row\",}\n        , _react2.default.createElement('a', { className: \"btn-primary\", href: \"/blog/how-to-use-an-image-pack\",}, \"How to use an image pack\"     )\n        , _react2.default.createElement('a', { className: \"btn-secondary\", href: \"/blog/get-all-website-images-fast\",}, \"Assemble the same set yourself\"    )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"who-this-is-for\",}\n        , _react2.default.createElement('h2', { id: \"who-this-is-for\",}, \"Who this is for\"   )\n        , _react2.default.createElement('p', null, \"This method is for people putting up a real site quickly: founders writing their first homepage, freelancers building for a client, small teams refreshing a landing page, and anyone who wants a matched set instead of unrelated images chosen one at a time. The same structure also works when preparing inputs for a website builder.\"                                                      )\n        , _react2.default.createElement('p', null, \"Browsing by category instead? See \"     , _react2.default.createElement('a', { href: \"/business-types\",}, \"business types\" ), \" or \"  , _react2.default.createElement('a', { href: \"/use-cases\",}, \"use cases\" ), \".\")\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"six-useful-pack-structures\",}\n        , _react2.default.createElement('h2', { id: \"six-useful-pack-structures\",}, \"Six useful pack structures\"   )\n        , _react2.default.createElement('p', null, \"Each structure groups images that belong together, so the photos and graphics on a page share a consistent look. Choose the structure that matches the job:\"                         )\n        , _react2.default.createElement('div', { className: \"grid\",}\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Business hero pack\"  ), _react2.default.createElement('p', null, \"Wide, text-friendly images for the top of a homepage: calm backgrounds with room for a headline and a button.\"                  ))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Landing-page backgrounds pack\"  ), _react2.default.createElement('p', null, \"Clean section backgrounds and subtle textures for landing pages, sign-up screens, and feature blocks.\"             ))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Consultant & coach pack\"   ), _react2.default.createElement('p', null, \"Professional, approachable images suited to service sites: offices, workspaces, and quieter scenes that keep text readable.\"               ))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Restaurant & cafe pack\"   ), _react2.default.createElement('p', null, \"Food, drinks, and interior scenes for menus, story sections, and booking pages on hospitality sites.\"              ))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"SaaS & startup pack\"   ), _react2.default.createElement('p', null, \"Modern, product-leaning visuals for software sites: abstract gradients, device-friendly scenes, and tidy backgrounds.\"            ))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Product background pack\"  ), _react2.default.createElement('p', null, \"Plain and textured surfaces to place a product on: useful for shop pages, feature cards, and promo blocks.\"                 ))\n        )\n        , _react2.default.createElement('p', null, _react2.default.createElement('a', { href: \"/blog/get-all-website-images-fast\",}, \"The fastest way to get all your website images in one sitting\"           ), \" turns any of these structures into a working selection session.\"          )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"the-website-starter-image-kit\",}\n        , _react2.default.createElement('h2', { id: \"the-website-starter-image-kit\",}, \"The Website Starter Image Kit\"    )\n        , _react2.default.createElement('p', null, \"The starter-kit structure covers the main sections of a typical website — a hero, an about section, a few feature or service blocks, and a closing call to action — organized by business type so the images on each section match.\"                                        )\n        , _react2.default.createElement('p', null, \"Use it when you are building from scratch and want one coherent set: pick the business type closest to yours and map one image role to every section of the page.\"                              )\n        , _react2.default.createElement('p', null, _react2.default.createElement('a', { href: \"/blog/new-website-image-checklist\",}, \"A starter image checklist for a brand-new business website\"        ), \" is the complete list to work through.\"       )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"how-to-use-a-pack\",}\n        , _react2.default.createElement('h2', { id: \"how-to-use-a-pack\",}, \"How to use a pack\"    )\n        , _react2.default.createElement('p', null, \"Choose one structure above, inventory the sections on your page, and select the images together. Most sites need a hero image, supporting section images and a couple of alternatives in reserve. The step-by-step walkthrough covers sizing, file formats and how to keep images readable behind text.\"                                             )\n        , _react2.default.createElement('div', { className: \"cta-row\",}\n          , _react2.default.createElement('a', { className: \"btn-primary\", href: \"/blog/how-to-use-an-image-pack\",}, \"How to use an image pack\"     )\n        )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"licensing-for-the-images-you-choose\",}\n        , _react2.default.createElement('h2', { id: \"licensing-for-the-images-you-choose\",}, \"Licensing for the images you choose\"     )\n        , _react2.default.createElement('p', null, \"Picdrome originals use the Picdrome License; images from other sources keep their own terms. Every image in your set keeps the license of the source it came from; grouping images into a pack does not change their license.\"                                     )\n        , _react2.default.createElement('div', { className: \"callout\",}, _react2.default.createElement('p', null, _react2.default.createElement('strong', null, \"License check.\" ), \" Before you ship, record the source, current license, attribution rule, and any restriction for each image in the set. Don't assume an image is public domain, CC0, or royalty-free unless its source says so. This is a plain-language summary, not legal advice.\"                                          ))\n        , _react2.default.createElement('div', { className: \"cta-row\",}\n          , _react2.default.createElement('a', { className: \"btn-primary\", href: \"/blog/image-rights-pre-publish-check\",}, \"Run the pre-publish image rights check\"     )\n        )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"start-building\",}\n        , _react2.default.createElement('h2', { id: \"start-building\",}, \"Start building\" )\n        , _react2.default.createElement('p', null, \"The hero is the part of the page most people build first, and it is the one worth settling before anything else.\"                     )\n        , _react2.default.createElement('div', { className: \"cta-row\",}\n          , _react2.default.createElement('a', { className: \"btn-primary\", href: \"/blog/homepage-hero-image-mistakes\",}, \"Five homepage hero image mistakes\"    )\n          , _react2.default.createElement('a', { className: \"btn-secondary\", href: \"/blog/how-to-use-an-image-pack\",}, \"How to use an image pack\"     )\n          , _react2.default.createElement('a', { className: \"btn-secondary\", href: \"/blog/get-all-website-images-fast\",}, \"Get all your website images in one sitting\"       )\n        )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"faq\", className: \"faq\",}\n        , _react2.default.createElement('h2', { id: \"faq\",}, \"FAQ\")\n        , _react2.default.createElement('h3', null, \"Does this page provide image downloads?\"     )\n        , _react2.default.createElement('p', null, \"No. This page provides the pack structures and workflow. Follow the linked guides to choose images you are licensed to use.\"                    )\n        , _react2.default.createElement('h3', null, \"Do I have to give an email to use the method?\"          )\n        , _react2.default.createElement('p', null, \"No. The complete method and checklists are on the page.\"         )\n        , _react2.default.createElement('h3', null, \"Can I use this method for a client website?\"        )\n        , _react2.default.createElement('p', null, \"Yes. Check the license for every image before delivery; each image's source license decides whether client work is covered.\"                  )\n        , _react2.default.createElement('h3', null, \"Does grouping images change their license?\"     )\n        , _react2.default.createElement('p', null, \"No. A pack is an organizational structure, not a new license. Keep the source and applicable terms for every image.\"                   )\n        , _react2.default.createElement('h3', null, \"What belongs in a Website Starter Image Kit?\"       )\n        , _react2.default.createElement('p', null, \"A set covering the main sections of a typical site — hero, about, feature or service blocks, and a closing call to action — organized by business type so the images on each section match. \"                                   , _react2.default.createElement('a', { href: \"/blog/new-website-image-checklist\",}, \"The starter image checklist\"   ), \" provides the working list.\"    )\n        , _react2.default.createElement('h3', null, \"How often should I review the set?\"      )\n        , _react2.default.createElement('p', null, \"Review it when the site structure, brand direction or an image's license changes. Otherwise, replace individual images only when the new choice still fits the shared palette, lighting and composition rules.\"                              )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"in-short\", className: \"soft\",}\n        , _react2.default.createElement('h2', { id: \"in-short\",}, \"In short\" )\n        , _react2.default.createElement('p', null, \"An image pack is a coherent set selected for page roles or a business type. This page provides six reusable structures, a starter-site checklist, a selection workflow and the licensing boundary. \"                               , _react2.default.createElement('a', { href: \"/blog/get-all-website-images-fast\",}, \"Get all your website images in one sitting\"       ), \" is the companion walkthrough.\"    )\n      )\n    )\n  );\n} exports.default = PacksPage;"}