home-imp-responsive (#46)

* home-imp-responsive * aspect-ratio * home-imp-responsive Now it looks amazing on 320-1920px with height 640px * home-imp-responsive
nicitaacom · Aug 24, 2023 · 38a03d0 · 38a03d0
1 parent 23b08e2
commit 38a03d0
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 358 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
-*/interfaces
+*/interfaces
+Slider3D.tsx
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -65,7 +65,7 @@ export function Navbar() {
  {/* LOGO */}
  <h1 className="font-primary text-lg font-bold">Aer</h1>
 
- {/* Nav-links */}
+ {/* NAV-LINKS */}
  <ul className="hidden laptop:flex justify-between gap-x-8 text-sm">
  {navLinks.map(navLink => (
  <li className="relative" key={navLink.href}>
@@ -79,7 +79,7 @@ export function Navbar() {
  ))}
  </ul>
 
- {/* Hamburger menu */}
+ {/* HAMBURGER-ICON */}
  <motion.div
  className="flex laptop:hidden"
  animate={{
@@ -93,6 +93,7 @@ export function Navbar() {
  </motion.nav>
  </AnimatePresence>
 
+ {/* HAMBURGER-MENU */}
  <AnimatePresence>
  {isHamburgerMenu && (
  <motion.div

diff --git a/src/components/pages/root/Slider3D.tsx b/src/components/pages/root/Slider3D.tsx
@@ -45,7 +45,7 @@ export function Slider3D({
  image.classList.remove("slide-image-active")
  })
 
- document.querySelectorAll(".slider-image")[index]?.classList.add("slide-image-active")
+ document.querySelectorAll(".slider-image")[index]?.classList.add("slide-image-active", "aspect-video")
  })
 
  setCurrentSlide(index)
@@ -85,7 +85,7 @@ export function Slider3D({
  }}
  className={`${className as string} overflow-hidden`}>
  <h1 className={`absolute top-[5%] left-1/2 -translate-x-1/2 ${labelClassName as string}`}>{label}</h1>
- <div className="relative flex flex-col py-8 pt-16 tablet:pt-20 tablet:gap-y-4">
+ <div className="relative flex flex-col py-8 mobile:pt-10 tablet:pt-12 tablet:pb-4 tablet:gap-y-2">
  <div className="relative flex flex-none justify-center items-center w-[100vw]">
  <Images slideTo={slideTo} array={array} />
  </div>
@@ -129,15 +129,16 @@ function Images(data: { slideTo: (index: number) => void; array: ITopSales[] })
  data.slideTo(index)
  }}
  key={index}
- className={`image-wrapper flex-none grid`}>
+ className={`image-wrapper aspect-video flex-none grid`}>
  <Image
  placeholder="blur"
  blurDataURL={image.imgSrc}
  width={"480"}
  height={"320"}
  src={image.imgSrc}
  alt="image"
- className={`slider-image w-48 object-cover cursor-pointer ${index === Math.floor(data.array.length / 2) ? "slide-image-active" : ""
+ className={`slider-image transition-all duration-1000 aspect-video w-48 object-cover cursor-pointer
+ ${index === Math.floor(data.array.length / 2) ? "slide-image-active aspect-video" : ""
  }`}
  key={image.imgSrc}
  />