index.html 49 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230
  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>Personalized offers?</span><br /><span
  306. >How rewarding is that?</span
  307. >
  308. </h1>
  309. <div class="homepage-hero__text-section">
  310. <h1
  311. class="homepage-hero__title homepage-hero__title--desktop default-hero"
  312. >
  313. <span>Personalized offers?</span><br /><span
  314. >How rewarding is that?</span
  315. >
  316. </h1>
  317. <p class="homepage-hero__subtitle default-hero">
  318. <span
  319. >Whether you’re shopping for your favourite foods, daily
  320. essentials or little indulgences,
  321. <span>PC Optimum™</span> tailors your rewards to match the
  322. things that you buy most.</span
  323. >
  324. </p>
  325. <a
  326. title="Get Started"
  327. aria-label="Go to the registration page"
  328. rel="noopener noreferrer"
  329. class="link link--theme-button homepage-hero__login-link default-hero"
  330. href="/login.html"
  331. ><span>Get Started</span></a
  332. >
  333. </div>
  334. <div class="homepage-hero__image-section">
  335. <div class="homepage-hero__graphic-container">
  336. <!-- <img
  337. srcset="
  338. https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/homepage/default-hero-510.jpg 510w,
  339. https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/homepage/default-hero-1020.jpg 1020w,
  340. https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/homepage/default-hero-1530.jpg 1530w
  341. "
  342. sizes="(min-width: 80em) 560px,
  343. (min-width: 64em) calc((100vw - 160px) / 2),
  344. (min-width: 48em) calc((100vw - 120px) / 2),
  345. calc(100vw - 80px)"
  346. src="https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/homepage/default-hero-510.jpg"
  347. alt=""
  348. /> -->
  349. </div>
  350. </div>
  351. </header>
  352. </div>
  353. </section>
  354. <section class="homepage-legacy" id="legacy">
  355. <div class="container">
  356. <div class="homepage-legacy__inner">
  357. <h1 class="homepage-legacy__title">
  358. <span>Shop. Earn points. Repeat.</span>
  359. </h1>
  360. <div class="homepage-legacy__item-group">
  361. <div class="homepage-legacy__item">
  362. <svg
  363. width="52px"
  364. height="52px"
  365. aria-hidden="true"
  366. focusable="false"
  367. class="sprite"
  368. >
  369. <use
  370. data-testid="grocery-ie"
  371. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-grocery-ie-red"
  372. ></use>
  373. </svg>
  374. <p>
  375. <span
  376. >Earn points on the food and products that you buy
  377. most.</span
  378. >
  379. </p>
  380. </div>
  381. <div class="homepage-legacy__item">
  382. <svg
  383. width="52px"
  384. height="52px"
  385. aria-hidden="true"
  386. focusable="false"
  387. class="sprite"
  388. >
  389. <use
  390. data-testid="smile"
  391. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-smile-red"
  392. ></use>
  393. </svg>
  394. <p>
  395. <span
  396. >Earn 15 points on almost every dollar you spend at
  397. <span
  398. >Shoppers Drug Mart<sup><span>®</span></sup></span
  399. >
  400. and
  401. <span
  402. >Pharmaprix<sup><span>®</span></sup></span
  403. >.</span
  404. >
  405. </p>
  406. </div>
  407. <div class="homepage-legacy__item">
  408. <svg
  409. width="52px"
  410. height="52px"
  411. aria-hidden="true"
  412. focusable="false"
  413. class="sprite"
  414. >
  415. <use
  416. data-testid="pump-station"
  417. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-pump-station-red"
  418. ></use>
  419. </svg>
  420. <p>
  421. <span
  422. >Earn <span>PC Optimum™</span> points when you purchase
  423. fuel at more than 2000 <span>Esso™</span> and
  424. <span>Mobil™</span> stations across Canada.
  425. <a
  426. title="See details here"
  427. aria-label="See more details about earning points at Esso and Mobil stations"
  428. rel="noopener noreferrer"
  429. class="link homepage-legacy__see-details-link"
  430. href="/essomobil"
  431. ><span>See details here</span></a
  432. >.</span
  433. >
  434. </p>
  435. </div>
  436. <div class="homepage-legacy__item">
  437. <svg
  438. width="52px"
  439. height="52px"
  440. aria-hidden="true"
  441. focusable="false"
  442. class="sprite"
  443. >
  444. <use
  445. data-testid="store"
  446. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-store-pink"
  447. ></use>
  448. </svg>
  449. <p>
  450. <span
  451. >Earn points in-store, online, at points events and
  452. through personalized offers with your online
  453. account.</span
  454. >
  455. </p>
  456. </div>
  457. <div class="homepage-legacy__item">
  458. <svg
  459. width="52px"
  460. height="52px"
  461. aria-hidden="true"
  462. focusable="false"
  463. class="sprite"
  464. >
  465. <use
  466. data-testid="pcf-card"
  467. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-pcf-card-red"
  468. ></use>
  469. </svg>
  470. <p>
  471. <span
  472. >Earn points even faster with
  473. <span
  474. >PC Financial<sup><span>®</span></sup></span
  475. >. Learn how at
  476. <a
  477. target="_blank"
  478. rel="noreferrer noopener"
  479. class="new-window-link homepage-legacy__pcfinacial-link"
  480. href="https://www.pcfinancial.ca/en"
  481. aria-label="Learn how to earn points faster at pcfinancial.ca "
  482. ><span>pcfinancial.ca</span></a
  483. >.</span
  484. >
  485. </p>
  486. </div>
  487. <div class="homepage-legacy__item">
  488. <svg
  489. width="52px"
  490. height="52px"
  491. aria-hidden="true"
  492. focusable="false"
  493. class="sprite"
  494. >
  495. <use
  496. data-testid="donate-points"
  497. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#graphics-donate-points-red"
  498. ></use>
  499. </svg>
  500. <p>
  501. <span
  502. >Every 10,000 points is like $10 worth of free stuff.
  503. Redeem your <span>PC Optimum™</span> points at special
  504. Spend Your Points events to get even more value.</span
  505. >
  506. </p>
  507. </div>
  508. </div>
  509. </div>
  510. </div>
  511. </section>
  512. <section class="homepage-pcf">
  513. <div class="container">
  514. <div class="homepage-pcf__inner">
  515. <div class="homepage-pcf__header">
  516. <h1 class="homepage-pcf__title">
  517. <span>Get up to 10% back in points.<sup>†</sup></span>
  518. </h1>
  519. <p class="homepage-pcf__subtitle">
  520. <span
  521. >By shopping,
  522. <span
  523. >PC<sup><span>®</span></sup></span
  524. >
  525. Mastercard<sup><span>®</span></sup> cardholders can get up
  526. to 10% back in points in combination with the
  527. <span>PC Optimum™</span> program!</span
  528. >
  529. </p>
  530. <div class="homepage-pcf__link">
  531. <a
  532. target="_blank"
  533. rel="noreferrer noopener"
  534. class="new-window-link link--theme-button homepage-pcf__cta"
  535. 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"
  536. ><span>Learn More</span></a
  537. >
  538. </div>
  539. </div>
  540. <div class="homepage-pcf__image-container">
  541. <img
  542. src="https://dis-prod.assetful.loblaw.ca/content/dam/loblaw-companies-limited/creative-assets/pc-optimum/homepage/homepage-app-pcmc-en-sm.png"
  543. alt="PC Optimum app in phone and PC World Elite Mastercard"
  544. />
  545. </div>
  546. </div>
  547. </div>
  548. </section>
  549. <div>
  550. <section class="homepage-app" id="app">
  551. <div class="container">
  552. <div class="homepage-app__inner">
  553. <header class="homepage-app__header">
  554. <h1 class="homepage-app__title">
  555. <span>Download the <span>PC Optimum™</span> app</span>
  556. </h1>
  557. <p class="homepage-app__subtitle">
  558. <span
  559. >On the go? Use the mobile app to keep your
  560. <span>PC Optimum™</span> offers in the palm of your
  561. hand. Literally.</span
  562. >
  563. </p>
  564. <div class="homepage-app__badges">
  565. <a
  566. target="_blank"
  567. rel="noreferrer noopener"
  568. class="new-window-link homepage-app__badge-app"
  569. href="https://itunes.apple.com/app/id634040057"
  570. aria-label="Download on the App Store"
  571. ><svg
  572. aria-hidden="true"
  573. focusable="false"
  574. class="sprite homepage-app__badge-app-svg"
  575. >
  576. <use
  577. data-testid="app-ios-en"
  578. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-app-ios-en"
  579. ></use></svg></a
  580. ><a
  581. target="_blank"
  582. rel="noreferrer noopener"
  583. class="new-window-link homepage-app__badge-app"
  584. href="https://play.google.com/store/apps/details?id=com.sap.mdc.loblaw.nativ&amp;hl=en"
  585. aria-label="Get it on Google Play"
  586. ><img
  587. src="static/images/app-android-en.svg"
  588. alt="app-android-en"
  589. class="homepage-app__badge-app"
  590. /></a>
  591. </div>
  592. </header>
  593. <img
  594. srcset="
  595. /static/images/homepage/iphone-sm-en.png 250w,
  596. /static/images/homepage/iphone-md-en.png 370w,
  597. /static/images/homepage/iphone-lrg-en.png 500w,
  598. /static/images/homepage/iphone-xl-en.png 719w
  599. "
  600. src="/static/images/homepage/iphone-md-en.png"
  601. sizes="(min-width: 64em) 370px, (min-width: 48em) 250px, (min-width: 34.375em) 40vw, 60vw"
  602. class="homepage-app__phone-graphic"
  603. alt=""
  604. />
  605. </div>
  606. </div>
  607. </section>
  608. </div>
  609. <section class="homepage-offers" id="offers">
  610. <div class="homepage-offers-extended-background">
  611. <div class="homepage-offers-extended-background__inner">
  612. <svg
  613. aria-hidden="true"
  614. focusable="false"
  615. class="sprite homepage-offers-extended-background__ring-right"
  616. >
  617. <use
  618. data-testid="circle-lightest"
  619. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  620. ></use>
  621. </svg>
  622. <svg
  623. aria-hidden="true"
  624. focusable="false"
  625. class="sprite homepage-offers-extended-background__ring-left"
  626. >
  627. <use
  628. data-testid="circle-lightest"
  629. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  630. ></use>
  631. </svg>
  632. </div>
  633. </div>
  634. <div class="homepage-offers__inner">
  635. <header class="homepage-offers__header">
  636. <div class="homepage-offers-header-background">
  637. <svg
  638. aria-hidden="true"
  639. focusable="false"
  640. class="sprite homepage-offers-header-background__ring"
  641. >
  642. <use
  643. data-testid="circle-lightest"
  644. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  645. ></use>
  646. </svg>
  647. <svg
  648. aria-hidden="true"
  649. focusable="false"
  650. class="sprite homepage-offers-header-background__dot"
  651. >
  652. <use
  653. data-testid="dot-lighter"
  654. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-dot-lighter"
  655. ></use>
  656. </svg>
  657. </div>
  658. <div class="homepage-offers__header-inner">
  659. <h1 class="homepage-offers__title">
  660. <span>Rewarding<br />your everyday</span>
  661. </h1>
  662. <p class="homepage-offers__subtitle">
  663. <span
  664. >The <span>PC Optimum™</span> program tailors your rewards
  665. to match the food and products that you buy most.</span
  666. >
  667. </p>
  668. </div>
  669. </header>
  670. <ul class="homepage-offers-grid">
  671. <li class="homepage-offers-grid__square">
  672. <div class="homepage-offers-grid__square-hack">
  673. <div
  674. class="homepage-offers-grid__square-hack-padding"
  675. ></div>
  676. </div>
  677. <div class="homepage-offers-grid__square-text">
  678. <span>Earn points on the things you want</span>
  679. </div>
  680. </li>
  681. <li class="homepage-offers-grid__square">
  682. <div class="homepage-offers-grid__square-hack">
  683. <div
  684. class="homepage-offers-grid__square-hack-padding"
  685. ></div>
  686. </div>
  687. <div class="homepage-offers-grid__square-text">
  688. <span>Get more value on your essentials</span>
  689. </div>
  690. </li>
  691. <li class="homepage-offers-grid__square">
  692. <div class="homepage-offers-grid__square-hack">
  693. <div
  694. class="homepage-offers-grid__square-hack-padding"
  695. ></div>
  696. </div>
  697. <div class="homepage-offers-grid__square-text">
  698. <span>Earn rewards on the road</span>
  699. </div>
  700. </li>
  701. <li class="homepage-offers-grid__square">
  702. <div class="homepage-offers-grid__square-hack">
  703. <div
  704. class="homepage-offers-grid__square-hack-padding"
  705. ></div>
  706. </div>
  707. <div class="homepage-offers-grid__square-text">
  708. <span>Treat yourself to something special</span>
  709. </div>
  710. </li>
  711. </ul>
  712. </div>
  713. </section>
  714. <section class="homepage-stores" id="storelocator">
  715. <div class="homepage-stores__inner">
  716. <div class="container">
  717. <header class="homepage-stores__header">
  718. <h1 class="homepage-stores__title">
  719. <span
  720. >Earn <span>PC Optimum™</span> points at more than 4,500
  721. places!</span
  722. >
  723. </h1>
  724. </header>
  725. <div class="homepage-stores__search">
  726. <div class="homepage-stores__input-container">
  727. <svg
  728. width="24px"
  729. height="24px"
  730. aria-hidden="true"
  731. focusable="false"
  732. class="sprite"
  733. >
  734. <use
  735. data-testid="search"
  736. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-search"
  737. ></use>
  738. </svg>
  739. <input
  740. type="text"
  741. class="homepage-stores__input"
  742. id="homepage-stores__input"
  743. placeholder="Enter a location"
  744. /><label
  745. for="homepage-stores__input"
  746. class="visually-hidden"
  747. ><span>Enter a location</span><span>:</span></label
  748. >
  749. </div>
  750. <button
  751. type="submit"
  752. class="button button--inline button--theme-base homepage-stores__search-button"
  753. aria-label="Search for stores in this area"
  754. >
  755. <span>Search</span>
  756. </button>
  757. </div>
  758. </div>
  759. </div>
  760. </section>
  761. <section class="homepage-faq" id="faq">
  762. <div class="container">
  763. <div class="homepage-faq__inner">
  764. <header class="homepage-faq__header">
  765. <h1 class="homepage-faq__title">
  766. <span>Have questions? Find answers.</span>
  767. </h1>
  768. </header>
  769. <a
  770. target="_blank"
  771. rel="noreferrer noopener"
  772. class="new-window-link link link--theme-button homepage-faq__faq-link-button"
  773. href="https://loblaw.force.com/PCoptimumsupport/s/?language=en_US"
  774. ><span>Browse our FAQ</span
  775. ><svg
  776. width="24px"
  777. height="24px"
  778. aria-hidden="true"
  779. focusable="false"
  780. class="sprite new-window-link__icon"
  781. >
  782. <use
  783. data-testid="new-window-link"
  784. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-new-window-link"
  785. ></use>
  786. </svg>
  787. </a>
  788. </div>
  789. </div>
  790. </section>
  791. <section class="homepage-join" id="join">
  792. <div
  793. role="presentation"
  794. aria-hidden="true"
  795. class="homepage-join-background"
  796. >
  797. <svg
  798. aria-hidden="true"
  799. focusable="false"
  800. class="sprite homepage-join-background__circle-left"
  801. >
  802. <use
  803. data-testid="circle-lightest"
  804. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  805. ></use>
  806. </svg>
  807. <svg
  808. aria-hidden="true"
  809. focusable="false"
  810. class="sprite homepage-join-background__circle-right"
  811. >
  812. <use
  813. data-testid="circle-lightest"
  814. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-circle-lightest"
  815. ></use>
  816. </svg>
  817. <svg
  818. aria-hidden="true"
  819. focusable="false"
  820. class="sprite homepage-join-background__dot"
  821. >
  822. <use
  823. data-testid="dot-lighter"
  824. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-dot-lighter"
  825. ></use>
  826. </svg>
  827. </div>
  828. <div class="container">
  829. <div class="homepage-join__inner">
  830. <header class="homepage-join__header">
  831. <h1 class="homepage-join__title">
  832. <span>Don’t miss out on rewards.</span>
  833. </h1>
  834. </header>
  835. <div class="homepage-join__link-container">
  836. <!-- <a
  837. aria-label="Go to the registration page"
  838. rel="noopener noreferrer"
  839. class="link link--theme-button homepage-join__link"
  840. href="/register?sid=home|missrewards|getstarted2"
  841. ><span>Get Started</span></a
  842. > -->
  843. <a
  844. aria-label="Go to the registration page"
  845. rel="noopener noreferrer"
  846. class="link link--theme-button homepage-join__link"
  847. ><span>Get Started</span></a
  848. >
  849. </div>
  850. </div>
  851. </div>
  852. </section>
  853. <section class="homepage-footnote" id="footnote">
  854. <div class="homepage-footnote__inner">
  855. <p>
  856. <span
  857. ><span>Esso™</span> is a trademark of Imperial Oil Limited.
  858. Imperial Oil, licensee. <span>Mobil™</span> is a trademark of
  859. Exxon Mobil Corporation or one of its subsidiaries. Imperial
  860. Oil, licensee. Mastercard is a trademark of Mastercard
  861. International Incorporated, used under license. Apple and the
  862. Apple logo are trademarks of Apple Inc., registered in the
  863. U.S. and other countries. App Store is a service mark of Apple
  864. Inc., registered in the U.S. and other countries. Google Play
  865. and the Google Play logo are trademarks of Google LLC.
  866. <span>PC Optimum™</span> used under license. ™/® Are
  867. trademarks of Loblaws Inc., used under license.</span
  868. >
  869. </p>
  870. <p>
  871. <span
  872. ><sup>†</sup> Annual 10% back in points may be achieved in
  873. numerous ways; including when you spend on average $7,000
  874. using your
  875. <span
  876. >PC Financial<sup><span>®</span></sup></span
  877. >
  878. Mastercard<sup><span>®</span></sup> in combination with the
  879. <span>PC Optimum™</span> loyalty program, with approximately:
  880. (i) 65% of that spend allocated to purchases in our stores
  881. that maximize personalized offers in our grocery stores from
  882. the <span>PC Optimum™</span> program; (ii) 15% at
  883. <span
  884. >Shoppers Drug Mart<sup><span>®</span></sup></span
  885. >/<span
  886. >Pharmaprix<sup><span>®</span></sup></span
  887. >
  888. on 20x Points Days and (iii) 20% everywhere else. Our stores
  889. means affiliated Loblaw banner grocery stores and
  890. <span
  891. >Shoppers Drug Mart<sup><span>®</span></sup></span
  892. >/<span
  893. >Pharmaprix<sup><span>®</span></sup></span
  894. >. Visit
  895. <a
  896. target="_blank"
  897. rel="noreferrer noopener"
  898. class="new-window-link homepage-footnote__link"
  899. href="https://www.pcoptimum.ca"
  900. ><span>pcoptimum.ca</span></a
  901. >
  902. for details on participating stores where the
  903. <span>PC Optimum™</span> program is offered. Value shown is
  904. for illustrative purposes only; results may vary based on
  905. individual purchase behaviour.</span
  906. >
  907. </p>
  908. <p>
  909. <span
  910. ><sup><span>®</span></sup
  911. >/<span>™</span> Trademarks of Loblaws Inc., used under
  912. license.</span
  913. >
  914. </p>
  915. <p>
  916. <span
  917. >Mastercard<sup><span>®</span></sup> is a registered
  918. trademark, and the circles design is a trademark of Mastercard
  919. International Incorporated. President's Choice Bank is a
  920. licensee of the marks.</span
  921. >
  922. </p>
  923. <p>
  924. <span
  925. ><span
  926. >Shoppers Drug Mart<sup><span>®</span></sup></span
  927. >,
  928. <span
  929. >Pharmaprix<sup><span>®</span></sup></span
  930. >
  931. and logos are trademarks of 911979 Alberta Ltd., used under
  932. license.</span
  933. >
  934. </p>
  935. <p>
  936. <span
  937. >President’s Choice Financial<sup><span>®</span></sup>
  938. Mastercard<sup><span>®</span></sup> is provided by President’s
  939. Choice Bank.</span
  940. >
  941. </p>
  942. <p>
  943. <span
  944. >The <span>PC Optimum™</span> program is provided by
  945. President's Choice Services Inc.</span
  946. >
  947. </p>
  948. </div>
  949. </section>
  950. </div>
  951. </div>
  952. </div>
  953. <footer class="site-footer">
  954. <div class="site-footer__top">
  955. <!-- <div
  956. tabindex="0"
  957. aria-label="Loblaw Privacy Policy"
  958. aria-describedby="lds__privacy-policy"
  959. class="lds__privacy-policy lds__privacy-policy__positionBottom"
  960. >
  961. <div class="lds__privacy-policy__innerWrapper">
  962. <div id="lds__privacy-policy">
  963. <p>
  964. We use cookies and other technologies to enable core
  965. functionality on our website(s) and to provide you with a
  966. personalized experience. For more information on cookies and how
  967. to manage your settings, visit the
  968. <a
  969. href="https://www.loblaw.ca/en/privacy.html"
  970. target="_blank"
  971. class="lds__privacy-policy__link"
  972. >Loblaw Privacy Policy</a
  973. >.
  974. </p>
  975. </div>
  976. <button type="button" class="lds__privacy-policy__btnClose">
  977. close
  978. </button>
  979. </div>
  980. </div> -->
  981. <div class="site-footer__links site-footer__links-social">
  982. <div class="site-footer__logo">
  983. <svg aria-hidden="true" focusable="false" class="sprite">
  984. <use
  985. data-testid="logo-pc-optimum-en"
  986. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-logo-pc-optimum-en"
  987. ></use>
  988. </svg>
  989. </div>
  990. <p class="site-footer__tagline">
  991. <span>Shop. Earn points. Repeat.</span>
  992. </p>
  993. <ul class="site-footer__social-media">
  994. <li class="site-footer__social-media-link">
  995. <div class="site-footer__social-media-link-icon">
  996. <a
  997. target="_blank"
  998. rel="noreferrer noopener"
  999. class="new-window-link"
  1000. href="https://www.facebook.com/pcoptimum"
  1001. aria-label="Facebook - PC Optimum"
  1002. ><svg
  1003. width="14px"
  1004. height="13px"
  1005. aria-hidden="true"
  1006. focusable="false"
  1007. class="sprite"
  1008. >
  1009. <use
  1010. data-testid="facebook"
  1011. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-facebook"
  1012. ></use>
  1013. </svg>
  1014. </a>
  1015. </div>
  1016. </li>
  1017. <li class="site-footer__social-media-link">
  1018. <div class="site-footer__social-media-link-icon">
  1019. <a
  1020. target="_blank"
  1021. rel="noreferrer noopener"
  1022. class="new-window-link"
  1023. href="https://www.youtube.com/pcoptimum"
  1024. aria-label="YouTube - PC Optimum"
  1025. ><svg
  1026. width="14px"
  1027. height="10px"
  1028. aria-hidden="true"
  1029. focusable="false"
  1030. class="sprite"
  1031. >
  1032. <use
  1033. data-testid="youtube"
  1034. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-youtube"
  1035. ></use>
  1036. </svg>
  1037. </a>
  1038. </div>
  1039. </li>
  1040. <li class="site-footer__social-media-link">
  1041. <div class="site-footer__social-media-link-icon">
  1042. <a
  1043. target="_blank"
  1044. rel="noreferrer noopener"
  1045. class="new-window-link"
  1046. href="https://www.instagram.com/pcoptimum/"
  1047. aria-label="Instagram - PC Optimum"
  1048. ><svg
  1049. width="14px"
  1050. height="10px"
  1051. aria-hidden="true"
  1052. focusable="false"
  1053. class="sprite"
  1054. >
  1055. <use
  1056. data-testid="instagram"
  1057. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#ui-instagram"
  1058. ></use>
  1059. </svg>
  1060. </a>
  1061. </div>
  1062. </li>
  1063. </ul>
  1064. </div>
  1065. <div class="site-footer__links site-footer__links-help">
  1066. <p class="site-footer__links-title">
  1067. <span>We’re here to help</span>
  1068. </p>
  1069. <ul class="site-footer__links-list">
  1070. <li class="site-footer__links-list-item">
  1071. <a
  1072. target="_blank"
  1073. rel="noreferrer noopener"
  1074. class="new-window-link site-footer__links-link"
  1075. href="https://loblaw.force.com/PCoptimumsupport/s/?language=en_US"
  1076. ><span>FAQ</span></a
  1077. >
  1078. </li>
  1079. <li class="site-footer__links-list-item">
  1080. <button
  1081. type="button"
  1082. class="button button--inline button--theme-link site-footer__ada-chatbot"
  1083. >
  1084. <span>Chat with virtual assistant</span>
  1085. </button>
  1086. </li>
  1087. </ul>
  1088. </div>
  1089. <div class="site-footer__links site--footer__links-legal">
  1090. <p class="site-footer__links-title"><span>Legal</span></p>
  1091. <ul class="site-footer__links-list">
  1092. <li class="site-footer__links-list-item">
  1093. <!-- <a
  1094. rel="noopener noreferrer"
  1095. class="link site-footer__links-link site-footer__corporate-links-link"
  1096. href="/company-policy/terms-and-conditions"
  1097. ><span>Terms and Conditions</span></a
  1098. > -->
  1099. <a
  1100. rel="noopener noreferrer"
  1101. class="link site-footer__links-link site-footer__corporate-links-link"
  1102. ><span>Terms and Conditions</span></a
  1103. >
  1104. </li>
  1105. <li class="site-footer__links-list-item">
  1106. <!-- <a
  1107. target="_blank"
  1108. rel="noreferrer noopener"
  1109. class="new-window-link site-footer__links-link"
  1110. href="https://www.loblaw.ca/en/privacy.html"
  1111. ><span>Privacy Policy</span></a
  1112. > -->
  1113. <a
  1114. target="_blank"
  1115. rel="noreferrer noopener"
  1116. class="new-window-link site-footer__links-link"
  1117. ><span>Privacy Policy</span></a
  1118. >
  1119. </li>
  1120. <li class="site-footer__links-list-item">
  1121. <!-- <a
  1122. target="_blank"
  1123. rel="noreferrer noopener"
  1124. class="new-window-link site-footer__links-link"
  1125. href="http://www.loblaw.ca/en/accessibility.html"
  1126. ><span>Accessibility</span></a
  1127. > -->
  1128. <a
  1129. target="_blank"
  1130. rel="noreferrer noopener"
  1131. class="new-window-link site-footer__links-link"
  1132. ><span>Accessibility</span></a
  1133. >
  1134. </li>
  1135. <li class="site-footer__links-list-item">
  1136. <!-- <a
  1137. rel="noopener noreferrer"
  1138. class="link site-footer__links-link site-footer__corporate-links-link"
  1139. href="/company-policy/site-terms-of-use"
  1140. ><span>Site Terms of Use</span></a
  1141. > -->
  1142. <a
  1143. rel="noopener noreferrer"
  1144. class="link site-footer__links-link site-footer__corporate-links-link"
  1145. ><span>Site Terms of Use</span></a
  1146. >
  1147. </li>
  1148. </ul>
  1149. </div>
  1150. <div class="site-footer__app-links site-footer__links">
  1151. <p class="site-footer__links-title"><span>Download the app</span></p>
  1152. <p class="site-footer__app-links-paragraph">
  1153. <span>Offers anywhere, anytime, everyday.</span>
  1154. </p>
  1155. <p class="site-footer__app-links-paragraph">
  1156. <span>Available for iOS and Android.</span>
  1157. </p>
  1158. <div class="site-footer__badges">
  1159. <a
  1160. target="_blank"
  1161. rel="noreferrer noopener"
  1162. class="new-window-link site-footer__badge-app"
  1163. href="https://itunes.apple.com/app/id634040057"
  1164. aria-label="Download on the App Store"
  1165. ><svg
  1166. aria-hidden="true"
  1167. focusable="false"
  1168. class="sprite site-footer__badge-app-svg"
  1169. >
  1170. <use
  1171. data-testid="app-ios-en"
  1172. xlink:href="/static/images/sprite-main-ltd6s2ce.svg#brand-app-ios-en"
  1173. ></use></svg></a
  1174. ><a
  1175. target="_blank"
  1176. rel="noreferrer noopener"
  1177. class="new-window-link site-footer__badge-app"
  1178. href="https://play.google.com/store/apps/details?id=com.sap.mdc.loblaw.nativ&amp;hl=en"
  1179. aria-label="Get it on Google Play"
  1180. ><img
  1181. src="/static/images/app-android-en.svg"
  1182. alt="app-android-en"
  1183. class="site-footer__badge-app-svg"
  1184. /></a>
  1185. </div>
  1186. </div>
  1187. </div>
  1188. <div class="site-footer__bottom">
  1189. <div class="site-footer__bottom-inner">
  1190. <div class="site-footer__copyright">
  1191. <span
  1192. >© 2024 Loblaws Inc. All Rights Reserved. ®/™ Trademarks of
  1193. Loblaws Inc.</span
  1194. >
  1195. </div>
  1196. <div class="locale-toggle">
  1197. <button
  1198. lang="fr-CA"
  1199. type="button"
  1200. class="button button--inline button--theme-none locale-toggle__link locale-toggle__link--clickable"
  1201. >
  1202. <span aria-hidden="true">FR</span
  1203. ><span class="visually-hidden">Français</span></button
  1204. ><span class="locale-toggle__bullet">•</span
  1205. ><span class="locale-toggle__link">EN</span>
  1206. </div>
  1207. </div>
  1208. </div>
  1209. </footer>
  1210. </body>
  1211. <script>
  1212. function openMenu() {
  1213. var pannel = document.getElementsByClassName("menu-panel")[0];
  1214. console.log(pannel.className);
  1215. pannel.className = pannel.className.replace(
  1216. /menu-panel--closed /,
  1217. "menu-panel--open "
  1218. );
  1219. }
  1220. function closeMenu() {
  1221. console.log("2635");
  1222. var pannel = document.getElementsByClassName("menu-panel")[0];
  1223. console.log(pannel.className);
  1224. pannel.className = pannel.className.replace(
  1225. /menu-panel--open /,
  1226. "menu-panel--closed "
  1227. );
  1228. }
  1229. </script>
  1230. </html>