{"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 CategoriesPage() {\n  return (\n    _react2.default.createElement('div', { className: \"pd-page pd-categories 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-categories {\\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          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        }\\n        .reading-picdrome.pd-categories h1 { font-size:2rem; line-height:1.2; margin:0 0 .5rem; }\\n        .reading-picdrome.pd-categories h2 { font-size:1.4rem; line-height:1.3; margin:2.5rem 0 .75rem; }\\n        .reading-picdrome.pd-categories h3 { font-size:1.08rem; margin:1.25rem 0 .4rem; }\\n        .reading-picdrome.pd-categories p { margin:0 0 1rem; }\\n        .reading-picdrome.pd-categories a { color:var(--pd-brand); }\\n        .reading-picdrome.pd-categories .lede { font-size:1.18rem; color:var(--pd-muted); margin:0 0 1.5rem; }\\n        .reading-picdrome.pd-categories .grid {\\n          display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));\\n          gap:1rem; margin:1rem 0 1.5rem;\\n        }\\n        .reading-picdrome.pd-categories .card {\\n          border:1px solid var(--pd-line); border-radius:12px; padding:1rem 1.1rem;\\n          background:var(--pd-bg); display:block; text-decoration:none; color:var(--pd-ink);\\n        }\\n        .reading-picdrome.pd-categories .card:hover { border-color:var(--pd-brand); }\\n        .reading-picdrome.pd-categories .card .card-title { font-weight:600; color:var(--pd-ink); margin:0 0 .35rem; }\\n        .reading-picdrome.pd-categories .card .card-desc { color:var(--pd-muted); font-size:.95rem; margin:0; }\\n        .reading-picdrome.pd-categories .cta-row { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.25rem 0 .5rem; }\\n        .reading-picdrome.pd-categories .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-categories .btn-primary:hover { background:var(--pd-brand-dark); }\\n        .reading-picdrome.pd-categories .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-categories .btn-secondary:hover { border-color:var(--pd-brand); }\\n        .reading-picdrome.pd-categories .callout {\\n          border-left:4px solid var(--pd-brand); background:var(--pd-brand-soft);\\n          padding:1rem 1.1rem; border-radius:8px; margin:1.5rem 0;\\n        }\\n        .reading-picdrome.pd-categories .callout p { margin:0; }\\n        .reading-picdrome.pd-categories .style-note {\\n          border:1px solid var(--pd-line); background:var(--pd-soft);\\n          border-radius:12px; padding:1rem 1.1rem; margin:1.25rem 0;\\n        }\\n        .reading-picdrome.pd-categories .style-note dt { font-weight:600; margin-top:.6rem; }\\n        .reading-picdrome.pd-categories .style-note dt:first-child { margin-top:0; }\\n        .reading-picdrome.pd-categories .style-note dd { margin:.15rem 0 .25rem; color:var(--pd-slate); }\\n        .reading-picdrome.pd-categories .faq h3 { margin-top:1.5rem; }\\n        .reading-picdrome.pd-categories .summary {\\n          border:1px solid var(--pd-line); background:var(--pd-soft);\\n          border-radius:12px; padding:1rem 1.1rem; margin:2rem 0 0;\\n        }\\n        .reading-picdrome.pd-categories .summary p:last-child { margin-bottom:0; }\\n        .reading-picdrome.pd-categories ul { margin:0 0 1rem; padding-left:1.25rem; }\\n        .reading-picdrome.pd-categories li { margin-bottom:.4rem; }\\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, \"Image categories and visual styles\"    )\n        , _react2.default.createElement('p', { className: \"lede\",}, \"Guidance on choosing website images by subject and style — heroes, workspaces, backgrounds, product shots, teams, and more — and on picking the style that fits your brand.\"                           )\n      , _react2.default.createElement('p', null, \"Two decisions matter when you choose images for a website: the \"           , _react2.default.createElement('strong', null, \"category\"), \" (the subject of the image, like a workspace or a team) and the \"              , _react2.default.createElement('strong', null, \"visual style\" ), \" (the look, like clean photo, flat illustration, or 3D render). Pick the category that matches the section you are filling, then pick a style that matches the rest of your site. This page links you straight into guidance on both.\"                                        )\n      , _react2.default.createElement('div', { className: \"callout\",}, _react2.default.createElement('p', null, _react2.default.createElement('strong', null, \"License note:\" ), \" 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. AI-generated images can still show logo-like marks or face-like likenesses, so check each one before you publish. This is general guidance, not legal advice.\"                                                  ))\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 hub is for entrepreneurs choosing images for a site, designers and freelancers building for clients, and anyone briefing an AI website builder on what to look for. If you would rather work from the page section than from a subject, start with \"                                           , _react2.default.createElement('a', { href: \"/blog/choose-the-right-image-framework\",}, \"the right-image framework\"  ), \". If you want images grouped by the job they do on a page, see \"               , _react2.default.createElement('a', { href: \"/use-cases\",}, \"use cases\" ), \".\")\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"choose-by-category\",}\n        , _react2.default.createElement('h2', { id: \"choose-by-category\",}, \"Choose by category\"  )\n        , _react2.default.createElement('p', null, \"Categories are sorted by subject, and each entry below links to guidance for choosing that subject well.\"                )\n        , _react2.default.createElement('div', { className: \"grid\",}\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Entrepreneur & founder heroes\"   ), _react2.default.createElement('p', null, \"Portrait-style and lifestyle images that work behind a homepage headline or on an about page. Read \"                , _react2.default.createElement('a', { href: \"/blog/homepage-hero-image-mistakes\",}, \"five homepage hero image mistakes\"    ), \".\"))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Workspace & desk\"  ), _react2.default.createElement('p', null, \"Desks, laptops, and tidy work setups for features, services, and how-it-works sections. Read \"             , _react2.default.createElement('a', { href: \"/blog/workspace-photos-without-cliche\",}, \"workspace photos without the cliché\"    ), \".\"))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Abstract & gradient backgrounds\"   ), _react2.default.createElement('p', null, \"Soft gradients and textures made to sit behind text in hero and call-to-action bands. Read \"               , _react2.default.createElement('a', { href: \"/blog/abstract-gradient-backgrounds\",}, \"why gradient and abstract backgrounds work\"     ), \".\"))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Product backgrounds & flat-lay\"   ), _react2.default.createElement('p', null, \"Clean surfaces and top-down flat-lays to stage a product shot or fill a feature grid. Read \"                , _react2.default.createElement('a', { href: \"/blog/product-vs-lifestyle-images-ecommerce\",}, \"product photos vs free lifestyle images\"     ), \".\"))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Team & collaboration\"  ), _react2.default.createElement('p', null, \"Groups working together, for about pages, careers sections, and service explainers. Read \"            , _react2.default.createElement('a', { href: \"/blog/about-page-images-no-team-photo\",}, \"what to put on your About page when you have no team photos\"            ), \".\"))\n          , _react2.default.createElement('div', { className: \"card\",}, _react2.default.createElement('h3', null, \"Remote work\" ), _react2.default.createElement('p', null, \"Home offices, video calls, and on-the-go setups for remote-friendly products and pages. Read \"             , _react2.default.createElement('a', { href: \"/blog/website-images-for-your-industry\",}, \"how to choose website images that fit your industry\"        ), \".\"))\n        )\n        , _react2.default.createElement('div', { className: \"cta-row\",}\n          , _react2.default.createElement('a', { className: \"btn-primary\", href: \"/blog/choose-the-right-image-framework\",}, \"Choose the right image for a page\"      )\n          , _react2.default.createElement('a', { className: \"btn-secondary\", href: \"/use-cases\",}, \"Choose by page section\"   )\n        )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"choose-a-visual-style\",}\n        , _react2.default.createElement('h2', { id: \"choose-a-visual-style\",}, \"Choose a visual style\"   )\n        , _react2.default.createElement('p', null, \"A category tells you what is in the image. Style tells you how it looks. The same subject — say, a founder at a desk — can be a realistic photo, a flat illustration, or a 3D render. Picking one style and sticking with it is what makes a site feel put together.\"                                                    )\n        , _react2.default.createElement('p', null, \"Start with the comparison of \"     , _react2.default.createElement('a', { href: \"/blog/photo-vs-illustration-vs-3d\",}, \"photo vs illustration vs 3D\"    ), \" to see how each look reads on a real page, then use \"             , _react2.default.createElement('a', { href: \"/blog/choose-a-visual-style-for-your-website\",}, \"how to choose a visual style for your website\"        ), \" to settle on one and apply it consistently. New to the vocabulary? The \"              , _react2.default.createElement('a', { href: \"/glossary\",}, \"visual style glossary\"  ), \" defines the terms in plain English.\"      )\n        , _react2.default.createElement('h3', null, \"What the common style words mean\"     )\n        , _react2.default.createElement('div', { className: \"reading-table\", tabIndex: 0, role: \"region\", 'aria-label': \"Scrollable table\" ,}\n          , _react2.default.createElement('table', null\n            , _react2.default.createElement('thead', null, _react2.default.createElement('tr', null, _react2.default.createElement('th', { scope: \"col\",}, \"Term\"), _react2.default.createElement('th', { scope: \"col\",}, \"What it means\"  )))\n            , _react2.default.createElement('tbody', null\n              , _react2.default.createElement('tr', null, _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Photo\")), _react2.default.createElement('td', null, \"A realistic, camera-style image. Reads as the most literal and grounded; good when you want a site to feel concrete and human.\"                     ))\n              , _react2.default.createElement('tr', null, _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Illustration\")), _react2.default.createElement('td', null, \"A drawn or vector look, often flat with simple shapes. Friendly and flexible; good for explaining ideas that are hard to photograph.\"                     ))\n              , _react2.default.createElement('tr', null, _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"3D render\" )), _react2.default.createElement('td', null, \"A computer-modeled image with depth and soft lighting. Modern and product-forward; good for tech and app sites.\"                ))\n              , _react2.default.createElement('tr', null, _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Flat-lay\")), _react2.default.createElement('td', null, \"A top-down shot of objects arranged on a surface. Common for product backgrounds and tidy feature grids.\"                ))\n              , _react2.default.createElement('tr', null, _react2.default.createElement('td', null, _react2.default.createElement('strong', null, \"Negative space\" )), _react2.default.createElement('td', null, \"The empty area around the subject. Gives you a clean spot to place a headline or button so your text stays readable.\"                     ))\n            )\n          )\n        )\n        , _react2.default.createElement('div', { className: \"cta-row\",}\n          , _react2.default.createElement('a', { className: \"btn-primary\", href: \"/blog/choose-a-visual-style-for-your-website\",}, \"Choose a visual style\"   )\n          , _react2.default.createElement('a', { className: \"btn-secondary\", href: \"/glossary\",}, \"Visual style glossary\"  )\n          , _react2.default.createElement('a', { className: \"btn-secondary\", href: \"/blog/choose-the-right-image-framework\",}, \"Choose the right image for a page\"      )\n        )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"keep-your-images-consistent\",}\n        , _react2.default.createElement('h2', { id: \"keep-your-images-consistent\",}, \"Keep your images consistent\"   )\n        , _react2.default.createElement('p', null, \"The fastest way to make a site look amateur is to mix several styles at random — a stock photo next to a cartoon next to a glossy 3D render. The fix is simple: choose one primary style and let everything support it. A consistent set of images helps each picture fit its section, keeps overlaid text readable, and gives visitors one coherent impression instead of a jumble.\"                                                                   )\n        , _react2.default.createElement('p', null, \"Two short reads cover the whole decision: how to \"         , _react2.default.createElement('a', { href: \"/blog/choose-a-visual-style-for-your-website\",}, \"choose a visual style for your website\"      ), \" and how to keep a \"      , _react2.default.createElement('a', { href: \"/blog/consistent-website-image-style\",}, \"consistent website image style\"   ), \" as you add pages.\"    )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"frequently-asked-questions\", className: \"faq\",}\n        , _react2.default.createElement('h2', { id: \"frequently-asked-questions\",}, \"Frequently asked questions\"  )\n        , _react2.default.createElement('h3', null, \"What's the difference between a category and a use case?\"         )\n        , _react2.default.createElement('p', null, \"A category groups images by *subject* — what is pictured, like a workspace or a team. A use case groups them by *job* — where the image goes and what it needs to do, like a homepage hero or a pricing-page background. Use categories when you know the subject you want; use \"                                                    , _react2.default.createElement('a', { href: \"/use-cases\",}, \"use cases\" ), \" when you know the page section but not the subject.\"          )\n        , _react2.default.createElement('h3', null, \"How do I choose a visual style?\"      )\n        , _react2.default.createElement('p', null, \"Look at your logo, colors, and the tone you want, then pick the single style that matches: photo for grounded and human, illustration for friendly and explanatory, 3D for modern and product-forward. Decide once and apply it across the whole site. \"                                         , _react2.default.createElement('a', { href: \"/blog/choose-a-visual-style-for-your-website\",}, \"How to choose a visual style for your website\"        ), \" walks through it step by step.\"      )\n        , _react2.default.createElement('h3', null, \"What do terms like flat-lay or negative space mean?\"        )\n        , _react2.default.createElement('p', null, \"A \" , _react2.default.createElement('strong', null, \"flat-lay\"), \" is a top-down photo of items arranged on a surface, common for product shots. \"               , _react2.default.createElement('strong', null, \"Negative space\" ), \" is the empty area around the subject, which gives you a clean place to put a headline or button. More plain-English definitions are in the \"                          , _react2.default.createElement('a', { href: \"/glossary\",}, \"glossary\"), \".\")\n        , _react2.default.createElement('h3', null, \"Are abstract backgrounds good for text overlays?\"      )\n        , _react2.default.createElement('p', null, \"Often, yes. Soft gradients and low-detail textures leave room for words to stay readable, which is exactly what a hero or call-to-action band needs. Busy backgrounds fight with your text, so favor ones with calm areas or clear negative space. \"                                        , _react2.default.createElement('a', { href: \"/blog/abstract-gradient-backgrounds\",}, \"Why gradient and abstract backgrounds work for modern sites\"        ), \" compares them.\"  )\n        , _react2.default.createElement('h3', null, \"Can I mix photo and illustration on one site?\"        )\n        , _react2.default.createElement('p', null, \"You can, but keep one style as the lead and use the other sparingly and on purpose — for example, photos for your main sections and small illustrations only for icons or diagrams. Random mixing is what reads as messy. The guide on a \"                                            , _react2.default.createElement('a', { href: \"/blog/consistent-website-image-style\",}, \"consistent website image style\"   ), \" shows how to do it cleanly.\"      )\n      )\n      , _react2.default.createElement('section', { 'aria-labelledby': \"in-short\", className: \"summary\",}\n        , _react2.default.createElement('h2', { id: \"in-short\",}, \"In short\" )\n        , _react2.default.createElement('p', null, \"Picdrome's guidance helps you choose website images by \"        , _react2.default.createElement('strong', null, \"subject\"), \" (categories like heroes, workspaces, backgrounds, product shots, teams, and remote work) and by \"              , _react2.default.createElement('strong', null, \"visual style\" ), \" (photo, illustration, or 3D). Pick the category for the section you are filling, then choose one style and keep it consistent across the site so each image fits, text stays readable, and the pages feel coherent.\"                                    )\n        , _react2.default.createElement('p', null, \"Next steps: \"  , _react2.default.createElement('a', { href: \"/blog/choose-the-right-image-framework\",}, \"choose the right image for a page\"      ), \", settle on \"   , _react2.default.createElement('a', { href: \"/blog/choose-a-visual-style-for-your-website\",}, \"one visual style\"  ), \", or check the \"    , _react2.default.createElement('a', { href: \"/glossary\",}, \"glossary\"), \" for plain-English terms. For any image you use, the current license at its source controls.\"               )\n      )\n    )\n  );\n} exports.default = CategoriesPage;"}