11.16-bob: Swiper va animatsiya (Framer Motion)

  ANIMATSIYA — UX'ning "his qilinadigan sifati" (perceived quality):

  ANIMATSIYA NIMA BERADI (maqsadli):
   Aloqa (continuity) — element qayerdan keldi/qayerga ketdi (modal, ro'yxat)
   Holat (feedback) — yuklanmoqda, muvaffaqiyatli, xato (foydalanuvchi tushunadi)
   E'tibor (attention) — muhim narsaga qaratadi (yangi xabar, tugma)
   Sifat (polish) — silliq, professional, zamonaviy his

  YAXSHI ANIMATSIYA PRINTSIPLARI:
   TEZ — 200-400ms (sekin animatsiya bezovta qiladi — foydalanuvchi kutadi)
   MAQSADLI — ma'no beradi (ko'rsatish uchun emas — ortiqcha = chalg'itadi)
   TABIIY — ease (tezlanish/sekinlanish — chiziqli emas, hayotiy)
   IZCHIL — bir xil harakat bir xil ma'no (butun ilovada)

   Animatsiya — MAQSADLI (UX yordami), bezak emas (ortiqcha = sekin + chalg'ituvchi)
   Tez (200-400ms) + tabiiy (ease) + izchil — yaxshi animatsiya qoidalari

  IKKI XIL ANIMATSIYA:
  1. CSS animatsiya (transition, @keyframes) — oddiy, tez (brauzer optimallashtiradi):
     .btn { transition: transform 0.2s; }  .btn:hover { transform: scale(1.05); }
  2. JS animatsiya (Framer Motion) — murakkab, boshqariladigan (gesture, orkestr, exit):
     <motion.div animate={{ x: 100 }} />

  PERFORMANCE — QAYSI xususiyatlar arzon (60 FPS uchun):
   ARZON (GPU — reflow yo'q): transform (translate/scale/rotate), opacity
   QIMMAT (reflow/repaint — 11.1: 2.7): width, height, top, left, margin

   transform: translateX(100px)   (GPU — silliq)
   left: 100px                     (reflow — har kadrda — lag)

  QAYSI QACHON:
  - Oddiy (hover, transition)  CSS (yengil, tez)
  - Murakkab (gesture, exit, orkestr, layout)  Framer Motion (kuchli)

   transform/opacity bilan animatsiyala (GPU — 60 FPS); width/left'dan qoch (reflow — 11.1)
   CSS — oddiy holatda; Framer Motion — murakkab, boshqariladigan animatsiya

  SWIPER — teginishga sezgir slayder/karusel (mobil + desktop):
  npm install swiper

  ASOSIY ISHLATISH (React):
  import { Swiper, SwiperSlide } from "swiper/react";
  import "swiper/css";                          // asosiy stillar (majburiy)

  <Swiper spaceBetween={20} slidesPerView={1}>  {/* slaydlar orasi, bir vaqtda nechta */}
    <SwiperSlide><img src="1.jpg" /></SwiperSlide>
    <SwiperSlide><img src="2.jpg" /></SwiperSlide>
    <SwiperSlide><img src="3.jpg" /></SwiperSlide>
  </Swiper>

  ASOSIY PROPS:
  slidesPerView — bir vaqtda nechta slayd (1, 3, "auto")
  spaceBetween — slaydlar orasi (px)
  loop — cheksiz aylanish (oxiridan boshiga)
  centeredSlides — markaziy slaydni o'rtaga

   Swiper — teginish (touch), sichqoncha, klaviatura — hammasi bilan ishlaydi (mobil + desktop)
   "swiper/css" — asosiy stillarni import qilish SHART (aks holda slayder buziladi)

  SWIPER MODULLAR — qo'shimcha imkoniyatlar (alohida import — faqat keraklisi):

  import { Navigation, Pagination, Autoplay } from "swiper/modules";
  import "swiper/css/navigation";    import "swiper/css/pagination";

  <Swiper
    modules={[Navigation, Pagination, Autoplay]}   //  ishlatiladigan modullar
    navigation                                      // o'ng/chap o'qlar (tugmalar)
    pagination={{ clickable: true }}                // pastdagi nuqtalar (bosiladigan)
    autoplay={{ delay: 3000 }}                       // 3s'da avtomatik almashish
  >
    {slides.map(s => <SwiperSlide key={s.id}>{s.content}</SwiperSlide>)}
  </Swiper>

  KENG MODULLAR:
  Navigation — o'q tugmalar (oldingi/keyingi)
  Pagination — nuqtalar/progress (joriy holat)
  Autoplay — avtomatik almashish
  Scrollbar, Thumbs (kichik rasmlar), EffectFade/Coverflow (effektlar)

   Modullar alohida import (faqat keraklisi — bundle kichik — 11.8)
   modules={[...]} ga qo'shish + mos CSS import (navigation/pagination)

  RESPONSIVE — ekran o'lchamiga qarab turli sozlama (mobilda 1, desktop'da 3 slayd):

  <Swiper
    slidesPerView={1}                  // default (eng kichik ekran)
    spaceBetween={10}
    breakpoints={{
      640: { slidesPerView: 2, spaceBetween: 20 },    // ≥640px — 2 slayd
      1024: { slidesPerView: 3, spaceBetween: 30 },   // ≥1024px — 3 slayd
      1280: { slidesPerView: 4, spaceBetween: 40 },   // ≥1280px — 4 slayd
    }}
  >
    {products.map(p => <SwiperSlide key={p.id}><ProductCard product={p} /></SwiperSlide>)}
  </Swiper>

  ┌────────────────────────────────────────────────────────────┐
  │ Mobil (<640): 1 slayd | Tablet (640+): 2 | Desktop (1024+): 3│
  │  bir Swiper, ekran o'lchamiga moslashadi (responsive — 1.5)│
  └────────────────────────────────────────────────────────────┘

   breakpoints — ekran kengligiga qarab sozlama (mobil-first — kichikdan kattaga)
   Mahsulot karuseli — mobilda 1, desktop'da 3-4 (responsive — 1.5)

  FRAMER MOTION (Motion) — React animatsiya kutubxonasi (deklarativ):
  npm install motion

  motion KOMPONENTLAR — oddiy element + animatsiya imkoniyati:
  import { motion } from "motion/react";

  <motion.div animate={{ x: 100 }} />        // div, lekin animatsiyalanadi
  <motion.button whileHover={{ scale: 1.1 }} />
  <motion.h1 initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

  HAR HTML ELEMENT motion versiyasi:
  motion.div, motion.button, motion.li, motion.span, motion.svg...

  3 ASOSIY PROP:
  initial — boshlang'ich holat (animatsiyadan OLDIN)
  animate — yakuniy holat (animatsiya BORADIGAN joy)
  transition — qanday (davomiylik, ease, turi)

   motion.X — oddiy X element + animatsiya props (initial/animate/transition/while*)
   Deklarativ — "boshlang'ich  yakuniy holat"ni tasvirlaysan (React falsafasiga mos)

  3 PROP bilan animatsiya (boshlang'ich  yakuniy, qanday):

  <motion.div
    initial={{ opacity: 0, y: 20 }}      // boshlang'ich: ko'rinmas + 20px pastda
    animate={{ opacity: 1, y: 0 }}       // yakuniy: to'liq ko'rinadigan + joyida
    transition={{ duration: 0.4, ease: "easeOut" }}   // 0.4s, sekinlanish bilan
  />
  //  element pastdan silliq ko'tarilib paydo bo'ladi (fade + slide up)

  ANIMATSIYALANADIGAN xususiyatlar:
  x, y — joylashuv (transform — GPU — 2.2)
  opacity — shaffoflik    scale — o'lcham    rotate — burilish
  backgroundColor, borderRadius — rang/shakl

  TRANSITION:
  duration — davomiylik (s)    ease — "easeOut"/"easeInOut"/"linear"
  type: "spring" — prujinali (tabiiy, bouncy)    delay — kechikish

   x/y/scale/opacity — GPU (silliq — 2.2); duration 0.2-0.4s (tez — 2.1)
   type: "spring" — tabiiy, hayotiy harakat (chiziqli duration'dan jonliroq)

  VARIANTS — animatsiya holatlarini NOM bilan belgilash (orkestr — ko'p element birga):

  const container = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 },   //  bolalar 0.1s farq bilan (ketma-ket)
    },
  };
  const item = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  };

  <motion.ul variants={container} initial="hidden" animate="visible">   {/* nom bilan */}
    {items.map(i => (
      <motion.li key={i.id} variants={item}>{i.name}</motion.li>        {/* ota'dan meros */}
    ))}
  </motion.ul>
  //  ro'yxat elementlari KETMA-KET (stagger) paydo bo'ladi (chiroyli, professional)

  ┌────────────────────────────────────────────────────────────┐
  │ Variants: holatlar nom bilan (hidden/visible) — qayta ishlat-│
  │ iladigan; staggerChildren — bolalar ketma-ket (orkestr)      │
  └────────────────────────────────────────────────────────────┘

   Variants — animatsiya holatlarini nom bilan (toza, qayta ishlatiladigan)
   staggerChildren — bolalar ketma-ket animatsiya (ro'yxat paydo bo'lishi — professional)

  GESTURES — foydalanuvchi harakatiga animatsiya (hover, bosish, sudrash):

  HOVER va TAP (micro-interaksiyalar — tugma, karta):
  <motion.button
    whileHover={{ scale: 1.05 }}        // hover — biroz kattalash
    whileTap={{ scale: 0.95 }}          // bosganda — biroz kichrash (bosildi his)
  >Bosish</motion.button>

  DRAG (sudrash — kartani surish, slider, swipe):
  <motion.div
    drag                                 // sudraladigan
    dragConstraints={{ left: 0, right: 300 }}   // chegara (qancha suriladi)
    dragElastic={0.2}                    // chegaradan tashqari cho'zilish (elastik)
  />

  // drag bilan "swipe to delete", draggable karta, slider — qo'lda quriladi

  ┌────────────────────────────────────────────────────────────┐
  │ whileHover/whileTap: micro-interaksiya (tugma jonliroq)     │
  │ drag: sudraladigan (swipe, draggable, slider)               │
  └────────────────────────────────────────────────────────────┘

   whileHover/whileTap — tugma/kartaga "jonli" his (bosildi/ustida — UX)
   drag — sudraladigan element (swipe-to-delete, draggable, custom slider)

  MUAMMO: React komponent O'CHGANDA (DOM'dan olinganda) — animatsiya qila olmaydi (darrov yo'qoladi)

  AnimatePresence — komponent CHIQISHIHI (exit) animatsiya qiladi:
  import { AnimatePresence, motion } from "motion/react";

  <AnimatePresence>
    {isOpen && (
      <motion.div
        initial={{ opacity: 0 }}        // kirish
        animate={{ opacity: 1 }}
        exit={{ opacity: 0, scale: 0.9 }}   //  CHIQISH (o'chganda — AnimatePresence kutadi)
      >
        Modal kontenti
      </motion.div>
    )}
  </AnimatePresence>
  //  modal silliq KIRADI (isOpen true) va silliq CHIQADI (isOpen false — darrov yo'qolmaydi)

  RO'YXAT elementi o'chishi (exit bilan):
  <AnimatePresence>
    {items.map(i => <motion.li key={i.id} exit={{ opacity: 0, x: -100 }}>...)}
  </AnimatePresence>

   AnimatePresence — exit animatsiyasini imkon beradi (komponent o'chganda — darrov emas)
   exit prop — chiqish holati (modal yopilish, ro'yxat elementi o'chish — silliq)

  LAYOUT ANIMATSIYA — element JOYI/O'LCHAMI o'zgarganda avtomatik silliq (layout prop):
  <motion.div layout />   //  joy/o'lcham o'zgarsa — avtomatik animatsiya (qo'lda hisob yo'q)
  // masalan: ro'yxat tartiblansa, akkordeon ochilsa, grid o'zgarsa — silliq ko'chadi

  SCROLL ANIMATSIYA — element ko'ringanda animatsiya (whileInView):
  <motion.div
    initial={{ opacity: 0, y: 50 }}
    whileInView={{ opacity: 1, y: 0 }}    // ekranga KIRGAHda animatsiya (scroll)
    viewport={{ once: true }}              // faqat BIR marta (qayta scroll'da emas)
    transition={{ duration: 0.5 }}
  />
  //  sahifa scroll qilinganda, element ko'ringan sayin paydo bo'ladi (landing page)

  useScroll (ilg'or) — scroll holatiga bog'liq animatsiya (progress bar, parallax):
  const { scrollYProgress } = useScroll();   // 0  1 (scroll progress)

   layout prop — joy/o'lcham o'zgarishini avtomatik animatsiya (qo'lda hisob yo'q — kuchli)
   whileInView — element ko'ringanda (scroll-triggered — landing page, "reveal on scroll")

  PERFORMANCE:
   transform/opacity (GPU — 2.2); width/left'dan qoch (reflow)
   Ko'p element — layout prop yoki LazyMotion (bundle kichik)
   Animatsiya 60 FPS bo'lsin (Profiler/DevTools'da tekshir — 11.11)

  A11Y — REDUCED MOTION (animatsiyadan charchaydigan/kasallanadigan foydalanuvchilar):
  // Ba'zi foydalanuvchilar OS'da "harakatni kamaytir" yoqadi (vestibulyar buzilish)
  import { useReducedMotion } from "motion/react";
  const shouldReduceMotion = useReducedMotion();   // true bo'lsa — animatsiyani kamaytir
  <motion.div animate={{ x: shouldReduceMotion ? 0 : 100 }} />

  // yoki CSS: @media (prefers-reduced-motion: reduce) { * { animation: none; } }

  ┌────────────────────────────────────────────────────────────┐
  │ Performance: transform/opacity (GPU) | A11y: reduced motion │
  │ (animatsiyadan charchaydiganlarga — hurmat, qonuniy talab)  │
  └────────────────────────────────────────────────────────────┘

   prefers-reduced-motion — animatsiya hammaga mos kelmaydi (vestibulyar — bosh aylanish)
   useReducedMotion (Framer) yoki CSS media query — a11y (1.9 — har kim uchun)

  CSS ANIMATSIYA — brauzerning tug'ma imkoniyati (JS'siz, yengil):

  1. transition — HOLAT o'zgarishida silliq o'tish (hover, focus, class qo'shilishi):
     .btn { background: blue; transition: background 0.3s ease, transform 0.2s; }
     .btn:hover { background: darkblue; transform: translateY(-2px); }
     //  transition: <xususiyat> <davomiylik> <ease> <kechikish>

  2. @keyframes + animation — KO'P bosqichli, takrorlanadigan (spinner, pulse):
     @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
     .loader { animation: spin 1s linear infinite; }   // cheksiz aylanish

     @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
     .skeleton { animation: pulse 1.5s ease-in-out infinite; }   // yuklanish skeleti

  3. will-change — brauzerga OLDINDAN xabar (bu element animatsiya qilinadi — GPU'ga tayyorla):
     .card { will-change: transform; }   //  FAQAT kerak bo'lganda (doim emas — xotira)

  BROWSER RENDER QUVURI (nega transform/opacity arzon):
  JS  Style  Layout (reflow)  Paint  Composite (GPU)
   transform/opacity  faqat Composite (Layout/Paint'ni O'TKAZIB yuboradi — arzon)
   width/top/margin  Layout'dan boshlab hammasini qayta (qimmat — 11.1: 2.7)

   transition — oddiy holat o'tishi; @keyframes — ko'p bosqichli/takror (spinner, pulse)
   will-change: transform — GPU'ga tayyorla (lekin faqat kerakli elementga — ortiqcha = zarar)

  MOTION VALUES — animatsiya qiymatini QO'LDA kuzatish/boshqarish (re-render'siz):
  import { useMotionValue, useTransform } from "motion/react";
  const x = useMotionValue(0);                       // reaktiv qiymat (state emas — tezroq)
  const opacity = useTransform(x, [-150, 0, 150], [0, 1, 0]);   // x'ni opacity'ga MAP
  <motion.div style={{ x, opacity }} drag="x" />     // sudralganda cheklarda so'nadi

  KEYFRAMES — bir animatsiyada BIR NECHTA nuqta (massiv):
  <motion.div animate={{ x: [0, 100, 50, 0] }}       //  0100500 ketma-ket
    transition={{ duration: 2, times: [0, 0.4, 0.7, 1] }} />   // har nuqta vaqti

  useAnimate — IMPERATIV boshqaruv (ketma-ket, shartli animatsiya — kompleks oqim):
  const [scope, animate] = useAnimate();
  async function run() {
    await animate(scope.current, { x: 100 });        // await — ketma-ket
    await animate("li", { opacity: 1 }, { delay: stagger(0.1) });
  }

   Motion value — re-render'siz reaktiv qiymat (drag/scroll'da tez — performant)
   animate massivi — keyframes (ko'p nuqta); useAnimate — imperativ (murakkab ketma-ketlik)

  useScroll — SCROLL holatini kuzatish (progress bar, parallax, reveal):
  import { useScroll, useTransform, motion } from "motion/react";

  1. Sahifa scroll progressi (o'qish indikatori — yuqorida chiziq):
     const { scrollYProgress } = useScroll();          // 0 (tepa)  1 (past)
     <motion.div style={{ scaleX: scrollYProgress }} className="progress-bar" />

  2. Element'ga bog'liq (element ekranda qanchalik ko'ringani):
     const ref = useRef(null);
     const { scrollYProgress } = useScroll({
       target: ref, offset: ["start end", "end start"],   // element kirdi  chiqdi
     });
     const y = useTransform(scrollYProgress, [0, 1], [0, -200]);   // PARALLAX
     <motion.img ref={ref} style={{ y }} />              // fon sekinroq harakat (chuqurlik)

   scrollYProgress — 01 scroll holati (progress bar, parallax'ning manbasi)
   useTransform bilan map — scroll'ni har xil effektga (y siljish = parallax, scale, opacity)

  SWIPER — ilg'or imkoniyatlar:

  1. EFFEKTLAR (o'tish uslubi) — modul + prop + CSS:
     import { EffectFade, EffectCoverflow } from "swiper/modules";
     import "swiper/css/effect-fade";
     <Swiper modules={[EffectFade]} effect="fade" />          // silliq fade (slide o'rniga)
     <Swiper modules={[EffectCoverflow]} effect="coverflow"   // 3D coverflow (galereya)
       coverflowEffect={{ rotate: 30, depth: 200 }} />

  2. THUMBS — asosiy + kichik rasm galereya (ikki Swiper bog'langan):
     const [thumbs, setThumbs] = useState(null);
     <Swiper modules={[Thumbs]} thumbs={{ swiper: thumbs }}>...</Swiper>   // katta
     <Swiper onSwiper={setThumbs} slidesPerView={4}>...</Swiper>          // kichiklar

  3. VIRTUAL — MINGLAB slayd (faqat ko'rinadiganini render — performance):
     <Swiper modules={[Virtual]} virtual>
       {items.map((it, i) => <SwiperSlide key={it.id} virtualIndex={i}>...)}
     </Swiper>

  4. CUSTOM NAVIGATION + EVENT (o'z tugmalaring, holat kuzatish):
     <Swiper onSlideChange={(sw) => setActive(sw.activeIndex)}
             onSwiper={(sw) => (ref.current = sw)} />
     <button onClick={() => ref.current.slideNext()}>Keyingi</button>

   effect (fade/coverflow) — modul + prop + CSS; thumbs — ikki bog'langan Swiper
   virtual — minglab slaydda faqat ko'rinadiganini render (performance); event — holat/boshqaruv

  LOADING — kutish paytida "jonli" his (bo'sh ekran o'rniga):

  1. SPINNER (CSS keyframes — 2.13):
     @keyframes spin { to { transform: rotate(360deg); } }
     .spinner { animation: spin 0.8s linear infinite; }

  2. SKELETON (kontent shakli + pulse — perceived tezlik):
     .skeleton { background: #eee; animation: pulse 1.5s infinite; }
     //  kontent kelguncha uning "shakli"ni ko'rsatadi (bo'shliqdan yaxshi — UX)

  3. Framer bilan skeletonkontent (silliq almashish):
     <AnimatePresence mode="wait">
       {loading
         ? <motion.div key="skel" exit={{ opacity: 0 }}><Skeleton/></motion.div>
         : <motion.div key="data" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>{data}</motion.div>}
     </AnimatePresence>

  MICRO-INTERAKSIYA — kichik, maqsadli javob (tugma bosildi, like, toast):
  whileTap={{ scale: 0.9 }}   layout (like soni o'zgarsa)   toast (AnimatePresence)

   Skeleton — kutishda kontent shaklini ko'rsat (perceived tezlik — bo'shliqdan yaxshi)
   Micro-interaksiya — kichik javob (bosish, like, xato) — ilovani "tirik" his qiladi

  FRAMER MOTION'DAN BOSHQA (qachon kerak):

  - react-spring — fizik "spring" asosidagi (Framer'ga o'xshash, hook-first); tabiiy his
  - GSAP — eng kuchli/professional timeline animatsiya (murakkab ketma-ketlik, SVG, scroll);
    React'siz ham; og'irroq, imperativ (dizayn-og'ir loyihalarda kuchli)
  - Lottie (lottie-react) — dizayner After Effects'da chizgan animatsiyani (JSON) o'ynatish;
    murakkab illyustrativ animatsiya (onboarding, empty state) — kod'siz
  - @formkit/auto-animate — ENG oddiy: bitta hook, ro'yxat qo'shilish/o'chishi avtomatik silliq;
    "sozlamasiz" tez yechim (kichik loyihada yetarli)

   Framer Motion — React uchun standart (deklarativ, keng); boshqasi maxsus hollarda
   auto-animate (oddiy), Lottie (dizayner animatsiya), GSAP (murakkab timeline)

SWIPER 2.3-bob:      <Swiper slidesPerView={1} spaceBetween={20}><SwiperSlide>...</SwiperSlide></Swiper>
SWIPER MODUL 2.4-bob:modules={[Navigation,Pagination,Autoplay]} navigation pagination autoplay={{delay}}
BREAKPOINTS 2.5-bob: breakpoints={{ 640:{slidesPerView:2}, 1024:{slidesPerView:3} }}
MOTION 2.6-bob:      <motion.div initial={{opacity:0}} animate={{opacity:1}} transition={{duration:0.4}}/>
VARIANTS 2.8-bob:    variants={v} initial="hidden" animate="visible"  // staggerChildren
GESTURE 2.9-bob:     whileHover={{scale:1.05}} whileTap={{scale:0.95}}  |  drag dragConstraints={...}
PRESENCE 2.10-bob:   <AnimatePresence>{open && <motion.div exit={{opacity:0}}/>}</AnimatePresence>
LAYOUT 2.11-bob:     <motion.div layout/>
SCROLL 2.11-bob:     whileInView={{opacity:1}} viewport={{once:true}}
A11Y 2.12-bob:       const reduce = useReducedMotion()
CSS 2.13-bob:        @keyframes spin{to{transform:rotate(360deg)}} .x{animation:spin 1s linear infinite}
MOTION VAL 2.14-bob: const x=useMotionValue(0); const o=useTransform(x,[-150,0,150],[0,1,0])
KEYFRAMES 2.14-bob:  animate={{ x:[0,100,50,0] }} transition={{ times:[0,0.4,0.7,1] }}
useAnimate 2.14-bob: const [scope,animate]=useAnimate(); await animate(scope.current,{x:100})
useScroll 2.15-bob:  const {scrollYProgress}=useScroll(); const y=useTransform(scrollYProgress,[0,1],["0%","50%"])
SWIPER EFFEKT2.16-bob:modules={[EffectFade]} effect="fade" | effect="coverflow"
SWIPER EVENT2.16-bob:onSlideChange={(sw)=>...} onSwiper={(sw)=>ref.current=sw}

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

function Gallery({ images }: { images: string[] }) {
  return (
    <Swiper spaceBetween={20} slidesPerView={1}>
      {images.map((src, i) => (
        <SwiperSlide key={i}>
          <img src={src} alt={`Slayd ${i + 1}`} className="slide-img" />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

function Banner({ slides }: { slides: Slide[] }) {
  return (
    <Swiper
      modules={[Navigation, Pagination, Autoplay]}
      navigation                                  // o'q tugmalari
      pagination={{ clickable: true }}            // nuqtalar
      autoplay={{ delay: 4000, disableOnInteraction: false }}   // 4s avtomatik
      loop                                         // cheksiz
    >
      {slides.map(s => (
        <SwiperSlide key={s.id}>
          <div className="banner" style={{ background: s.color }}>{s.title}</div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

function ProductCarousel({ products }: { products: Product[] }) {
  return (
    <Swiper
      slidesPerView={1}
      spaceBetween={10}
      breakpoints={{
        640: { slidesPerView: 2, spaceBetween: 20 },
        1024: { slidesPerView: 3, spaceBetween: 30 },
        1280: { slidesPerView: 4, spaceBetween: 40 },
      }}
    >
      {products.map(p => (
        <SwiperSlide key={p.id}><ProductCard product={p} /></SwiperSlide>
      ))}
    </Swiper>
  );
}
//  Mobilda 1, tabletda 2, desktopda 3-4 mahsulot (responsive — 2.5)

import { motion } from "motion/react";

function Hero() {
  return (
    <motion.section
      initial={{ opacity: 0, y: 30 }}             // ko'rinmas + pastda
      animate={{ opacity: 1, y: 0 }}              // ko'rinadigan + joyida
      transition={{ duration: 0.6, ease: "easeOut" }}
    >
      <h1>Xush kelibsiz</h1>
      <p>Zamonaviy ilova</p>
    </motion.section>
  );
}
//  Sahifa ochilganda hero silliq pastdan ko'tarilib paydo bo'ladi (2.7)

const container = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { staggerChildren: 0.1 } },   // bolalar ketma-ket
};
const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

function ProductGrid({ products }: { products: Product[] }) {
  return (
    <motion.div className="grid" variants={container} initial="hidden" animate="visible">
      {products.map(p => (
        <motion.div key={p.id} variants={item} className="card">
          {p.name}
        </motion.div>
      ))}
    </motion.div>
  );
}
//  Kartalar birin-ketin (0.1s farq) paydo bo'ladi (professional — 2.8)

function AnimatedButton({ children, onClick }: React.PropsWithChildren<{ onClick: () => void }>) {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}                // hover — kattalash
      whileTap={{ scale: 0.95 }}                  // bosganda — kichrash
      transition={{ type: "spring", stiffness: 400 }}
      onClick={onClick}
    >
      {children}
    </motion.button>
  );
}

// Karta hover (ko'tarilish):
function Card({ title }: { title: string }) {
  return (
    <motion.div className="card" whileHover={{ y: -8, boxShadow: "0 10px 30px rgba(0,0,0,0.15)" }}>
      {title}
    </motion.div>
  );
}

function DraggableCard() {
  return (
    <motion.div
      className="card"
      drag
      dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
      dragElastic={0.2}                           // chegaradan tashqari elastik
      whileDrag={{ scale: 1.1, cursor: "grabbing" }}
    >
      Meni sudra
    </motion.div>
  );
}
//  drag — sudraladigan; dragConstraints — chegara; whileDrag — sudrash paytidagi holat (2.9)

import { AnimatePresence, motion } from "motion/react";
import { createPortal } from "react-dom";   // 11.12

function Modal({ isOpen, onClose, children }: ModalProps) {
  return createPortal(
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="backdrop"
          initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}   // fon
          onClick={onClose}
        >
          <motion.div
            className="modal"
            initial={{ opacity: 0, scale: 0.9, y: 20 }}        // kirish
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}            //  chiqish (silliq yopilish)
            transition={{ type: "spring", duration: 0.3 }}
            onClick={e => e.stopPropagation()}
          >
            {children}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>,
    document.body
  );
}
//  Modal silliq KIRADI va silliq CHIQADI (exit — AnimatePresence kutadi — 2.10)

function TodoList({ todos, onRemove }: { todos: Todo[]; onRemove: (id: string) => void }) {
  return (
    <ul>
      <AnimatePresence>
        {todos.map(todo => (
          <motion.li
            key={todo.id}                          //  key MAJBURIY (AnimatePresence kuzatadi)
            layout                                  // boshqalar silliq ko'chsin (2.11)
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, x: -100 }}          // o'chganda chapga suriladi
          >
            {todo.text}
            <button onClick={() => onRemove(todo.id)}></button>
          </motion.li>
        ))}
      </AnimatePresence>
    </ul>
  );
}
//  Element o'chganda silliq chiqadi + qolganlar silliq ko'chadi (layout — 2.10, 2.11)

function ExpandableCard() {
  const [expanded, setExpanded] = useState(false);
  return (
    <motion.div
      layout                                       // o'lcham o'zgarsa — avtomatik silliq
      className="card"
      onClick={() => setExpanded(!expanded)}
    >
      <motion.h3 layout>Sarlavha</motion.h3>
      {expanded && (
        <motion.p layout initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
          Qo'shimcha kontent (ochilganda silliq paydo bo'ladi)
        </motion.p>
      )}
    </motion.div>
  );
}
//  layout — karta kattalashganda (kontent qo'shilganda) silliq ko'chadi (2.11)

function FeatureSection({ feature }: { feature: Feature }) {
  return (
    <motion.div
      className="feature"
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}           // ekranga kirganda (scroll)
      viewport={{ once: true, amount: 0.3 }}        // bir marta, 30% ko'ringanda
      transition={{ duration: 0.5 }}
    >
      <h3>{feature.title}</h3>
      <p>{feature.description}</p>
    </motion.div>
  );
}
//  Scroll qilingan sayin har feature paydo bo'ladi (landing page — 2.11)

import { AnimatePresence, motion } from "motion/react";
import { useLocation, Outlet } from "react-router-dom";

function AnimatedLayout() {
  const location = useLocation();
  return (
    <AnimatePresence mode="wait">                  {/* eski chiqgach yangi kirsin */}
      <motion.div
        key={location.pathname}                     //  yo'l o'zgarsa — yangi animatsiya
        initial={{ opacity: 0, x: 20 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: -20 }}
        transition={{ duration: 0.25 }}
      >
        <Outlet />                                  {/* sahifa 11.9-bob */}
      </motion.div>
    </AnimatePresence>
  );
}
//  Sahifalar almashganda silliq o'tish (mode="wait" — eski chiqgach yangi — 2.10)

import { motion, useReducedMotion } from "motion/react";

function AnimatedCard({ title }: { title: string }) {
  const shouldReduceMotion = useReducedMotion();   // foydalanuvchi "harakatni kamaytir" yoqganmi

  return (
    <motion.div
      className="card"
      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 30 }}   // reduced — siljish yo'q
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.4 }}     // reduced — darrov
    >
      {title}
    </motion.div>
  );
}
//  Reduced motion'da — faqat opacity (siljish/spring yo'q) — vestibulyar foydalanuvchilar uchun (2.12)

function ProductShowcase({ products }: { products: Product[] }) {
  return (
    <motion.section
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}                 // scroll'da paydo
      viewport={{ once: true }}
    >
      <motion.h2 initial={{ y: 20, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }}>
        Mashhur mahsulotlar
      </motion.h2>
      <Swiper
        modules={[Navigation, Pagination]}
        navigation pagination={{ clickable: true }}
        breakpoints={{ 640: { slidesPerView: 2 }, 1024: { slidesPerView: 4 } }}
      >
        {products.map(p => (
          <SwiperSlide key={p.id}>
            <motion.div whileHover={{ y: -8 }}>    {/* hover ko'tarilish */}
              <ProductCard product={p} />
            </motion.div>
          </SwiperSlide>
        ))}
      </Swiper>
    </motion.section>
  );
}
//  Swiper (karusel) + Framer Motion (scroll reveal + hover) birga — jonli galereya

/* CSS @keyframes — JS'siz, yengil (spinner, skeleton) */
@keyframes spin {
  to { transform: rotate(360deg); }        /* transform — GPU 2.13-bob */
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;               /* faqat bir chet rangli — aylanish ko'rinadi */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;    /* cheksiz aylanish */
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.skeleton {
  background: #e5e7eb;
  border-radius: 6px;
  animation: pulse 1.5s ease-in-out infinite;   /* yuklanish "shakli" 2.17-bob */
}

/* prefers-reduced-motion — a11y: animatsiyani o'chir 2.12-bob */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

import { AnimatePresence, motion } from "motion/react";

function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading } = useUser(userId);       // 11.5 (TanStack Query)

  return (
    <AnimatePresence mode="wait">                     {/* eski chiqgach yangi kirsin */}
      {isLoading ? (
        <motion.div key="skeleton" exit={{ opacity: 0 }}>
          <div className="skeleton" style={{ height: 24, width: "60%" }} />
          <div className="skeleton" style={{ height: 16, width: "90%", marginTop: 8 }} />
        </motion.div>
      ) : (
        <motion.div key="data" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
          <h2>{data.name}</h2>
          <p>{data.bio}</p>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
//  Yuklanishda skeleton, tayyor bo'lganda kontent — silliq fade (perceived tezlik — 2.17)

import { motion, useScroll, useTransform } from "motion/react";
import { useRef } from "react";

// 1. Sahifa o'qish progress bar (yuqorida)
function ReadingProgress() {
  const { scrollYProgress } = useScroll();            // 0 (tepa)  1 (past)
  return (
    <motion.div
      style={{ scaleX: scrollYProgress, transformOrigin: "left" }}   //  GPU (scaleX)
      className="progress-bar"                          // position: fixed; top: 0; height: 4px
    />
  );
}

// 2. Parallax hero (fon rasm kontentdan sekinroq)
function ParallaxHero() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],                // element kirdi  chiqdi
  });
  const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"]);   // scroll  siljish

  return (
    <div ref={ref} className="hero" style={{ overflow: "hidden" }}>
      <motion.img src="/bg.jpg" style={{ y }} alt="" />  {/* sekinroq — chuqurlik */}
      <h1>Sarlavha</h1>
    </div>
  );
}

import { motion, useMotionValue, useTransform } from "motion/react";

// Drag: chetga sudralganda so'nadi (motion value + useTransform)
function SwipeToDismiss({ onDismiss }: { onDismiss: () => void }) {
  const x = useMotionValue(0);                          // re-render'siz reaktiv (2.14)
  const opacity = useTransform(x, [-150, 0, 150], [0, 1, 0]);   // chetda 0

  return (
    <motion.div
      style={{ x, opacity }}
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}            // qo'yib yuborilsa markazga qaytadi
      onDragEnd={(_, info) => {
        if (Math.abs(info.offset.x) > 120) onDismiss();  // yetarli surildi — o'chir
      }}
    >
      Meni chetga surib yuboring
    </motion.div>
  );
}

// Keyframes: bir animatsiyada ko'p nuqta (diqqat tortuvchi "wiggle")
function AttentionIcon() {
  return (
    <motion.span
      animate={{ rotate: [0, -10, 10, -10, 0] }}         //  ketma-ket nuqtalar (2.14)
      transition={{ duration: 0.5, repeat: Infinity, repeatDelay: 3 }}
    >
      
    </motion.span>
  );
}

import { useAnimate, stagger } from "motion/react";

function Notification() {
  const [scope, animate] = useAnimate();

  async function show() {
    await animate(scope.current, { opacity: 1, y: 0 }, { duration: 0.3 });   // avval konteyner
    await animate("li", { opacity: 1, x: 0 }, { delay: stagger(0.08) });     // keyin elementlar
  }

  return (
    <div ref={scope} style={{ opacity: 0, transform: "translateY(20px)" }}>
      <button onClick={show}>Ko'rsatish</button>
      <ul>
        <li style={{ opacity: 0 }}>Birinchi</li>
        <li style={{ opacity: 0 }}>Ikkinchi</li>
        <li style={{ opacity: 0 }}>Uchinchi</li>
      </ul>
    </div>
  );
}
//  await — animatsiyalar ketma-ket (deklarativ yetmagan murakkab oqim uchun — 2.14)

import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCoverflow, Thumbs, Navigation } from "swiper/modules";
import { useState } from "react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/thumbs";
import "swiper/css/navigation";
import type { Swiper as SwiperClass } from "swiper";

function ProductGallery({ images }: { images: string[] }) {
  const [thumbs, setThumbs] = useState<SwiperClass | null>(null);

  return (
    <>
      <Swiper
        modules={[EffectCoverflow, Thumbs, Navigation]}
        effect="coverflow"                                  // 3D coverflow (2.16)
        coverflowEffect={{ rotate: 30, depth: 200, modifier: 1 }}
        navigation
        thumbs={{ swiper: thumbs }}                          // kichiklarga bog'la
        centeredSlides
        slidesPerView="auto"
      >
        {images.map((src, i) => (
          <SwiperSlide key={i} style={{ width: 300 }}>
            <img src={src} alt={`Rasm ${i + 1}`} />
          </SwiperSlide>
        ))}
      </Swiper>

      <Swiper onSwiper={setThumbs} slidesPerView={5} spaceBetween={10} watchSlidesProgress>
        {images.map((src, i) => (
          <SwiperSlide key={i}>
            <img src={src} alt={`Kichik ${i + 1}`} className="thumb" />
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  );
}
//  Katta (coverflow) + kichik (thumbs) bog'langan galereya (2.16)

import { Swiper, SwiperSlide } from "swiper/react";
import { useState, useRef } from "react";
import type { Swiper as SwiperClass } from "swiper";
import "swiper/css";

function CustomCarousel({ slides }: { slides: Slide[] }) {
  const swiperRef = useRef<SwiperClass | null>(null);
  const [active, setActive] = useState(0);

  return (
    <div>
      <Swiper
        onSwiper={(sw) => (swiperRef.current = sw)}          // instansiyani saqla
        onSlideChange={(sw) => setActive(sw.activeIndex)}    // joriy slaydni kuzat
      >
        {slides.map((s) => (
          <SwiperSlide key={s.id}>{s.content}</SwiperSlide>
        ))}
      </Swiper>

      {/* O'z dizaynli boshqaruv */}
      <div className="controls">
        <button onClick={() => swiperRef.current?.slidePrev()}>‹ Oldingi</button>
        <span>{active + 1} / {slides.length}</span>
        <button onClick={() => swiperRef.current?.slideNext()}>Keyingi ›</button>
      </div>
    </div>
  );
}
//  onSwiper — imperativ boshqaruv (slideNext/slidePrev); onSlideChange — holat kuzatish (2.16)

 animate={{ left: 100, width: 200 }}  (reflow — lag — 2.2)
 animate={{ x: 100, scale: 1.2 }}  (transform — GPU — silliq)

 transition={{ duration: 2 }}  (sekin — bezovta qiladi — 2.1)
 duration: 0.2-0.4  (tez, silliq)

 "swiper/css" import qilmaslik (slayder buzilgan ko'rinadi — 2.3)
 import "swiper/css" + modul CSS (navigation/pagination — 2.4)

 {open && <motion.div exit={...}/>}  (AnimatePresence'siz — exit ishlamaydi — 2.10)
 <AnimatePresence>{open && <motion.div exit={...}/>}</AnimatePresence>

 har element animatsiya (chalg'ituvchi, sekin — 2.1)
 maqsadli (muhim o'tishlar, holatlar — kamroq ko'pincha yaxshiroq)

 reduced motion'ni e'tiborsiz (vestibulyar foydalanuvchilar azoblanadi — 2.12)
 useReducedMotion / prefers-reduced-motion (1.9)