rzmk/qsvpro.dathere.com
1
0
Fork 0
mirror of https://github.com/dathere/qsvpro.dathere.com.git synced 2025-12-19 05:59:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: lazy load images and hide download button on vertical mobile view

Browse source
This commit is contained in:
rzmk 2024-09-27 16:02:10 -04:00
parent 6d0f0d2177
commit e65a720026
No known key found for this signature in database
2 changed files with 133 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/EmblaCarousel.jsx
View file

@ -39,7 +39,7 @@ const EmblaCarousel = (props) => {
<div className="embla__container"> <div className="embla__container">
{slides.map((slide, index) => ( {slides.map((slide, index) => (
<div key={index} className="embla__slide space-y-2"> <div key={index} className="embla__slide space-y-2">
<img src={slide.image.src} alt="qsv pro feature demo GIF" className={index === slides.length - 1 ? `border-4 rounded h-[35rem] mx-auto border-zinc-600` : `border-4 rounded border-zinc-600`} /> <img decoding="async" loading="lazy" src={slide.image.src} alt="qsv pro feature demo GIF" className={index === slides.length - 1 ? `border-4 rounded h-[35rem] mx-auto border-zinc-600` : `border-4 rounded border-zinc-600`} />
<h2 className="text-2xl font-bold pt-4 text-[#F2F2F2]">{slide.title}</h2> <h2 className="text-2xl font-bold pt-4 text-[#F2F2F2]">{slide.title}</h2>
<p className="text-lg text-center text-[#F2F2F2]">{slide.description}</p> <p className="text-lg text-center text-[#F2F2F2]">{slide.description}</p>
</div> </div>

16
src/components/Hero.jsx
View file

@ -105,13 +105,17 @@ export const Hero = () => {
transition={{ duration: 0.5, delay: 0.1 }} transition={{ duration: 0.5, delay: 0.1 }}
> >
<div className="text-customGrayText text-sm lg:text-base xl:text-lg sm:text-base mt-10 px-12 sm:px-48 "> <div className="text-customGrayText text-sm lg:text-base xl:text-lg sm:text-base mt-10 px-12 sm:px-48 ">
Transform spreadsheet data and view statistics in interactive data tables, download/upload from/to compatible <a Transform spreadsheet data and view statistics in
interactive data tables, download/upload from/to
compatible{" "}
<a
href="https://ckan.org" href="https://ckan.org"
target="_blank" target="_blank"
className="text-blue-300" className="text-blue-300"
> >
CKAN CKAN
</a> instances, and explore qsv pro. </a>{" "}
instances, and explore qsv pro.
</div> </div>
</motion.div> </motion.div>
<motion.div <motion.div
@ -177,6 +181,7 @@ export const Hero = () => {
<a <a
href="https://github.com/dathere/qsv-pro-releases/releases/latest" href="https://github.com/dathere/qsv-pro-releases/releases/latest"
target="_blank" target="_blank"
className="hidden md:block"
> >
<div className="custom-button-colored w-64 h-12 mb-2 sm:mb-0"> <div className="custom-button-colored w-64 h-12 mb-2 sm:mb-0">
<Download /> <Download />
@ -185,8 +190,13 @@ export const Hero = () => {
</span> </span>
</div> </div>
</a> </a>
<p className="md:hidden text-white sm:text-base text-sm text-center mx-auto">
You may access download links here on a
desktop device.
</p>
<p className="text-white text-sm sm:text-base text-center mx-auto"> <p className="text-white text-sm sm:text-base text-center mx-auto">
Download qsv pro and explore the free plan or unlock features with a paid plan. Download qsv pro and explore the free plan
or unlock features with a paid plan.
</p> </p>
</> </>
)} )}