Landing Page using Vue3 + Vite with Mobile-first workflow

In this project, the biggest takeaway for me is learning how to work with JS media queries using window.matchMedia() method. Reference from CSS Tricks

// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')
const handleMediaQueryChanged = (e) => {
  // Check if the media query is true
  if (e.matches) {
    // Then log the following message to the console
    console.log('Media Query Changed!')
  }
}
// Register event listener
mediaQuery.addListener(handleMediaQueryChanged)
// Initial check
handleMediaQueryChanged(mediaQuery)

-- Any feedback is welcomed. Thanks in advance!