{"id":135,"date":"2024-07-17T19:01:19","date_gmt":"2024-07-17T19:01:19","guid":{"rendered":"https:\/\/wimtachdev.centennialcollege.ca\/?page_id=135"},"modified":"2024-11-26T23:22:02","modified_gmt":"2024-11-26T23:22:02","slug":"homepage","status":"publish","type":"page","link":"https:\/\/wimtach.centennialcollege.ca\/","title":{"rendered":"HomePage"},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>   \n    * {\n      padding: 0;\n      margin: 0;\n      box-sizing: border-box;\n    }\n\n\/*     HERO AND SERVICES STYLES BEGINNING  *\/\n    .wimtach-section {\n      position: relative;\n      height: 250px;\n    }\n\n    .background-wrapper {\n      position: relative;\n      height: 100%;\n    }\n\n    .background-video {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      z-index: 0;\n    }\n\n    .overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(128, 128, 128, 0.5); \/* Grey color with 50% opacity *\/\n      z-index: 1;\n    }\n\n    .services {\n      position: relative;\n      top: 50%;\n      transform: translateY(-50%); \n      z-index: 10;\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .service {\n      z-index: 3;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      height: 100px;\n      width: 100px; \n    }\n\n    .square {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0 2rem;\n      text-decoration: none;\n    }\n\n    .square img {\n      width: 45px;\n      height: 40px;\n    }\n\n    .square p {\n      font-weight: bold;\n      line-height: 13px;\n      font-size: 0.75rem;\n      text-align: center;\n    }\n\n    .service:nth-of-type(1) {\n      background: #D2DE38;\n    }\n\n    .square-1 {\n      color: #303030;\n    }\n\n    .service:nth-of-type(2) {\n      background: #303030;\n    }\n\n    .square-2 {\n      color: #D2DE38;\n    }\n    \n    .service:nth-of-type(3) {\n      background: #C5C5C5;\n    }\n\n    .square-3 {\n      color: #303030;\n    }\n    \n    .service:nth-of-type(4) {\n       background: #D2DE38;\n    }\n\n    .square-4 {\n      color: #303030;\n    }\n\n  @media (min-width: 600px) {\n  .wimtach-section {\n      height: 350px;\n    }\n    \n    .service {\n      height: 175px;\n      width: 175px; \n    }\n\n   .square {\n      gap: 1rem;\n      padding: 0 2rem;\n    }\n\n    .square img {\n      width: 60px;\n      height: 55px;\n    }\n\n    .square p {\n      font-weight: bold;\n      line-height: 21px;\n      font-size: 1rem;\n      text-align: center;\n    }\n  }\n    \n  @media (min-width: 1000px) {\n    .wimtach-section {\n      height: 400px;\n    }\n    \n    .service {\n      height: 175px;\n      width: 175px; \n    }\n\n   .square {\n      gap: 1rem;\n      padding: 0 2rem;\n    }\n\n    .square img {\n      width: 75px;\n      height: 70px;\n    }\n\n    .square p {\n      font-weight: bold;\n      line-height: 23px;\n      font-size: 1.1rem;\n      text-align: center;\n    }\n  }\n\n @media (min-width: 1200px) {\n    .wimtach-section {\n      height: 450px;\n    }\n    \n    .service {\n      height: 200px;\n      width: 200px; \n    }\n\n   .square {\n      gap: 1rem;\n      padding: 0 2rem;\n    }\n\n    .square img {\n      width: 85px;\n      height: 80px;\n    }\n\n    .square p {\n      font-weight: bold;\n      line-height: 23px;\n      font-size: 1.25rem;\n      text-align: center;\n    }\n  }\n\n  @media (min-width: 1400px) {\n    .wimtach-section {\n      height: 650px;\n    }\n    \n    .service {\n      height: 250px;\n      width: 250px; \n    }\n\n    .square {\n      gap: 1rem;\n      padding: 0 2rem;\n    }\n\n    .square img {\n      width: 95px;\n      height: 90px;\n    }\n\n    .square p {\n      font-weight: bold;\n      line-height: 28px;\n      font-size: 1.5rem;\n      text-align: center;\n    }\n  }\n\n\/*     HERO AND SERVICES STYLES END  *\/\n\/*     MOBILE CONTENT STYLES START *\/\n  .mobile-main-content {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 2.5rem;\n    margin: 0 auto;\n    margin-bottom: 5rem;\n    width: 95%;\n  }\n\n  .mobile-top-vector-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    padding: 0rem 1rem;\n    margin-top: -3rem;\n  }\n  \n  .mobile-vector-1 {\n    width: 275px;\n    border-radius: 15px;\n  }\n\n  .mobile-mobile-image {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 15px;\n  }\n\n  .mobile-desktop-image {\n    display: none;\n  }\n\n  .mobile-vector-2-title {\n    position: relative;\n    font-size: 1.5rem;\n    font-weight: bold;\n    margin-bottom: 1rem;\n    text-align: center;\n  }\n\n  .mobile-vector-2-title:before {\n      content: '';\n      position: absolute;\n      top: 40%; \/* Adjust this value to control vertical offset *\/\n      left: 20%; \/* Adjust this value to control horizontal offset *\/\n      width: 90%;\n      height: 20px;\n      background: linear-gradient(to bottom, #fff, #d2de38);\n      z-index: -1;\n      padding: 0px; \/* Controls the gradient's thickness around the text *\/\n  }\n\n  .mobile-bottom-vector-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: 0rem 1rem;\n  }\n\n  .mobile-vector-3 {\n    width: 275px;\n    border-radius: 15px;\n  }\n  \n  .mobile-vector-4-title {\n    position: relative;\n    font-size: 1.5rem;\n    font-weight: bold;\n    margin-bottom: 1rem;\n    text-align: center;\n  }\n\n  .mobile-vector-4-title:before {\n      content: '';\n      position: absolute;\n      top: 40%; \/* Adjust this value to control vertical offset *\/\n      left: 20%; \/* Adjust this value to control horizontal offset *\/\n      width: 85%;\n      height: 20px;\n      background: linear-gradient(to bottom, #fff, #d2de38);\n      z-index: -1;\n      padding: 0px; \/* Controls the gradient's thickness around the text *\/\n  }\n\n  .mobile-vector-4-text {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  .mobile-vector-4-list {\n    list-style-position: inside;\n    text-align: center;\n    font-size: 0.9rem;\n  }\n\n  .mobile-top-vector-container p,\n  .mobile-bottom-vector-container p {\n    text-align: center;\n    font-size: 0.9rem;\n  }\n\n  @media (min-width: 400px) {\n    .mobile-top-vector-container {\n      margin-top: 0rem;\n    }\n  }\n  \n  @media (min-width: 600px) {\n    .mobile-vector-1 {\n      width: 375px;\n    }\n\n    .mobile-vector-3 {\n      width: 375px;\n    }\n\n    .mobile-vector-4 {\n      padding: 2rem 0rem;\n    }\n  \n    .mobile-vector-2 {\n      padding: 2rem 0rem;\n    }\n  \n    .mobile-vector-2-title,\n    .mobile-vector-4-title {\n      font-size: 2rem\n    }\n\n    .mobile-top-vector-container p,\n    .mobile-bottom-vector-container p,\n    .mobile-vector-4-list {\n      font-size: 1.25rem;\n    }\n\n    .mobile-main-content {\n    margin-top: -6rem;\n    }\n  }\n\n  @media (min-width: 700px) {\n    .mobile-main-content {\n      margin-top: 0rem;\n    }\n  }\n\n\n  @media (min-width: 768px) {\n    .mobile-main-content {\n      width: 80%;\n    }\n  }\n\n  @media (min-width: 1000px) {\n    .mobile-main-content {\n      display: none;\n    }\n  }\n\n  \/*       BUBBLE STYLES  *\/\n\n  #landing-page-bubble1 {\n    display: block;\n    position: absolute;\n    top: 17%;\n    left: 0;\n    z-index: -10;\n  }\n  \n  #landing-page-bubble2 {\n    display: block;\n    position: absolute;\n    top: 17%;\n    right: 0%;\n    z-index: -10;\n  }\n  \n  #landing-page-bubble3 {\n    display: block;\n    position: absolute;\n    top: 25%;\n    right: 10%;\n    z-index: -10;\n  }\n\n  #landing-page-bubble4 {\n    display: block;\n    position: absolute;\n    top: 40%;\n    left: 7.5%;\n    z-index: -10;\n  }\n  \n  #landing-page-bubble5 {\n    display: block;\n    position: absolute;\n    top: 77.5%;\n    left: 5%;\n    z-index: -10;\n  }\n  \n  #landing-page-bubble6 {\n    display: block;\n    position: absolute;\n    top: 75%;\n    right: 5%;\n    z-index: -10;\n  }\n\n  #landing-page-bubble7 {\n    display: block;\n    position: absolute;\n    top: 92.5%;\n    left: 32.5%;\n    z-index: -10;\n  }\n      \n\/*     MOBILE CONTENT STYLES END  *\/\n\n    \n\/*     DESKTOP CONTENT STYLES START  *\/\n    .desktop-content-container {\n      display: none;\n      width: 100%; \n      height: auto; \n      margin: 0 auto 5rem auto;\n    }\n\n    .desktop-content-image-container {\n      height: 100%; \n      width: 100%; \n      display: flex; \n      justify-content: center; \n      align-items: center;\n    }\n\n    .desktop-top-left-image-container,\n    .desktop-bottom-left-image-container {\n      display: flex;\n      height: 305px; \n      position: relative; \n      width: 500px; \n      margin-right: -7.5rem;\n    }\n\n     .desktop-top-right-image-container, \n     .desktop-bottom-right-image-container {\n      display: flex;\n      height: 305px; \n      position: relative; \n      width: 500px; \n    }\n\n    .desktop-top-right-image-container h2::before {\n      content: '';\n      position: absolute;\n      top: 40%; \/* Adjust this value to control vertical offset *\/\n      left: 30%; \/* Adjust this value to control horizontal offset *\/\n      width: 55%;\n      height: 20px;\n      background: linear-gradient(to bottom, #fff, #d2de38);\n      z-index: -1;\n      padding: 0px; \/* Controls the gradient's thickness around the text *\/\n    }\n\n    .desktop-bottom-left-image-container h2::before {\n      content: '';\n      position: absolute;\n      top: 40%; \/* Adjust this value to control vertical offset *\/\n      left: 15%; \/* Adjust this value to control horizontal offset *\/\n      width: 75%;\n      height: 20px;\n      background: linear-gradient(to bottom, #fff, #d2de38);\n      z-index: -1;\n      padding: 0px; \/* Controls the gradient's thickness around the text *\/\n    }\n\n    .desktop-top-left-image-container img,\n    .desktop-top-right-image-container img,\n    .desktop-bottom-left-image-container img, \n    .desktop-bottom-right-image-container img {\n      display: block; \n      height: 100%; \n      width: 100%;\n      object-fit: cover;\n    }\n\n    .desktop-top-right-text {\n      position: absolute; \n      top: 4%; \n      right: 2.5%; \n    }\n\n    .desktop-bottom-left-text {\n      position: absolute; \n      top: 4%; \n      left: 2.5%; \n      display: flex; \n      flex-direction: column;\n      gap: 0.5rem;\n    }\n\n    .desktop-top-right-text h2 {\n      position: relative; \n      font-weight: bold; \n      font-size: 1.5rem; \n      text-align: center; \n      margin-bottom: 1rem;\n    }\n\n    .desktop-bottom-left-text h2 {\n      position: relative; \n      font-weight: bold; \n      font-size: 1.5rem; \n      text-align: left; \n      margin-bottom: 1rem;\n    }\n\n    .desktop-top-right-text p {\n      font-size: 0.8rem; \n      text-align: right; \n      max-width: 24rem;\n    }\n\n    .desktop-bottom-left-text p {\n      font-size: 0.8rem; \n      text-align: left; \n      max-width: 24rem;\n    }\n\n    .desktop-bottom-left-text li {\n      font-size: 0.8rem; \n      list-style-position: inside;\n    }\n    \n  @media (min-width: 1000px) {\n    .desktop-content-container {\n      display: flex;\n      flex-direction: column;\n      gap: 2rem;\n    }\n  }\n\n  @media (min-width: 1200px) {\n    .desktop-top-left-image-container,\n    .desktop-top-right-image-container,\n    .desktop-bottom-left-image-container, \n    .desktop-bottom-right-image-container {\n      height: 366px;\n      width: 600px;\n    }\n\n    .desktop-top-left-image-container,\n    .desktop-bottom-left-image-container {\n      margin-right: -9rem;\n    }\n\n    .desktop-top-right-text h2 {\n      position: relative; \n      font-size: 2.5rem; \n      text-align: center; \n      padding-left: 2rem;\n    }\n\n    .desktop-bottom-left-text h2 {\n      position: relative; \n      font-size: 2.5rem; \n      text-align: left; \n    }\n\n    .desktop-top-right-text p {\n      font-size: 0.938rem; \n      max-width: 30rem;\n    }\n\n    .desktop-bottom-left-text p,\n    .desktop-bottom-left-text li {\n      font-size: 0.938rem; \n      max-width: 30rem;\n    }\n\n    .desktop-top-right-image-container h2::before {\n      content: '';\n      position: absolute;\n      top: 50%; \/* Adjust this value to control vertical offset *\/\n      left: 30%; \/* Adjust this value to control horizontal offset *\/\n      width: 70%;\n      height: 25px;\n      background: linear-gradient(to bottom, #fff, #d2de38);\n      z-index: -1;\n      padding: 0px; \/* Controls the gradient's thickness around the text *\/\n    }\n\n    .desktop-bottom-left-image-container h2::before {\n      content: '';\n      position: absolute;\n      top: 50%; \/* Adjust this value to control vertical offset *\/\n      left: 10%; \/* Adjust this value to control horizontal offset *\/\n      width: 85%;\n      height: 25px;\n      background: linear-gradient(to bottom, #fff, #d2de38);\n      z-index: -1;\n      padding: 0px; \/* Controls the gradient's thickness around the text *\/\n    }\n  }\n\n  @media (min-width: 1400px) {\n    .desktop-top-left-image-container,\n    .desktop-top-right-image-container,\n    .desktop-bottom-left-image-container, \n    .desktop-bottom-right-image-container {\n      height: 443px;\n      width: 725px;\n    }\n\n    .desktop-top-left-image-container,\n    .desktop-bottom-left-image-container {\n      margin-right: -11rem;\n    }\n\n    .desktop-top-right-text {\n      top: 8%; \n      right: 4%; \n    }\n\n    .desktop-bottom-left-text {\n      top: 8%; \n      left: 4%; \n    }\n\n    .desktop-top-right-text h2 {\n      text-align: center; \n    }\n\n    .desktop-bottom-left-text h2 {\n      text-align: left; \n    }\n    \n    .desktop-top-right-text p {\n      font-size: 1rem; \n      text-align: right; \n      max-width: 36rem;\n      line-height: 30px;\n    }\n\n    .desktop-bottom-left-text p {\n      font-size: 1rem; \n      text-align: left; \n      max-width: 34rem;\n      line-height: 30px;\n    }\n    \n    .desktop-bottom-left-text li {\n       font-size: 1rem; \n    }\n\n    .desktop-top-right-image-container h2::before {\n      content: '';\n      position: absolute;\n      top: 50%; \/* Adjust this value to control vertical offset *\/\n      left: 30%; \/* Adjust this value to control horizontal offset *\/\n      width: 60%;\n      height: 25px;\n      background: linear-gradient(to bottom, #fff, #d2de38);\n      z-index: -1;\n      padding: 0px; \/* Controls the gradient's thickness around the text *\/\n    }\n\n    .desktop-bottom-left-image-container h2::before {\n      content: '';\n      position: absolute;\n      top: 50%; \/* Adjust this value to control vertical offset *\/\n      left: 20%; \/* Adjust this value to control horizontal offset *\/\n      width: 85%;\n      height: 25px;\n      background: linear-gradient(to bottom, #fff, #d2de38);\n      z-index: -1;\n      padding: 0px; \/* Controls the gradient's thickness around the text *\/\n    }\n  }\n    \n\/*     DESKTOP CONTENT STYLES END *\/\n  <\/style>\n<\/head>\n<body>\n<!--   HERO SECTION BEGINNING -->\n  <div class=\"wimtach-section\">\n    <div class=\"background-wrapper\">\n      <video class=\"background-video\" autoplay muted loop>\n<!--         LINK TO CHANGE HOME SCREEN VIDEO, JUST COPY AND PASTE URL -->\n        <source src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/wimtach-homepage.mp4\" type=\"video\/mp4\">\n        Your browser does not support the video tag.\n      <\/video>\n      <div class=\"overlay\"><\/div>\n  <\/div>\n  <\/div>\n    <div class=\"services\">\n          <div class=\"service\">\n            <a href=\"https:\/\/wimtachdev.centennialcollege.ca\/?page_id=145\" class=\"square square-1\">\n              <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/applied-research.png\" alt=\"Applied Research\">\n              <p>Applied Research<\/p>\n            <\/a>\n          <\/div>\n          <div class=\"service\">\n            <a href=\"https:\/\/wimtachdev.centennialcollege.ca\/?page_id=143\" class=\"square square-2\">\n              <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/funding-acquisition.png\" alt=\"Funding Acquisition\">\n              <p>Funding Acquisition<\/p>\n            <\/a>\n          <\/div>\n          <div class=\"service\">\n            <a href=\"https:\/\/wimtachdev.centennialcollege.ca\/?page_id=149\" class=\"square square-3\">\n              <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/trainings-hackathons.png\" alt=\"Trainings and Hackathons\">\n              <p>Trainings &#038; Hackathons<\/p>\n            <\/a>\n          <\/div>\n          <div class=\"service\">\n            <a href=\"https:\/\/wimtachdev.centennialcollege.ca\/?page_id=147\" class=\"square square-4\">\n              <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/success-stories.png\" alt=\"Success Stories\">\n              <p>Success Stories<\/p>\n            <\/a>\n          <\/div>\n  <\/div>\n<!--   HERO SECTION END  -->\n<!--   MOBILE CONTENT SECTION START -->\n  <div class=\"mobile-main-content\">\n    <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/landing-page-bubble1.png\" id=\"landing-page-bubble1\">\n    <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/landing-page-bubble2.png\" id=\"landing-page-bubble2\">\n    <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/landing-page-bubble3.png\" id=\"landing-page-bubble3\">\n    <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/landing-page-bubble4.png\" id=\"landing-page-bubble4\">\n    <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/landing-page-bubble5.png\" id=\"landing-page-bubble5\">\n    <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/landing-page-bubble1.png\" id=\"landing-page-bubble6\">\n    <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/landing-page-bubble7.png\" id=\"landing-page-bubble7\">\n    \n    <div class=\"mobile-top-vector-container\">\n      <h3 class=\"mobile-vector-2-title\">What is WIMTACH?<\/h3>\n      <div class=\"mobile-vector-1\">\n        <img decoding=\"async\" class=\"mobile-mobile-image\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/wimtach-employee.png\" alt=\"WIMTACH Employee\" \/>\n        <img decoding=\"async\" class=\"mobile-desktop-image\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/hero-section-img.png\" alt=\"WIMTACH Employee\" \/>\n      <\/div>\n      <div class=\"mobile-vector-2\">\n        <div class=\"mobile-vector-2-text\">\n          <p>\n            Wearable, Interactive and Mobile Technology Access Centre in Health (WIMTACH) is an applied research centre at \n            Centennial College Progress campus. It uses a multidisciplinary approach to provide specialized knowledge, equipment \n            and technology to companies and organizations in the digital health technology sector in Toronto, Canada and beyond. \n            As a Technology Access Centre, WIMTACH serves as a catalyst for and contributor to the growing ecosystem of digital \n            health innovation by providing services to small to medium-sized businesses to carry out applied research projects. \n            Through these projects, WIMTACH helps businesses activate their innovative ideas and transform them into commercialized \n            successes.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    \n    <div class=\"mobile-bottom-vector-container\">\n       <h3 class=\"mobile-vector-4-title\">Why work with WIMTACH?<\/h3>\n      <div class=\"mobile-vector-3\">\n        <img decoding=\"async\" class=\"mobile-mobile-image\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/centennial-building.png\" alt=\"Centennial Building\" \/>\n        <img decoding=\"async\" class=\"mobile-desktop-image\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/hero-section-img.png\" alt=\"Centennial Building\" \/>\n      <\/div>\n      <div class=\"mobile-vector-4\">\n        <div class=\"mobile-vector-4-text\">\n           <p><strong>Your one-stop shop for opportunity.<\/strong><\/p>\n           <p>\n            Getting the resources you need to execute those ideas is essential. \n            We use a multidisciplinary approach to bring valuable expertise, cutting-edge \n            technology and flexible solutions to reduce your limitations and increase your \n            capacity for innovation.\n          <\/p>\n          <ul class=\"mobile-vector-4-list\">\n            <li>Access made affordable<\/li>\n            <li>Grow the local industry<\/li>\n            <li>Choose from flexible solutions<\/li>\n            <li>Save time and catalyze<\/li>\n            <li>Ownership<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n<\/div>\n<!--   MOBILE CONTENT SECTION END  -->\n<!--   DESKTOP CONTENT SECTION START -->  \n<div class=\"desktop-content-container\">\n  \n  <div class=\"desktop-content-image-container\">\n    <div class=\"desktop-top-left-image-container\">\n      <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/11\/new-wimtach-hero-img.png\" alt=\"WIMTACH employee\">\n    <\/div>\n    <div class=\"desktop-top-right-image-container\">\n      <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/top-right-vector.png\" alt=\"What is WIMTACH?\">\n      <div class=\"desktop-top-right-text\">\n        <h2>\n          What is WIMTACH?\n        <\/h2>\n        <p>\n          Wearable, Interactive and Mobile Technology Access Centre in Health (WIMTACH) is \n          an applied research centre at Centennial College Progress campus. It uses a multidisciplinary \n          approach to provide specialized knowledge, equipment and technology to companies and organizations \n          in the digital health technology sector in Toronto, Canada and beyond. As a Technology Access \n          Centre, WIMTACH serves as a catalyst for and contributor to the growing ecosystem of digital \n          health innovation by providing services to small to medium-sized businesses to carry out applied \n          research projects. Through these projects, WIMTACH helps businesses activate their innovative ideas \n          and transform them into commercialized successes.\n        <\/p>\n      <\/div> \n    <\/div>\n  <\/div>\n\n  <div class=\"desktop-content-image-container\">\n    <div class=\"desktop-bottom-left-image-container\">\n      <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/vector-3.png\" alt=\"What is WIMTACH?\">\n      <div class=\"desktop-bottom-left-text\">\n        <h2>\n          Why work with WIMTACH?\n        <\/h2>\n        <ul>\n          <li>Access made affordable<\/li>\n          <li>Grow the local industry<\/li>\n          <li>Choose from flexible solutions<\/li>\n          <li>Save time and catalyze<\/li>\n          <li>Ownership<\/li>\n        <\/ul>\n        <p>Your one-stop shop for opportunity.<\/p>\n        <p>\n          Getting the resources you need to execute those ideas is essential. \n          We use a multidisciplinary approach to bring valuable expertise, cutting-edge technology \n          and flexible solutions to reduce your limitations and increase your capacity for innovation.\n        <\/p>\n      <\/div> \n    <\/div>\n    <div class=\"desktop-bottom-right-image-container\">\n      <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/vector-4.png\" alt=\"WIMTACH employee\">\n    <\/div>\n  <\/div>\n  \n<\/div>\n<!--   DESKTOP CONTENT SECTION END  -->\n<\/body>\n<\/html>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * {\n      box-sizing: border-box;\n      padding: 0;\n      margin: 0;\n    }\n\n   .stats-section {\n      display: flex;\n      justify-content: center;\n      gap: 2rem;\n      flex-wrap: wrap;\n      width: 90%;\n      margin-top: -2rem;\n      margin-bottom: 5.5rem;\n    }\n    \n    .stat-box {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: start;\n      text-align: center;\n      padding: 1rem 0.5rem 0.5rem 0.5rem;\n      gap: 0.5rem;\n      background-color: #D2DE38;\n      border-radius: 4px;\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      min-height: 138px;\n    }\n\n    .icon {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 30px;\n      width: 40px;\n    }\n\n    .icon img {\n      height: 100%;\n      width: 100%;\n    }\n\n    .number {\n      line-height: 13px;\n      font-size: 0.75rem;\n      font-weight: bold;\n    }\n\n    .description {\n      font-size: 0.75rem;\n      font-weight: bold;\n      max-width: 7rem;\n      color: black;\n    }\n    \n\n\n    @media (min-width: 600px) {\n      .stat-box {\n        gap: 1rem;\n        min-height: 225px;\n        padding: 2rem 1rem 1rem 1rem;\n      }\n      \n      .icon {\n        height: 50px;\n        width: 60px;\n      }\n  \n      .number {\n        line-height: 21px;\n        font-size: 2rem;\n      }\n  \n      .description {\n        font-size: 1rem;\n        max-width: 10rem;\n      }\n    }\n\n    @media (min-width: 1000px) {\n      .stats-section {\n        margin-top: 2rem;\n      }\n    }\n\n    @media (min-width: 1200px) {\n      .stat-box {\n        gap: 2rem;\n      }\n      \n      .icon {\n        height: 70px;\n        width: 80px;\n      }\n  \n      .number {\n        font-size: 3rem;\n      }\n  \n      .description {\n        font-size: 1.125rem;\n      }\n    }\n    \n  <\/style>\n<\/head>\n<body>\n  <div class=\"stats-section\">\n    <div class=\"stat-box\">\n      <div class=\"icon\">\n        <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/08\/Pin.png\" alt=\"Icon 1\">\n      <\/div>\n      <div class=\"number\" data-target=\"206\">0<\/div>\n      <div class=\"description\">SERVICES PROVIDED<\/div>\n    <\/div>\n    <div class=\"stat-box\">\n      <div class=\"icon\">\n        <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/checklist.png\" alt=\"Icon 2\">\n      <\/div>\n      <div class=\"number\" data-target=\"107\">0<\/div>\n      <div class=\"description\">PROJECTS COMPLETED<\/div>\n    <\/div>\n    <div class=\"stat-box\">\n      <div class=\"icon\">\n        <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/science.png\" alt=\"Icon 3\">\n      <\/div>\n      <div class=\"number\" data-target=\"59\">0<\/div>\n      <div class=\"description\">NEW PRODUCTS &#038; TECHNOLOGIES DEVELOPED<\/div>\n    <\/div>\n    <div class=\"stat-box\">\n      <div class=\"icon\">\n        <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/company.png\" alt=\"Icon 4\">\n      <\/div>\n      <div class=\"number\" data-target=\"148\">0<\/div>\n      <div class=\"description\">COMPANIES ASSISTED<\/div>\n    <\/div>\n    <div class=\"stat-box\">\n      <div class=\"icon\">\n        <img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/students.png\" alt=\"Icon 5\">\n      <\/div>\n      <div class=\"number\" data-target=\"406\">0<\/div>\n      <div class=\"description\">STUDENTS INVOLVED<\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n      const counters = document.querySelectorAll('.number');\n      const speed = 200; \/\/ The lower the slower\n\n      const observer = new IntersectionObserver((entries, observer) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            const counter = entry.target;\n            const updateCount = () => {\n              const target = +counter.getAttribute('data-target');\n              const count = +counter.innerText;\n\n              const inc = target \/ speed;\n\n              if (count < target) {\n                counter.innerText = Math.ceil(count + inc);\n                setTimeout(updateCount, 20);\n              } else {\n                counter.innerText = target;\n              }\n            };\n\n            updateCount();\n            observer.unobserve(counter); \/\/ Stop observing once the count animation has started\n          }\n        });\n      }, {\n        threshold: 0.5 \/\/ Adjust this value to trigger the animation earlier or later\n      });\n\n      counters.forEach(counter => {\n        observer.observe(counter);\n      });\n    });\n  <\/script>\n<\/body>\n<\/html>\n\n\n<!DOCTYPE html>\n<html lang=\"en\"> \n<head>\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Testimonial Slideshow<\/title>\n    \n    <style>\n        :root {\n            --slide-change-timer: 30000ms; \n            --testimonial-width: 80%; \n        }\n\n        .testimonial-section {\n          position: relative;\n          padding: 1rem;\n          background-color: #303030;\n          color: #fff;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          flex-direction: column; \n          width: 100%;\n        }\n      \n        .testimonial-section .heading {\n          font-size: 1.25rem;\n          font-weight: bold;\n          margin-bottom: 1.25rem;\n          text-align: center;\n        }\n      \n        .testimonial-section .slideshow-container {\n          max-width: var(--testimonial-width); \n          width: 95%;\n          margin: 0 auto;\n          text-align: center;\n          font-size: 1rem;\n        }\n\n        .testimonial-section .mySlides {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          gap: 2rem;\n        }\n\n      .slideshow-image-container {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n        .slideshow-text {\n          font-style: italic;\n        }\n\n        .testimonial-section .author .job-title {\n            color: #D2DE38; \n        }\n        .testimonial-section .headshot {\n          width: 90px;\n          height: 90px;\n          object-fit: cover;\n          border-radius: 50%;\n        }\n        .testimonial-section .prev, .testimonial-section .next {\n          cursor: pointer;\n          transition: background-color 0.6s ease;\n          user-select: none; \n          text-decoration: none; \n          display: none;\n        }\n        .testimonial-section .next {\n          position: absolute;\n          top: 50%;\n          right: 0;\n          transform: translate(-15%, -50%);\n        }\n          \n        .testimonial-section .prev {\n          position: absolute;\n          top: 50%;\n          left: 0;\n          transform: translate(15%, -50%);\n        }\n\n        @media (min-width: 600px) {\n           .testimonial-section .heading {\n            font-size: 1.75rem;\n          }\n      \n          .testimonial-section .slideshow-container {\n            font-size: 1.25rem;\n          }\n\n          .testimonial-section .headshot {\n            width: 100px;\n            height: 100px;\n          }\n        }\n          \n        @media (min-width: 768px) {\n          .testimonial-section {\n            padding: 3rem;\n          }\n          .testimonial-section .prev, .testimonial-section .next {\n            display: block;\n          }\n        }\n\n        @media (min-width: 1000px) {\n          .testimonial-section .prev {\n            transform: translate(30%, -50%);\n          }\n\n          .testimonial-section .next {\n            transform: translate(-30%, -50%);\n          }\n\n          .testimonial-section .heading {\n            font-size: 2.25rem;\n          }\n      \n          .testimonial-section .slideshow-container {\n            font-size: 1.25rem;\n          }\n\n          .testimonial-section .headshot {\n            width: 125px;\n            height: 125px;\n          }\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"testimonial-section\">\n    <div class=\"heading\">What WIMTACH clients are saying:<\/div>\n    <div class=\"slideshow-container\">\n         <div class=\"mySlides\">\n            <div class=\"slideshow-image-container\">\n            <\/div>\n            <div class=\"slideshow-text\"> \n              <p class=\"quote\">&#8220;Another amazing testimonial will go here. The service has been exceptional.&#8221;<\/p>\n              <p class=\"author\">John Doe <span class=\"job-title\">Founder, Company XYZ<\/span><\/p>\n            <\/div>\n        <\/div>\n\n      <div class=\"mySlides\">\n            <div class=\"slideshow-image-container\">\n            <\/div>\n            <div class=\"slideshow-text\">\n              <p class=\"quote\">&#8220;Another amazing testimonial will go here. The service has been exceptional.&#8221;<\/p>\n              <p class=\"author\">John Doe <span class=\"job-title\">Founder, Company XYZ<\/span><\/p>\n            <\/div>\n        <\/div>\n\n      <div class=\"mySlides\">\n            <div class=\"slideshow-image-container\">\n            <\/div>\n            <div class=\"slideshow-text\">\n              <p class=\"quote\">&#8220;Another amazing testimonial will go here. The service has been exceptional.&#8221;<\/p>\n              <p class=\"author\">John Doe <span class=\"job-title\">Founder, Company XYZ<\/span><\/p>\n            <\/div>\n        <\/div>\n\n        <a class=\"next\" onclick=\"plusSlides(1)\"><img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/Carousel-Button.svg\"><\/a>\n        <a class=\"prev\" onclick=\"plusSlides(-1)\"><img decoding=\"async\" src=\"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/10\/Carousel-Button1.svg\"><\/a>\n    <\/div>\n<\/div> \n\n<script>\n    let slideIndex = 1;\n\n    \/\/ Data for testimonials, including a boolean to control image display\n    const testimonials = [\n        {\n            quote: \"I join WIMTACH because I want to apply my mobile, design thinking, and healthcare expertise to help small to medium-sized companies. WIMTACH is a one-of-the-kind applied research center that accelerates businesses from ideas to commercialized successes. My first project is to assist a start-up to develop a tele-clinical app and robotic system. It has been an amazing experience, from project inception led by the WIMTACH project manager, to smooth collaboration between industry partners, principal investigators, research associates, and student researchers. With rapid and iterative product development, the industry partner is very satisfied with the progress and services we provide, and we have become their trusted advisor on the overall system architecture and development. These fantastic WIMTACH projects have allowed me to work with talented students from Centennial College, have exposure to interesting business ideas, and conduct innovative research & development for healthcare to make the world a better place!\",\n            author: \"Jin Li\",\n            title: \"Principal Investigator\",\n            imageUrl: \"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/08\/JinLi-Jin-Li.png\",\n            showImage: true\n        },\n        {\n            quote: \"When they told me that they would like to hire me as an Android developer for the project, [it] was very special for me. I was so glad that someone was willing to give me a chance here in Toronto. I have to admit that I was a little bit scared, a little bit nervous about trying to work with this unknown technology for me. They trusted me so I decided to jump right into the project and everything worked fine. You can learn so much from working on a team and you can learn so much from experience itself. There is nothing like hands-on work in a real-life environment. I am pretty sure that most of my experience at WIMTACH had a lot of weight on that decision for them to hire me. There is no doubt in my mind I will recommend WIMTACH to absolutely any student here in Centennial College.\",\n            author: \"Juan Munoz Rivera\",\n            title: \"Student Researcher\",\n            imageUrl: \"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/09\/Juan.jpg\",\n            showImage: true\n        },\n        {\n            quote: \"It excited me to revisit those technologies, and the challenge we aimed to tackle seemed both intriguing and enjoyable. Interacting with other teams\u2019 projects inspired ideas on how we can contribute to the thriving food bank community, particularly in Scarborough and potentially Toronto. I am genuinely thrilled and satisfied with my participation and would wholeheartedly recommend the hackathon to other students. It has been a rewarding experience.\",\n            author: \"Nkemjika Obi and SIRC-WIMTACH Scarborough Food Network hackathon participant\",\n            title: \"Student Researcher\",\n            imageUrl: \"https:\/\/wimtachdev.centennialcollege.ca\/wp-content\/uploads\/2024\/09\/Nkemjika-Obi.jpeg\",\n            showImage: true\n        }\n    ];\n\n    function loadTestimonials() {\n        let slides = document.getElementsByClassName(\"mySlides\");\n        for (let i = 0; i < testimonials.length; i++) {\n            let slide = slides[i];\n            let testimonial = testimonials[i];\n\n            \/\/ Populate the slide with testimonial data\n            slide.querySelector('.quote').innerText = `${testimonial.quote}`;\n            slide.querySelector('.author').innerHTML = `- ${testimonial.author} <span class=\"job-title\">${testimonial.title}<\/span>`;\n            \n          \n            \/\/ Conditionally add the image\n            if (testimonial.showImage && testimonial.imageUrl) {\n                const slideShowContainer = slide.querySelector('.slideshow-image-container');\n                let imgElement = document.createElement(\"img\");\n                imgElement.src = testimonial.imageUrl;\n                imgElement.alt = \"User Image\";\n                imgElement.className = \"headshot\";\n                slideShowContainer.append(imgElement);\n            }\n        }\n    }\n\n    function showSlides(n) {\n        let i;\n        let slides = document.getElementsByClassName(\"mySlides\");\n        if (n > slides.length) {slideIndex = 1}\n        if (n < 1) {slideIndex = slides.length}\n        for (i = 0; i < slides.length; i++) {\n            slides[i].style.display = \"none\";\n        }\n        slides[slideIndex-1].style.display = \"flex\";\n    }\n\n    function plusSlides(n) {\n        showSlides(slideIndex += n);\n    }\n\n    \/\/ Load testimonials into slides\n    loadTestimonials();\n\n    \/\/ Initialize the slideshow\n    showSlides(slideIndex);\n\n    \/\/ Auto-play functionality using the root variable for timing\n    setInterval(function() {\n        plusSlides(1);\n    }, parseInt(getComputedStyle(document.documentElement).getPropertyValue('--slide-change-timer')));\n<\/script> \n\n<\/body>\n<\/html>      \n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-135","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=135"}],"version-history":[{"count":22,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/135\/revisions"}],"predecessor-version":[{"id":10382,"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=\/wp\/v2\/pages\/135\/revisions\/10382"}],"wp:attachment":[{"href":"https:\/\/wimtach.centennialcollege.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}