index.html 48 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <link rel="icon" type="image/x-icon" href="favicon.ico">
  7. <title>PC Optimum</title>
  8. <link
  9. rel="stylesheet"
  10. href="/static/css/0.5ba82fe89f0e77677f25.css"
  11. />
  12. <link
  13. rel="stylesheet"
  14. href="static/css/7.bb52c21dfe2d358b1117.css"
  15. />
  16. </head>
  17. <body>
  18. <nav aria-label="Menu" class="menu">
  19. <section class="menu-desktop" data-testid="menu-desktop-anonymous">
  20. <div class="menu-desktop__logo-container">
  21. <a
  22. title="PC Optimum - Homepage"
  23. rel="noopener noreferrer"
  24. data-testid="home-link"
  25. class="link menu-desktop__logo"
  26. href="/"
  27. ><svg aria-hidden="true" focusable="false" class="sprite">
  28. <use
  29. data-testid="logo-pc-optimum-en"
  30. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-logo-pc-optimum-en"
  31. ></use>
  32. </svg>
  33. </a>
  34. </div>
  35. <ul class="menu-desktop__list" data-testid="menu-desktop-list">
  36. <li>
  37. <a
  38. class="link menu-desktop__list-item"
  39. rel="noopener noreferrer"
  40. href="/flyers"
  41. ><span>Flyers</span>
  42. </a>
  43. </li>
  44. <li>
  45. <a
  46. class="link menu-desktop__list-item"
  47. rel="noopener noreferrer"
  48. href="/stores/locator"
  49. ><span>Stores</span></a
  50. >
  51. </li>
  52. </ul>
  53. <ul
  54. class="menu-desktop__list menu-desktop__list--anonymous"
  55. data-testid="menu-desktop-list"
  56. >
  57. <li>
  58. <a
  59. rel="noopener noreferrer"
  60. class="link menu-desktop__list-item"
  61. href="/login.html"
  62. ><span>Sign in</span></a
  63. >
  64. </li>
  65. <!-- <li>
  66. <a
  67. rel="noopener noreferrer"
  68. class="link menu-desktop__account-list-item menu-desktop__account-list-item--anonymous"
  69. href="/register"
  70. ><span>Register</span></a
  71. >
  72. </li> -->
  73. </ul>
  74. </section>
  75. <div>
  76. <div class="menu-mobile" data-testid="menu-mobile">
  77. <button
  78. type="button"
  79. class="button button--inline button--theme-none menu-mobile__open"
  80. aria-label="Open Menu"
  81. onclick="openMenu()"
  82. >
  83. <svg
  84. width="24px"
  85. height="24px"
  86. aria-hidden="true"
  87. focusable="false"
  88. class="sprite"
  89. >
  90. <use
  91. data-testid="menu"
  92. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-menu"
  93. ></use>
  94. </svg>
  95. </button>
  96. <div class="menu-mobile__logo-wrapper">
  97. <a
  98. title="PC Optimum - Homepage"
  99. rel="noopener noreferrer"
  100. data-testid="menu-mobile-header-logo"
  101. class="link menu-mobile__logo"
  102. href="/"
  103. ><svg aria-hidden="true" focusable="false" class="sprite">
  104. <use
  105. data-testid="logo-pc-optimum-en"
  106. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-logo-pc-optimum-en"
  107. ></use>
  108. </svg>
  109. </a>
  110. </div>
  111. </div>
  112. <div class="menu-panel menu-panel--closed menu-panel--anonymous">
  113. <div
  114. class="menu-panel__mask"
  115. aria-hidden="true"
  116. onclick="closeMenu()"
  117. ></div>
  118. <div class="menu-panel__inner" data-testid="menu-panel">
  119. <div class="menu-panel__header" data-testid="menu-panel-header">
  120. <a
  121. aria-label="PC Optimum - Homepage"
  122. rel="noopener noreferrer"
  123. tabindex="-1"
  124. class="link menu-panel__logo"
  125. href="/"
  126. ><svg aria-hidden="true" focusable="false" class="sprite">
  127. <use
  128. data-testid="logo-pc-optimum-en"
  129. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-logo-pc-optimum-en"
  130. ></use>
  131. </svg> </a
  132. ><button
  133. type="button"
  134. class="button button--inline button--theme-none menu-panel__close"
  135. aria-label="Close Menu"
  136. onclick="closeMenu()"
  137. >
  138. <svg
  139. width="24px"
  140. height="24px"
  141. aria-hidden="true"
  142. focusable="false"
  143. class="sprite"
  144. >
  145. <use
  146. data-testid="close"
  147. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-close"
  148. ></use>
  149. </svg>
  150. </button>
  151. </div>
  152. <div
  153. class="menu-panel__main-content-wrapper"
  154. data-testid="anonymous-menu"
  155. >
  156. <ul role="menu" class="menu-panel__menu-buttons">
  157. <li>
  158. <a
  159. title="Sign in"
  160. rel="noopener noreferrer"
  161. class="link link--theme-button-transparent menu-panel__login"
  162. href="/login.html"
  163. ><span>Sign in</span></a
  164. >
  165. </li>
  166. <!-- <li>
  167. <a
  168. title="Register"
  169. rel="noopener noreferrer"
  170. class="link link--theme-button-red menu-panel__register"
  171. href="/register"
  172. ><span>Register</span></a
  173. >
  174. </li> -->
  175. </ul>
  176. <ul
  177. class="menu-panel__link-group"
  178. data-testid="menu-panel-link-group"
  179. >
  180. <li class="menu-panel__main-link-wrapper">
  181. <a
  182. rel="noopener noreferrer"
  183. id="mobile-menu-flyers"
  184. class="link menu-panel__main-link"
  185. href="/flyers"
  186. ><svg
  187. width="24px"
  188. height="24px"
  189. aria-hidden="true"
  190. focusable="false"
  191. class="sprite"
  192. >
  193. <use
  194. data-testid="flyer"
  195. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-flyer"
  196. ></use>
  197. </svg>
  198. <span>Flyers</span></a
  199. >
  200. </li>
  201. <li class="menu-panel__main-link-wrapper">
  202. <a
  203. rel="noopener noreferrer"
  204. id="mobile-menu-stores"
  205. class="link menu-panel__main-link"
  206. href="/stores/locator"
  207. ><svg
  208. width="24px"
  209. height="24px"
  210. aria-hidden="true"
  211. focusable="false"
  212. class="sprite"
  213. >
  214. <use
  215. data-testid="location"
  216. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-location"
  217. ></use>
  218. </svg>
  219. <span>Stores</span></a
  220. >
  221. </li>
  222. </ul>
  223. <h3 class="menu-panel__section-title">
  224. <span>Help and Support</span>
  225. </h3>
  226. <ul
  227. class="menu-panel__link-group"
  228. data-testid="menu-panel-link-group"
  229. >
  230. <li
  231. class="menu-panel__main-link-wrapper menu-panel__main-link-wrapper--faq-link"
  232. >
  233. <a
  234. target="_blank"
  235. rel="noreferrer noopener"
  236. class="new-window-link menu-panel__main-link"
  237. href="https://loblaw.force.com/PCoptimumsupport/s/?language=en_US"
  238. ><svg
  239. width="24px"
  240. height="24px"
  241. aria-hidden="true"
  242. focusable="false"
  243. class="sprite"
  244. >
  245. <use
  246. data-testid="settings"
  247. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-settings"
  248. ></use>
  249. </svg>
  250. <span>FAQ</span></a
  251. >
  252. </li>
  253. <li class="menu-panel__main-link-wrapper">
  254. <button
  255. type="button"
  256. class="button button--inline button--theme-link menu-panel__main-link"
  257. >
  258. <svg
  259. width="24px"
  260. height="24px"
  261. aria-hidden="true"
  262. focusable="false"
  263. class="sprite"
  264. >
  265. <use
  266. data-testid="mobile-nav-ada-chatbot-bubble"
  267. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-mobile-nav-ada-chatbot-bubble"
  268. ></use>
  269. </svg>
  270. <span>Chat with virtual assistant</span>
  271. </button>
  272. </li>
  273. </ul>
  274. <div class="menu-panel__secondary-content">
  275. <div class="locale-toggle">
  276. <button
  277. lang="fr-CA"
  278. type="button"
  279. class="button button--inline button--theme-none locale-toggle__link locale-toggle__link--clickable"
  280. >
  281. <span aria-hidden="true">FR</span
  282. ><span class="visually-hidden">Français</span></button
  283. ><span class="locale-toggle__bullet">•</span
  284. ><span class="locale-toggle__link">EN</span>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. </nav>
  292. <div
  293. id="end-navigation"
  294. class="page-container__contents a11y-anchor"
  295. tabindex="-1"
  296. >
  297. <div class="page-container__sticky-container">
  298. <div class="homepage homepage--generic">
  299. <section class="homepage-hero default-hero">
  300. <div class="container">
  301. <header class="homepage-hero__inner">
  302. <h1
  303. class="homepage-hero__title homepage-hero__title--mobile default-hero"
  304. >
  305. <span style="font-size: 2rem">Your exclusive offers</span
  306. ><br /><span
  307. style="
  308. font-size: 0.9375rem;
  309. color: #191919;
  310. "
  311. >Good deals come and go. Get them while they last!</span
  312. >
  313. </h1>
  314. <div class="homepage-hero__text-section">
  315. <h1
  316. class="homepage-hero__title homepage-hero__title--desktop default-hero"
  317. >
  318. <span>Your exclusive offers</span><br /><span
  319. style="
  320. font-size: 1.5625rem;
  321. color: #191919;
  322. "
  323. >Good deals come and go. Get them while they last!</span
  324. >
  325. </h1>
  326. <p?
  327. class="homepage-hero__subtitle default-hero"
  328. >
  329. <span>
  330. <span style="font-weight: bold; font-size: 1.3rem"
  331. >50000 Points = 50 CAD</span
  332. >
  333. <div
  334. style="
  335. padding: 30px 0 20px;
  336. "
  337. >when you load your offers and scan your app onyour next
  338. purchase by the end date</div
  339. >
  340. </span>
  341. </p>
  342. <a
  343. title="Get Started"
  344. aria-label="Go to the registration page"
  345. rel="noopener noreferrer"
  346. class="link link--theme-button homepage-hero__login-link default-hero"
  347. href="/login.html"
  348. style="text-transform: uppercase;font-weight: bold;"
  349. ><span>sign in to deposit</span></a
  350. >
  351. </div>
  352. </header>
  353. </div>
  354. </section>
  355. <section class="homepage-legacy" id="legacy">
  356. <div class="container">
  357. <div class="homepage-legacy__inner">
  358. <h1 class="homepage-legacy__title">
  359. <span>Shop. Earn points. Repeat.</span>
  360. </h1>
  361. <div class="homepage-legacy__item-group">
  362. <div class="homepage-legacy__item">
  363. <svg
  364. width="52px"
  365. height="52px"
  366. aria-hidden="true"
  367. focusable="false"
  368. class="sprite"
  369. >
  370. <use
  371. data-testid="grocery-ie"
  372. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-grocery-ie-red"
  373. ></use>
  374. </svg>
  375. <p>
  376. <span
  377. >Earn points on the food and products that you buy
  378. most.</span
  379. >
  380. </p>
  381. </div>
  382. <div class="homepage-legacy__item">
  383. <svg
  384. width="52px"
  385. height="52px"
  386. aria-hidden="true"
  387. focusable="false"
  388. class="sprite"
  389. >
  390. <use
  391. data-testid="smile"
  392. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-smile-red"
  393. ></use>
  394. </svg>
  395. <p>
  396. <span
  397. >Earn 15 points on almost every dollar you spend at
  398. <span
  399. >Shoppers Drug Mart<sup><span>®</span></sup></span
  400. >
  401. and
  402. <span
  403. >Pharmaprix<sup><span>®</span></sup></span
  404. >.</span
  405. >
  406. </p>
  407. </div>
  408. <div class="homepage-legacy__item">
  409. <svg
  410. width="52px"
  411. height="52px"
  412. aria-hidden="true"
  413. focusable="false"
  414. class="sprite"
  415. >
  416. <use
  417. data-testid="pump-station"
  418. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-pump-station-red"
  419. ></use>
  420. </svg>
  421. <p>
  422. <span
  423. >Earn <span>PC Optimum™</span> points when you purchase
  424. fuel at more than 2000 <span>Esso™</span> and
  425. <span>Mobil™</span> stations across Canada.
  426. <a
  427. title="See details here"
  428. aria-label="See more details about earning points at Esso and Mobil stations"
  429. rel="noopener noreferrer"
  430. class="link homepage-legacy__see-details-link"
  431. href="/essomobil"
  432. ><span>See details here</span></a
  433. >.</span
  434. >
  435. </p>
  436. </div>
  437. <div class="homepage-legacy__item">
  438. <svg
  439. width="52px"
  440. height="52px"
  441. aria-hidden="true"
  442. focusable="false"
  443. class="sprite"
  444. >
  445. <use
  446. data-testid="store"
  447. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-store-pink"
  448. ></use>
  449. </svg>
  450. <p>
  451. <span
  452. >Earn points in-store, online, at points events and
  453. through personalized offers with your online
  454. account.</span
  455. >
  456. </p>
  457. </div>
  458. <div class="homepage-legacy__item">
  459. <svg
  460. width="52px"
  461. height="52px"
  462. aria-hidden="true"
  463. focusable="false"
  464. class="sprite"
  465. >
  466. <use
  467. data-testid="pcf-card"
  468. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-pcf-card-red"
  469. ></use>
  470. </svg>
  471. <p>
  472. <span
  473. >Earn points even faster with
  474. <span
  475. >PC Financial<sup><span>®</span></sup></span
  476. >. Learn how at
  477. <a
  478. target="_blank"
  479. rel="noreferrer noopener"
  480. class="new-window-link homepage-legacy__pcfinacial-link"
  481. href="https://www.pcfinancial.ca/en"
  482. aria-label="Learn how to earn points faster at pcfinancial.ca "
  483. ><span>pcfinancial.ca</span></a
  484. >.</span
  485. >
  486. </p>
  487. </div>
  488. <div class="homepage-legacy__item">
  489. <svg
  490. width="52px"
  491. height="52px"
  492. aria-hidden="true"
  493. focusable="false"
  494. class="sprite"
  495. >
  496. <use
  497. data-testid="donate-points"
  498. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-donate-points-red"
  499. ></use>
  500. </svg>
  501. <p>
  502. <span
  503. >Every 10,000 points is like $10 worth of free stuff.
  504. Redeem your <span>PC Optimum™</span> points at special
  505. Spend Your Points events to get even more value.</span
  506. >
  507. </p>
  508. </div>
  509. </div>
  510. </div>
  511. </div>
  512. </section>
  513. <section class="homepage-pcf">
  514. <div class="container">
  515. <div class="homepage-pcf__inner">
  516. <div class="homepage-pcf__header">
  517. <h1 class="homepage-pcf__title">
  518. <span>Get up to 10% back in points.<sup>†</sup></span>
  519. </h1>
  520. <p class="homepage-pcf__subtitle">
  521. <span
  522. >By shopping,
  523. <span
  524. >PC<sup><span>®</span></sup></span
  525. >
  526. Mastercard<sup><span>®</span></sup> cardholders can get up
  527. to 10% back in points in combination with the
  528. <span>PC Optimum™</span> program!</span
  529. >
  530. </p>
  531. <div class="homepage-pcf__link">
  532. <a
  533. target="_blank"
  534. rel="noreferrer noopener"
  535. class="new-window-link link--theme-button homepage-pcf__cta"
  536. href="https://www.pcfinancial.ca/en/credit-cards/?utm_source=pco-homepage&amp;utm_medium=referral&amp;utm_campaign=pco-sdp-2022&amp;utm_content=en"
  537. ><span>Learn More</span></a
  538. >
  539. </div>
  540. </div>
  541. <div class="homepage-pcf__image-container">
  542. <img
  543. src="https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/homepage/homepage-app-pcmc-en-sm.png"
  544. alt="PC Optimum app in phone and PC World Elite Mastercard"
  545. />
  546. </div>
  547. </div>
  548. </div>
  549. </section>
  550. <div>
  551. <section class="homepage-app" id="app">
  552. <div class="container">
  553. <div class="homepage-app__inner">
  554. <header class="homepage-app__header">
  555. <h1 class="homepage-app__title">
  556. <span>Download the <span>PC Optimum™</span> app</span>
  557. </h1>
  558. <p class="homepage-app__subtitle">
  559. <span
  560. >On the go? Use the mobile app to keep your
  561. <span>PC Optimum™</span> offers in the palm of your
  562. hand. Literally.</span
  563. >
  564. </p>
  565. <div class="homepage-app__badges">
  566. <a
  567. target="_blank"
  568. rel="noreferrer noopener"
  569. class="new-window-link homepage-app__badge-app"
  570. href="https://itunes.apple.com/app/id634040057"
  571. aria-label="Download on the App Store"
  572. ><svg
  573. aria-hidden="true"
  574. focusable="false"
  575. class="sprite homepage-app__badge-app-svg"
  576. >
  577. <use
  578. data-testid="app-ios-en"
  579. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-app-ios-en"
  580. ></use></svg></a
  581. ><a
  582. target="_blank"
  583. rel="noreferrer noopener"
  584. class="new-window-link homepage-app__badge-app"
  585. href="https://play.google.com/store/apps/details?id=com.sap.mdc.loblaw.nativ&amp;hl=en"
  586. aria-label="Get it on Google Play"
  587. ><img
  588. src="static/images/app-android-en.svg"
  589. alt="app-android-en"
  590. class="homepage-app__badge-app"
  591. /></a>
  592. </div>
  593. </header>
  594. <img
  595. srcset="
  596. /static/images/homepage/iphone-sm-en.png 250w,
  597. /static/images/homepage/iphone-md-en.png 370w,
  598. /static/images/homepage/iphone-lrg-en.png 500w,
  599. /static/images/homepage/iphone-xl-en.png 719w
  600. "
  601. src="/static/images/homepage/iphone-md-en.png"
  602. sizes="(min-width: 64em) 370px, (min-width: 48em) 250px, (min-width: 34.375em) 40vw, 60vw"
  603. class="homepage-app__phone-graphic"
  604. alt=""
  605. />
  606. </div>
  607. </div>
  608. </section>
  609. </div>
  610. <section class="homepage-offers" id="offers">
  611. <div class="homepage-offers-extended-background">
  612. <div class="homepage-offers-extended-background__inner">
  613. <svg
  614. aria-hidden="true"
  615. focusable="false"
  616. class="sprite homepage-offers-extended-background__ring-right"
  617. >
  618. <use
  619. data-testid="circle-lightest"
  620. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  621. ></use>
  622. </svg>
  623. <svg
  624. aria-hidden="true"
  625. focusable="false"
  626. class="sprite homepage-offers-extended-background__ring-left"
  627. >
  628. <use
  629. data-testid="circle-lightest"
  630. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  631. ></use>
  632. </svg>
  633. </div>
  634. </div>
  635. <div class="homepage-offers__inner">
  636. <header class="homepage-offers__header">
  637. <div class="homepage-offers-header-background">
  638. <svg
  639. aria-hidden="true"
  640. focusable="false"
  641. class="sprite homepage-offers-header-background__ring"
  642. >
  643. <use
  644. data-testid="circle-lightest"
  645. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  646. ></use>
  647. </svg>
  648. <svg
  649. aria-hidden="true"
  650. focusable="false"
  651. class="sprite homepage-offers-header-background__dot"
  652. >
  653. <use
  654. data-testid="dot-lighter"
  655. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-dot-lighter"
  656. ></use>
  657. </svg>
  658. </div>
  659. <div class="homepage-offers__header-inner">
  660. <h1 class="homepage-offers__title">
  661. <span>Rewarding<br />your everyday</span>
  662. </h1>
  663. <p class="homepage-offers__subtitle">
  664. <span
  665. >The <span>PC Optimum™</span> program tailors your rewards
  666. to match the food and products that you buy most.</span
  667. >
  668. </p>
  669. </div>
  670. </header>
  671. <ul class="homepage-offers-grid">
  672. <li class="homepage-offers-grid__square">
  673. <div class="homepage-offers-grid__square-hack">
  674. <div
  675. class="homepage-offers-grid__square-hack-padding"
  676. ></div>
  677. </div>
  678. <div class="homepage-offers-grid__square-text">
  679. <span>Earn points on the things you want</span>
  680. </div>
  681. </li>
  682. <li class="homepage-offers-grid__square">
  683. <div class="homepage-offers-grid__square-hack">
  684. <div
  685. class="homepage-offers-grid__square-hack-padding"
  686. ></div>
  687. </div>
  688. <div class="homepage-offers-grid__square-text">
  689. <span>Get more value on your essentials</span>
  690. </div>
  691. </li>
  692. <li class="homepage-offers-grid__square">
  693. <div class="homepage-offers-grid__square-hack">
  694. <div
  695. class="homepage-offers-grid__square-hack-padding"
  696. ></div>
  697. </div>
  698. <div class="homepage-offers-grid__square-text">
  699. <span>Earn rewards on the road</span>
  700. </div>
  701. </li>
  702. <li class="homepage-offers-grid__square">
  703. <div class="homepage-offers-grid__square-hack">
  704. <div
  705. class="homepage-offers-grid__square-hack-padding"
  706. ></div>
  707. </div>
  708. <div class="homepage-offers-grid__square-text">
  709. <span>Treat yourself to something special</span>
  710. </div>
  711. </li>
  712. </ul>
  713. </div>
  714. </section>
  715. <section class="homepage-stores" id="storelocator">
  716. <div class="homepage-stores__inner">
  717. <div class="container">
  718. <header class="homepage-stores__header">
  719. <h1 class="homepage-stores__title">
  720. <span
  721. >Earn <span>PC Optimum™</span> points at more than 4,500
  722. places!</span
  723. >
  724. </h1>
  725. </header>
  726. <div class="homepage-stores__search">
  727. <div class="homepage-stores__input-container">
  728. <svg
  729. width="24px"
  730. height="24px"
  731. aria-hidden="true"
  732. focusable="false"
  733. class="sprite"
  734. >
  735. <use
  736. data-testid="search"
  737. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-search"
  738. ></use>
  739. </svg>
  740. <input
  741. type="text"
  742. class="homepage-stores__input"
  743. id="homepage-stores__input"
  744. placeholder="Enter a location"
  745. /><label
  746. for="homepage-stores__input"
  747. class="visually-hidden"
  748. ><span>Enter a location</span><span>:</span></label
  749. >
  750. </div>
  751. <button
  752. type="submit"
  753. class="button button--inline button--theme-base homepage-stores__search-button"
  754. aria-label="Search for stores in this area"
  755. >
  756. <span>Search</span>
  757. </button>
  758. </div>
  759. </div>
  760. </div>
  761. </section>
  762. <section class="homepage-faq" id="faq">
  763. <div class="container">
  764. <div class="homepage-faq__inner">
  765. <header class="homepage-faq__header">
  766. <h1 class="homepage-faq__title">
  767. <span>Have questions? Find answers.</span>
  768. </h1>
  769. </header>
  770. <a
  771. target="_blank"
  772. rel="noreferrer noopener"
  773. class="new-window-link link link--theme-button homepage-faq__faq-link-button"
  774. href="https://loblaw.force.com/PCoptimumsupport/s/?language=en_US"
  775. ><span>Browse our FAQ</span
  776. ><svg
  777. width="24px"
  778. height="24px"
  779. aria-hidden="true"
  780. focusable="false"
  781. class="sprite new-window-link__icon"
  782. >
  783. <use
  784. data-testid="new-window-link"
  785. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-new-window-link"
  786. ></use>
  787. </svg>
  788. </a>
  789. </div>
  790. </div>
  791. </section>
  792. <section class="homepage-join" id="join">
  793. <div
  794. role="presentation"
  795. aria-hidden="true"
  796. class="homepage-join-background"
  797. >
  798. <svg
  799. aria-hidden="true"
  800. focusable="false"
  801. class="sprite homepage-join-background__circle-left"
  802. >
  803. <use
  804. data-testid="circle-lightest"
  805. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  806. ></use>
  807. </svg>
  808. <svg
  809. aria-hidden="true"
  810. focusable="false"
  811. class="sprite homepage-join-background__circle-right"
  812. >
  813. <use
  814. data-testid="circle-lightest"
  815. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  816. ></use>
  817. </svg>
  818. <svg
  819. aria-hidden="true"
  820. focusable="false"
  821. class="sprite homepage-join-background__dot"
  822. >
  823. <use
  824. data-testid="dot-lighter"
  825. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-dot-lighter"
  826. ></use>
  827. </svg>
  828. </div>
  829. <div class="container">
  830. <div class="homepage-join__inner">
  831. <header class="homepage-join__header">
  832. <h1 class="homepage-join__title">
  833. <span>Don’t miss out on rewards.</span>
  834. </h1>
  835. </header>
  836. <div class="homepage-join__link-container">
  837. <!-- <a
  838. aria-label="Go to the registration page"
  839. rel="noopener noreferrer"
  840. class="link link--theme-button homepage-join__link"
  841. href="/register?sid=home|missrewards|getstarted2"
  842. ><span>Get Started</span></a
  843. > -->
  844. <a
  845. aria-label="Go to the registration page"
  846. rel="noopener noreferrer"
  847. class="link link--theme-button homepage-join__link"
  848. ><span>Get Started</span></a
  849. >
  850. </div>
  851. </div>
  852. </div>
  853. </section>
  854. <section class="homepage-footnote" id="footnote">
  855. <div class="homepage-footnote__inner">
  856. <p>
  857. <span
  858. ><span>Esso™</span> is a trademark of Imperial Oil Limited.
  859. Imperial Oil, licensee. <span>Mobil™</span> is a trademark of
  860. Exxon Mobil Corporation or one of its subsidiaries. Imperial
  861. Oil, licensee. Mastercard is a trademark of Mastercard
  862. International Incorporated, used under license. Apple and the
  863. Apple logo are trademarks of Apple Inc., registered in the
  864. U.S. and other countries. App Store is a service mark of Apple
  865. Inc., registered in the U.S. and other countries. Google Play
  866. and the Google Play logo are trademarks of Google LLC.
  867. <span>PC Optimum™</span> used under license. ™/® Are
  868. trademarks of Loblaws Inc., used under license.</span
  869. >
  870. </p>
  871. <p>
  872. <span
  873. ><sup>†</sup> Annual 10% back in points may be achieved in
  874. numerous ways; including when you spend on average $7,000
  875. using your
  876. <span
  877. >PC Financial<sup><span>®</span></sup></span
  878. >
  879. Mastercard<sup><span>®</span></sup> in combination with the
  880. <span>PC Optimum™</span> loyalty program, with approximately:
  881. (i) 65% of that spend allocated to purchases in our stores
  882. that maximize personalized offers in our grocery stores from
  883. the <span>PC Optimum™</span> program; (ii) 15% at
  884. <span
  885. >Shoppers Drug Mart<sup><span>®</span></sup></span
  886. >/<span
  887. >Pharmaprix<sup><span>®</span></sup></span
  888. >
  889. on 20x Points Days and (iii) 20% everywhere else. Our stores
  890. means affiliated Loblaw banner grocery stores and
  891. <span
  892. >Shoppers Drug Mart<sup><span>®</span></sup></span
  893. >/<span
  894. >Pharmaprix<sup><span>®</span></sup></span
  895. >. Visit
  896. <a
  897. target="_blank"
  898. rel="noreferrer noopener"
  899. class="new-window-link homepage-footnote__link"
  900. href="https://www.pcoptimum.ca"
  901. ><span>pcoptimum.ca</span></a
  902. >
  903. for details on participating stores where the
  904. <span>PC Optimum™</span> program is offered. Value shown is
  905. for illustrative purposes only; results may vary based on
  906. individual purchase behaviour.</span
  907. >
  908. </p>
  909. <p>
  910. <span
  911. ><sup><span>®</span></sup
  912. >/<span>™</span> Trademarks of Loblaws Inc., used under
  913. license.</span
  914. >
  915. </p>
  916. <p>
  917. <span
  918. >Mastercard<sup><span>®</span></sup> is a registered
  919. trademark, and the circles design is a trademark of Mastercard
  920. International Incorporated. President's Choice Bank is a
  921. licensee of the marks.</span
  922. >
  923. </p>
  924. <p>
  925. <span
  926. ><span
  927. >Shoppers Drug Mart<sup><span>®</span></sup></span
  928. >,
  929. <span
  930. >Pharmaprix<sup><span>®</span></sup></span
  931. >
  932. and logos are trademarks of 911979 Alberta Ltd., used under
  933. license.</span
  934. >
  935. </p>
  936. <p>
  937. <span
  938. >President’s Choice Financial<sup><span>®</span></sup>
  939. Mastercard<sup><span>®</span></sup> is provided by President’s
  940. Choice Bank.</span
  941. >
  942. </p>
  943. <p>
  944. <span
  945. >The <span>PC Optimum™</span> program is provided by
  946. President's Choice Services Inc.</span
  947. >
  948. </p>
  949. </div>
  950. </section>
  951. </div>
  952. </div>
  953. </div>
  954. <footer class="site-footer">
  955. <div class="site-footer__top">
  956. <!-- <div
  957. tabindex="0"
  958. aria-label="Loblaw Privacy Policy"
  959. aria-describedby="lds__privacy-policy"
  960. class="lds__privacy-policy lds__privacy-policy__positionBottom"
  961. >
  962. <div class="lds__privacy-policy__innerWrapper">
  963. <div id="lds__privacy-policy">
  964. <p>
  965. We use cookies and other technologies to enable core
  966. functionality on our website(s) and to provide you with a
  967. personalized experience. For more information on cookies and how
  968. to manage your settings, visit the
  969. <a
  970. href="https://www.loblaw.ca/en/privacy.html"
  971. target="_blank"
  972. class="lds__privacy-policy__link"
  973. >Loblaw Privacy Policy</a
  974. >.
  975. </p>
  976. </div>
  977. <button type="button" class="lds__privacy-policy__btnClose">
  978. close
  979. </button>
  980. </div>
  981. </div> -->
  982. <div class="site-footer__links site-footer__links-social">
  983. <div class="site-footer__logo">
  984. <svg aria-hidden="true" focusable="false" class="sprite">
  985. <use
  986. data-testid="logo-pc-optimum-en"
  987. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-logo-pc-optimum-en"
  988. ></use>
  989. </svg>
  990. </div>
  991. <p class="site-footer__tagline">
  992. <span>Shop. Earn points. Repeat.</span>
  993. </p>
  994. <ul class="site-footer__social-media">
  995. <li class="site-footer__social-media-link">
  996. <div class="site-footer__social-media-link-icon">
  997. <a
  998. target="_blank"
  999. rel="noreferrer noopener"
  1000. class="new-window-link"
  1001. href="https://www.facebook.com/pcoptimum"
  1002. aria-label="Facebook - PC Optimum"
  1003. ><svg
  1004. width="14px"
  1005. height="13px"
  1006. aria-hidden="true"
  1007. focusable="false"
  1008. class="sprite"
  1009. >
  1010. <use
  1011. data-testid="facebook"
  1012. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-facebook"
  1013. ></use>
  1014. </svg>
  1015. </a>
  1016. </div>
  1017. </li>
  1018. <li class="site-footer__social-media-link">
  1019. <div class="site-footer__social-media-link-icon">
  1020. <a
  1021. target="_blank"
  1022. rel="noreferrer noopener"
  1023. class="new-window-link"
  1024. href="https://www.youtube.com/pcoptimum"
  1025. aria-label="YouTube - PC Optimum"
  1026. ><svg
  1027. width="14px"
  1028. height="10px"
  1029. aria-hidden="true"
  1030. focusable="false"
  1031. class="sprite"
  1032. >
  1033. <use
  1034. data-testid="youtube"
  1035. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-youtube"
  1036. ></use>
  1037. </svg>
  1038. </a>
  1039. </div>
  1040. </li>
  1041. <li class="site-footer__social-media-link">
  1042. <div class="site-footer__social-media-link-icon">
  1043. <a
  1044. target="_blank"
  1045. rel="noreferrer noopener"
  1046. class="new-window-link"
  1047. href="https://www.instagram.com/pcoptimum/"
  1048. aria-label="Instagram - PC Optimum"
  1049. ><svg
  1050. width="14px"
  1051. height="10px"
  1052. aria-hidden="true"
  1053. focusable="false"
  1054. class="sprite"
  1055. >
  1056. <use
  1057. data-testid="instagram"
  1058. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-instagram"
  1059. ></use>
  1060. </svg>
  1061. </a>
  1062. </div>
  1063. </li>
  1064. </ul>
  1065. </div>
  1066. <div class="site-footer__links site-footer__links-help">
  1067. <p class="site-footer__links-title">
  1068. <span>We’re here to help</span>
  1069. </p>
  1070. <ul class="site-footer__links-list">
  1071. <li class="site-footer__links-list-item">
  1072. <a
  1073. target="_blank"
  1074. rel="noreferrer noopener"
  1075. class="new-window-link site-footer__links-link"
  1076. href="https://loblaw.force.com/PCoptimumsupport/s/?language=en_US"
  1077. ><span>FAQ</span></a
  1078. >
  1079. </li>
  1080. <li class="site-footer__links-list-item">
  1081. <button
  1082. type="button"
  1083. class="button button--inline button--theme-link site-footer__ada-chatbot"
  1084. >
  1085. <span>Chat with virtual assistant</span>
  1086. </button>
  1087. </li>
  1088. </ul>
  1089. </div>
  1090. <div class="site-footer__links site--footer__links-legal">
  1091. <p class="site-footer__links-title"><span>Legal</span></p>
  1092. <ul class="site-footer__links-list">
  1093. <li class="site-footer__links-list-item">
  1094. <!-- <a
  1095. rel="noopener noreferrer"
  1096. class="link site-footer__links-link site-footer__corporate-links-link"
  1097. href="/company-policy/terms-and-conditions"
  1098. ><span>Terms and Conditions</span></a
  1099. > -->
  1100. <a
  1101. rel="noopener noreferrer"
  1102. class="link site-footer__links-link site-footer__corporate-links-link"
  1103. ><span>Terms and Conditions</span></a
  1104. >
  1105. </li>
  1106. <li class="site-footer__links-list-item">
  1107. <!-- <a
  1108. target="_blank"
  1109. rel="noreferrer noopener"
  1110. class="new-window-link site-footer__links-link"
  1111. href="https://www.loblaw.ca/en/privacy.html"
  1112. ><span>Privacy Policy</span></a
  1113. > -->
  1114. <a
  1115. target="_blank"
  1116. rel="noreferrer noopener"
  1117. class="new-window-link site-footer__links-link"
  1118. ><span>Privacy Policy</span></a
  1119. >
  1120. </li>
  1121. <li class="site-footer__links-list-item">
  1122. <!-- <a
  1123. target="_blank"
  1124. rel="noreferrer noopener"
  1125. class="new-window-link site-footer__links-link"
  1126. href="http://www.loblaw.ca/en/accessibility.html"
  1127. ><span>Accessibility</span></a
  1128. > -->
  1129. <a
  1130. target="_blank"
  1131. rel="noreferrer noopener"
  1132. class="new-window-link site-footer__links-link"
  1133. ><span>Accessibility</span></a
  1134. >
  1135. </li>
  1136. <li class="site-footer__links-list-item">
  1137. <!-- <a
  1138. rel="noopener noreferrer"
  1139. class="link site-footer__links-link site-footer__corporate-links-link"
  1140. href="/company-policy/site-terms-of-use"
  1141. ><span>Site Terms of Use</span></a
  1142. > -->
  1143. <a
  1144. rel="noopener noreferrer"
  1145. class="link site-footer__links-link site-footer__corporate-links-link"
  1146. ><span>Site Terms of Use</span></a
  1147. >
  1148. </li>
  1149. </ul>
  1150. </div>
  1151. <div class="site-footer__app-links site-footer__links">
  1152. <p class="site-footer__links-title"><span>Download the app</span></p>
  1153. <p class="site-footer__app-links-paragraph">
  1154. <span>Offers anywhere, anytime, everyday.</span>
  1155. </p>
  1156. <p class="site-footer__app-links-paragraph">
  1157. <span>Available for iOS and Android.</span>
  1158. </p>
  1159. <div class="site-footer__badges">
  1160. <a
  1161. target="_blank"
  1162. rel="noreferrer noopener"
  1163. class="new-window-link site-footer__badge-app"
  1164. href="https://itunes.apple.com/app/id634040057"
  1165. aria-label="Download on the App Store"
  1166. ><svg
  1167. aria-hidden="true"
  1168. focusable="false"
  1169. class="sprite site-footer__badge-app-svg"
  1170. >
  1171. <use
  1172. data-testid="app-ios-en"
  1173. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-app-ios-en"
  1174. ></use></svg></a
  1175. ><a
  1176. target="_blank"
  1177. rel="noreferrer noopener"
  1178. class="new-window-link site-footer__badge-app"
  1179. href="https://play.google.com/store/apps/details?id=com.sap.mdc.loblaw.nativ&amp;hl=en"
  1180. aria-label="Get it on Google Play"
  1181. ><img
  1182. src="/static/images/app-android-en.svg"
  1183. alt="app-android-en"
  1184. class="site-footer__badge-app-svg"
  1185. /></a>
  1186. </div>
  1187. </div>
  1188. </div>
  1189. <div class="site-footer__bottom">
  1190. <div class="site-footer__bottom-inner">
  1191. <div class="site-footer__copyright">
  1192. <span
  1193. >© 2024 Loblaws Inc. All Rights Reserved. ®/™ Trademarks of
  1194. Loblaws Inc.</span
  1195. >
  1196. </div>
  1197. <div class="locale-toggle">
  1198. <button
  1199. lang="fr-CA"
  1200. type="button"
  1201. class="button button--inline button--theme-none locale-toggle__link locale-toggle__link--clickable"
  1202. >
  1203. <span aria-hidden="true">FR</span
  1204. ><span class="visually-hidden">Français</span></button
  1205. ><span class="locale-toggle__bullet">•</span
  1206. ><span class="locale-toggle__link">EN</span>
  1207. </div>
  1208. </div>
  1209. </div>
  1210. </footer>
  1211. </body>
  1212. <script>
  1213. function openMenu() {
  1214. var pannel = document.getElementsByClassName("menu-panel")[0];
  1215. console.log(pannel.className);
  1216. pannel.className = pannel.className.replace(
  1217. /menu-panel--closed /,
  1218. "menu-panel--open "
  1219. );
  1220. }
  1221. function closeMenu() {
  1222. console.log("2635");
  1223. var pannel = document.getElementsByClassName("menu-panel")[0];
  1224. console.log(pannel.className);
  1225. pannel.className = pannel.className.replace(
  1226. /menu-panel--open /,
  1227. "menu-panel--closed "
  1228. );
  1229. }
  1230. </script>
  1231. </html>