1import{r as n,j as e,H as h,N as m,A as x,E as j,z as v}from"./main-9st80poY.js";const p=()=>{const[c,r]=n.useState("sf"),[a,l]=n.useState({value:null,level:"",color:"",ringClass:"",loading:!0}),d={sf:{name:"San Francisco",lat:37.7749,lon:-122.4194},la:{name:"Los Angeles",lat:34.0522,lon:-118.2437}},o=async s=>{l(i=>({...i,loading:!0}));{l({value:8,level:"High",color:"#ff8c42",ringClass:"uv-high",loading:!1});return}};n.useEffect(()=>{o()},[c]);const t=s=>r(s.target.value);return e.jsxs("div",{className:"how-to-use-container",children:[e.jsxs(h,{children:[e.jsx("title",{children:"How to Use - Block Automation"}),e.jsx("meta",{property:"og:title",content:"How to Use - Block Automation"}),e.jsx("meta",{property:"og:description",content:"Learn how to use Block's sunscreen dispensers in simple steps."})]}),e.jsx(m,{}),e.jsx("div",{className:"hero-section section-container",children:e.jsxs("div",{className:"max-width",children:[e.jsx("span",{className:"beforeHeading",children:"SIMPLE & EFFECTIVE"}),e.jsx("h1",{className:"hero-title",children:"How to Use a Sun Block"})]})}),e.jsx("div",{className:"dashboard-section section-container",children:e.jsxs("div",{className:"max-width",children:[e.jsx("span",{className:"beforeHeading centered-heading",children:"CURRENT CONDITIONS"}),e.jsxs("div",{className:"location-selector",children:[e.jsx("label",{htmlFor:"location-select",children:"Location:"}),e.jsx("select",{id:"location-select",value:c,onChange:t,className:"location-dropdown",children:Object.entries(d).map(([s,i])=>e.jsx("option",{value:s,children:i.name},s))})]}),e.jsx("div",{className:"compact-dashboard-card",children:e.jsx("div",{className:"uv-ring-container",children:e.jsx("div",{className:`uv-ring ${a.ringClass}`,children:a.loading?e.jsx(x,{size:"small"}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"uv-value",children:a.value}),e.jsx("div",{className:"uv-label",children:"UV Index"}),e.jsx("div",{className:"uv-level",children:a.level})]})})})})]})}),e.jsx("div",{className:"instructions-section section-container alternate-bg",children:e.jsxs("div",{className:"max-width",children:[e.jsx("span",{className:"beforeHeading",children:"EASY AS 1-2-3"}),e.jsx("h2",{className:"section-title",children:"Instructions"}),e.jsxs("div",{className:"instruction-cards",children:[e.jsxs("div",{className:"instruction-card card-step-2",children:[e.jsx("div",{className:"step-number",children:"1"}),e.jsxs("div",{className:"step-content",children:[e.jsx("h3",{children:"Make Payment"}),e.jsx("p",{children:"Purchase by scanning the QR code. Each application gives you 3 pumps of premium sunscreen."}),e.jsx("div",{className:"step-visual",children:e.jsxs("div",{className:"payment-options",children:[e.jsx("div",{className:"payment-icon",children:"ð±"}),e.jsx("div",{className:"payment-icon",children:"ð§´ð§´ð§´"})]})})]})]}),e.jsxs("div",{className:"instruction-card card-step-3",children:[e.jsxs("div",{className:"step-content",children:[e.jsx("h3",{children:"Wave Your Hand"}),e.jsx("p",{children:"Hold your hand near the sensor and wave. The machine will dispense one pump. Repeat 3 times for a complete application."}),e.jsx("div",{className:"step-visual",children:e.jsxs("div",{className:"hand-wave-demo",children:[e.jsx("div",{className:"hand-icon",children:"ð"}),e.jsxs("div",{className:"wave-indicator",children:[e.jsx("div",{className:"wave-line"}),e.jsx("div",{className:"wave-line"}),e.jsx("div",{className:"wave-line"})]})]})})]}),e.jsx("div",{className:"step-number",children:"2"})]})]})]})}),e.jsx("div",{className:"application-guide-section section-container",children:e.jsxs("div",{className:"max-width",children:[e.jsx("span",{className:"beforeHeading",children:"APPLICATION GUIDES"}),e.jsx("h2",{className:"section-title",children:"Proper Application Techniques"}),e.jsxs("div",{className:"guide-cards",children:[e.jsxs("div",{className:"guide-card",children:[e.jsx("div",{className:"guide-icon face-icon",children:"ð¤"}),e.jsx("h3",{children:"Face & Neck"}),e.jsx("p",{children:"Apply evenly to face and neck area. Don't forget ears, chin and back of the neck."}),e.jsx("div",{className:"guide-amount",children:"Amount: 1 pump"})]}),e.jsxs("div",{className:"guide-card",children:[e.jsx("div",{className:"guide-icon arms-icon",children:"ðª"}),e.jsx("h3",{children:"Arms & Shoulders"}),e.jsx("p",{children:"Cover all exposed arm and shoulder areas thoroughly."}),e.jsx("div",{className:"guide-amount",children:"Amount: 1 pump"})]}),e.jsxs("div",{className:"guide-card",children:[e.jsx("div",{className:"guide-icon body-icon",children:"ð"}),e.jsx("h3",{children:"Body & Legs"}),e.jsx("p",{children:"Apply to all exposed areas of torso and legs."}),e.jsx("div",{className:"guide-amount",children:"Amount: 2 pumps"})]}),e.jsxs("div",{className:"guide-card",children:[e.jsx("div",{className:"guide-icon water-icon",children:"ð"}),e.jsx("h3",{children:"Water Activities"}),"9",e.jsx("p",{children:"Reapply every 60-0 minutes when swimming or sweating heavily."}),e.jsx("div",{className:"guide-amount",children:"Frequency: Every hour"})]})]})]})}),e.jsx("div",{className:"tips-section section-container alternate-bg",children:e.jsxs("div",{className:"max-width",children:[e.jsx("span",{className:"beforeHeading",children:"PRO TIPS"}),e.jsx("h2",{className:"section-title",children:"Best Practices"}),e.jsxs("div",{className:"tips-grid",children:[e.jsxs("div",{className:"tip-card",children:[e.jsx("div",{className:"tip-icon",children:"â±ï¸"}),e.jsx("h3",{children:"Timing Matters"}),e.jsx("p",{children:"Wait about 2 seconds between waves to ensure proper dispensing."})]}),e.jsxs("div",{className:"tip-card",children:[e.jsx("div",{className:"tip-icon",children:"ð¤"}),e.jsx("h3",{children:"Hand Positioning"}),e.jsx("p",{children:"Wave clearly and move your hand away - don't keep it near the sensor continuously."})]}),e.jsxs("div",{className:"tip-card",children:[e.jsx("div",{className:"tip-icon",children:"ð"}),e.jsx("h3",{children:"Reapplication"}),e.jsx("p",{children:"Reapply every 2 hours or after swimming/sweating for optimal protection."})]})]})]})}),e.jsx("div",{className:"troubleshooting-section section-container",children:e.jsxs("div",{className:"max-width",children:[e.jsx("span",{className:"beforeHeading",children:"NEED HELP?"}),e.jsx("h2",{className:"section-title",children:"Common Messages"}),e.jsxs("div",{className:"troubleshooting-cards",children:[e.jsxs("div",{className:"trouble-card",children:[e.jsx("div",{className:"trouble-message",children:'"See you tomorrow!"'}),e.jsx("div",{className:"trouble-explanation",children:"The dispenser is closed for the day. Try again during operating hours."})]}),e.jsxs("div",{className:"trouble-card",children:[e.jsx("div",{className:"trouble-message",children:'"Temporarily out of order"'}),e.jsx("div",{className:"trouble-explanation",children:"The machine needs service. Look for another nearby dis
1penser or contact support."})]}),e.jsxs("div",{className:"trouble-card",children:[e.jsx("div",{className:"trouble-message",children:'"Recalibrating sensor..."'}),e.jsx("div",{className:"trouble-explanation",children:"Please remove your hand and wait a moment while the machine adjusts itself."})]})]})]})}),e.jsx("div",{className:"cta-section section-container orange-gradient-bg",children:e.jsx("div",{className:"max-width",children:e.jsxs("div",{className:"cta-banner",children:[e.jsx("span",{className:"beforeHeading",children:"START PROTECTING"}),e.jsx("h2",{children:"Find a Block Dispenser Near You"}),e.jsx("p",{children:"Ready to experience the future of sun protection? Find the nearest Block dispenser or bring this convenient service to your location."}),e.jsxs("div",{className:"cta-buttons",children:[e.jsx("button",{className:"button button-primary",onClick:()=>window.location.href="/partners",children:"Become a Partner"}),e.jsx(j,{})]})]})})}),e.jsx(v,{})]})};export{p 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.