1import{d as i,r as c,j as e,B as t,H as z,a8 as A}from"./index-DmNqo3BC.js";import{Footer as I}from"./Footer-DukchBpT.js";import{C as P,a as G,b as F,c as W,d as U}from"./carousel-BEHQ-_n_.js";import{A as q}from"./arrow-up-C9Buw2N3.js";import{E as V}from"./eye-Cv2xzPGj.js";import"./emailValidation-DKnEvLpy.js";import"./edgeFunctionError-NtQcrOfj.js";import"./arrow-left-YDIYWFPy.js";import"./arrow-right-aPFIqAhZ.js";/** 2 * @license lucide-react v0.462.0 - ISC 3 * 4 * This source code is licensed under the ISC license. 5 * See the LICENSE file in the root directory of this source tree. 6 */const H=i("ArrowDownRight",[["path",{d:"m7 7 10 10",key:"1fmybs"}],["path",{d:"M17 7v10H7",key:"6fjiku"}]]);/** 7 * @license lucide-react v0.462.0 - ISC 8 * 9 * This source code is licensed under the ISC license. 10 * See the LICENSE file in the root directory of this source tree. 11 */const O=i("AudioLines",[["path",{d:"M2 10v3",key:"1fnikh"}],["path",{d:"M6 6v11",key:"11sgs0"}],["path",{d:"M10 3v18",key:"yhl04a"}],["path",{d:"M14 8v7",key:"3a1oy3"}],["path",{d:"M18 5v13",key:"123xd1"}],["path",{d:"M22 10v3",key:"154ddg"}]]);/** 12 * @license lucide-react v0.462.0 - ISC 13 * 14 * This source code is licensed under the ISC license. 15 * See the LICENSE file in the root directory of this source tree. 16 */const Q=i("Blend",[["circle",{cx:"9",cy:"9",r:"7",key:"p2h5vp"}],["circle",{cx:"15",cy:"15",r:"7",key:"19ennj"}]]);/** 17 * @license lucide-react v0.462.0 - ISC 18 * 19 * This source code is licensed under the ISC license. 20 * See the LICENSE file in the root directory of this source tree. 21 */const X=i("BookOpen",[["path",{d:"M12 7v14",key:"1akyts"}],["path",{d:"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",key:"ruj8y"}]]);/** 22 * @license lucide-react v0.462.0 - ISC 23 * 24 * This source code is licensed under the ISC license. 25 * See the LICENSE file in the root directory of this source tree. 26 */const J=i("CalendarDays",[["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M16 2v4",key:"4m81vk"}],["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",key:"1hopcy"}],["path",{d:"M3 10h18",key:"8toen8"}],["path",{d:"M8 14h.01",key:"6423bh"}],["path",{d:"M12 14h.01",key:"1etili"}],["path",{d:"M16 14h.01",key:"1gbofw"}],["path",{d:"M8 18h.01",key:"lrp35t"}],["path",{d:"M12 18h.01",key:"mhygvu"}],["path",{d:"M16 18h.01",key:"kzsmim"}]]);/** 27 * @license lucide-react v0.462.0 - ISC 28 * 29 * This source code is licensed under the ISC license. 30 * See the LICENSE file in the root directory of this source tree. 31 */const Y=i("ListChecks",[["path",{d:"m3 17 2 2 4-4",key:"1jhpwq"}],["path",{d:"m3 7 2 2 4-4",key:"1obspn"}],["path",{d:"M13 6h8",key:"15sg57"}],["path",{d:"M13 12h8",key:"h98zly"}],["path",{d:"M13 18h8",key:"oe0vm4"}]]);/** 32 * @license lucide-react v0.462.0 - ISC 33 * 34 * This source code is licensed under the ISC license. 35 * See the LICENSE file in the root directory of this source tree. 36 */const $=i("Moon",[["path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z",key:"a7tn18"}]]);/** 37 * @license lucide-react v0.462.0 - ISC 38 * 39 * This source code is licensed under the ISC license. 40 * See the LICENSE file in the root directory of this source tree. 41 */const K=i("PencilLine",[["path",{d:"M12 20h9",key:"t2du7b"}],["path",{d:"M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z",key:"1ykcvy"}],["path",{d:"m15 5 3 3",key:"1w25hb"}]]);/** 42 * @license lucide-react v0.462.0 - ISC 43 * 44 * This source code is licensed under the ISC license. 45 * See the LICENSE file in the root directory of this source tree. 46 */const Z=i("QrCode",[["rect",{width:"5",height:"5",x:"3",y:"3",rx:"1",key:"1tu5fj"}],["rect",{width:"5",height:"5",x:"16",y:"3",rx:"1",key:"1v8r4q"}],["rect",{width:"5",height:"5",x:"3",y:"16",rx:"1",key:"1x03jg"}],["path",{d:"M21 16h-3a2 2 0 0 0-2 2v3",key:"177gqh"}],["path",{d:"M21 21v.01",key:"ents32"}],["path",{d:"M12 7v3a2 2 0 0 1-2 2H7",key:"8crl2c"}],["path",{d:"M3 12h.01",key:"nlz23k"}],["path",{d:"M12 3h.01",key:"n36tog"}],["path",{d:"M12 16v.01",key:"133mhm"}],["path",{d:"M16 12h1",key:"1slzba"}],["path",{d:"M21 12v.01",key:"1lwtk9"}],["path",{d:"M12 21v-1",key:"1880an"}]]),s=({name:g,storeUrl:u,intro:f,carouselImages:p,carouselCtaLabel:o,features:a,featuresClosing:l,closingHeading:h,closingText:m,closingTagline:b,promoTileSrc:x,promoTileAlt:y,
46closingCtaLabel:w,hideName:v=!1})=>{const[r,_]=c.useState(),[k,L]=c.useState(0);return c.useEffect(()=>{if(!r)return;const n=setInterval(()=>{r.scrollNext()},4e3);return()=>clearInterval(n)},[r]),c.useEffect(()=>{r&&r.on("select",()=>{L(r.selectedScrollSnap())})},[r]),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"container mx-auto max-w-3xl",children:e.jsxs("section",{className:"mb-8",children:[!v&&e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:g}),f]})}),e.jsx("div",{className:"my-10 sm:my-14",children:e.jsxs("div",{className:"container mx-auto max-w-5xl px-4",children:[e.jsxs(P,{setApi:_,className:"w-full",opts:{align:"center",loop:!0},children:[e.jsx(G,{children:p.map((n,d)=>e.jsx(F,{className:"basis-full",children:e.jsx("div",{className:"flex justify-center px-4",children:e.jsx("img",{src:n.src,alt:n.alt,className:"max-w-[85%] h-auto rounded-xl shadow-lg mx-auto"})})},d))}),e.jsx(W,{className:"absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 bg-background/80 hover:bg-background border-border/50"}),e.jsx(U,{className:"absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 bg-background/80 hover:bg-background border-border/50"})]}),e.jsx("div",{className:"flex justify-center mt-6 space-x-3",children:p.map((n,d)=>e.jsx("button",{className:"p-1 rounded-full",onClick:()=>r==null?void 0:r.scrollTo(d),"aria-label":`Go to slide ${d+1}`,children:e.jsx("span",{className:`block w-3 h-3 rounded-full transition-all duration-300 ${d===k?"bg-primary scale-110":"bg-muted-foreground/30 hover:bg-muted-foreground/50"}`})},d))}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:u,target:"_blank",rel:"noopener noreferrer",children:o})})})]})}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsxs("section",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"Key Features"}),e.jsx("ul",{className:"space-y-4 mb-8 text-lg list-disc list-outside ml-6",children:a.map((n,d)=>e.jsxs("li",{className:"pl-2",children:[e.jsxs("strong",{className:"text-foreground",children:[n.title,":"]})," ",e.jsx("span",{className:"text-muted-foreground",children:n.description})]},d))}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed",children:l})]}),e.jsx("hr",{className:"border-border my-12"}),e.jsxs("section",{className:"mb-8",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:h}),m,e.jsx("p",{className:"text-xl font-semibold text-primary mb-8",children:b}),e.jsx("img",{src:x,alt:y,className:"w-3/4 mx-auto rounded-xl shadow-lg mb-8"}),e.jsx("div",{className:"text-center",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:u,target:"_blank",rel:"noopener noreferrer",children:w})})})]})]})]})},ee=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_1.webp",alt:"Pick colors and edit palettes instantly"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_2.webp",alt:"Find hues with pixel-perfect precision"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_3.webp",alt:"Build a scheme from the colors on any page"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_4.webp",alt:"Copy HEX and RGB codes to your clipboard"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_5.webp",alt:"Export palettes and share with others"}],oe=[{title:"Advanced Eyedropper Tool",description:"Extract pixel-perfect HEX and RGB values from images, website backgrounds, and UI elements."},{title:"5-Color Palette Builder",description:"Click and fill multiple slots to easily visualize and customize your color theme."},{title:"One-Click Copy",description:"Click any HEX or RGB value to instantly copy the code to your clipboard."},{title:"Seamless Generation",description:'Select "View Palette" to immediately place your colors in an editable palette layout.'},{title:"Smart Swatch Features",description:"Load your color swatch with one click, where you can export it as an image file, grab a shareable link, adjust the brightness, explore complementary colors, and more."}],re=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Gradient_Builder_1.webp",alt:"Create beautiful gradients from different c
46olors"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Gradient_Builder_2.webp",alt:"Customize your gradient exactly how you like"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Gradient_Builder_3.webp",alt:"Choose from a variety of different styles"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Gradient_Builder_4.webp",alt:"View the individual colors from your gradient"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Gradient_Builder_5.webp",alt:"Download your gradient as a high-resolution image"}],te=[{title:"Visual Gradient Builder",description:"Start with two colors and add up to five unique color stops. Use the built-in eyedropper or color canvas to visually mix the perfect blend."},{title:"Custom Gradient Styles",description:"Preview and switch between multiple different blending styles, including Linear Right, Linear Bottom, Diagonal, Radial Center, and Radial Top-Left."},{title:"High-Res Export",description:"Don't settle for low-quality screenshots. Immediately download your finished gradient as a crisp, high-resolution PNG, JPEG, WEBP, or SVG file."},{title:"Smart Palette Extraction",description:"As you build your gradient, the extension automatically calculates the visual midpoints and generates a perfectly balanced 5-color palette derived directly from your design."}],ae=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Whiteboard_1.webp",alt:"Add a whiteboard to your browser instantly"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Whiteboard_2.webp",alt:"Sketch, draw, and doodle on the canvas"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Whiteboard_3.webp",alt:"Change marker colors with the built-in picker"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Whiteboard_4.webp",alt:"Write and leave reminders on the canvas"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Whiteboard_5.webp",alt:"Customize settings and download your whiteboard"}],se=[{title:"Advanced Drawing Tools",description:"Fine-tune your strokes with a smooth, responsive marker and an adjustable thickness slider for precise illustrations."},{title:"Persistent Whiteboard",description:"Never lose a great idea. Your designs, drawings, and custom settings automatically persist across browser sessions and tabs."},{title:"Export & Download",description:"Instantly save your digital dry erase board as a crisp, high-resolution image file to share with others or keep for your own records."},{title:"Smart Color Memory",description:"The tool remembers your most recently used marker colors, making it incredibly easy to bring compositions to life."}],le=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Black_and_White_1.webp",alt:"Turn any webpage black and white instantly"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Black_and_White_2.webp",alt:"Reduce eye strain and increase reading focus"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Black_and_White_3.
46webp",alt:"Adjust grayscale, contrast, and brightness sliders"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Black_and_White_4.webp",alt:"Eliminate visual noise for distraction-free reading"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Black_and_White_5.webp",alt:"Generate and edit a black and white color palette"}],ie=[{title:"Distraction-Free Reading",description:"Strip every flashy color from any webpage in a single click to lock in your focus and make dense text dramatically easier to absorb."},{title:"Advanced Visual Controls",description:"Dial in your perfect reading environment with precise, adjustable sliders for grayscale, contrast, and brightness."},{title:"Eye Comfort & Readability",description:"Soften harsh screen glare and create a sleep-friendly e-paper experience that's gentle on tired eyes during late-night browsing."},{title:"Persistent Focus Mode",description:"Set your ideal contrast levels once and let them seamlessly follow you as you navigate from tab to tab."},{title:"Smart Palette Generation",description:'Hit "View Palette" to instantly drop the exact HEX codes of your black and white scheme into an editable swatch on shadesurfer.io â perfect for exporting, sharing, or exploring complementary tones.'}],ne=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Visualizer_1.webp",alt:"Visualize music and audio in your browser tab"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Visualizer_2.webp",alt:"Select different visual effect styles"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Visualizer_3.webp",alt:"Choose from numerous color palettes"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Visualizer_4.webp",alt:"Change your visualizer window size"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Visualizer_5.webp",alt:"Toggle between dark and light mode"}],de=[{title:"8 Distinct Visual Engines",description:"Switch between Neon Bars, Liquid Waves, Particle Waves, Concentric Rings, and more â each tuned to feel alive against the music."},{title:"Dynamic Color Palettes",description:"Set the mood with hand-picked, high-contrast gradients like Cyberpunk, Synthwave, Emerald Forest, Sunset, and Deep Ocean."},{title:"Custom Physics & Beat Detection",description:"Buttery-smooth motion powered by exponential beat detection that locks onto heavy bass hits and sharp transients in real time."},{title:"Smart Silence Clearing",description:"The canvas automatically resets to a clean, blank state the moment your audio pauses â no flicker, no leftover noise."},{title:"Responsive UI Controls",description:"Toggle Light or Dark mode and snap between Small, Medium, and Large window sizes to fit any screen or workflow."}],ce=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_QR_Code_Maker_1.webp",alt:"Generate a QR code from the site you're on instantly"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_QR_Code_Maker_2.webp",alt:"Adjust the colors of your QR code components"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_QR_Code_Maker_3.webp",alt:"Pick from different shapes and designs"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_QR_Code_Maker_4.webp",alt:"Add your own logo and view your custom color palette"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_QR_Code_Maker_5.webp",alt:"Download your QR code as a high quality image file"}],he=[{title:"Instant Site Link Capture",description:"Open the extension and your active tab's URL is locked in automatically â or paste any custom link on the fly to generate a code in seconds."},{title:"Complete Color Control",description:"Match your brand kit with pixel-perfect precision using a custom color picker, HEX and RGB inputs, or the built-in eyedropper tool."},{title:"Custom Shapes & Styles",description:"Skip the boring blocks. Mix and match rounded dots, classic squares, and fully customizable corner shapes to make a QR code that actually looks like your brand."},{title:"Logo & Picture Upload",description:"Drop your own logo or image right into the center of the code and dial in the surrounding padding for a polished, professional finish."},{title:"High-Res Export Options",description:"Download print-ready QR codes in your choice of PNG, JPEG, WEBP, or SVG â crisp enough for packaging, billboards, or business cards."}],ue=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_To-Do_List_1.webp",alt:"Build a to-do list with color-coded tasks"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_To-Do_List_2.webp",alt:"Cross items off your list and keep track of what's left"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_To-Do_List_3.webp",alt:"Filter by category to find what you care about"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_To-Do_List_4.webp",alt:"Change category names, positions, and colors"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_To-Do_List_5.webp",alt:"Continue adding tasks and make the perfect to-do list"}],me=[{title:"Color-Coded Categories",description:"Build your own organizational system with custom labels â pick the names, pick the colors, and group tasks visually so your priorities pop off the screen."},{title:"Drag-and-Drop Functionality",description:"Reorder individual tasks or rearrange your master category list in a single fluid motion. Your workflow, your order."},{title:"Smart Task Filtering",description:"Use the dropdown filter to isolate exactly what matters and hide everything else â a clean, focused view even when your list is massive."},{title:"Seamless Editing & Tracking",description:"Click to cross items off, watch the remaining count update live, edit task text inline, and swap color badges at any time without losing a thing."},{title:"Quick Clean-Up",description:"Wrapped a project? Bulk delete filtered items or clear an entire category in one click and start the next sprint with a totally fresh slate."}],ge=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_COTD_1.webp",alt:"Get a daily dose of colorful inspiration"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_COTD_2.webp",alt:"See the day's color right from your browser"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_COTD_3.webp",alt:"Export each hue to analyze additional details"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_COTD_4.webp",alt:"Modify your colors, share, and download"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_COTD_5.webp",alt:"Automatically view a new color every single day"}],pe=[{title:"Unique Daily Colors",description:"A beautifully generated, one-of-a-kind hue every single day. Our intelligent algorithm blends seasonal shifts with deterministic generation so you'll never see the same shade twice."},{title:"Perfectly Synced",description:"Your daily color refreshes automatically at midnight in y
46our local time zone, so your dose of inspiration is always perfectly on schedule no matter where you are."},{title:"Official Color Names",description:"Instantly know exactly what you're looking at â the extension connects to an advanced color tool to fetch the official, precise name of each day's color on the fly."},{title:"Dynamic & Beautiful UI",description:"A sleek, modern interface that adapts to the daily theme. Text and logos intelligently shift between crisp white and dark charcoal for perfect legibility every time."},{title:"One-Click Copy",description:"Grab the exact HEX code with a single click and paste today's color straight into your design files, CSS, or digital art."}],j="https://chromewebstore.google.com/detail/shadesurfer-color-picker/bjhlkjeckdbmoipcomplhiggjhjpapnb",S="https://chromewebstore.google.com/detail/shadesurfer-gradient-buil/llnflhnjpcgmkbfklgcighbklcpplgei",C="https://chromewebstore.google.com/detail/shadesurfer-whiteboard-dr/bomeoeekmdmhhgpmnmapdmcmdcoffhop",N="https://chromewebstore.google.com/detail/shadesurfer-black-white-r/kkcjnnddgnpeccbceeacllbnfmkkpfea",E="https://chromewebstore.google.com/detail/shadesurfer-music-audio-v/hdjdojceejoedckfalchcdgencaifhpb",T="https://chromewebstore.google.com/detail/shadesurfer-qr-code-creat/mncdpfjopiincdilpefiefckfjidddkk",R="https://chromewebstore.google.com/detail/shadesurfer-to-do-list-ta/kjjcdfljbphljjgaijffkgjnjedhlamj",B="https://chromewebstore.google.com/detail/shadesurfer-color-of-the/plfmijbbfnffgpkhkmlonkoebnmfbial",D="https://chromewebstore.google.com/detail/shadesurfer-dark-mode/pedjdpjgmefcncljmkiapcaolhdfehai",M="https://chromewebstore.google.com/detail/shadesurfer-color-blindne/jcndmhepggifagiadmeiegkamjifjldc",be=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Dark_Mode_1.webp",alt:"View any website in soothing dark mode"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Dark_Mode_2.webp",alt:"Adjust dark mode to your exact preferences"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Dark_Mode_3.webp",alt:"Browse the web with maximum comfort"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Dark_Mode_4.webp",alt:"Easily slide brightness, contrast, and grayscale"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Dark_Mode_5.webp",alt:"View your dark mode color palette"}],xe=[{title:"One-Click Dark Mode",description:"Banish blinding white backgrounds in a single tap and instantly cloak any website in a clean, modern dark UI."},{title:"Advanced Visual Controls",description:"Dial in your perfect night-time vibe with precise sliders for brightness, contrast, and grayscale â fine-tuned to your exact comfort."},{title:"Eye Comfort & Readability",description:"Soften harsh screen glare and reduce eye strain with a warm, soothing canvas built for late-night browsing or all-day work."},{title:"Smart Palette Generation",description:'Hit "View Palette" to instantly drop the exact HEX codes of your dark mode filter into an editable swatch â ideal for exporting, sharing, or exploring complementary tones.'}],fe=[{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Color_Blindness_Viewer_1.webp",alt:"View accessibility with color blindness filters"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Color_Blindness_Viewer_2.webp",alt:"Apply preferences to any page instantly"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Color_Blindness_Viewer_3.webp",alt:"Select from a range of color blindness types"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Color_Blindness_Viewer_4.webp",alt:"Have precise control over intensity and contrast"},{src:"/lovable-uploads/ShadeSurfer_Chrome_Extension_Color_Blindness_Viewer_5.webp",alt:"View and export your filter's color palette"}],ye=[{title:"Comprehensive Accessibility Testing",description:"Simulate four scientifically accurate vision profiles â Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (full grayscale) â with one click."},{title:"Advanced Visual Controls",description:"Fine-tune each simulation with adjustable intensity and contrast sliders so you can stress-test edge cases and specific vision thresholds."},{title:"Real-Time Color Preview",description:"See exactly how the active filter alters common problem colors right inside the extension window â no guessing, no second tab required."},{title:"Smart Palette Generation",description:"Instantly drop the exact HEX codes of your filtered colors into an editable palette you can export and share."}],Te=()=>{const g=c.useRef(null),[u,f]=c.useState(!1);c.useEffect(()=>{window.scrollTo(0,0),document.title="Browser Extensions - ShadeSurfer Color Picker & Palette Generator";const o=document.querySelector('meta[name="description"]');o&&o.setAttribute("content","Pick colors from any webpage and generate custom palettes instantly with the ShadeSurfer Chrome extension. Advanced eyedropper, 5-color palette builder, and one-click copy.")},[]),c.useEffect(()=>{const o=g.current;if(!o)return;const a=new IntersectionObserver(([l])=>{const h=l.boundingClientRect.bottom<0;f(!l.isIntersecting&&h)},{threshold:0,rootMargin:"0px"});return a.observe(o),()=>a.disconnect()},[]);const p=()=>{const o=g.current;o&&requestAnimationFrame(()=>{const a=document.querySelector("header"),l=a?a.getBoundingClientRect().height:0,h=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--announcement-banner-height")||"0",10),m=o.getBoundingClientRect().top+window.pageYOffset;window.scrollTo({top:Math.max(0,m-l-h-12),behavior:"smooth"})})};return e.jsxs("div",{className:"min-h-screen bg-gradient-to-b from-background via-slate-50/50 to-background dark:from-background dark:via-slate-900/30 dark:to-background",children:[e.jsx(z,{}),e.jsxs("main",{children:[e.jsxs("article",{className:"py-10 sm:py-12 md:py-16 px-4",children:[e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsxs("header",{className:"mb-12",children:[e.jsx("h1",{className:"text-4xl sm:text-5xl md:text-6xl font-bold mb-8 text-foreground",children:"ShadeSurfer Browser Extensions"}),e.jsx("p",{className:"text-xl sm:text-2xl text-muted-foreground leading-relaxed mb-6",children:"Inspiration doesn't just happen on our shores. It strikes while you're surfing the rest of the web."}),e.jsx("p",{className:"text-xl sm:text-2xl font-semibold text-primary mb-10",children:"Capture any color, anywhere â without ever leaving your tab."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image.webp",alt:"ShadeSurfer Color Picker & Palette Generator - Find colors on any page instantly",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:j,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsxs("nav",{ref:g,id:"extension-navigator","aria-label":"Find an extension",className:"mb-12",children:[e.jsxs("div",{className:"flex items-center justify-center gap-3 mb-6",children:[e.jsx("span",{className:"h-px w-8 bg-border","aria-hidden":"true"}),e.jsx("p",{className:"text-[11px] font-semibold uppercase tracking-[0.2em] text-muted-foreground",children:"Find an Extension"}),e.jsx("span",{className:"h-px w-8 bg-border","aria-hidden":"true"})]}),(()=>{const o=[{id:"color-picker",label:"Color Picker",icon:A,glow:"bg-blue-500/30",ring:"from-blue-500/40 via-cyan-400/20 to-transparent",iconBg:"from-blue-500 to-cyan-500",shadow:"group-hover:shadow-blue-500/30",dot:"bg-blue-500"},{id:"gradient-builder",label:"Gradient Builder",icon:Q,glow:"bg-pink-500/30",ring:"from-pink-500/40 via-purple-400/20 to-transparent",iconBg:"from-pink-500 via-purple-500 to-blue-500",shadow:"group-hover:shadow-
46pink-500/30",dot:"bg-pink-500"},{id:"whiteboard",label:"Whiteboard",icon:K,glow:"bg-emerald-500/30",ring:"from-emerald-500/35 via-green-400/20 to-transparent",iconBg:"from-lime-400 via-emerald-400 to-green-500",shadow:"group-hover:shadow-emerald-500/30",dot:"bg-emerald-500"},{id:"black-and-white",label:"E-Reader",icon:X,glow:"bg-gray-500/30",ring:"from-gray-400/40 via-zinc-400/20 to-transparent",iconBg:"from-gray-400 to-gray-600",shadow:"group-hover:shadow-gray-500/30",dot:"bg-gray-500"},{id:"visualizer",label:"Audio Visualizer",icon:O,glow:"bg-fuchsia-500/30",ring:"from-fuchsia-500/40 via-orange-400/20 to-transparent",iconBg:"from-fuchsia-500 via-pink-500 to-orange-500",shadow:"group-hover:shadow-fuchsia-500/30",dot:"bg-fuchsia-500"},{id:"qr-code",label:"QR Code Creator",icon:Z,glow:"bg-indigo-500/30",ring:"from-indigo-500/35 via-violet-400/20 to-transparent",iconBg:"from-indigo-500 via-violet-500 to-purple-600",shadow:"group-hover:shadow-indigo-500/30",dot:"bg-indigo-500"},{id:"todo-list",label:"To-Do List Maker",icon:Y,glow:"bg-amber-500/30",ring:"from-amber-500/40 via-rose-400/20 to-transparent",iconBg:"from-amber-500 via-orange-500 to-rose-500",shadow:"group-hover:shadow-amber-500/30",dot:"bg-amber-500"},{id:"cotd",label:"Color of the Day",icon:J,glow:"bg-rose-500/30",ring:"from-rose-500/35 via-orange-400/20 to-transparent",iconBg:"from-rose-500 via-red-400 to-orange-400",shadow:"group-hover:shadow-rose-500/30",dot:"bg-rose-500"},{id:"dark-mode",label:"Dark Mode",icon:$,glow:"bg-slate-500/30",ring:"from-slate-400/40 via-zinc-400/20 to-transparent",iconBg:"from-slate-700 to-zinc-900 dark:from-slate-200 dark:to-zinc-400",shadow:"group-hover:shadow-slate-500/30",dot:"bg-slate-500"},{id:"color-blind",label:"Color Blind Viewer",icon:V,glow:"bg-purple-500/30",ring:"from-purple-500/40 via-pink-400/20 to-transparent",iconBg:"from-purple-500 via-fuchsia-500 to-pink-500",shadow:"group-hover:shadow-purple-500/30",dot:"bg-purple-500"}],a=({id:b,label:x,icon:y,glow:w,ring:v,iconBg:r,shadow:_,dot:k})=>e.jsxs("a",{href:`#${b}`,"aria-label":`Jump to ${x}`,className:`group relative flex flex-col items-center text-center gap-3 px-3 py-6 sm:px-4 sm:py-7 rounded-2xl border border-border/60 bg-card/40 backdrop-blur-md overflow-hidden hover:border-foreground
46/20 hover:-translate-y-1 hover:shadow-2xl ${_} transition-all duration-300 ease-out`,children:[e.jsx("div",{className:`pointer-events-none absolute -top-12 left-1/2 -translate-x-1/2 w-32 h-32 rounded-full ${w} blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500`,"aria-hidden":"true"}),e.jsx("span",{className:`absolute top-3 right-3 w-1.5 h-1.5 rounded-full ${k} opacity-40 group-hover:opacity-100 transition-opacity duration-300`,"aria-hidden":"true"}),e.jsxs("div",{className:"relative z-10",children:[e.jsx("div",{className:`absolute -inset-[2px] rounded-2xl bg-gradient-to-br ${v} opacity-60 group-hover:opacity-100 blur-[2px] transition-opacity duration-300`,"aria-hidden":"true"}),e.jsx("div",{className:`relative flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 rounded-2xl bg-gradient-to-br ${r} shadow-lg group-hover:scale-105 transition-transform duration-300 ease-out`,children:e.jsx(y,{className:"w-5 h-5 sm:w-6 sm:h-6 text-white",strokeWidth:2.25})})]}),e.jsx("span",{className:"relative z-10 text-sm sm:text-[15px] font-semibold text-foreground tracking-tight leading-tight",children:x}),e.jsxs("span",{className:"relative z-10 inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-[0.15em] text-muted-foreground group-hover:text-foreground transition-colors duration-300",children:["Explore",e.jsx(H,{className:"w-3 h-3 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:translate-y-0.5",strokeWidth:2.5})]})]},b),l=8,h=o.slice(0,l),m=o.slice(l);return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-5",children:h.map(a)}),m.length>0&&e.jsx("div",{className:"mt-3 sm:mt-5 grid grid-cols-2 gap-3 sm:gap-5 sm:max-w-[calc(50%-0.625rem)] sm:mx-auto",children:m.map(a)})]})})()]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx("div",{id:"color-picker",className:"scroll-mt-24","aria-hidden":"true"}),e.jsx(s,{name:"Color Picker & Palette Generator",storeUrl:j,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Grab colors from any webpage and build beautiful color schemes on-the-go. Whether you're a web developer, brand owner, graphic designer, UI/UX creator, digital artist, or simply a color lover, finding the perfect tones has never been easier."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Just open the Chrome extension, use the built-in eyedropper tool to select any pixel on your screen, and automatically save the exact color codes to your custom palette."})]}),carouselImages:ee,carouselCtaLabel:"Try Chrome Extension",features:oe,featuresClosing:"Perfect for building brand kits, designing websites, or just finding colorful inspiration across the web.",closingHeading:"Ready to Pick Your Perfect Colors?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"No more guessing or trying to match colors manually. Just point, click, and pull the exact shades right into your workflow so you never lose your creative momentum."}),closingTagline:"Start surfing colors everywhere you go.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile.webp",promoTileAlt:"ShadeSurfer Color Picker Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"gradient-builder",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"Color Gradient Builder"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"Flawless color blends, zero guesswork. Craft ultra high-res gradients and extract the perfect palette in a single click. Premium aesthetics have never been this fast."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_gradient_builder.webp",alt:"ShadeSurfer Color Gradient Builder - Create stunning gradients in seconds",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:S,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"Color Gradient Builder",hideName:!0,storeUrl:S,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"The magic is in the absolute lack of friction. Instead of booting up heavy design programs or endlessly tweaking sliders, the extension lives right where you work. Just drop in a few anchor colors to set the mood, choose a blend style, and the tool takes over, forcing even stubborn hues into a perfectly smooth transition."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Instantly, you get more than just a striking visual. The builder calculates the mathematical sweet spots between your selections, handing you a flawless, high-res gradient alongside a harmonized color palette."})]}),carouselImages:re,carouselCtaLabel:"Try Chrome Extension",features:te,featuresClosing:"Perfect for making backgrounds, social media graphics, website assets, digital artwork, or discovering new color combinations.",closingHeading:"Ready to Build Beautiful Gradients?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"Stop wrestling with clunky design software just to make a simple gradient. Mix your colors, pick a style, and export a flawless high-res file in seconds â with a matching palette ready to go."}),closingTagline:"Generate beautiful gradients and color palettes today.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_gradient_builder.webp",promoTileAlt:"ShadeSurfer Color Gradient Builder Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"whiteboard",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"Whiteboard Drawing Tool"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"A dry erase board canvas for creative notes and colorful sketches. Whether you're brainstorming, sketching out ideas, leaving yourself visual reminders, or simply doodling up a storm, capturing your thoughts in your browser is finally possible."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_whiteboard.webp",alt:"ShadeSurfer Whiteboard Drawing Tool - Write on a dry erase board canvas",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:C,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"Whiteboard Drawing Tool",hideName:!0,storeUrl:C,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Just open the extension to instantly access a clean, digital dry erase board, ready for your ideas whenever inspiration strikes. No app to launch, no file to create â just a blank canvas a click away, right inside your browser."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Sketch diagrams, jot handwritten notes, or doodle freely with smooth, responsive marker strokes. Your work persists across sessions, so a great idea is never more than a tab away."})]}),carouselImages:ae,carouselCtaLabel:"Try Chrome Extension",features:se,featuresClosing:"Perfect for diagrams, quick notes, casual sketches, or simply having a reliable scratchpad handy while navigating the web.",closingHeading:"Ready to Sketch Your Best Ideas?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"Stop scrambling for sticky notes or switching to another app every time inspiration strikes. Open a fresh canvas in your browser, capture the thought, and get right back to what you were doing."}),closingTagline:"Turn your browser into a simple, easy-to-use dry erase board today.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_whiteboard_v5.webp",promoTileAlt:"ShadeSurfer Whiteboard Drawing Tool Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"black-and-white",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"Black & White E-Reader"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"Turn any webpage into a crisp, distraction-free e-paper display. Strip away flashy colors and visual noise to read like you would on a traditional newspaper or e-reader â anywhere on the web."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_black_and_white.webp",alt:"ShadeSurfer Black & White Reader Mode - Remove c
46olors for better focus",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:N,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"Black & White Reader Mode",hideName:!0,storeUrl:N,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Sustained attention online has never been simpler. Whether you're tearing through long-form articles, deep in research, prepping for an exam, or trying to wind down before bed, the modern web throws a tidal wave of color, motion, and distraction at you. This extension cuts straight through it."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Just open the extension, flip on reader mode, and watch the entire page transform into a calm, monochrome canvas â fine-tuned to your exact preferences with adjustable grayscale, contrast, and brightness controls."})]}),carouselImages:le,carouselCtaLabel:"Try Chrome Extension",features:ie,featuresClosing:"Ideal for deep work, late-night reading, focused study sessions, or simply finding a calmer browsing experience across the web.",closingHeading:"Ready to Read Without the Noise?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"Stop fighting the visual chaos of the modern web. Turn any page into a crisp, distraction-free electronic paper display and finally read the way your brain wants to."}),closingTagline:"Bring the calm of an e-reader to every tab today.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_reader_mode.webp",promoTileAlt:"ShadeSurfer Black & White Reader Mode Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"visualizer",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"Music & Audio Visualizer"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"Turn every song, podcast, and stream into a living, breathing light show. A premium, audio-reactive visualizer that pulses, ripples, and explodes in perfect sync with whatever's playing in your browser."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_visualizer.webp",alt:"ShadeSurfer Music & Audio Visualizer - Turn sound into colorful effects",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:E,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"Music & Audio Visualizer",hideName:!0,storeUrl:E,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Sound deserves more than a tiny waveform tucked in the corner of a tab. This extension transforms whatever's coming through your speakers â your favorite playlist, a late-night podcast, a video deep-dive â into a full-screen burst of color and motion that reacts to every beat, drop, and whisper in real time."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Built on custom audio-reactive physics and dynamic beat detection, the visualizer locks onto heavy bass hits and sharp transients with eerie precision. The result is a hypnotic, premium-feeling display that makes your browser feel less like a workspace and more like a stage."})]}),carouselImages:ne,carouselCtaLabel:"Try Chrome Extension",features:de,featuresClosing:"Perfect for deep focus sessions, listening parties, music discovery, late-night coding, or just adding a colorful pulse to your everyday browsing.",closingHeading:"Ready to See Your Sound?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"Stop letting your audio play in the dark. Fire up the visualizer, hit play on anything, and watch your screen come alive with colors that move exactly the way the music feels."}),closingTagline:"Turn your everyday audio into a stunning visual experience today.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_audio_visualizer.webp",promoTileAlt:"ShadeSurfer Music & Audio Visualizer Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"qr-code",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"QR Code Creator"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"Generate stunning, fully branded QR codes from any webpage in seconds. Custom colors, custom shapes, your own logo â print-ready in a single click, without ever leaving your browser."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_QR_Code_Maker.webp",alt:"ShadeSurfer QR Code Creator - Generate colorful QR codes in seconds",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:T,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"QR Code Creator",hideName:!0,storeUrl:T,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Generic black-and-white QR codes are out. Whether you're a brand owner, graphic designer, web developer, digital marketer, or event planner, this extension makes spinning up a beautifully branded, scannable code effortless â straight from the tab you're already on."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Just open the extension to instantly grab the link in your current tab, layer in your brand's exact colors, choose from custom shapes and design layouts, drop in your logo, and download a polished, professional-grade QR code in the format you need."})]}),carouselImages:ce,carouselCtaLabel:"Try Chrome Extension",features:he,featuresClosing:"Perfect for advertisements, restaurant menus, flyers, product packaging, event signage, or any digital marketing campaign that needs to look as good as it scans.",closingHeading:"Ready to Create QR Codes That Actually Look Good?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"No more clunky third-party generators. No more low-res exports. Just open the extension, customize, and download a high-quality QR code that matches your brand from the very first scan."}),closingTagline:"Generate colorful, high-quality QR codes from any webpage today.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_qr_code_maker.webp",promoTileAlt:"ShadeSurfer QR Code Creator Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"todo-list",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"To-Do List & Task Manager"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"Turn a chaotic schedule into a clean, color-coded workflow. Build the perfect checklist, group tasks by your own custom categories, and feel the satisfaction of crossing things off â all without leaving your browser tab."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_to-do_list.webp",alt:"ShadeSurfer To-Do List & Task Manager - Make colorful lists and stay organized",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:R,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"To-Do List & Task Manager",hideName:!0,storeUrl:R,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Whether you're a visual thinker, busy professional, entrepreneur, project manager, student, or simply trying to stay on top of daily life, this extension makes building a custom, beautifully organized checklist effortless."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Open the extension, add tasks in seconds, design your own uniquely colored category tags, drag and drop to reorder your workflow on the fly, and savor the small dopamine hit of checking items off one by one."})]}),carouselImages:ue,carouselCtaLabel:"Try Chrome Extension",features:me,featuresClosing:"Perfect for managing daily routines, tracking project milestones, building cohesive lists, or transforming a chaotic schedule into a clean, visual workflow.",closingHeading:"Ready to Take Control of Your Day?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"Stop juggling sticky notes, scattered docs, and forgotten reminders. Build one beautiful, color-coded checklist that lives right in y
46our browser and finally watch your to-do list shrink the way it's supposed to."}),closingTagline:"Build the perfect checklist and own your productivity today.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_to-do_list.webp",promoTileAlt:"ShadeSurfer To-Do List & Task Manager Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"cotd",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"Color of the Day"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"A fresh, beautifully unique hue waiting for you every single morning. Open your browser, get inspired, and start the day with a brand new shade you've never seen before."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_COTD.webp",alt:"ShadeSurfer Color of the Day Extension - View a beautiful new color daily",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:B,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"Color of the Day",hideName:!0,storeUrl:B,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Whether you're a graphic designer chasing fresh inspiration, a web developer hunting the perfect accent shade, or simply someone who loves beautiful hues, discovering new color has never felt this effortless."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Open the extension and instantly reveal a stunning, mathematically unique color of the day â complete with its official name and exact HEX code, served straight from your browser toolbar."})]}),carouselImages:ge,carouselCtaLabel:"Try Chrome Extension",features:pe,featuresClosing:"Perfect for daily design inspiration, expanding your visual vocabulary, building unique UI/UX, crafting mood boards, or simply starting your morning with a beautiful new hue.",closingHeading:"Ready to Make Every Day a Little More Colorful?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:'Stop scrolling endless palettes looking for "the one." Let a brand new, hand-tuned color come to you every morning and turn your browser into a daily source of creative energy.'}),closingTagline:"Discover a beautiful new color every single day.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_color_of_the_day.webp",promoTileAlt:"ShadeSurfer Color of the Day Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"dark-mode",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"Browser Dark Mode"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"Turn any webpage into a comfortable, easy-to-read dark theme with precise controls. Reduce harsh screen glare, soothe tired eyes, and make every site feel modern in a single click."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_dark_mode.webp",alt:"ShadeSurfer Dark Mode Extension - View any website in dark mode",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:D,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"Dark Mode",hideName:!0,storeUrl:D,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Whether you love the sleek look of a dark UI, want to cut down on harsh screen glare, or simply prefer a more modern way to browse, surfing the web in comfort has never felt this effortless."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Just open the extension, flip on the dark mode filter, and watch blinding white pages instantly transform into a warm, soothing canvas â fine-tuned to your exact preferences with adjustable brightness, contrast, and grayscale controls."})]}),carouselImages:be,carouselCtaLabel:"Try Chrome Extension",features:xe,featuresClosing:"Perfect for developers, designers, night owls, or anyone who simply prefers a dark, focused aesthetic across the web.",closingHeading:"Ready to Browse in Comfort?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"Stop squinting through blinding white pages. Add the perfect amount of darkness to any tab, dial in your ideal contrast, and finally browse the way your eyes have been begging you to."}),closingTagline:"Bring soothing dark mode to every webpage today.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_dark_mode.webp",promoTileAlt:"ShadeSurfer Dark Mode Chrome Extension",closingCtaLabel:"Get Extension"}),e.jsxs("div",{className:"container mx-auto max-w-3xl",children:[e.jsx("hr",{className:"border-border my-12"}),e.jsx("div",{id:"color-blind",className:"scroll-mt-24","aria-hidden":"true"}),e.jsxs("div",{className:"mb-12",children:[e.jsx("h2",{className:"text-3xl sm:text-4xl font-bold mb-6 text-foreground",children:"Color Blindness Simulator"}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-8",children:"Instantly test your website's accessibility by simulating how color-blind users experience your design. Catch contrast issues and accessibility failures in real time, before your users ever do."}),e.jsx("img",{src:"/lovable-uploads/ShadeSurfer_marquee_image_color_blindness_viewer.webp",alt:"ShadeSurfer Color Blindness Simulator - Apply color filters to view accessibility",className:"w-full rounded-xl shadow-lg"}),e.jsx("div",{className:"text-center mt-10",children:e.jsx(t,{asChild:!0,size:"lg",className:"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold px-8 py-6 text-lg shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/40 transition-all duration-300",children:e.jsx("a",{href:M,target:"_blank",rel:"noopener noreferrer",children:"Download FREE"})})})]}),e.jsx("hr",{className:"border-border my-12"})]}),e.jsx(s,{name:"Color Blindness Simulator",hideName:!0,storeUrl:M,intro:e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Stop guessing about web accessibility. A professional testing tool built for UX/UI designers, web developers, and QA engineers â just open the extension, apply a vision filter, and instantly see your webpage through the eyes of users with different forms of color vision deficiency."}),e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-6",children:"Imagine a checkout page where a declined card turns red and an approved card turns green. To most users that contrast is obvious. Toggle on Protanopia or Deuteranopia and both boxes collapse into a muddy, indistinguishable yellow-brown. Catch that disaster in real time so you can layer in clear icons, labels, and patterns that work for everyone."})]}),carouselImages:fe,carouselCtaLabel:"Try Chrome Extension",features:ye,featuresClosing:"Use the extension to audit contrast, build a smooth browsing experience for every visitor, and contribute to a fully accessible internet.",closingHeading:"Ready to Build for Everyone?",closingText:e.jsx("p",{className:"text-lg text-muted-foreground leading-relaxed mb-4",children:"Stop shipping designs that fail the people who need them most. Turn any webpage into an instant accessibility lab and ship interfaces that genuinely work for every set of eyes."}),closingTagline:"Make the web accessible to everyone today.",promoTileSrc:"/lovable-uploads/ShadeSurfer_small_promo_tile_color_blindness_viewer.webp",promoTileAlt:"ShadeSurfer Color Blindness Simulator Chrome Extension",closingCtaLabel:"Get Extension"})]}),e.jsx(I,{})]}),e.jsx("button",{type:"button",onClick:p,"aria-label":"Back to extensions list","aria-hidden":!u,tabIndex:u?0:-1,className:`fixed bottom-6 right-6 z-40 flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 text-white shadow-lg shadow-blue-500/40 ring-1 ring-white/20 transition-all duration-300 hover:scale-110 hover:shadow-xl hover:shadow-blue-500/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 ${u?"opacity-100 translate-y-0 pointer-events-auto":"opacity-0 translate-y-3 pointer-events-none"}`,children:e.jsx(q,{className:"h-5 w-5"})})]})};export{Te as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.