/* global React */ const { useState, useEffect, useRef } = React; /* ============================================================ Logo / brand W mark ============================================================ */ /* Standalone "W" mark — used in small spots */ function WMark({ size = 28, color = '#7BC043' }) { return ( ); } /* Full "COLEwebdev" wordmark — uses the official PNG */ function ColeLogo({ height = 34, dark = false }) { return ( COLEwebdev — Ask more of your website); } /* ============================================================ Header ============================================================ */ const SERVICE_LINKS = [ { href: 'website-design.html', title: 'Web Design' }, { href: 'marketing.html', title: 'Marketing' }, { href: 'hosting.html', title: 'Hosting + Care Plans' }, { href: 'updates.html', title: 'Updates & Maintenance' }, { href: 'branding.html', title: 'Branding' }, { href: 'ecommerce.html', title: 'E-Commerce' }, { href: 'wordpress.html', title: 'WordPress Design' }, { href: 'traditional.html', title: 'Traditional Web Design' }, { href: 'ai-apps.html', title: 'AI Studio', pill: 'NEW' }, { href: 'consulting.html', title: 'Consulting' }, ]; /* ============================================================ Site search data — all indexed pages ============================================================ */ const SEARCH_DATA = [ { title: 'Home', desc: 'COLEwebdev — Cape Cod web design since 2006.', category: 'Company', href: 'index.html' }, { title: 'Services', desc: 'Full overview of web design, SEO, hosting, and AI services.', category: 'Company', href: 'services.html' }, { title: 'Contact', desc: 'Start a project or ask a question.', category: 'Company', href: 'contact.html' }, { title: 'Portfolio', desc: 'Recent websites and client work.', category: 'Company', href: 'portfolio.html' }, { title: 'Testimonials', desc: 'What Cape Cod business owners say about working with us.', category: 'Company', href: 'testimonials.html' }, { title: 'About Us', desc: 'Our team, story, and community roots.', category: 'Company', href: 'about.html' }, { title: 'Our Process', desc: 'How we scope, build, and hand off every project.', category: 'Company', href: 'process.html' }, { title: 'News & Blog', desc: 'Web design tips, updates, and articles.', category: 'Company', href: 'news.html' }, { title: 'Social News', desc: 'Live updates from our Bluesky feed.', category: 'Company', href: 'social-news.html' }, { title: 'Request a Quote', desc: 'Get a fast, no-obligation project estimate.', category: 'Company', href: 'quote.html' }, { title: 'Web Design', desc: 'Modern, mobile-first websites built for your business.', category: 'Services', href: 'website-design.html' }, { title: 'Marketing', desc: 'SEO, Google Ads, social media, analytics, and lead capture — one local team.', category: 'Services', href: 'marketing.html' }, { title: 'PPC & Google Ads', desc: 'Paid search management — negatives, landing pages, and conversion tracking.', category: 'Services', href: 'ppc.html' }, { title: 'AI Studio', desc: 'Chatbots, plugins, PWAs, extensions, and custom business tools.', category: 'Services', href: 'ai-apps.html' }, { title: 'Consulting', desc: 'Website strategy, audits, business advice, and training.', category: 'Services', href: 'consulting.html' }, { title: 'Hosting + Care Plans', desc: 'Backups, security, updates — and a human to email.', category: 'Services', href: 'hosting.html' }, { title: 'Updates & Maintenance', desc: 'Hourly content edits — text, images, pages, forms. No monthly commitment.', category: 'Services', href: 'updates.html' }, { title: 'Branding', desc: 'Logos, color, print — so the site fits the rest of you.', category: 'Services', href: 'branding.html' }, { title: 'E-Commerce', desc: 'WooCommerce and Shopify storefronts that ship.', category: 'Services', href: 'ecommerce.html' }, { title: 'WordPress Design', desc: 'Custom WordPress builds that are easy to manage.', category: 'Services', href: 'wordpress.html' }, { title: 'WordPress Speed Optimization', desc: 'Core Web Vitals, image optimization, caching, and plugin audits.', category: 'Services', href: 'wordpress-speed.html' }, { title: 'Web Accessibility (WCAG)', desc: 'WCAG 2.1 AA audits, remediation, and ADA compliance for business websites.', category: 'Services', href: 'web-accessibility.html' }, { title: 'Traditional Web Design', desc: 'Static HTML/CSS sites — fast, secure, no CMS needed.', category: 'Services', href: 'traditional.html' }, { title: 'What Web Design Actually Does', desc: 'How a professional website drives real business results.', category: 'Whitepapers', href: 'wp-what-web-design-does.html' }, { title: 'Is a Website Worth the Investment?', desc: 'A clear-eyed look at ROI for small business websites.', category: 'Whitepapers', href: 'wp-investment-value.html' }, { title: 'DIY vs. Professional Web Design', desc: 'When to build it yourself and when to hire a pro.', category: 'Whitepapers', href: 'wp-diy-vs-pro.html' }, { title: 'Three Types of Small Business Websites', desc: 'Brochure, lead gen, or e-commerce — which fits you?', category: 'Whitepapers', href: 'wp-three-types.html' }, { title: 'Seven Golden Rules of Web Design', desc: 'Time-tested principles for sites people actually use.', category: 'Whitepapers', href: 'wp-seven-golden-rules.html' }, { title: 'Five Principles of Effective Web Design', desc: 'The fundamentals behind every great site we build.', category: 'Whitepapers', href: 'wp-five-principles.html' }, { title: 'The Seven Cs of Web Design', desc: 'A framework for evaluating and improving any website.', category: 'Whitepapers', href: 'wp-seven-cs.html' }, { title: 'Web Design FAQ Guide', desc: 'Answers to the questions clients ask most often.', category: 'Whitepapers', href: 'wp-faq-guide.html' }, { title: 'Google Ads Waste Guide', desc: 'Why most Google Ads accounts waste budget — and how to fix it.', category: 'Whitepapers', href: 'wp-google-ads-guide.html' }, { title: 'How to Choose a Web Designer', desc: 'What to look for, what to ask, and what to avoid when hiring.', category: 'Whitepapers', href: 'wp-how-to-choose.html' }, { title: 'What Makes a Good Website?', desc: 'The elements that separate sites that work from sites that don\'t.', category: 'Whitepapers', href: 'wp-what-makes-good-website.html' }, { title: 'How Much Does a Website Cost?', desc: 'What drives price up or down — and how to evaluate value.', category: 'Whitepapers', href: 'wp-website-cost.html' }, { title: 'Why Is Web Design So Expensive?', desc: 'What you\'re actually buying when you hire a professional.', category: 'Whitepapers', href: 'wp-web-design-expensive.html' }, { title: 'How Long Does a Website Take to Build?', desc: 'Realistic timelines and what usually causes delays.', category: 'Whitepapers', href: 'wp-how-long-website.html' }, { title: 'When Should I Redesign My Website?', desc: 'Data-driven signs it\'s time — and how to plan it right.', category: 'Whitepapers', href: 'wp-when-to-redesign.html' }, { title: 'Do I Need a Website If I Have Social Media?', desc: 'Why owned property beats rented land every time.', category: 'Whitepapers', href: 'wp-website-vs-social.html' }, { title: 'WordPress vs. Squarespace', desc: 'An honest comparison for small business owners.', category: 'Whitepapers', href: 'wp-wordpress-vs-squarespace.html' }, { title: 'Web Design vs. Web Development', desc: 'Two distinct disciplines — and why the best work combines both.', category: 'Whitepapers', href: 'wp-design-vs-development.html' }, { title: 'Why Isn\'t My Website on Google?', desc: 'Four fixable problems behind most visibility issues.', category: 'Whitepapers', href: 'wp-not-showing-on-google.html' }, { title: 'How Long Does SEO Take to Work?', desc: 'Realistic timelines and what good SEO looks like in progress.', category: 'Whitepapers', href: 'wp-how-long-seo.html' }, { title: 'How Do I Know If My Website Is Working?', desc: 'The right metrics — and what "working" actually means.', category: 'Whitepapers', href: 'wp-is-my-website-working.html' }, { title: 'Shopify vs. WooCommerce', desc: 'A practical e-commerce comparison for small businesses.', category: 'Whitepapers', href: 'wp-shopify-vs-woocommerce.html' }, { title: 'What Are Core Web Vitals?', desc: 'LCP, CLS, and INP explained — and how they affect your Google rankings.', category: 'Whitepapers', href: 'wp-core-web-vitals.html' }, { title: 'Website Accessibility & ADA Compliance', desc: 'What WCAG 2.1 means, the legal exposure, and how to build a compliant site.', category: 'Whitepapers', href: 'wp-website-accessibility.html' }, { title: 'How to Improve Your Google Maps Ranking', desc: 'Google Business Profile, reviews, citations, and local schema — what moves the needle.', category: 'Whitepapers', href: 'wp-google-maps-ranking.html' }, { title: 'What Is WordPress Maintenance?', desc: 'Updates, backups, security monitoring — and the real cost of skipping it.', category: 'Whitepapers', href: 'wp-wordpress-maintenance.html' }, { title: 'Nonprofit Web Design', desc: 'Donation integration, volunteer intake, and accessible sites for Cape Cod nonprofits.', category: 'Industry', href: 'cape-cod-nonprofit-web-design.html' }, { title: 'Church Website Design', desc: 'Service schedules, sermon archives, and online giving for Cape Cod churches.', category: 'Industry', href: 'cape-cod-church-web-design.html' }, { title: 'Hospitality Web Design', desc: 'Direct booking, room pages, and local SEO for Cape Cod inns and B&Bs.', category: 'Industry', href: 'cape-cod-hospitality-web-design.html' }, { title: 'Restaurant Web Design', desc: 'Mobile-first menus, reservations, and online ordering for Cape Cod restaurants.', category: 'Industry', href: 'cape-cod-restaurant-web-design.html' }, { title: 'Real Estate Web Design', desc: 'IDX integration, lead capture, and neighborhood guides for Cape Cod agents.', category: 'Industry', href: 'cape-cod-real-estate-web-design.html' }, { title: 'Chamber of Commerce Website', desc: 'Member directories, event calendars, and business spotlights for Cape Cod chambers.', category: 'Industry', href: 'cape-cod-chamber-web-design.html' }, { title: 'Maine Web Design', desc: 'Web design for Maine businesses — Farmington roots, Aroostook County presence.', category: 'Location', href: 'maine-web-design.html' }, { title: 'Cape Cod Web Design', desc: 'Local web design studio serving all 15 Cape Cod towns since 2006.', category: 'Location', href: 'cape-cod-web-design.html' }, { title: 'Eastham Web Design', desc: 'COLEwebdev is based in Eastham — your local web design studio.', category: 'Location', href: 'eastham-web-design.html' }, { title: 'Orleans Web Design', desc: 'Custom websites for Orleans, MA businesses.', category: 'Location', href: 'orleans-web-design.html' }, { title: 'Wellfleet Web Design', desc: 'Websites for Wellfleet restaurants, galleries, and nonprofits.', category: 'Location', href: 'wellfleet-web-design.html' }, { title: 'Provincetown Web Design', desc: 'Web design for Provincetown hospitality, tourism, and arts businesses.', category: 'Location', href: 'provincetown-web-design.html' }, { title: 'Truro Web Design', desc: 'Websites for Truro vineyards, galleries, vacation rentals, and nonprofits.', category: 'Location', href: 'truro-web-design.html' }, { title: 'Brewster Web Design', desc: 'Web design for Brewster inns, shops, and Route 6A businesses.', category: 'Location', href: 'brewster-web-design.html' }, { title: 'Harwich Web Design', desc: 'Websites for Harwich Port restaurants, marine businesses, and contractors.', category: 'Location', href: 'harwich-web-design.html' }, { title: 'Dennis Web Design', desc: 'Web design for Dennis restaurants, accommodations, and Mid-Cape businesses.', category: 'Location', href: 'dennis-web-design.html' }, { title: 'Chatham Web Design', desc: 'Polished websites for Chatham\'s hospitality, boutique retail, and arts businesses.', category: 'Location', href: 'chatham-web-design.html' }, { title: 'Yarmouth Web Design', desc: 'Websites for Yarmouth Route 28 businesses — motels, restaurants, retailers.', category: 'Location', href: 'yarmouth-web-design.html' }, { title: 'Hyannis Web Design', desc: 'Web design for the Cape\'s commercial hub — retail, medical, and hospitality.', category: 'Location', href: 'hyannis-web-design.html' }, { title: 'Mashpee Web Design', desc: 'Websites for Mashpee Commons retailers, restaurants, and local services.', category: 'Location', href: 'mashpee-web-design.html' }, { title: 'Falmouth Web Design', desc: 'Web design for Falmouth arts, healthcare, legal, and hospitality businesses.', category: 'Location', href: 'falmouth-web-design.html' }, { title: 'Sandwich Web Design', desc: 'Websites for Sandwich heritage attractions, Route 6A shops, and local services.', category: 'Location', href: 'sandwich-web-design.html' }, { title: 'Bourne Web Design', desc: 'Web design for Bourne marine, retail, and gateway-to-the-Cape businesses.', category: 'Location', href: 'bourne-web-design.html' }, { title: 'Privacy Policy', desc: 'How we collect and use your data.', category: 'Legal', href: 'privacy.html' }, { title: 'Accessibility Statement', desc: 'Our WCAG 2.1 AA commitment and features.', category: 'Legal', href: 'accessibility.html' }, { title: 'Site Map', desc: 'Every page on colewebdev.org, organized.', category: 'Legal', href: 'sitemap.html' }, ]; /* ============================================================ Cookie Consent Banner (EU / CA only — timezone detection) ============================================================ */ function CookieBanner() { const [visible, setVisible] = React.useState(false); React.useEffect(() => { if (localStorage.getItem('ck_consent')) return; const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || ''; if (tz.startsWith('Europe/') || tz === 'America/Los_Angeles') { setVisible(true); } }, []); const dismiss = (val) => { localStorage.setItem('ck_consent', val); setVisible(false); }; if (!visible) return null; return (

We use essential cookies to keep the site working. No tracking or advertising cookies are used.{' '} Privacy Policy

); } /* ============================================================ Site Search Modal (Fuse.js, lazy-loaded) ============================================================ */ function SearchModal({ onClose }) { const [query, setQuery] = React.useState(''); const [results, setResults] = React.useState([]); const [fuse, setFuse] = React.useState(null); const [activeIdx, setActiveIdx] = React.useState(0); const inputRef = React.useRef(null); React.useEffect(() => { const init = () => setFuse(new window.Fuse(SEARCH_DATA, { keys: ['title', 'desc', 'category'], threshold: 0.35 })); if (window.Fuse) { init(); return; } const s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.min.js'; s.onload = init; document.head.appendChild(s); }, []); React.useEffect(() => { if (inputRef.current) inputRef.current.focus(); }, []); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); const handleInput = (e) => { const q = e.target.value; setQuery(q); setActiveIdx(0); if (!fuse || !q.trim()) { setResults([]); return; } setResults(fuse.search(q).slice(0, 8).map(r => r.item)); }; const handleKey = (e) => { if (!results.length) return; if (e.key === 'ArrowDown') { e.preventDefault(); setActiveIdx(i => Math.min(i + 1, results.length - 1)); } if (e.key === 'ArrowUp') { e.preventDefault(); setActiveIdx(i => Math.max(i - 1, 0)); } if (e.key === 'Enter' && results[activeIdx]) { window.location.href = results[activeIdx].href; } }; return (
{ if (e.target === e.currentTarget) onClose(); }} role="dialog" aria-modal="true" aria-label="Search">
{!query.trim() ? (
Type to search pages, services, and guides.
) : results.length === 0 ? (
No results for "{query}"
) : ( results.map((r, i) => ( setActiveIdx(i)} > {r.category} {r.title} {r.desc} )) )}
↑↓ navigate ↵ open esc close
); } /* ============================================================ Header ============================================================ */ function Header() { const [menuOpen, setMenuOpen] = React.useState(false); const [servicesOpen, setServicesOpen] = React.useState(false); const [searchOpen, setSearchOpen] = React.useState(false); const path = window.location.pathname; const on = (page) => path.endsWith(page) ? ' is-active' : ''; const onHome = (path === '/' || path === '' || path.endsWith('index.html')) ? ' is-active' : ''; const close = () => { setMenuOpen(false); setServicesOpen(false); }; React.useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); return (