# pages

title: Главная
path: /
src_type: jsx
updated_at: 2025-11-17T10:43:21.326Z
created_at: 2025-11-17T09:48:13.822Z
_status: published
jsx:
  import type { Category } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ParallelogramGrid, CompanyBenefits, OurPartners, FAQ, CategoriesGrid },
    deps: {
      rb: { Container, Image, Row, Col },
      next: { Link },
    },
    props: { data },
  }) {
    const categories = (data as Category[]).sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        {/* Hero */}
        <div className="position-relative d-flex justify-content-center w-100">
          <Container className="position-absolute z-1 mx-auto h-100">
            <Row className="row-gap-5 row-gap-sm-0 h-100 align-content-center">
              <Col lg={7}>
                <div className="d-flex flex-column" style={{ rowGap: '2rem' }}>
                  <div>
                    <h1
                      className="text-uppercase fw-bold mb-0 text-light"
                      style={{
                        fontSize: 'clamp(32px, 8vw, 52px)',
                        lineHeight: '1',
                      }}
                    >
                      Поставки автомобилей, оборудования и товаров из Китая
                    </h1>
                  </div>
                  <Link // should it change color on hover?
                    className="bg-primary text-white me-auto fs-5"
                    href="#footer-anchor"
                    style={{
                      display: 'inline-block',
                      padding: '1rem 2rem',
                      textDecoration: 'none',
                      clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                      transition: '#1D1D1D .2s',
                    }}
                  >
                    Получить консультацию
                  </Link>
                </div>
              </Col>
            </Row>
          </Container>

          {/* Video */}
          <div
            className="video-container"
            style={{
              position: 'relative',
              width: '100%',
              minHeight: 'clamp(576px, 80vw, 810px)', // 1920:1080 = 16:9 = 1440:810; 1440 * 0.4 = 576
              overflow: 'hidden',
              background:
                'linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))',
            }}
          >
            <video
              src="/api/media/file/video_bg.mp4"
              loop
              autoPlay
              muted
              className="object-fit-cover position-absolute w-100 h-100"
              style={{
                mixBlendMode: 'multiply',
              }}
            />
          </div>
        </div>

        {/* Company benefits */}
        <CompanyBenefits />

        {/* Categories */}
        <Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xl={3} className="d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase">
              <h1 className="lh-1">Категории&nbsp;</h1>
              <h1 className="mb-0 ms-xl-auto lh-1 text-primary">Товаров</h1>
            </Col>
            <Col md={7} xl={5} className="mt-auto">
              Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ.
            </Col>
            <Col md={5} xl={3} className="mt-auto ps-0 text-end">
              <Link // should it change color on hover?
                className="mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5"
                href="/categories"
                style={{
                  display: 'inline-flex',
                  padding: '0.8rem 3rem',
                  textDecoration: 'none',
                  clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                  transition: '#1D1D1D .2s',
                }}
              >
                <span>Все категории</span>
                <iconify-icon icon="lucide:chevron-right" className="fs-4"></iconify-icon>
              </Link>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categories} className="mt-5" />

        {/* Work process */}
        <div className="pt-5">
          <Container className="overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary">
            <div
              className="d-none d-lg-flex"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 70% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0, 100% 100%, 30% 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <div
              className="d-flex d-lg-none flex-column"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 100% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0%, 100% 100%, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <Row
              className="position-relative z-1 justify-content-between"
              style={{ paddingTop: '80px' }}
            >
              {/* Work process label */}
              <Col
                lg={3}
                className="px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white"
              >
                <h1>процесс&nbsp;</h1>
                <h1 className="ms-lg-auto">работы</h1>
              </Col>

              {/* The table */}
              <Col lg={9} className="position-relative z-2 pe-4 pe-lg-5">
                <Container
                  className="d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1"
                  style={{
                    boxShadow: ' 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)',
                  }}
                >
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">01</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Вы оставляете заявку</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор.
                      </span>
                    </Col>
                  </Row>
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">02</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Находим и проверяем поставщика</h5>
                    </Col>
                    <Col md={7}>
                      <span>Сравниваем предложения, проверяем документы и товар перед закупкой.</span>
                    </Col>
                  </Row>

                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">03</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Оформляем и доставляем покупателю</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Закупаем товар, проверяем качество, оформляем таможенные документы и
                        организуем доставку на склад или по адресу.
                      </span>
                    </Col>
                  </Row>
                </Container>
              </Col>
            </Row>
          </Container>
        </div>

        {/* Our partners */}
        <OurPartners style={{ marginTop: '100px' }} />

        {/* FAQ */}
        <FAQ style={{ marginTop: '100px', paddingBottom: '100px' }} />
      </>
    )
  } satisfies PageJsx)

fetch_data:
  export default async function ({ deps }) {
      const payload = await deps.app.getPayload();
      const data = await payload.find({
          collection: 'categories',
          where: {
              'attributes.key': {
                  in: ['homeWidth', 'homeOrder'],
              },
              hidden: {
                  equals: false,
              },
          },
      });
      return data.docs;
  }

code:
  export default function({runtime:e,components:{ParallelogramGrid:s,CompanyBenefits:l,OurPartners:r,FAQ:a,CategoriesGrid:i},deps:{rb:{Container:t,Image:n,Row:o,Col:d},next:{Link:c}},props:{data:m}}){let x=m.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),r=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(r?.number??0)});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"position-relative d-flex justify-content-center w-100",children:[e.jsx(t,{className:"position-absolute z-1 mx-auto h-100",children:e.jsx(o,{className:"row-gap-5 row-gap-sm-0 h-100 align-content-center",children:e.jsx(d,{lg:7,children:e.jsxs("div",{className:"d-flex flex-column",style:{rowGap:"2rem"},children:[e.jsx("div",{children:e.jsx("h1",{className:"text-uppercase fw-bold mb-0 text-light",style:{fontSize:"clamp(32px, 8vw, 52px)",lineHeight:"1"},children:"Поставки автомобилей, оборудования и товаров из Китая"})}),e.jsx(c,{className:"bg-primary text-white me-auto fs-5",href:"#footer-anchor",style:{display:"inline-block",padding:"1rem 2rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})]})})})}),e.jsx("div",{className:"video-container",style:{position:"relative",width:"100%",minHeight:"clamp(576px, 80vw, 810px)",overflow:"hidden",background:"linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))"},children:e.jsx("video",{src:"/api/media/file/video_bg.mp4",loop:!0,autoPlay:!0,muted:!0,className:"object-fit-cover position-absolute w-100 h-100",style:{mixBlendMode:"multiply"}})})]}),e.jsx(l,{}),e.jsx(t,{style:{marginTop:"100px"},children:e.jsxs(o,{className:"d-flex flex-column flex-md-row justify-content-between",children:[e.jsxs(d,{xl:3,className:"d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Категории "}),e.jsx("h1",{className:"mb-0 ms-xl-auto lh-1 text-primary",children:"Товаров"})]}),e.jsx(d,{md:7,xl:5,className:"mt-auto",children:"Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ."}),e.jsx(d,{md:5,xl:3,className:"mt-auto ps-0 text-end",children:e.jsxs(c,{className:"mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5",href:"/categories",style:{display:"inline-flex",padding:"0.8rem 3rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:[e.jsx("span",{children:"Все категории"}),e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"fs-4"})]})})]})}),e.jsx(i,{categories:x,className:"mt-5"}),e.jsx("div",{className:"pt-5",children:e.jsxs(t,{className:"overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary",children:[e.jsxs("div",{className:"d-none d-lg-flex",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 70% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0, 100% 100%, 30% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs("div",{className:"d-flex d-lg-none flex-column",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 100% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0%, 100% 100%, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs(o,{className:"position-relative z-1 justify-content-between",style:{paddingTop:"80px"},children:[e.jsxs(d,{lg:3,className:"px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white",children:[e.jsx("h1",{children:"процесс "}),e.jsx("h1",{className:"ms-lg-auto",children:"работы"})]}),e.jsx(d,{lg:9,className:"position-relative z-2 pe-4 pe-lg-5",children:e.jsxs(t,{className:"d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1",style:{boxShadow:" 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)"},children:[e.jsxs(o,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"01"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Вы оставляете заявку"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор."})})]}),e.jsxs(o,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"02"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Находим и проверяем поставщика"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Сравниваем предложения, проверяем документы и товар перед закупкой."})})]}),e.jsxs(o,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"03"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Оформляем и доставляем покупателю"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Закупаем товар, проверяем качество, оформляем таможенные документы и организуем доставку на склад или по адресу."})})]})]})})]})]})}),e.jsx(r,{style:{marginTop:"100px"}}),e.jsx(a,{style:{marginTop:"100px",paddingBottom:"100px"}})]})}


title: О компании
path: /about
src_type: jsx
updated_at: 2025-11-17T09:51:42.035Z
created_at: 2025-11-17T09:48:13.851Z
_status: published
jsx:
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { OurPartners, FAQ },
    deps: {
      rb: { Container, Image, Row, Col },
    },
  }) {
    return (
      <>
        {/* Asiapartner is trustworthy */}
        <Container style={{ marginTop: '80px' }}>
          <Row className="row-gap-3">
            <Col className="text-uppercase" lg={5}>
              <h1 style={{ fontWeight: '800' }}>
                AsiaPartner —
                <br />
                ваш надёжный
                <br />
                <span className="text-primary">партнёр из Азии</span>
              </h1>
            </Col>
            <Col className="mt-auto" lg={7}>
              <span>
                Asia Partner доставляет сертифицированные товары из Азии напрямую. В каталоге свыше
                3000 наименований, 200+ отзывов довольных клиентов и строгий контроль качества на
                каждом этапе.
              </span>
            </Col>
          </Row>
        </Container>

        {/* Handshake */}
        <div className="position-relative mt-4" style={{ height: 'clamp(200px, 30vw, 400px)' }}>
          <Image
            src="/api/media/file/handshake.jpg"
            alt="handshake"
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              display: 'block',
            }}
          />
        </div>

        <Container>
          <Row>
            <Col className="pb-4">
              <img src="/api/media/file/asiapartner-logo.png" className="d-block mx-auto my-5" />
              <div className="text-center h5">
                Asia Partner - Российско-Кыргызская экспортно-импортная компания,
                <br />
                более 17 лет предоставляем широкий спектр торгово-экономических и транспортных услуг
                по работе с Китаем
              </div>
            </Col>
          </Row>
          <Row>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:headphone-1"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Премиум сервис</div>
              <div className="h6">
                Ваш персональный менеджер всегда на связи и готов обсудить индивидуальные условия.
              </div>
            </Col>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:shield-dollar"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Индивидуальный подход и Выгодные цены</div>
              <div className="h6">
                Доставка автомобилей и аксессуаров, недоступных на локальном рынке, широкий выбор
                марок, моделей и комплектаций и любых Новинок Китайского автопрома!.
              </div>
            </Col>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:truck-delivery-1"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Доставка Электро и Автомобилей из Китая</div>
              <div className="h6">
                Лучшие цены ниже дилерских на китайские и зарубежные автомобили.
              </div>
            </Col>
          </Row>
        </Container>

        {/* Our partners */}
        {/* <OurPartners style={{ marginTop: '100px' }} /> */}

        {/* Company statistics */}
        <div className="overflow-hidden mb-5">
          <div className="" style={{ paddingTop: '120px' }}>
            <Container
              className="position-relative pb-4 pt-lg-0 px-0 bg-primary"
              style={{ paddingBottom: '2rem !important' }}
            >
              <div
                className="d-none d-lg-flex"
                style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
              >
                <div
                  className="w-50 h-100"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 100%, 0 0, 70% 0)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
                <div
                  className="w-50 h-100"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(100% 0, 100% 100%, 30% 100%)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
              </div>
              <div
                className="d-flex flex-column d-lg-none"
                style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
              >
                <div
                  className="w-100 h-50"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 70%, 0 0, 100% 0)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
                <div
                  className="w-100 h-50"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 100%, 100% 30%, 100% 100%)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
              </div>
              {/* fontSize: 'clamp(44px, 12vw, 172px)', */}
              {/* Lg statistics */}
              <Row
                className="position-relative mx-5 pt-3 pb-1 d-none d-lg-flex"
                style={{ backgroundColor: 'var(--bs-body-bg)', top: '-80px' }}
              >
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    94%
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Клиентов возвращаются снова
                  </span>
                </Col>
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    15
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Дней до доставки в кратчайший срок
                  </span>
                </Col>
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    3
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Контейнера в месяц в среднем
                  </span>
                </Col>
              </Row>

              <Row className="px-4 px-lg-5">
                <Col lg={7} className="position-relative py-4 py-lg-0">
                  <h1 className="text-uppercase fw-medium text-white">
                    Скорость.
                    <br />
                    Масштаб.
                    <br />
                    Повторные заказы.
                  </h1>
                </Col>
                <Row
                  className="position-relative d-lg-none d-flex flex-column row-gap-2 ms-auto me-n4 px-0 w-auto pt-4 text-center shadow"
                  style={{ backgroundColor: 'var(--bs-body-bg)', maxWidth: '250px' }}
                >
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      94%
                    </h1>
                    <div
                      className="position-relative px-2 z-1"
                      style={{
                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Клиентов возвращаются снова
                    </div>
                  </Col>
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      15
                    </h1>
                    <div
                      className="d-flex position-relative px-2 z-1"
                      style={{
                        maxWidth: '100%', // don't exceed the column
                        wordWrap: 'break-word', // help force wrapping if needed
                        overflowWrap: 'break-word',

                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Дней до доставки в кратчайший срок
                    </div>
                  </Col>
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      3
                    </h1>
                    <div
                      className="position-relative px-2 z-1"
                      style={{
                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Контейнера в месяц в среднем
                    </div>
                  </Col>
                </Row>
              </Row>
            </Container>
          </div>
        </div>

        {/* FAQ */}
        {/* <FAQ style={{ marginTop: '100px', paddingBottom: '100px' }} /> */}
      </>
    )
  } satisfies PageJsx)

code:
  export default function({runtime:e,components:{OurPartners:s,FAQ:r},deps:{rb:{Container:a,Image:l,Row:i,Col:t}}}){return e.jsxs(e.Fragment,{children:[e.jsx(a,{style:{marginTop:"80px"},children:e.jsxs(i,{className:"row-gap-3",children:[e.jsx(t,{className:"text-uppercase",lg:5,children:e.jsxs("h1",{style:{fontWeight:"800"},children:["AsiaPartner —",e.jsx("br",{}),"ваш надёжный",e.jsx("br",{}),e.jsx("span",{className:"text-primary",children:"партнёр из Азии"})]})}),e.jsx(t,{className:"mt-auto",lg:7,children:e.jsx("span",{children:"Asia Partner доставляет сертифицированные товары из Азии напрямую. В каталоге свыше 3000 наименований, 200+ отзывов довольных клиентов и строгий контроль качества на каждом этапе."})})]})}),e.jsx("div",{className:"position-relative mt-4",style:{height:"clamp(200px, 30vw, 400px)"},children:e.jsx(l,{src:"/api/media/file/handshake.jpg",alt:"handshake",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})}),e.jsxs(a,{children:[e.jsx(i,{children:e.jsxs(t,{className:"pb-4",children:[e.jsx("img",{src:"/api/media/file/asiapartner-logo.png",className:"d-block mx-auto my-5"}),e.jsxs("div",{className:"text-center h5",children:["Asia Partner - Российско-Кыргызская экспортно-импортная компания,",e.jsx("br",{}),"более 17 лет предоставляем широкий спектр торгово-экономических и транспортных услуг по работе с Китаем"]})]})}),e.jsxs(i,{children:[e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:headphone-1",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Премиум сервис"}),e.jsx("div",{className:"h6",children:"Ваш персональный менеджер всегда на связи и готов обсудить индивидуальные условия."})]}),e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:shield-dollar",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Индивидуальный подход и Выгодные цены"}),e.jsx("div",{className:"h6",children:"Доставка автомобилей и аксессуаров, недоступных на локальном рынке, широкий выбор марок, моделей и комплектаций и любых Новинок Китайского автопрома!."})]}),e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:truck-delivery-1",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Доставка Электро и Автомобилей из Китая"}),e.jsx("div",{className:"h6",children:"Лучшие цены ниже дилерских на китайские и зарубежные автомобили."})]})]})]}),e.jsx("div",{className:"overflow-hidden mb-5",children:e.jsx("div",{className:"",style:{paddingTop:"120px"},children:e.jsxs(a,{className:"position-relative pb-4 pt-lg-0 px-0 bg-primary",style:{paddingBottom:"2rem !important"},children:[e.jsxs("div",{className:"d-none d-lg-flex",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 100%, 0 0, 70% 0)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0, 100% 100%, 30% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs("div",{className:"d-flex flex-column d-lg-none",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 70%, 0 0, 100% 0)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 100%, 100% 30%, 100% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs(i,{className:"position-relative mx-5 pt-3 pb-1 d-none d-lg-flex",style:{backgroundColor:"var(--bs-body-bg)",top:"-80px"},children:[e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"94%"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Клиентов возвращаются снова"})]}),e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"15"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Дней до доставки в кратчайший срок"})]}),e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"3"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Контейнера в месяц в среднем"})]})]}),e.jsxs(i,{className:"px-4 px-lg-5",children:[e.jsx(t,{lg:7,className:"position-relative py-4 py-lg-0",children:e.jsxs("h1",{className:"text-uppercase fw-medium text-white",children:["Скорость.",e.jsx("br",{}),"Масштаб.",e.jsx("br",{}),"Повторные заказы."]})}),e.jsxs(i,{className:"position-relative d-lg-none d-flex flex-column row-gap-2 ms-auto me-n4 px-0 w-auto pt-4 text-center shadow",style:{backgroundColor:"var(--bs-body-bg)",maxWidth:"250px"},children:[e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"94%"}),e.jsx("div",{className:"position-relative px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Клиентов возвращаются снова"})]}),e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"15"}),e.jsx("div",{className:"d-flex position-relative px-2 z-1",style:{maxWidth:"100%",wordWrap:"break-word",overflowWrap:"break-word",backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Дней до доставки в кратчайший срок"})]}),e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"3"}),e.jsx("div",{className:"position-relative px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Контейнера в месяц в среднем"})]})]})]})]})})})]})}


title: Контакты
path: /contacts
src_type: jsx
updated_at: 2025-11-17T10:39:54.703Z
created_at: 2025-11-17T09:48:13.878Z
_status: published
jsx:
  import type { Form } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Form },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    const formData = data?.formData
    return (
      <>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1462.1171926811026!2d74.57999676365375!3d42.86789679569354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9444cb1ab61%3A0x9099b136b1f4b28f!2zTmV0Y28g0L7QvdC70LDQudC9INC80LDRgNC60LXRgg!5e0!3m2!1sru!2skg!4v1755187004065!5m2!1sru!2skg"
          allowFullScreen={false}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          style={{
            position: 'absolute',
  		  paddingTop: '70px',
            height: '100%',
            width: '100%',
            filter: 'invert(90%) hue-rotate(180deg) brightness(90%) contrast(85%)',
          }}
        />
        <Container>
          <Row style={{ minHeight: '60vh' }} className="d-block d-md-none" />
          <Row className="d-flex justify-content-end px-2 mb-5">
            <Col
              sm={10}
              md={4}
              className="position-relative z-2 py-5 px-4 bg-dark rounded"
              style={{ top: '80px' }}
            >
              <Form formData={formData} />
            </Col>
          </Row>
        </Container>
      </>
    )
  } satisfies PageJsx<{ formData: Form }>)

fetch_data:
  export default async function FetchData({ deps }) {
      const payload = await deps.app.getPayload();
      const config = await deps.app.getGlobalConfig();
      const formId = config.forms.feedbackForm || 0;
      const formData = await payload.find({
          collection: 'forms',
          where: {
              id: formId,
          },
          pagination: false,
      });
      return { formData: formData.docs[0] };
  }

code:
  export default function({runtime:e,components:{Form:s},deps:{rb:{Container:r,Row:t,Col:d}},props:{data:n}}){let o=n?.formData;return e.jsxs(e.Fragment,{children:[e.jsx("iframe",{src:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1462.1171926811026!2d74.57999676365375!3d42.86789679569354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9444cb1ab61%3A0x9099b136b1f4b28f!2zTmV0Y28g0L7QvdC70LDQudC9INC80LDRgNC60LXRgg!5e0!3m2!1sru!2skg!4v1755187004065!5m2!1sru!2skg",allowFullScreen:!1,loading:"lazy",referrerPolicy:"no-referrer-when-downgrade",style:{position:"absolute",paddingTop:"70px",height:"100%",width:"100%",filter:"invert(90%) hue-rotate(180deg) brightness(90%) contrast(85%)"}}),e.jsxs(r,{children:[e.jsx(t,{style:{minHeight:"60vh"},className:"d-block d-md-none"}),e.jsx(t,{className:"d-flex justify-content-end px-2 mb-5",children:e.jsx(d,{sm:10,md:4,className:"position-relative z-2 py-5 px-4 bg-dark rounded",style:{top:"80px"},children:e.jsx(s,{formData:o})})})]})]})}


title: Категории
path: /categories
src_type: jsx
updated_at: 2025-11-17T10:42:55.284Z
created_at: 2025-11-17T09:48:13.902Z
_status: published
jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { CategoriesGrid, ProductsGrid, Breadcrumb },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    let categoryItems = data?.categories.docs || []
    categoryItems = categoryItems.sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        <Container>
          <Breadcrumb pathMap={[{ label: 'Главная', link: '/' }, { label: 'Каталог' }]} />
          <Row className="d-flex flex-column flex-md-row justify-content-between mt-4">
            <Col sm={9} lg={6} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Каталог товаров</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">из Азии под заказ</h1>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categoryItems} className="my-5" />

        {/*<Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xs={8} sm={6} lg={4} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Популярные</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">товары</h1>
            </Col>
          </Row>
        </Container>
        <ProductsGrid productData={data?.popularProducts} style={{ marginBottom: '100px' }} />*/}
      </>
    )
  } satisfies PageJsx<{
    categories: PaginatedDocs<Category>
    popularProducts: PaginatedDocs<Product>
  }>)

fetch_data:
  export default async function FetchData({ deps: { app } }) {
      const payload = await app.getPayload();
      const categories = await payload.find({
          collection: 'categories',
          where: {
              'attributes.key': {
                  in: ['homeWidth', 'homeOrder'],
              },
              hidden: {
                  equals: false,
              },
          },
      });
      const popularProducts = await payload.find({
          collection: 'products',
          where: {
              'attributes.key': {
                  equals: 'isPopular',
              },
              'attributes.boolean': {
                  equals: true,
              },
              hidden: {
                  equals: false,
              },
              'category.hidden': {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              img: true,
              category: true,
          },
          pagination: false,
      });
      return { categories, popularProducts };
  }

code:
  export default function({runtime:e,components:{CategoriesGrid:s,ProductsGrid:l,Breadcrumb:r},deps:{rb:{Container:t,Row:a,Col:n}},props:{data:m}}){let c=m?.categories.docs||[];return c=c.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),r=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(r?.number??0)}),e.jsxs(e.Fragment,{children:[e.jsxs(t,{children:[e.jsx(r,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог"}]}),e.jsx(a,{className:"d-flex flex-column flex-md-row justify-content-between mt-4",children:e.jsxs(n,{sm:9,lg:6,className:"d-flex flex-column mb-xl-0 mb-2 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Каталог товаров"}),e.jsx("h1",{className:"mb-0 ms-auto lh-1 text-primary",children:"из Азии под заказ"})]})})]}),e.jsx(s,{categories:c,className:"my-5"})]})}


generate_metadata:
  export default async function ({ data }) {
  return { title: data.currentCategory.name };
  }

title: Категории слаг
path: /categories/:slug
src_type: jsx
updated_at: 2025-11-18T11:53:25.344Z
created_at: 2025-11-17T09:48:13.942Z
_status: published
jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Breadcrumb, Template, Slider, RichText, ProductCard },
    deps: {
      rb: { Container, Image, Row, Col, Pagination },
      next: { Link },
    },
    props: { route, data },
  }) {
    let template = undefined
    const { categoriesData, productData, currentCategory } = data!
    const templateData = currentCategory.template || undefined
    const { docs, totalPages, page = 1 } = productData
    const categoryName = currentCategory.name

    const categoryElements = categoriesData.docs.map((category: Category) => {
      const imgUrl = (typeof category.img !== 'number' && category.img?.sizes?.main?.url) || undefined

      return (
        <Link
          href={`/categories/${category.slug}`}
          key={category.slug}
          className="link-light hover-zoom overflow-hidden"
          style={{ display: 'block', position: 'relative', height: '100%' }}
        >
          <Image
            src={imgUrl}
            alt={category.name}
            className="hz-target"
            style={{
              width: '250px',
              height: '250px',
              objectFit: 'cover',
              display: 'block',
            }}
          />
          <div
            style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              width: '100%',
              height: '50%',
              background: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)',
              pointerEvents: 'none',
            }}
          />
          <h5 className="position-absolute bottom-0 mx-4 mb-4 fw-semibold">{category.name}</h5>
        </Link>
      )
    })
    if (templateData) {
      template = <Template template={templateData} className="my-5" {...{ route, data }} />
    } else {
      template = (
        <Container className="my-5">
          <Row className="row-gap-4">
            {docs.map((p, i) => (
              <Col key={p.id} xs={12} sm={6} lg={3}>
                <Link
                  href={`${route.path}/${p.slug}`}
                  className="link-dark link-underline-opacity-0 link-underline-opacity-100-hover"
                >
                  <ProductCard product={p} />
                </Link>
              </Col>
            ))}
          </Row>
          {totalPages > 1 && (
            <Row className="py-5">
              <Pagination className="justify-content-center">
                <Pagination.First
                  as={Link}
                  href={`${route.path}?p=1`}
                  disabled={page === 1}
                  className="d-none d-sm-block"
                />
                <Pagination.Prev
                  as={Link}
                  href={`${route.path}?p=${page - 1}`}
                  disabled={page === 1}
                />

                {page > 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=1`}>
                    {1}
                  </Pagination.Item>
                )}
                {page > 3 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=2`} className="d-none d-sm-block">
                    {2}
                  </Pagination.Item>
                )}
                {page > 4 && <Pagination.Ellipsis className="d-none d-sm-block" />}

                {page > 2 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page - 1}`}>
                    {page - 1}
                  </Pagination.Item>
                )}
                <Pagination.Item as={Link} active>
                  {page}
                </Pagination.Item>
                {page < totalPages - 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page + 1}`}>
                    {page + 1}
                  </Pagination.Item>
                )}

                {page < totalPages - 3 && <Pagination.Ellipsis className="d-none d-sm-block" />}
                {page < totalPages - 2 && (
                  <Pagination.Item
                    as={Link}
                    href={`${route.path}?p=${totalPages - 1}`}
                    className="d-none d-sm-block"
                  >
                    {totalPages - 1}
                  </Pagination.Item>
                )}
                {page < totalPages && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${totalPages}`}>
                    {totalPages}
                  </Pagination.Item>
                )}

                <Pagination.Next
                  as={Link}
                  href={`${route.path}?p=${page + 1}`}
                  disabled={page === totalPages}
                />
                <Pagination.Last
                  as={Link}
                  href={`${route.path}?p=${totalPages}`}
                  disabled={page === totalPages}
                  className="d-none d-sm-block"
                />
              </Pagination>
            </Row>
          )}
        </Container>
      )
    }
    return (
      <>
        <div style={{ position: 'relative', height: '400px' }}>
          <Image
            src={'/api/media/file/categories-slug-bg.jpg'}
            alt="cars delivery background"
            className="position-absolute w-100 h-100"
            style={{ objectFit: 'cover' }}
          />
          <Container className="position-relative z-1 text-white">
            <Row style={{ paddingTop: '80px' }}>
              <Col xs={12}>
                <h1 className="text-uppercase">{currentCategory.name}</h1>
              </Col>
              <Col xs={0} lg={1} />
              <Col className="mt-lg-3" xs={12} lg={6}>
                <RichText data={currentCategory.description} />
              </Col>
            </Row>
          </Container>
          <div
            style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))',
              pointerEvents: 'none',
              mask: 'url(#fullpage-mask)',
              maskRepeat: 'no-repeat',
              maskPosition: 'bottom right',
            }}
          />

          <svg width="0" height="0" style={{ position: 'absolute' }}>
            <defs>
              <mask id="fullpage-mask">
                <rect width="100vw" height="100vh" fill="white" />
                <use href="#dynamic-mask-shapes" x={'calc(60vw)'} y={-50} />
              </mask>
            </defs>
          </svg>
        </div>
        <Container className="mt-4">
          <Row>
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}` },
              ]}
            />
          </Row>
        </Container>
        <div className="overflow-hidden mt-3">
          <Slider className="overflow-visible mx-3">{categoryElements}</Slider>
        </div>

        {template}
      </>
    )
  } satisfies PageJsx<{
    categoriesData: PaginatedDocs<Category>
    productData: PaginatedDocs<Product>
    currentCategory: Category
  }>)

fetch_data:
  export default async function ({ route, deps }) {
    const slug = route.params.slug
    if (!slug) {
      return undefined
    }

    const page = route.searchParams.p

    const payload = await deps.app.getPayload()
    const productData = await payload.find({
      collection: 'products',
      where: {
        'category.slug': {
          in: slug,
        },
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        img: true,
        category: true,
      },
      limit: 16,
      page: Number(page) || undefined,
      pagination: true,
    })

    const categoryData = await payload.find({
      collection: 'categories',
      where: {
        slug: {
          equals: slug,
        },
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        description: true,
        template: true,
      },
      populate: {
        template: {
          id: true,
          name: true,
          type: true,
          srcType: true,
          code: true,
          updatedAt: true,
        },
      },
      limit: 1,
      pagination: false,
    })

    const categoriesData = await payload.find({
      collection: 'categories',
      where: {
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        img: true,
      },
      pagination: false,
    })

    const currentCategory = categoryData.docs[0]

    if (!currentCategory) {
      return deps.next.notFound()
    }

    return { categoriesData, productData, currentCategory }
  }

code:
  export default function({runtime:e,components:{Breadcrumb:s,Template:a,Slider:l,RichText:i,ProductCard:t},deps:{rb:{Container:n,Image:r,Row:d,Col:o,Pagination:c},next:{Link:h}},props:{route:m,data:p}}){let x,{categoriesData:j,productData:g,currentCategory:b}=p,f=b.template||void 0,{docs:u,totalPages:v,page:k=1}=g,N=b.name,$=j.docs.map(s=>{let a="number"!=typeof s.img&&s.img?.sizes?.main?.url||void 0;return e.jsxs(h,{href:`/categories/${s.slug}`,className:"link-light hover-zoom overflow-hidden",style:{display:"block",position:"relative",height:"100%"},children:[e.jsx(r,{src:a,alt:s.name,className:"hz-target",style:{width:"250px",height:"250px",objectFit:"cover",display:"block"}}),e.jsx("div",{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"50%",background:"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)",pointerEvents:"none"}}),e.jsx("h5",{className:"position-absolute bottom-0 mx-4 mb-4 fw-semibold",children:s.name})]},s.slug)});return x=f?e.jsx(a,{template:f,className:"my-5",route:m,data:p}):e.jsxs(n,{className:"my-5",children:[e.jsx(d,{className:"row-gap-4",children:u.map((s,a)=>e.jsx(o,{xs:12,sm:6,lg:3,children:e.jsx(h,{href:`${m.path}/${s.slug}`,className:"link-dark link-underline-opacity-0 link-underline-opacity-100-hover",children:e.jsx(t,{product:s})})},s.id))}),v>1&&e.jsx(d,{className:"py-5",children:e.jsxs(c,{className:"justify-content-center",children:[e.jsx(c.First,{as:h,href:`${m.path}?p=1`,disabled:1===k,className:"d-none d-sm-block"}),e.jsx(c.Prev,{as:h,href:`${m.path}?p=${k-1}`,disabled:1===k}),k>1&&e.jsx(c.Item,{as:h,href:`${m.path}?p=1`,children:1}),k>3&&e.jsx(c.Item,{as:h,href:`${m.path}?p=2`,className:"d-none d-sm-block",children:2}),k>4&&e.jsx(c.Ellipsis,{className:"d-none d-sm-block"}),k>2&&e.jsx(c.Item,{as:h,href:`${m.path}?p=${k-1}`,children:k-1}),e.jsx(c.Item,{as:h,active:!0,children:k}),k<v-1&&e.jsx(c.Item,{as:h,href:`${m.path}?p=${k+1}`,children:k+1}),k<v-3&&e.jsx(c.Ellipsis,{className:"d-none d-sm-block"}),k<v-2&&e.jsx(c.Item,{as:h,href:`${m.path}?p=${v-1}`,className:"d-none d-sm-block",children:v-1}),k<v&&e.jsx(c.Item,{as:h,href:`${m.path}?p=${v}`,children:v}),e.jsx(c.Next,{as:h,href:`${m.path}?p=${k+1}`,disabled:k===v}),e.jsx(c.Last,{as:h,href:`${m.path}?p=${v}`,disabled:k===v,className:"d-none d-sm-block"})]})})]}),e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{position:"relative",height:"400px"},children:[e.jsx(r,{src:"/api/media/file/categories-slug-bg.jpg",alt:"cars delivery background",className:"position-absolute w-100 h-100",style:{objectFit:"cover"}}),e.jsx(n,{className:"position-relative z-1 text-white",children:e.jsxs(d,{style:{paddingTop:"80px"},children:[e.jsx(o,{xs:12,children:e.jsx("h1",{className:"text-uppercase",children:b.name})}),e.jsx(o,{xs:0,lg:1}),e.jsx(o,{className:"mt-lg-3",xs:12,lg:6,children:e.jsx(i,{data:b.description})})]})}),e.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))",pointerEvents:"none",mask:"url(#fullpage-mask)",maskRepeat:"no-repeat",maskPosition:"bottom right"}}),e.jsx("svg",{width:"0",height:"0",style:{position:"absolute"},children:e.jsx("defs",{children:e.jsxs("mask",{id:"fullpage-mask",children:[e.jsx("rect",{width:"100vw",height:"100vh",fill:"white"}),e.jsx("use",{href:"#dynamic-mask-shapes",x:"calc(60vw)",y:-50})]})})})]}),e.jsx(n,{className:"mt-4",children:e.jsx(d,{children:e.jsx(s,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${N}`}]})})}),e.jsx("div",{className:"overflow-hidden mt-3",children:e.jsx(l,{className:"overflow-visible mx-3",children:$})}),x]})}


generate_metadata:
  export default async function ({ data }) {
  return { title: data.productData?.name };
  }

title: Страница товара
path: /categories/:categorySlug/:productSlug
src_type: jsx
updated_at: 2025-12-02T05:54:50.316Z
created_at: 2025-11-17T09:48:13.973Z
_status: published
jsx:
  import type { Product, ProductImage } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ProductsGrid, Breadcrumb, Template, RichText },
    deps: {
      rb: { Container, Image, Row, Col, Button, Modal, Carousel },
      react: { useState },
      next: { Link },
    },
    props: { route, data },
  }) {
    const { productData, productSuggestions } = data!
    let templateData = undefined
    let template = undefined
    if (productData.template) {
      templateData = productData.template
    } else if (typeof productData.category !== 'number' && productData.category?.productTemplate) {
      templateData = productData.category.productTemplate
    }

    const [showPreview, setShowPreview] = useState(false)
    const [activeIndex, setActiveIndex] = useState(0)

    if (templateData) {
      template = <Template template={templateData} {...{ route, productData, productSuggestions }} />
    } else {
      const handleOpenPreview = (index: number) => {
        setActiveIndex(index)
        setShowPreview(true)
      }

      const handleClosePreview = () => {
        setShowPreview(false)
      }
      // @ts-ignore
      let productImages: ProductImage[] = productData.img || []
      if (!productImages || typeof productImages[0] === 'number') {
        productImages = []
      }

      const categorySlug = route.params.categorySlug
      const categoryName = typeof productData.category === 'number' ? '' : productData.category?.name
      const productName = productData.name
      const productProperties = Object.entries(productData.meta ?? {})
      const imagesCount = productImages.length || 0
      const previewSlots = Math.max(0, Math.min(imagesCount - 1, 4))
      const previewWidth = (previewSlots / 4) * 100

      const slicedImages = productImages.slice(1, Math.min(imagesCount, 4))
      const previewImages = slicedImages.map((img, index) => (
        <div
          key={index}
          // each item must be a flex item that can shrink
          style={{
            flex: '1 1 0', // allow shrinking and equal share
            minWidth: 0, // crucial for webkit (prevents overflow)
            height: '100%',
            display: 'block',
          }}
          onClick={() => handleOpenPreview(index + 1)}
          className="rounded-1"
        >
          <Image
            src={img.sizes?.small?.url || ''}
            alt={productName}
            style={{
              objectFit: 'cover',
              height: '100%',
              width: '100%',
              cursor: 'pointer',
              borderRadius: '0.25rem',
            }}
          />
        </div>
      ))

      if (imagesCount > 4) {
        // push the "more" overlay as one of the flex items with same item style
        previewImages.push(
          <div
            key={4}
            onClick={() => handleOpenPreview(4)}
            style={{
              flex: '1 1 0',
              minWidth: 0,
              height: '100%',
              position: 'relative',
              display: 'flex',
              justifyContent: 'center',
            }}
            className="cursor-pointer mb-4"
          >
            <Image
              src={productImages[4].url || ''}
              alt={productName}
              style={{
                display: 'block',
                objectFit: 'cover',
                width: '100%',
                height: '100%',
                borderRadius: '0.25rem',
              }}
            />
            {imagesCount > 5 && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    borderRadius: '0.25rem',
                  }}
                />
                <span className="position-absolute top-50 start-50 translate-middle fs-5 text-white">
                  +{imagesCount - 5}
                </span>
              </>
            )}
          </div>,
        )
      }

      const previewImagesStrip =
        imagesCount > 1 ? (
          <div
            className="d-flex gap-1 gap-lg-3"
            style={{
              width: previewWidth + '%',
              gap: '0.75rem', // use gap (supported widely) instead of justify-content-between
              alignItems: 'stretch',
              boxSizing: 'border-box',
              // optional: prevent rounding errors causing overflow
              overflow: 'hidden',
            }}
          >
            {previewImages}
          </div>
        ) : null

      template = (
        <>
          <Container className="mb-5">
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}`, link: `/categories/${categorySlug}` },
                { label: `${productName}` },
              ]}
            />

            <Row className="mb-5">
              <Col lg={6} className="d-flex flex-column gap-2 gap-lg-3">
                <h2 className="d-block d-lg-none mb-3 fw-semibold">{productName}</h2>
                <Image
                  src={productImages[0].sizes?.large?.url || ''}
                  alt={productName}
                  onClick={() => handleOpenPreview(0)}
                  className="img-fluid rounded-1 shadow"
                  style={{
                    aspectRatio: '4 / 3',
                    objectFit: 'cover',
                    height: 'auto',
                    width: '100%',
                    cursor: 'pointer',
                  }}
                />
                {previewImagesStrip}
                {/* Modal with carousel */}
                <Modal
                  show={showPreview}
                  onHide={handleClosePreview}
                  centered
                  size="xl"
                  contentClassName="bg-transparent border-0"
                >
                  <Modal.Body className="p-0 position-relative">
                    <Carousel
                      activeIndex={activeIndex}
                      onSelect={(selectedIndex) => setActiveIndex(selectedIndex)}
                      interval={null}
                      indicators={false}
                      nextIcon={
                        <iconify-icon
                          icon="lucide:chevron-right"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      prevIcon={
                        <iconify-icon
                          icon="lucide:chevron-left"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      controls={productImages.length > 1}
                    >
                      {productImages.map((img, index) => {
                        if (typeof img === 'number') {
                          return null
                        }
                        return (
                          <Carousel.Item key={index}>
                            <Image
                              src={img.url || ''}
                              alt={productName}
                              className="d-block w-100"
                              style={{
                                objectFit: 'contain',
                                maxHeight: 'calc(100vh - 180px)',
                              }}
                            />
                          </Carousel.Item>
                        )
                      })}
                    </Carousel>

                    {/* Thumbnail strip */}
                    {productImages.length > 1 && <div
                      className="d-flex justify-content-center mt-3 flex-wrap"
                      style={{ gap: '0.5rem' }}
                    >
                      {productImages.map((img, index) => {
                        return (
                          <Image
                            key={index}
                            src={img.sizes?.small?.url || ''}
                            alt={productName}
                            onClick={() => setActiveIndex(index)}
                            className={`rounded shadow-sm ${index === activeIndex ? 'border border-light border-3' : ''}`}
                            style={{
                              height: '90px',
                              width: '120px',
                              objectFit: 'cover',
                              cursor: 'pointer',
                            }}
                          />
                        )
                      })}
                    </div>}
                  </Modal.Body>
                </Modal>
              </Col>
              <Col lg={6} className="d-flex flex-column justify-content-between">
                <div>
                  <h2 className="d-none d-lg-block fw-semibold">{productName}</h2>
                  <h5 className="mt-5 mb-3 fw-semibold">Описание:</h5>
                  <RichText data={productData.description} />
                </div>
                <div>
                  {(() => {
                    const priceFrom =
                      productData.priceFrom &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceFrom,
                      )
                    const priceTo =
                      productData.priceTo &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceTo,
                      )

                    let price = undefined
                    if (priceFrom && priceTo) {
                      price = priceFrom === priceTo ? priceFrom : `от ${priceFrom} до ${priceTo}`
                    } else {
                      price = (priceFrom && `от ${priceFrom}`) || (priceTo && `до ${priceTo}`)
                    }
                    price = price && `${price} сом`

                    return price ? <h2 className="my-4 fw-semibold">{price}</h2> : undefined
                  })()}
                  <Button
                    href="#footer-anchor"
                    className="fs-5 rounded-0 text-white"
                    style={{ padding: '0.8rem 2rem' }}
                  >
                    Оставить заявку
                  </Button>
                </div>
              </Col>
            </Row>
            {productProperties.length > 0 && (<Row>
              <h5 className="mb-4 fw-semibold">Характеристики:</h5>
              <style>
                {`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}
              </style>
                <Col
                  style={{
                    display: 'grid',
                    rowGap: '1rem',
                    columnGap: '2rem',
                  }}
                  className="product-properties-grid"
                >
                  {productProperties.map(([key, value], index) => [
                    <div
                      key={index}
                      style={{ display: 'grid', columnGap: '1rem', gridTemplateColumns: '1fr 1fr' }}
                    >
                      <span>{key}:</span>
                      <span>{String(value)}</span>
                    </div>,
                  ])}
                </Col>
            </Row>
  		  ) || (
  			<Row className="py-5" />
  		  )}
            <Row
              className="row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white"
              style={{
                clipPath: 'polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)',
                marginTop: '2.5rem',
                marginBottom: '2.5rem',
              }}
            >
              <Col lg={4}>
                <h2 className="lh-1 text-uppercase">
                  Мы берём
                  <br />
                  ответственность
                  <br />
                  на себя
                </h2>
              </Col>
              <Col lg={4} className="d-flex flex-column justify-content-center row-gap-3 ms-auto">
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Договор на руках
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Проверка качества до отправки
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Доставка — до склада или на дом
                </div>
              </Col>
              <Col lg={3} className="d-flex flex-column justify-content-center mx-auto">
                <Link // should it change color on hover?
                  className="my-auto me-auto bg-white text-primary fs-6"
                  href="#footer-anchor"
                  style={{
                    display: 'inline-flex',
                    padding: '0.8rem 2rem',
                    textDecoration: 'none',
                    textWrap: 'nowrap',
                    clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                    transition: '#1D1D1D .2s',
                  }}
                >
                  Получить консультацию
                </Link>
              </Col>
            </Row>
            {/*<Row className="row-gap-3 mt-5">
              <Col
                lg={3}
                className="d-flex flex-lg-column mb-lg-0 text-uppercase"
                style={{ maxWidth: '500px' }}
              >
                <h1 className="lh-1">похожие&nbsp;</h1>
                <h1 className="mb-0 ms-lg-auto lh-1 text-primary">товары</h1>
              </Col>
              <Col lg={1} className="d-none d-lg-block"></Col>
              <Col className="mt-auto" lg={6}>
                <span>
                  Похожие варианты, которые могут заинтересовать вас и помочь сделать идеальный выбор.
                </span>
              </Col>
            </Row>*/}
          </Container>
          {/*<ProductsGrid productData={productSuggestions} className="mb-5" />*/}
        </>
      )
    }
    return <>{template}</>
  } satisfies PageJsx<{ productData: Product; productSuggestions: PaginatedDocs<Product> }>)

fetch_data:
  export default async function ({ route, deps }) {
      const categorySlug = route.params.categorySlug;
      const productSlug = route.params.productSlug;
      if (!categorySlug || !productSlug) {
          return undefined;
      }
      const payload = await deps.app.getPayload();
      const productSuggestions = await payload.find({
          collection: 'products',
          where: {
              'category.slug': {
                  equals: categorySlug,
              },
              slug: {
                  not_equals: productSlug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              priceFrom: true,
              priceTo: true,
              hidden: true,
              img: true,
              category: true,
          },
          limit: 4,
          pagination: false,
      });
      const productData = await payload.find({
          collection: 'products',
          where: {
              slug: {
                  equals: productSlug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              priceFrom: true,
              priceTo: true,
              img: true,
              category: true,
              meta: true,
              description: true,
          },
          limit: 1,
          pagination: false,
      });
      if (!productData.docs[0]) {
          return deps.next.notFound();
      }
      return {
          productData: productData.docs[0],
          productSuggestions: productSuggestions,
      };
  }

code:
  export default function({runtime:e,components:{ProductsGrid:s,Breadcrumb:l,Template:t,RichText:i},deps:{rb:{Container:r,Image:a,Row:c,Col:n,Button:o,Modal:d,Carousel:m},react:{useState:h},next:{Link:x}},props:{route:p,data:g}}){let u,j,{productData:f,productSuggestions:b}=g;f.template?u=f.template:"number"!=typeof f.category&&f.category?.productTemplate&&(u=f.category.productTemplate);let[y,N]=h(!1),[w,v]=h(0);if(u)j=e.jsx(t,{template:u,route:p,productData:f,productSuggestions:b});else{let s,t,h,g=e=>{v(e),N(!0)},u=f.img||[];u&&"number"!=typeof u[0]||(u=[]);let b=p.params.categorySlug,k="number"==typeof f.category?"":f.category?.name,F=f.name,$=Object.entries(f.meta??{}),C=u.length||0,z=Math.max(0,Math.min(C-1,4)),G=u.slice(1,Math.min(C,4)).map((s,l)=>e.jsx("div",{style:{flex:"1 1 0",minWidth:0,height:"100%",display:"block"},onClick:()=>g(l+1),className:"rounded-1",children:e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,style:{objectFit:"cover",height:"100%",width:"100%",cursor:"pointer",borderRadius:"0.25rem"}})},l));C>4&&G.push(e.jsxs("div",{onClick:()=>g(4),style:{flex:"1 1 0",minWidth:0,height:"100%",position:"relative",display:"flex",justifyContent:"center"},className:"cursor-pointer mb-4",children:[e.jsx(a,{src:u[4].url||"",alt:F,style:{display:"block",objectFit:"cover",width:"100%",height:"100%",borderRadius:"0.25rem"}}),C>5&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)",borderRadius:"0.25rem"}}),e.jsxs("span",{className:"position-absolute top-50 start-50 translate-middle fs-5 text-white",children:["+",C-5]})]})]},4));let I=C>1?e.jsx("div",{className:"d-flex gap-1 gap-lg-3",style:{width:z/4*100+"%",gap:"0.75rem",alignItems:"stretch",boxSizing:"border-box",overflow:"hidden"},children:G}):null;j=e.jsx(e.Fragment,{children:e.jsxs(r,{className:"mb-5",children:[e.jsx(l,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${k}`,link:`/categories/${b}`},{label:`${F}`}]}),e.jsxs(c,{className:"mb-5",children:[e.jsxs(n,{lg:6,className:"d-flex flex-column gap-2 gap-lg-3",children:[e.jsx("h2",{className:"d-block d-lg-none mb-3 fw-semibold",children:F}),e.jsx(a,{src:u[0].sizes?.large?.url||"",alt:F,onClick:()=>g(0),className:"img-fluid rounded-1 shadow",style:{aspectRatio:"4 / 3",objectFit:"cover",height:"auto",width:"100%",cursor:"pointer"}}),I,e.jsx(d,{show:y,onHide:()=>{N(!1)},centered:!0,size:"xl",contentClassName:"bg-transparent border-0",children:e.jsxs(d.Body,{className:"p-0 position-relative",children:[e.jsx(m,{activeIndex:w,onSelect:e=>v(e),interval:null,indicators:!1,nextIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"text-black",style:{fontSize:"100px"}}),prevIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-left",className:"text-black",style:{fontSize:"100px"}}),controls:u.length>1,children:u.map((s,l)=>"number"==typeof s?null:e.jsx(m.Item,{children:e.jsx(a,{src:s.url||"",alt:F,className:"d-block w-100",style:{objectFit:"contain",maxHeight:"calc(100vh - 180px)"}})},l))}),u.length>1&&e.jsx("div",{className:"d-flex justify-content-center mt-3 flex-wrap",style:{gap:"0.5rem"},children:u.map((s,l)=>e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,onClick:()=>v(l),className:`rounded shadow-sm ${l===w?"border border-light border-3":""}`,style:{height:"90px",width:"120px",objectFit:"cover",cursor:"pointer"}},l))})]})})]}),e.jsxs(n,{lg:6,className:"d-flex flex-column justify-content-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"d-none d-lg-block fw-semibold",children:F}),e.jsx("h5",{className:"mt-5 mb-3 fw-semibold",children:"Описание:"}),e.jsx(i,{data:f.description})]}),e.jsxs("div",{children:[(s=f.priceFrom&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceFrom),t=f.priceTo&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceTo),(h=(h=s&&t?s===t?s:`от ${s} до ${t}`:s&&`от ${s}`||t&&`до ${t}`)&&`${h} сом`)?e.jsx("h2",{className:"my-4 fw-semibold",children:h}):void 0),e.jsx(o,{href:"#footer-anchor",className:"fs-5 rounded-0 text-white",style:{padding:"0.8rem 2rem"},children:"Оставить заявку"})]})]})]}),$.length>0&&e.jsxs(c,{children:[e.jsx("h5",{className:"mb-4 fw-semibold",children:"Характеристики:"}),e.jsx("style",{children:`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}),e.jsx(n,{style:{display:"grid",rowGap:"1rem",columnGap:"2rem"},className:"product-properties-grid",children:$.map(([s,l],t)=>[e.jsxs("div",{style:{display:"grid",columnGap:"1rem",gridTemplateColumns:"1fr 1fr"},children:[e.jsxs("span",{children:[s,":"]}),e.jsx("span",{children:String(l)})]},t)])})]})||e.jsx(c,{className:"py-5"}),e.jsxs(c,{className:"row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white",style:{clipPath:"polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)",marginTop:"2.5rem",marginBottom:"2.5rem"},children:[e.jsx(n,{lg:4,children:e.jsxs("h2",{className:"lh-1 text-uppercase",children:["Мы берём",e.jsx("br",{}),"ответственность",e.jsx("br",{}),"на себя"]})}),e.jsxs(n,{lg:4,className:"d-flex flex-column justify-content-center row-gap-3 ms-auto",children:[e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Договор на руках"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Проверка качества до отправки"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Доставка — до склада или на дом"]})]}),e.jsx(n,{lg:3,className:"d-flex flex-column justify-content-center mx-auto",children:e.jsx(x,{className:"my-auto me-auto bg-white text-primary fs-6",href:"#footer-anchor",style:{display:"inline-flex",padding:"0.8rem 2rem",textDecoration:"none",textWrap:"nowrap",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})})]})]})})}return e.jsx(e.Fragment,{children:j})}


# _pages_v

version_title: Главная
version_path: /
version_src_type: jsx
version_updated_at: 2025-11-17T09:48:13.822Z
version_created_at: 2025-11-17T09:48:13.822Z
version__status: published
created_at: 2025-11-17T09:48:13.831Z
updated_at: 2025-11-17T09:48:13.831Z
version_jsx:
  import type { Category } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ParallelogramGrid, CompanyBenefits, OurPartners, FAQ, CategoriesGrid },
    deps: {
      rb: { Container, Image, Row, Col },
      next: { Link },
    },
    props: { data },
  }) {
    const categories = (data as Category[]).sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        {/* Hero */}
        <div className="position-relative d-flex justify-content-center w-100">
          <Container className="position-absolute z-1 mx-auto h-100">
            <Row className="row-gap-5 row-gap-sm-0 h-100 align-content-center">
              <Col lg={7}>
                <div className="d-flex flex-column" style={{ rowGap: '2rem' }}>
                  <div>
                    <h1
                      className="text-uppercase fw-bold mb-0"
                      style={{
                        fontSize: 'clamp(32px, 8vw, 52px)',
                        lineHeight: '1',
                        color: '#f1ca1a',
                      }}
                    >
                      Поставки автомобилей, оборудования и товаров из Китая
                    </h1>
                  </div>
                  <Link // should it change color on hover?
                    className="bg-primary text-white me-auto fs-5"
                    href="#footer-anchor"
                    style={{
                      display: 'inline-block',
                      padding: '1rem 2rem',
                      textDecoration: 'none',
                      clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                      transition: '#1D1D1D .2s',
                    }}
                  >
                    Получить консультацию
                  </Link>
                </div>
              </Col>
            </Row>
          </Container>

          {/* Video */}
          <div
            className="video-container"
            style={{
              position: 'relative',
              width: '100%',
              minHeight: 'clamp(576px, 80vw, 810px)', // 1920:1080 = 16:9 = 1440:810; 1440 * 0.4 = 576
              overflow: 'hidden',
              background:
                'linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))',
            }}
          >
            <video
              src="/api/media/file/video_bg.mp4"
              loop
              autoPlay
              muted
              className="object-fit-cover position-absolute w-100 h-100"
              style={{
                mixBlendMode: 'multiply',
              }}
            />
          </div>
        </div>

        {/* Company benefits */}
        <CompanyBenefits />

        {/* Categories */}
        <Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xl={3} className="d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase">
              <h1 className="lh-1">Категории&nbsp;</h1>
              <h1 className="mb-0 ms-xl-auto lh-1 text-primary">Товаров</h1>
            </Col>
            <Col md={7} xl={5} className="mt-auto">
              Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ.
            </Col>
            <Col md={5} xl={3} className="mt-auto ps-0 text-end">
              <Link // should it change color on hover?
                className="mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5"
                href="/categories"
                style={{
                  display: 'inline-flex',
                  padding: '0.8rem 3rem',
                  textDecoration: 'none',
                  clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                  transition: '#1D1D1D .2s',
                }}
              >
                <span>Все категории</span>
                <iconify-icon icon="lucide:chevron-right" className="fs-4"></iconify-icon>
              </Link>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categories} className="mt-5" />

        {/* Work process */}
        <div className="pt-5">
          <Container className="overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary">
            <div
              className="d-none d-lg-flex"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 70% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0, 100% 100%, 30% 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <div
              className="d-flex d-lg-none flex-column"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 100% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0%, 100% 100%, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <Row
              className="position-relative z-1 justify-content-between"
              style={{ paddingTop: '80px' }}
            >
              {/* Work process label */}
              <Col
                lg={3}
                className="px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white"
              >
                <h1>процесс&nbsp;</h1>
                <h1 className="ms-lg-auto">работы</h1>
              </Col>

              {/* The table */}
              <Col lg={9} className="position-relative z-2 pe-4 pe-lg-5">
                <Container
                  className="d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1"
                  style={{
                    boxShadow: ' 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)',
                  }}
                >
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">01</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Вы оставляете заявку</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор.
                      </span>
                    </Col>
                  </Row>
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">02</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Находим и проверяем поставщика</h5>
                    </Col>
                    <Col md={7}>
                      <span>Сравниваем предложения, проверяем документы и товар перед закупкой.</span>
                    </Col>
                  </Row>

                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">03</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Оформляем и доставляем покупателю</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Закупаем товар, проверяем качество, оформляем таможенные документы и
                        организуем доставку на склад или по адресу.
                      </span>
                    </Col>
                  </Row>
                </Container>
              </Col>
            </Row>
          </Container>
        </div>

        {/* Our partners */}
        <OurPartners style={{ marginTop: '100px' }} />

        {/* FAQ */}
        <FAQ style={{ marginTop: '100px', paddingBottom: '100px' }} />
      </>
    )
  } satisfies PageJsx)

version_fetch_data:
  export default async function ({ deps }) {
      const payload = await deps.app.getPayload();
      const data = await payload.find({
          collection: 'categories',
          where: {
              'attributes.key': {
                  in: ['homeWidth', 'homeOrder'],
              },
              hidden: {
                  equals: false,
              },
          },
      });
      return data.docs;
  }

version_code:
  export default function({runtime:e,components:{ParallelogramGrid:s,CompanyBenefits:l,OurPartners:r,FAQ:a,CategoriesGrid:i},deps:{rb:{Container:o,Image:n,Row:t,Col:d},next:{Link:c}},props:{data:m}}){let x=m.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),r=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(r?.number??0)});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"position-relative d-flex justify-content-center w-100",children:[e.jsx(o,{className:"position-absolute z-1 mx-auto h-100",children:e.jsx(t,{className:"row-gap-5 row-gap-sm-0 h-100 align-content-center",children:e.jsx(d,{lg:7,children:e.jsxs("div",{className:"d-flex flex-column",style:{rowGap:"2rem"},children:[e.jsx("div",{children:e.jsx("h1",{className:"text-uppercase fw-bold mb-0",style:{fontSize:"clamp(32px, 8vw, 52px)",lineHeight:"1",color:"#f1ca1a"},children:"Поставки автомобилей, оборудования и товаров из Китая"})}),e.jsx(c,{className:"bg-primary text-white me-auto fs-5",href:"#footer-anchor",style:{display:"inline-block",padding:"1rem 2rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})]})})})}),e.jsx("div",{className:"video-container",style:{position:"relative",width:"100%",minHeight:"clamp(576px, 80vw, 810px)",overflow:"hidden",background:"linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))"},children:e.jsx("video",{src:"/api/media/file/video_bg.mp4",loop:!0,autoPlay:!0,muted:!0,className:"object-fit-cover position-absolute w-100 h-100",style:{mixBlendMode:"multiply"}})})]}),e.jsx(l,{}),e.jsx(o,{style:{marginTop:"100px"},children:e.jsxs(t,{className:"d-flex flex-column flex-md-row justify-content-between",children:[e.jsxs(d,{xl:3,className:"d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Категории "}),e.jsx("h1",{className:"mb-0 ms-xl-auto lh-1 text-primary",children:"Товаров"})]}),e.jsx(d,{md:7,xl:5,className:"mt-auto",children:"Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ."}),e.jsx(d,{md:5,xl:3,className:"mt-auto ps-0 text-end",children:e.jsxs(c,{className:"mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5",href:"/categories",style:{display:"inline-flex",padding:"0.8rem 3rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:[e.jsx("span",{children:"Все категории"}),e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"fs-4"})]})})]})}),e.jsx(i,{categories:x,className:"mt-5"}),e.jsx("div",{className:"pt-5",children:e.jsxs(o,{className:"overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary",children:[e.jsxs("div",{className:"d-none d-lg-flex",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 70% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0, 100% 100%, 30% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs("div",{className:"d-flex d-lg-none flex-column",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 100% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0%, 100% 100%, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs(t,{className:"position-relative z-1 justify-content-between",style:{paddingTop:"80px"},children:[e.jsxs(d,{lg:3,className:"px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white",children:[e.jsx("h1",{children:"процесс "}),e.jsx("h1",{className:"ms-lg-auto",children:"работы"})]}),e.jsx(d,{lg:9,className:"position-relative z-2 pe-4 pe-lg-5",children:e.jsxs(o,{className:"d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1",style:{boxShadow:" 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)"},children:[e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"01"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Вы оставляете заявку"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор."})})]}),e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"02"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Находим и проверяем поставщика"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Сравниваем предложения, проверяем документы и товар перед закупкой."})})]}),e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"03"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Оформляем и доставляем покупателю"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Закупаем товар, проверяем качество, оформляем таможенные документы и организуем доставку на склад или по адресу."})})]})]})})]})]})}),e.jsx(r,{style:{marginTop:"100px"}}),e.jsx(a,{style:{marginTop:"100px",paddingBottom:"100px"}})]})}


version_title: О компании
version_path: /about
version_src_type: jsx
version_updated_at: 2025-11-17T09:48:13.851Z
version_created_at: 2025-11-17T09:48:13.851Z
version__status: published
created_at: 2025-11-17T09:48:13.859Z
updated_at: 2025-11-17T09:48:13.859Z
version_jsx:
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { OurPartners, FAQ },
    deps: {
      rb: { Container, Image, Row, Col },
    },
  }) {
    return (
      <>
        {/* Asiapartner is trustworthy */}
        <Container style={{ marginTop: '80px' }}>
          <Row className="row-gap-3">
            <Col className="text-uppercase" lg={5}>
              <h1 style={{ fontWeight: '800' }}>
                AsiaPartner —
                <br />
                ваш надёжный
                <br />
                <span className="text-primary">партнёр из Азии</span>
              </h1>
            </Col>
            <Col className="mt-auto" lg={7}>
              <span>
                Asia Partner доставляет сертифицированные товары из Азии напрямую. В каталоге свыше
                3000 наименований, 200+ отзывов довольных клиентов и строгий контроль качества на
                каждом этапе.
              </span>
            </Col>
          </Row>
        </Container>

        {/* Handshake */}
        <div className="position-relative mt-4" style={{ height: 'clamp(200px, 30vw, 400px)' }}>
          <Image
            src="/api/media/file/handshake.jpg"
            alt="handshake"
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              display: 'block',
            }}
          />
        </div>

        <Container>
          <Row>
            <Col className="pb-4">
              <img src="/api/media/file/asiapartner-logo.png" className="d-block mx-auto my-5" />
              <div className="text-center h5">
                Asia Partner - Российско-Кыргызская экспортно-импортная компания,
                <br />
                более 17 лет предоставляем широкий спектр торгово-экономических и транспортных услуг
                по работе с Китаем
              </div>
            </Col>
          </Row>
          <Row>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:headphone-1"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Премиум сервис</div>
              <div className="h6">
                Ваш персональный менеджер всегда на связи и готов обсудить индивидуальные условия.
              </div>
            </Col>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:shield-dollar"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Индивидуальный подход и Выгодные цены</div>
              <div className="h6">
                Доставка автомобилей и аксессуаров, недоступных на локальном рынке, широкий выбор
                марок, моделей и комплектаций и любых Новинок Китайского автопрома!.
              </div>
            </Col>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:truck-delivery-1"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Доставка Электро и Автомобилей из Китая</div>
              <div className="h6">
                Лучшие цены ниже дилерских на китайские и зарубежные автомобили.
              </div>
            </Col>
          </Row>
        </Container>

        {/* Our partners */}
        <OurPartners style={{ marginTop: '100px' }} />

        {/* Company statistics */}
        <div className="overflow-hidden">
          <div className="" style={{ paddingTop: '120px' }}>
            <Container
              className="position-relative pb-4 pt-lg-0 px-0 bg-primary"
              style={{ paddingBottom: '2rem !important' }}
            >
              <div
                className="d-none d-lg-flex"
                style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
              >
                <div
                  className="w-50 h-100"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 100%, 0 0, 70% 0)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
                <div
                  className="w-50 h-100"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(100% 0, 100% 100%, 30% 100%)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
              </div>
              <div
                className="d-flex flex-column d-lg-none"
                style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
              >
                <div
                  className="w-100 h-50"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 70%, 0 0, 100% 0)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
                <div
                  className="w-100 h-50"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 100%, 100% 30%, 100% 100%)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
              </div>
              {/* fontSize: 'clamp(44px, 12vw, 172px)', */}
              {/* Lg statistics */}
              <Row
                className="position-relative mx-5 pt-3 pb-1 d-none d-lg-flex"
                style={{ backgroundColor: 'var(--bs-body-bg)', top: '-80px' }}
              >
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    94%
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Клиентов возвращаются снова
                  </span>
                </Col>
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    15
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Дней до доставки в кратчайший срок
                  </span>
                </Col>
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    3
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Контейнера в месяц в среднем
                  </span>
                </Col>
              </Row>

              <Row className="px-4 px-lg-5">
                <Col lg={7} className="position-relative py-4 py-lg-0">
                  <h1 className="text-uppercase fw-medium text-white">
                    Скорость.
                    <br />
                    Масштаб.
                    <br />
                    Повторные заказы.
                  </h1>
                </Col>
                <Row
                  className="position-relative d-lg-none d-flex flex-column row-gap-2 ms-auto me-n4 px-0 w-auto pt-4 text-center shadow"
                  style={{ backgroundColor: 'var(--bs-body-bg)', maxWidth: '250px' }}
                >
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      94%
                    </h1>
                    <div
                      className="position-relative px-2 z-1"
                      style={{
                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Клиентов возвращаются снова
                    </div>
                  </Col>
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      15
                    </h1>
                    <div
                      className="d-flex position-relative px-2 z-1"
                      style={{
                        maxWidth: '100%', // don't exceed the column
                        wordWrap: 'break-word', // help force wrapping if needed
                        overflowWrap: 'break-word',

                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Дней до доставки в кратчайший срок
                    </div>
                  </Col>
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      3
                    </h1>
                    <div
                      className="position-relative px-2 z-1"
                      style={{
                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Контейнера в месяц в среднем
                    </div>
                  </Col>
                </Row>
              </Row>
            </Container>
          </div>
        </div>

        {/* FAQ */}
        <FAQ style={{ marginTop: '100px', paddingBottom: '100px' }} />
      </>
    )
  } satisfies PageJsx)

version_code:
  export default function({runtime:e,components:{OurPartners:s,FAQ:r},deps:{rb:{Container:a,Image:l,Row:i,Col:t}}}){return e.jsxs(e.Fragment,{children:[e.jsx(a,{style:{marginTop:"80px"},children:e.jsxs(i,{className:"row-gap-3",children:[e.jsx(t,{className:"text-uppercase",lg:5,children:e.jsxs("h1",{style:{fontWeight:"800"},children:["AsiaPartner —",e.jsx("br",{}),"ваш надёжный",e.jsx("br",{}),e.jsx("span",{className:"text-primary",children:"партнёр из Азии"})]})}),e.jsx(t,{className:"mt-auto",lg:7,children:e.jsx("span",{children:"Asia Partner доставляет сертифицированные товары из Азии напрямую. В каталоге свыше 3000 наименований, 200+ отзывов довольных клиентов и строгий контроль качества на каждом этапе."})})]})}),e.jsx("div",{className:"position-relative mt-4",style:{height:"clamp(200px, 30vw, 400px)"},children:e.jsx(l,{src:"/api/media/file/handshake.jpg",alt:"handshake",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})}),e.jsxs(a,{children:[e.jsx(i,{children:e.jsxs(t,{className:"pb-4",children:[e.jsx("img",{src:"/api/media/file/asiapartner-logo.png",className:"d-block mx-auto my-5"}),e.jsxs("div",{className:"text-center h5",children:["Asia Partner - Российско-Кыргызская экспортно-импортная компания,",e.jsx("br",{}),"более 17 лет предоставляем широкий спектр торгово-экономических и транспортных услуг по работе с Китаем"]})]})}),e.jsxs(i,{children:[e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:headphone-1",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Премиум сервис"}),e.jsx("div",{className:"h6",children:"Ваш персональный менеджер всегда на связи и готов обсудить индивидуальные условия."})]}),e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:shield-dollar",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Индивидуальный подход и Выгодные цены"}),e.jsx("div",{className:"h6",children:"Доставка автомобилей и аксессуаров, недоступных на локальном рынке, широкий выбор марок, моделей и комплектаций и любых Новинок Китайского автопрома!."})]}),e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:truck-delivery-1",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Доставка Электро и Автомобилей из Китая"}),e.jsx("div",{className:"h6",children:"Лучшие цены ниже дилерских на китайские и зарубежные автомобили."})]})]})]}),e.jsx(s,{style:{marginTop:"100px"}}),e.jsx("div",{className:"overflow-hidden",children:e.jsx("div",{className:"",style:{paddingTop:"120px"},children:e.jsxs(a,{className:"position-relative pb-4 pt-lg-0 px-0 bg-primary",style:{paddingBottom:"2rem !important"},children:[e.jsxs("div",{className:"d-none d-lg-flex",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 100%, 0 0, 70% 0)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0, 100% 100%, 30% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs("div",{className:"d-flex flex-column d-lg-none",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 70%, 0 0, 100% 0)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 100%, 100% 30%, 100% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs(i,{className:"position-relative mx-5 pt-3 pb-1 d-none d-lg-flex",style:{backgroundColor:"var(--bs-body-bg)",top:"-80px"},children:[e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"94%"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Клиентов возвращаются снова"})]}),e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"15"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Дней до доставки в кратчайший срок"})]}),e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"3"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Контейнера в месяц в среднем"})]})]}),e.jsxs(i,{className:"px-4 px-lg-5",children:[e.jsx(t,{lg:7,className:"position-relative py-4 py-lg-0",children:e.jsxs("h1",{className:"text-uppercase fw-medium text-white",children:["Скорость.",e.jsx("br",{}),"Масштаб.",e.jsx("br",{}),"Повторные заказы."]})}),e.jsxs(i,{className:"position-relative d-lg-none d-flex flex-column row-gap-2 ms-auto me-n4 px-0 w-auto pt-4 text-center shadow",style:{backgroundColor:"var(--bs-body-bg)",maxWidth:"250px"},children:[e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"94%"}),e.jsx("div",{className:"position-relative px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Клиентов возвращаются снова"})]}),e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"15"}),e.jsx("div",{className:"d-flex position-relative px-2 z-1",style:{maxWidth:"100%",wordWrap:"break-word",overflowWrap:"break-word",backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Дней до доставки в кратчайший срок"})]}),e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"3"}),e.jsx("div",{className:"position-relative px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Контейнера в месяц в среднем"})]})]})]})]})})}),e.jsx(r,{style:{marginTop:"100px",paddingBottom:"100px"}})]})}


version_title: Контакты
version_path: /contacts
version_src_type: jsx
version_updated_at: 2025-11-17T09:48:13.878Z
version_created_at: 2025-11-17T09:48:13.878Z
version__status: published
created_at: 2025-11-17T09:48:13.885Z
updated_at: 2025-11-17T09:48:13.885Z
version_jsx:
  import type { Form } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Form },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    const formData = data?.formData
    return (
      <>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1462.1171926811026!2d74.57999676365375!3d42.86789679569354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9444cb1ab61%3A0x9099b136b1f4b28f!2zTmV0Y28g0L7QvdC70LDQudC9INC80LDRgNC60LXRgg!5e0!3m2!1sru!2skg!4v1755187004065!5m2!1sru!2skg"
          allowFullScreen={false}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          style={{
            position: 'absolute',
            height: '100%',
            width: '100%',
            filter: 'invert(90%) hue-rotate(180deg) brightness(90%) contrast(85%)',
          }}
        />
        <Container>
          <Row style={{ minHeight: '60vh' }} className="d-block d-md-none" />
          <Row className="d-flex justify-content-end px-2 mb-5">
            <Col
              sm={10}
              md={6}
              className="position-relative z-2 py-5 px-4 bg-dark rounded"
              style={{ top: '80px' }}
            >
              <Form formData={formData} />
            </Col>
          </Row>
        </Container>
      </>
    )
  } satisfies PageJsx<{ formData: Form }>)

version_fetch_data:
  export default async function FetchData({ deps }) {
      const payload = await deps.app.getPayload();
      const config = await deps.app.getGlobalConfig();
      const formId = config.forms.feedbackForm || 0;
      const formData = await payload.find({
          collection: 'forms',
          where: {
              id: formId,
          },
          pagination: false,
      });
      return { formData: formData.docs[0] };
  }

version_code:
  export default function({runtime:e,components:{Form:s},deps:{rb:{Container:r,Row:t,Col:n}},props:{data:o}}){let d=o?.formData;return e.jsxs(e.Fragment,{children:[e.jsx("iframe",{src:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1462.1171926811026!2d74.57999676365375!3d42.86789679569354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9444cb1ab61%3A0x9099b136b1f4b28f!2zTmV0Y28g0L7QvdC70LDQudC9INC80LDRgNC60LXRgg!5e0!3m2!1sru!2skg!4v1755187004065!5m2!1sru!2skg",allowFullScreen:!1,loading:"lazy",referrerPolicy:"no-referrer-when-downgrade",style:{position:"absolute",height:"100%",width:"100%",filter:"invert(90%) hue-rotate(180deg) brightness(90%) contrast(85%)"}}),e.jsxs(r,{children:[e.jsx(t,{style:{minHeight:"60vh"},className:"d-block d-md-none"}),e.jsx(t,{className:"d-flex justify-content-end px-2 mb-5",children:e.jsx(n,{sm:10,md:6,className:"position-relative z-2 py-5 px-4 bg-dark rounded",style:{top:"80px"},children:e.jsx(s,{formData:d})})})]})]})}


version_title: Категории
version_path: /categories
version_src_type: jsx
version_updated_at: 2025-11-17T09:48:13.902Z
version_created_at: 2025-11-17T09:48:13.902Z
version__status: published
created_at: 2025-11-17T09:48:13.910Z
updated_at: 2025-11-17T09:48:13.910Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { CategoriesGrid, ProductsGrid, Breadcrumb },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    let categoryItems = data?.categories.docs || []
    categoryItems = categoryItems.sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        <Container>
          <Breadcrumb pathMap={[{ label: 'Главная', link: '/' }, { label: 'Каталог' }]} />
          <Row className="d-flex flex-column flex-md-row justify-content-between mt-4">
            <Col sm={9} lg={6} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Каталог товаров</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">из Азии под заказ</h1>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categoryItems} className="mt-5" />

        <Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xs={8} sm={6} lg={4} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Популярные</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">товары</h1>
            </Col>
          </Row>
        </Container>
        <ProductsGrid productData={data?.popularProducts} style={{ marginBottom: '100px' }} />
      </>
    )
  } satisfies PageJsx<{
    categories: PaginatedDocs<Category>
    popularProducts: PaginatedDocs<Product>
  }>)

version_fetch_data:
  export default async function FetchData({ deps: { app } }) {
      const payload = await app.getPayload();
      const categories = await payload.find({
          collection: 'categories',
          where: {
              'attributes.key': {
                  in: ['homeWidth', 'homeOrder'],
              },
              hidden: {
                  equals: false,
              },
          },
      });
      const popularProducts = await payload.find({
          collection: 'products',
          where: {
              'attributes.key': {
                  equals: 'isPopular',
              },
              'attributes.boolean': {
                  equals: true,
              },
              hidden: {
                  equals: false,
              },
              'category.hidden': {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              img: true,
              category: true,
          },
          pagination: false,
      });
      return { categories, popularProducts };
  }

version_code:
  export default function({runtime:e,components:{CategoriesGrid:s,ProductsGrid:l,Breadcrumb:t},deps:{rb:{Container:r,Row:a,Col:m}},props:{data:c}}){let n=c?.categories.docs||[];return n=n.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),t=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(t?.number??0)}),e.jsxs(e.Fragment,{children:[e.jsxs(r,{children:[e.jsx(t,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог"}]}),e.jsx(a,{className:"d-flex flex-column flex-md-row justify-content-between mt-4",children:e.jsxs(m,{sm:9,lg:6,className:"d-flex flex-column mb-xl-0 mb-2 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Каталог товаров"}),e.jsx("h1",{className:"mb-0 ms-auto lh-1 text-primary",children:"из Азии под заказ"})]})})]}),e.jsx(s,{categories:n,className:"mt-5"}),e.jsx(r,{style:{marginTop:"100px"},children:e.jsx(a,{className:"d-flex flex-column flex-md-row justify-content-between",children:e.jsxs(m,{xs:8,sm:6,lg:4,className:"d-flex flex-column mb-xl-0 mb-2 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Популярные"}),e.jsx("h1",{className:"mb-0 ms-auto lh-1 text-primary",children:"товары"})]})})}),e.jsx(l,{productData:c?.popularProducts,style:{marginBottom:"100px"}})]})}


version_title: О компании
version_path: /about
version_src_type: jsx
version_updated_at: 2025-11-17T09:50:52.730Z
version_created_at: 2025-11-17T09:48:13.851Z
version__status: published
created_at: 2025-11-17T09:50:52.746Z
updated_at: 2025-11-17T09:50:52.746Z
version_jsx:
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { OurPartners, FAQ },
    deps: {
      rb: { Container, Image, Row, Col },
    },
  }) {
    return (
      <>
        {/* Asiapartner is trustworthy */}
        <Container style={{ marginTop: '80px' }}>
          <Row className="row-gap-3">
            <Col className="text-uppercase" lg={5}>
              <h1 style={{ fontWeight: '800' }}>
                AsiaPartner —
                <br />
                ваш надёжный
                <br />
                <span className="text-primary">партнёр из Азии</span>
              </h1>
            </Col>
            <Col className="mt-auto" lg={7}>
              <span>
                Asia Partner доставляет сертифицированные товары из Азии напрямую. В каталоге свыше
                3000 наименований, 200+ отзывов довольных клиентов и строгий контроль качества на
                каждом этапе.
              </span>
            </Col>
          </Row>
        </Container>

        {/* Handshake */}
        <div className="position-relative mt-4" style={{ height: 'clamp(200px, 30vw, 400px)' }}>
          <Image
            src="/api/media/file/handshake.jpg"
            alt="handshake"
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              display: 'block',
            }}
          />
        </div>

        <Container>
          <Row>
            <Col className="pb-4">
              <img src="/api/media/file/asiapartner-logo.png" className="d-block mx-auto my-5" />
              <div className="text-center h5">
                Asia Partner - Российско-Кыргызская экспортно-импортная компания,
                <br />
                более 17 лет предоставляем широкий спектр торгово-экономических и транспортных услуг
                по работе с Китаем
              </div>
            </Col>
          </Row>
          <Row>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:headphone-1"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Премиум сервис</div>
              <div className="h6">
                Ваш персональный менеджер всегда на связи и готов обсудить индивидуальные условия.
              </div>
            </Col>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:shield-dollar"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Индивидуальный подход и Выгодные цены</div>
              <div className="h6">
                Доставка автомобилей и аксессуаров, недоступных на локальном рынке, широкий выбор
                марок, моделей и комплектаций и любых Новинок Китайского автопрома!.
              </div>
            </Col>
            <Col xs={12} md={4} className="d-flex flex-column align-items-center text-center">
              <iconify-icon
                icon="lineicons:truck-delivery-1"
                style={{ fontSize: '4rem', color: 'var(--bs-primary)' }}
              />
              <div className="h5 fw-bold">Доставка Электро и Автомобилей из Китая</div>
              <div className="h6">
                Лучшие цены ниже дилерских на китайские и зарубежные автомобили.
              </div>
            </Col>
          </Row>
        </Container>

        {/* Our partners */}
        {/* <OurPartners style={{ marginTop: '100px' }} /> */}

        {/* Company statistics */}
        <div className="overflow-hidden mt-5">
          <div className="" style={{ paddingTop: '120px' }}>
            <Container
              className="position-relative pb-4 pt-lg-0 px-0 bg-primary"
              style={{ paddingBottom: '2rem !important' }}
            >
              <div
                className="d-none d-lg-flex"
                style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
              >
                <div
                  className="w-50 h-100"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 100%, 0 0, 70% 0)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
                <div
                  className="w-50 h-100"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(100% 0, 100% 100%, 30% 100%)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
              </div>
              <div
                className="d-flex flex-column d-lg-none"
                style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
              >
                <div
                  className="w-100 h-50"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 70%, 0 0, 100% 0)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
                <div
                  className="w-100 h-50"
                  style={{
                    backgroundImage: 'url(/api/media/file/manufacturing.webp)',
                    backgroundSize: 'cover',
                    clipPath: 'polygon(0 100%, 100% 30%, 100% 100%)',
                  }}
                >
                  <div
                    className="h-100"
                    style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                  ></div>
                </div>
              </div>
              {/* fontSize: 'clamp(44px, 12vw, 172px)', */}
              {/* Lg statistics */}
              <Row
                className="position-relative mx-5 pt-3 pb-1 d-none d-lg-flex"
                style={{ backgroundColor: 'var(--bs-body-bg)', top: '-80px' }}
              >
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    94%
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Клиентов возвращаются снова
                  </span>
                </Col>
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    15
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Дней до доставки в кратчайший срок
                  </span>
                </Col>
                <Col lg={4} className="text-center position-relative">
                  <h1
                    className="text-uppercase fw-bold"
                    style={{
                      fontSize: '80px',
                      color: 'transparent',
                      WebkitTextStrokeColor: 'var(--bs-primary)',
                      WebkitTextStrokeWidth: '2px',
                    }}
                  >
                    3
                  </h1>
                  <span
                    className="position-absolute start-50 translate-middle-x px-2 z-1"
                    style={{
                      backgroundColor: 'var(--bs-body-bg)',
                      whiteSpace: 'nowrap',
                      marginTop: '-2rem',
                    }}
                  >
                    Контейнера в месяц в среднем
                  </span>
                </Col>
              </Row>

              <Row className="px-4 px-lg-5">
                <Col lg={7} className="position-relative py-4 py-lg-0">
                  <h1 className="text-uppercase fw-medium text-white">
                    Скорость.
                    <br />
                    Масштаб.
                    <br />
                    Повторные заказы.
                  </h1>
                </Col>
                <Row
                  className="position-relative d-lg-none d-flex flex-column row-gap-2 ms-auto me-n4 px-0 w-auto pt-4 text-center shadow"
                  style={{ backgroundColor: 'var(--bs-body-bg)', maxWidth: '250px' }}
                >
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      94%
                    </h1>
                    <div
                      className="position-relative px-2 z-1"
                      style={{
                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Клиентов возвращаются снова
                    </div>
                  </Col>
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      15
                    </h1>
                    <div
                      className="d-flex position-relative px-2 z-1"
                      style={{
                        maxWidth: '100%', // don't exceed the column
                        wordWrap: 'break-word', // help force wrapping if needed
                        overflowWrap: 'break-word',

                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Дней до доставки в кратчайший срок
                    </div>
                  </Col>
                  <Col>
                    <h1
                      className="text-uppercase fw-bold"
                      style={{
                        fontSize: '80px',
                        color: 'transparent',
                        WebkitTextStrokeColor: 'var(--bs-primary)',
                        WebkitTextStrokeWidth: '2px',
                      }}
                    >
                      3
                    </h1>
                    <div
                      className="position-relative px-2 z-1"
                      style={{
                        backgroundColor: 'var(--bs-body-bg)',
                        top: '-2rem',
                      }}
                    >
                      Контейнера в месяц в среднем
                    </div>
                  </Col>
                </Row>
              </Row>
            </Container>
          </div>
        </div>

        {/* FAQ */}
        {/* <FAQ style={{ marginTop: '100px', paddingBottom: '100px' }} /> */}
      </>
    )
  } satisfies PageJsx)

version_code:
  export default function({runtime:e,components:{OurPartners:s,FAQ:r},deps:{rb:{Container:a,Image:l,Row:i,Col:t}}}){return e.jsxs(e.Fragment,{children:[e.jsx(a,{style:{marginTop:"80px"},children:e.jsxs(i,{className:"row-gap-3",children:[e.jsx(t,{className:"text-uppercase",lg:5,children:e.jsxs("h1",{style:{fontWeight:"800"},children:["AsiaPartner —",e.jsx("br",{}),"ваш надёжный",e.jsx("br",{}),e.jsx("span",{className:"text-primary",children:"партнёр из Азии"})]})}),e.jsx(t,{className:"mt-auto",lg:7,children:e.jsx("span",{children:"Asia Partner доставляет сертифицированные товары из Азии напрямую. В каталоге свыше 3000 наименований, 200+ отзывов довольных клиентов и строгий контроль качества на каждом этапе."})})]})}),e.jsx("div",{className:"position-relative mt-4",style:{height:"clamp(200px, 30vw, 400px)"},children:e.jsx(l,{src:"/api/media/file/handshake.jpg",alt:"handshake",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})}),e.jsxs(a,{children:[e.jsx(i,{children:e.jsxs(t,{className:"pb-4",children:[e.jsx("img",{src:"/api/media/file/asiapartner-logo.png",className:"d-block mx-auto my-5"}),e.jsxs("div",{className:"text-center h5",children:["Asia Partner - Российско-Кыргызская экспортно-импортная компания,",e.jsx("br",{}),"более 17 лет предоставляем широкий спектр торгово-экономических и транспортных услуг по работе с Китаем"]})]})}),e.jsxs(i,{children:[e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:headphone-1",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Премиум сервис"}),e.jsx("div",{className:"h6",children:"Ваш персональный менеджер всегда на связи и готов обсудить индивидуальные условия."})]}),e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:shield-dollar",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Индивидуальный подход и Выгодные цены"}),e.jsx("div",{className:"h6",children:"Доставка автомобилей и аксессуаров, недоступных на локальном рынке, широкий выбор марок, моделей и комплектаций и любых Новинок Китайского автопрома!."})]}),e.jsxs(t,{xs:12,md:4,className:"d-flex flex-column align-items-center text-center",children:[e.jsx("iconify-icon",{icon:"lineicons:truck-delivery-1",style:{fontSize:"4rem",color:"var(--bs-primary)"}}),e.jsx("div",{className:"h5 fw-bold",children:"Доставка Электро и Автомобилей из Китая"}),e.jsx("div",{className:"h6",children:"Лучшие цены ниже дилерских на китайские и зарубежные автомобили."})]})]})]}),e.jsx("div",{className:"overflow-hidden mt-5",children:e.jsx("div",{className:"",style:{paddingTop:"120px"},children:e.jsxs(a,{className:"position-relative pb-4 pt-lg-0 px-0 bg-primary",style:{paddingBottom:"2rem !important"},children:[e.jsxs("div",{className:"d-none d-lg-flex",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 100%, 0 0, 70% 0)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0, 100% 100%, 30% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs("div",{className:"d-flex flex-column d-lg-none",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 70%, 0 0, 100% 0)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/manufacturing.webp)",backgroundSize:"cover",clipPath:"polygon(0 100%, 100% 30%, 100% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs(i,{className:"position-relative mx-5 pt-3 pb-1 d-none d-lg-flex",style:{backgroundColor:"var(--bs-body-bg)",top:"-80px"},children:[e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"94%"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Клиентов возвращаются снова"})]}),e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"15"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Дней до доставки в кратчайший срок"})]}),e.jsxs(t,{lg:4,className:"text-center position-relative",children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"3"}),e.jsx("span",{className:"position-absolute start-50 translate-middle-x px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",whiteSpace:"nowrap",marginTop:"-2rem"},children:"Контейнера в месяц в среднем"})]})]}),e.jsxs(i,{className:"px-4 px-lg-5",children:[e.jsx(t,{lg:7,className:"position-relative py-4 py-lg-0",children:e.jsxs("h1",{className:"text-uppercase fw-medium text-white",children:["Скорость.",e.jsx("br",{}),"Масштаб.",e.jsx("br",{}),"Повторные заказы."]})}),e.jsxs(i,{className:"position-relative d-lg-none d-flex flex-column row-gap-2 ms-auto me-n4 px-0 w-auto pt-4 text-center shadow",style:{backgroundColor:"var(--bs-body-bg)",maxWidth:"250px"},children:[e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"94%"}),e.jsx("div",{className:"position-relative px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Клиентов возвращаются снова"})]}),e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"15"}),e.jsx("div",{className:"d-flex position-relative px-2 z-1",style:{maxWidth:"100%",wordWrap:"break-word",overflowWrap:"break-word",backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Дней до доставки в кратчайший срок"})]}),e.jsxs(t,{children:[e.jsx("h1",{className:"text-uppercase fw-bold",style:{fontSize:"80px",color:"transparent",WebkitTextStrokeColor:"var(--bs-primary)",WebkitTextStrokeWidth:"2px"},children:"3"}),e.jsx("div",{className:"position-relative px-2 z-1",style:{backgroundColor:"var(--bs-body-bg)",top:"-2rem"},children:"Контейнера в месяц в среднем"})]})]})]})]})})})]})}


version_title: Главная
version_path: /
version_src_type: jsx
version_updated_at: 2025-11-17T09:54:39.937Z
version_created_at: 2025-11-17T09:48:13.822Z
version__status: published
created_at: 2025-11-17T09:54:39.951Z
updated_at: 2025-11-17T09:54:39.951Z
version_jsx:
  import type { Category } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ParallelogramGrid, CompanyBenefits, OurPartners, FAQ, CategoriesGrid },
    deps: {
      rb: { Container, Image, Row, Col },
      next: { Link },
    },
    props: { data },
  }) {
    const categories = (data as Category[]).sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        {/* Hero */}
        <div className="position-relative d-flex justify-content-center w-100">
          <Container className="position-absolute z-1 mx-auto h-100">
            <Row className="row-gap-5 row-gap-sm-0 h-100 align-content-center">
              <Col lg={7}>
                <div className="d-flex flex-column" style={{ rowGap: '2rem' }}>
                  <div>
                    <h1
                      className="text-uppercase fw-bold mb-0"
                      style={{
                        fontSize: 'clamp(32px, 8vw, 52px)',
                        lineHeight: '1',
                        color: 'var(--bs-primary)',
                      }}
                    >
                      Поставки автомобилей, оборудования и товаров из Китая
                    </h1>
                  </div>
                  <Link // should it change color on hover?
                    className="bg-primary text-white me-auto fs-5"
                    href="#footer-anchor"
                    style={{
                      display: 'inline-block',
                      padding: '1rem 2rem',
                      textDecoration: 'none',
                      clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                      transition: '#1D1D1D .2s',
                    }}
                  >
                    Получить консультацию
                  </Link>
                </div>
              </Col>
            </Row>
          </Container>

          {/* Video */}
          <div
            className="video-container"
            style={{
              position: 'relative',
              width: '100%',
              minHeight: 'clamp(576px, 80vw, 810px)', // 1920:1080 = 16:9 = 1440:810; 1440 * 0.4 = 576
              overflow: 'hidden',
              background:
                'linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))',
            }}
          >
            <video
              src="/api/media/file/video_bg.mp4"
              loop
              autoPlay
              muted
              className="object-fit-cover position-absolute w-100 h-100"
              style={{
                mixBlendMode: 'multiply',
              }}
            />
          </div>
        </div>

        {/* Company benefits */}
        <CompanyBenefits />

        {/* Categories */}
        <Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xl={3} className="d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase">
              <h1 className="lh-1">Категории&nbsp;</h1>
              <h1 className="mb-0 ms-xl-auto lh-1 text-primary">Товаров</h1>
            </Col>
            <Col md={7} xl={5} className="mt-auto">
              Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ.
            </Col>
            <Col md={5} xl={3} className="mt-auto ps-0 text-end">
              <Link // should it change color on hover?
                className="mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5"
                href="/categories"
                style={{
                  display: 'inline-flex',
                  padding: '0.8rem 3rem',
                  textDecoration: 'none',
                  clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                  transition: '#1D1D1D .2s',
                }}
              >
                <span>Все категории</span>
                <iconify-icon icon="lucide:chevron-right" className="fs-4"></iconify-icon>
              </Link>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categories} className="mt-5" />

        {/* Work process */}
        <div className="pt-5">
          <Container className="overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary">
            <div
              className="d-none d-lg-flex"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 70% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0, 100% 100%, 30% 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <div
              className="d-flex d-lg-none flex-column"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 100% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0%, 100% 100%, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <Row
              className="position-relative z-1 justify-content-between"
              style={{ paddingTop: '80px' }}
            >
              {/* Work process label */}
              <Col
                lg={3}
                className="px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white"
              >
                <h1>процесс&nbsp;</h1>
                <h1 className="ms-lg-auto">работы</h1>
              </Col>

              {/* The table */}
              <Col lg={9} className="position-relative z-2 pe-4 pe-lg-5">
                <Container
                  className="d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1"
                  style={{
                    boxShadow: ' 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)',
                  }}
                >
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">01</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Вы оставляете заявку</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор.
                      </span>
                    </Col>
                  </Row>
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">02</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Находим и проверяем поставщика</h5>
                    </Col>
                    <Col md={7}>
                      <span>Сравниваем предложения, проверяем документы и товар перед закупкой.</span>
                    </Col>
                  </Row>

                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">03</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Оформляем и доставляем покупателю</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Закупаем товар, проверяем качество, оформляем таможенные документы и
                        организуем доставку на склад или по адресу.
                      </span>
                    </Col>
                  </Row>
                </Container>
              </Col>
            </Row>
          </Container>
        </div>

        {/* Our partners */}
        <OurPartners style={{ marginTop: '100px' }} />

        {/* FAQ */}
        <FAQ style={{ marginTop: '100px', paddingBottom: '100px' }} />
      </>
    )
  } satisfies PageJsx)

version_fetch_data:
  export default async function ({ deps }) {
      const payload = await deps.app.getPayload();
      const data = await payload.find({
          collection: 'categories',
          where: {
              'attributes.key': {
                  in: ['homeWidth', 'homeOrder'],
              },
              hidden: {
                  equals: false,
              },
          },
      });
      return data.docs;
  }

version_code:
  export default function({runtime:e,components:{ParallelogramGrid:s,CompanyBenefits:l,OurPartners:r,FAQ:a,CategoriesGrid:i},deps:{rb:{Container:o,Image:n,Row:t,Col:d},next:{Link:c}},props:{data:m}}){let x=m.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),r=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(r?.number??0)});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"position-relative d-flex justify-content-center w-100",children:[e.jsx(o,{className:"position-absolute z-1 mx-auto h-100",children:e.jsx(t,{className:"row-gap-5 row-gap-sm-0 h-100 align-content-center",children:e.jsx(d,{lg:7,children:e.jsxs("div",{className:"d-flex flex-column",style:{rowGap:"2rem"},children:[e.jsx("div",{children:e.jsx("h1",{className:"text-uppercase fw-bold mb-0",style:{fontSize:"clamp(32px, 8vw, 52px)",lineHeight:"1",color:"var(--bs-primary)"},children:"Поставки автомобилей, оборудования и товаров из Китая"})}),e.jsx(c,{className:"bg-primary text-white me-auto fs-5",href:"#footer-anchor",style:{display:"inline-block",padding:"1rem 2rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})]})})})}),e.jsx("div",{className:"video-container",style:{position:"relative",width:"100%",minHeight:"clamp(576px, 80vw, 810px)",overflow:"hidden",background:"linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))"},children:e.jsx("video",{src:"/api/media/file/video_bg.mp4",loop:!0,autoPlay:!0,muted:!0,className:"object-fit-cover position-absolute w-100 h-100",style:{mixBlendMode:"multiply"}})})]}),e.jsx(l,{}),e.jsx(o,{style:{marginTop:"100px"},children:e.jsxs(t,{className:"d-flex flex-column flex-md-row justify-content-between",children:[e.jsxs(d,{xl:3,className:"d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Категории "}),e.jsx("h1",{className:"mb-0 ms-xl-auto lh-1 text-primary",children:"Товаров"})]}),e.jsx(d,{md:7,xl:5,className:"mt-auto",children:"Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ."}),e.jsx(d,{md:5,xl:3,className:"mt-auto ps-0 text-end",children:e.jsxs(c,{className:"mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5",href:"/categories",style:{display:"inline-flex",padding:"0.8rem 3rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:[e.jsx("span",{children:"Все категории"}),e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"fs-4"})]})})]})}),e.jsx(i,{categories:x,className:"mt-5"}),e.jsx("div",{className:"pt-5",children:e.jsxs(o,{className:"overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary",children:[e.jsxs("div",{className:"d-none d-lg-flex",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 70% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0, 100% 100%, 30% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs("div",{className:"d-flex d-lg-none flex-column",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 100% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0%, 100% 100%, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs(t,{className:"position-relative z-1 justify-content-between",style:{paddingTop:"80px"},children:[e.jsxs(d,{lg:3,className:"px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white",children:[e.jsx("h1",{children:"процесс "}),e.jsx("h1",{className:"ms-lg-auto",children:"работы"})]}),e.jsx(d,{lg:9,className:"position-relative z-2 pe-4 pe-lg-5",children:e.jsxs(o,{className:"d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1",style:{boxShadow:" 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)"},children:[e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"01"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Вы оставляете заявку"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор."})})]}),e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"02"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Находим и проверяем поставщика"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Сравниваем предложения, проверяем документы и товар перед закупкой."})})]}),e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"03"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Оформляем и доставляем покупателю"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Закупаем товар, проверяем качество, оформляем таможенные документы и организуем доставку на склад или по адресу."})})]})]})})]})]})}),e.jsx(r,{style:{marginTop:"100px"}}),e.jsx(a,{style:{marginTop:"100px",paddingBottom:"100px"}})]})}


version_title: Главная
version_path: /
version_src_type: jsx
version_updated_at: 2025-11-17T09:54:51.331Z
version_created_at: 2025-11-17T09:48:13.822Z
version__status: published
created_at: 2025-11-17T09:54:51.344Z
updated_at: 2025-11-17T09:54:51.344Z
version_jsx:
  import type { Category } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ParallelogramGrid, CompanyBenefits, OurPartners, FAQ, CategoriesGrid },
    deps: {
      rb: { Container, Image, Row, Col },
      next: { Link },
    },
    props: { data },
  }) {
    const categories = (data as Category[]).sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        {/* Hero */}
        <div className="position-relative d-flex justify-content-center w-100">
          <Container className="position-absolute z-1 mx-auto h-100">
            <Row className="row-gap-5 row-gap-sm-0 h-100 align-content-center">
              <Col lg={7}>
                <div className="d-flex flex-column" style={{ rowGap: '2rem' }}>
                  <div>
                    <h1
                      className="text-uppercase fw-bold mb-0"
                      style={{
                        fontSize: 'clamp(32px, 8vw, 52px)',
                        lineHeight: '1',
                        color: 'var(--bs-primary-subtle)',
                      }}
                    >
                      Поставки автомобилей, оборудования и товаров из Китая
                    </h1>
                  </div>
                  <Link // should it change color on hover?
                    className="bg-primary text-white me-auto fs-5"
                    href="#footer-anchor"
                    style={{
                      display: 'inline-block',
                      padding: '1rem 2rem',
                      textDecoration: 'none',
                      clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                      transition: '#1D1D1D .2s',
                    }}
                  >
                    Получить консультацию
                  </Link>
                </div>
              </Col>
            </Row>
          </Container>

          {/* Video */}
          <div
            className="video-container"
            style={{
              position: 'relative',
              width: '100%',
              minHeight: 'clamp(576px, 80vw, 810px)', // 1920:1080 = 16:9 = 1440:810; 1440 * 0.4 = 576
              overflow: 'hidden',
              background:
                'linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))',
            }}
          >
            <video
              src="/api/media/file/video_bg.mp4"
              loop
              autoPlay
              muted
              className="object-fit-cover position-absolute w-100 h-100"
              style={{
                mixBlendMode: 'multiply',
              }}
            />
          </div>
        </div>

        {/* Company benefits */}
        <CompanyBenefits />

        {/* Categories */}
        <Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xl={3} className="d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase">
              <h1 className="lh-1">Категории&nbsp;</h1>
              <h1 className="mb-0 ms-xl-auto lh-1 text-primary">Товаров</h1>
            </Col>
            <Col md={7} xl={5} className="mt-auto">
              Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ.
            </Col>
            <Col md={5} xl={3} className="mt-auto ps-0 text-end">
              <Link // should it change color on hover?
                className="mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5"
                href="/categories"
                style={{
                  display: 'inline-flex',
                  padding: '0.8rem 3rem',
                  textDecoration: 'none',
                  clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                  transition: '#1D1D1D .2s',
                }}
              >
                <span>Все категории</span>
                <iconify-icon icon="lucide:chevron-right" className="fs-4"></iconify-icon>
              </Link>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categories} className="mt-5" />

        {/* Work process */}
        <div className="pt-5">
          <Container className="overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary">
            <div
              className="d-none d-lg-flex"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 70% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0, 100% 100%, 30% 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <div
              className="d-flex d-lg-none flex-column"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 100% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0%, 100% 100%, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <Row
              className="position-relative z-1 justify-content-between"
              style={{ paddingTop: '80px' }}
            >
              {/* Work process label */}
              <Col
                lg={3}
                className="px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white"
              >
                <h1>процесс&nbsp;</h1>
                <h1 className="ms-lg-auto">работы</h1>
              </Col>

              {/* The table */}
              <Col lg={9} className="position-relative z-2 pe-4 pe-lg-5">
                <Container
                  className="d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1"
                  style={{
                    boxShadow: ' 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)',
                  }}
                >
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">01</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Вы оставляете заявку</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор.
                      </span>
                    </Col>
                  </Row>
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">02</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Находим и проверяем поставщика</h5>
                    </Col>
                    <Col md={7}>
                      <span>Сравниваем предложения, проверяем документы и товар перед закупкой.</span>
                    </Col>
                  </Row>

                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">03</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Оформляем и доставляем покупателю</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Закупаем товар, проверяем качество, оформляем таможенные документы и
                        организуем доставку на склад или по адресу.
                      </span>
                    </Col>
                  </Row>
                </Container>
              </Col>
            </Row>
          </Container>
        </div>

        {/* Our partners */}
        <OurPartners style={{ marginTop: '100px' }} />

        {/* FAQ */}
        <FAQ style={{ marginTop: '100px', paddingBottom: '100px' }} />
      </>
    )
  } satisfies PageJsx)

version_fetch_data:
[cell repeats an earlier one in this file: 387 characters]

version_code:
  export default function({runtime:e,components:{ParallelogramGrid:s,CompanyBenefits:l,OurPartners:r,FAQ:a,CategoriesGrid:i},deps:{rb:{Container:o,Image:n,Row:t,Col:d},next:{Link:c}},props:{data:m}}){let x=m.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),r=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(r?.number??0)});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"position-relative d-flex justify-content-center w-100",children:[e.jsx(o,{className:"position-absolute z-1 mx-auto h-100",children:e.jsx(t,{className:"row-gap-5 row-gap-sm-0 h-100 align-content-center",children:e.jsx(d,{lg:7,children:e.jsxs("div",{className:"d-flex flex-column",style:{rowGap:"2rem"},children:[e.jsx("div",{children:e.jsx("h1",{className:"text-uppercase fw-bold mb-0",style:{fontSize:"clamp(32px, 8vw, 52px)",lineHeight:"1",color:"var(--bs-primary-subtle)"},children:"Поставки автомобилей, оборудования и товаров из Китая"})}),e.jsx(c,{className:"bg-primary text-white me-auto fs-5",href:"#footer-anchor",style:{display:"inline-block",padding:"1rem 2rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})]})})})}),e.jsx("div",{className:"video-container",style:{position:"relative",width:"100%",minHeight:"clamp(576px, 80vw, 810px)",overflow:"hidden",background:"linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))"},children:e.jsx("video",{src:"/api/media/file/video_bg.mp4",loop:!0,autoPlay:!0,muted:!0,className:"object-fit-cover position-absolute w-100 h-100",style:{mixBlendMode:"multiply"}})})]}),e.jsx(l,{}),e.jsx(o,{style:{marginTop:"100px"},children:e.jsxs(t,{className:"d-flex flex-column flex-md-row justify-content-between",children:[e.jsxs(d,{xl:3,className:"d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Категории "}),e.jsx("h1",{className:"mb-0 ms-xl-auto lh-1 text-primary",children:"Товаров"})]}),e.jsx(d,{md:7,xl:5,className:"mt-auto",children:"Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ."}),e.jsx(d,{md:5,xl:3,className:"mt-auto ps-0 text-end",children:e.jsxs(c,{className:"mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5",href:"/categories",style:{display:"inline-flex",padding:"0.8rem 3rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:[e.jsx("span",{children:"Все категории"}),e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"fs-4"})]})})]})}),e.jsx(i,{categories:x,className:"mt-5"}),e.jsx("div",{className:"pt-5",children:e.jsxs(o,{className:"overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary",children:[e.jsxs("div",{className:"d-none d-lg-flex",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 70% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0, 100% 100%, 30% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs("div",{className:"d-flex d-lg-none flex-column",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 100% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0%, 100% 100%, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs(t,{className:"position-relative z-1 justify-content-between",style:{paddingTop:"80px"},children:[e.jsxs(d,{lg:3,className:"px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white",children:[e.jsx("h1",{children:"процесс "}),e.jsx("h1",{className:"ms-lg-auto",children:"работы"})]}),e.jsx(d,{lg:9,className:"position-relative z-2 pe-4 pe-lg-5",children:e.jsxs(o,{className:"d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1",style:{boxShadow:" 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)"},children:[e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"01"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Вы оставляете заявку"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор."})})]}),e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"02"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Находим и проверяем поставщика"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Сравниваем предложения, проверяем документы и товар перед закупкой."})})]}),e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"03"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Оформляем и доставляем покупателю"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Закупаем товар, проверяем качество, оформляем таможенные документы и организуем доставку на склад или по адресу."})})]})]})})]})]})}),e.jsx(r,{style:{marginTop:"100px"}}),e.jsx(a,{style:{marginTop:"100px",paddingBottom:"100px"}})]})}


version_title: Главная
version_path: /
version_src_type: jsx
version_updated_at: 2025-11-17T09:55:19.134Z
version_created_at: 2025-11-17T09:48:13.822Z
version__status: published
created_at: 2025-11-17T09:55:19.145Z
updated_at: 2025-11-17T09:55:19.145Z
version_jsx:
  import type { Category } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ParallelogramGrid, CompanyBenefits, OurPartners, FAQ, CategoriesGrid },
    deps: {
      rb: { Container, Image, Row, Col },
      next: { Link },
    },
    props: { data },
  }) {
    const categories = (data as Category[]).sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        {/* Hero */}
        <div className="position-relative d-flex justify-content-center w-100">
          <Container className="position-absolute z-1 mx-auto h-100">
            <Row className="row-gap-5 row-gap-sm-0 h-100 align-content-center">
              <Col lg={7}>
                <div className="d-flex flex-column" style={{ rowGap: '2rem' }}>
                  <div>
                    <h1
                      className="text-uppercase fw-bold mb-0"
                      style={{
                        fontSize: 'clamp(32px, 8vw, 52px)',
                        lineHeight: '1',
                        color: 'var(--bs-primary-bg-subtle)',
                      }}
                    >
                      Поставки автомобилей, оборудования и товаров из Китая
                    </h1>
                  </div>
                  <Link // should it change color on hover?
                    className="bg-primary text-white me-auto fs-5"
                    href="#footer-anchor"
                    style={{
                      display: 'inline-block',
                      padding: '1rem 2rem',
                      textDecoration: 'none',
                      clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                      transition: '#1D1D1D .2s',
                    }}
                  >
                    Получить консультацию
                  </Link>
                </div>
              </Col>
            </Row>
          </Container>

          {/* Video */}
          <div
            className="video-container"
            style={{
              position: 'relative',
              width: '100%',
              minHeight: 'clamp(576px, 80vw, 810px)', // 1920:1080 = 16:9 = 1440:810; 1440 * 0.4 = 576
              overflow: 'hidden',
              background:
                'linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))',
            }}
          >
            <video
              src="/api/media/file/video_bg.mp4"
              loop
              autoPlay
              muted
              className="object-fit-cover position-absolute w-100 h-100"
              style={{
                mixBlendMode: 'multiply',
              }}
            />
          </div>
        </div>

        {/* Company benefits */}
        <CompanyBenefits />

        {/* Categories */}
        <Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xl={3} className="d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase">
              <h1 className="lh-1">Категории&nbsp;</h1>
              <h1 className="mb-0 ms-xl-auto lh-1 text-primary">Товаров</h1>
            </Col>
            <Col md={7} xl={5} className="mt-auto">
              Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ.
            </Col>
            <Col md={5} xl={3} className="mt-auto ps-0 text-end">
              <Link // should it change color on hover?
                className="mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5"
                href="/categories"
                style={{
                  display: 'inline-flex',
                  padding: '0.8rem 3rem',
                  textDecoration: 'none',
                  clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                  transition: '#1D1D1D .2s',
                }}
              >
                <span>Все категории</span>
                <iconify-icon icon="lucide:chevron-right" className="fs-4"></iconify-icon>
              </Link>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categories} className="mt-5" />

        {/* Work process */}
        <div className="pt-5">
          <Container className="overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary">
            <div
              className="d-none d-lg-flex"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 70% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-50 h-100"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0, 100% 100%, 30% 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <div
              className="d-flex d-lg-none flex-column"
              style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
            >
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(0 0, 100% 0, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
              <div
                className="w-100 h-50"
                style={{
                  backgroundImage: 'url(/api/media/file/furniture.webp)',
                  backgroundSize: 'cover',
                  clipPath: 'polygon(100% 0%, 100% 100%, 0 100%)',
                }}
              >
                <div
                  className="h-100"
                  style={{ backgroundColor: 'rgb(from var(--bs-primary) r g b / 0.5)' }}
                ></div>
              </div>
            </div>
            <Row
              className="position-relative z-1 justify-content-between"
              style={{ paddingTop: '80px' }}
            >
              {/* Work process label */}
              <Col
                lg={3}
                className="px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white"
              >
                <h1>процесс&nbsp;</h1>
                <h1 className="ms-lg-auto">работы</h1>
              </Col>

              {/* The table */}
              <Col lg={9} className="position-relative z-2 pe-4 pe-lg-5">
                <Container
                  className="d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1"
                  style={{
                    boxShadow: ' 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)',
                  }}
                >
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">01</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Вы оставляете заявку</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор.
                      </span>
                    </Col>
                  </Row>
                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">02</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Находим и проверяем поставщика</h5>
                    </Col>
                    <Col md={7}>
                      <span>Сравниваем предложения, проверяем документы и товар перед закупкой.</span>
                    </Col>
                  </Row>

                  <Row className="pb-3" style={{ borderBottom: '2px dashed gray' }}>
                    <Col md={1}>
                      <h6 className="fw-bold">03</h6>
                    </Col>
                    <Col md={4}>
                      <h5 className="fw-bold">Оформляем и доставляем покупателю</h5>
                    </Col>
                    <Col md={7}>
                      <span>
                        Закупаем товар, проверяем качество, оформляем таможенные документы и
                        организуем доставку на склад или по адресу.
                      </span>
                    </Col>
                  </Row>
                </Container>
              </Col>
            </Row>
          </Container>
        </div>

        {/* Our partners */}
        <OurPartners style={{ marginTop: '100px' }} />

        {/* FAQ */}
        <FAQ style={{ marginTop: '100px', paddingBottom: '100px' }} />
      </>
    )
  } satisfies PageJsx)

version_fetch_data:
[cell repeats an earlier one in this file: 387 characters]

version_code:
  export default function({runtime:e,components:{ParallelogramGrid:s,CompanyBenefits:l,OurPartners:r,FAQ:a,CategoriesGrid:i},deps:{rb:{Container:o,Image:n,Row:t,Col:d},next:{Link:c}},props:{data:m}}){let x=m.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),r=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(r?.number??0)});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"position-relative d-flex justify-content-center w-100",children:[e.jsx(o,{className:"position-absolute z-1 mx-auto h-100",children:e.jsx(t,{className:"row-gap-5 row-gap-sm-0 h-100 align-content-center",children:e.jsx(d,{lg:7,children:e.jsxs("div",{className:"d-flex flex-column",style:{rowGap:"2rem"},children:[e.jsx("div",{children:e.jsx("h1",{className:"text-uppercase fw-bold mb-0",style:{fontSize:"clamp(32px, 8vw, 52px)",lineHeight:"1",color:"var(--bs-primary-bg-subtle)"},children:"Поставки автомобилей, оборудования и товаров из Китая"})}),e.jsx(c,{className:"bg-primary text-white me-auto fs-5",href:"#footer-anchor",style:{display:"inline-block",padding:"1rem 2rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})]})})})}),e.jsx("div",{className:"video-container",style:{position:"relative",width:"100%",minHeight:"clamp(576px, 80vw, 810px)",overflow:"hidden",background:"linear-gradient( to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.7), rgb(55, 55, 55))"},children:e.jsx("video",{src:"/api/media/file/video_bg.mp4",loop:!0,autoPlay:!0,muted:!0,className:"object-fit-cover position-absolute w-100 h-100",style:{mixBlendMode:"multiply"}})})]}),e.jsx(l,{}),e.jsx(o,{style:{marginTop:"100px"},children:e.jsxs(t,{className:"d-flex flex-column flex-md-row justify-content-between",children:[e.jsxs(d,{xl:3,className:"d-flex flex-xl-column mb-xl-0 mb-3 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Категории "}),e.jsx("h1",{className:"mb-0 ms-xl-auto lh-1 text-primary",children:"Товаров"})]}),e.jsx(d,{md:7,xl:5,className:"mt-auto",children:"Авто, запчасти, электроника, мебель, техника и оборудование — из Китая под заказ."}),e.jsx(d,{md:5,xl:3,className:"mt-auto ps-0 text-end",children:e.jsxs(c,{className:"mt-3 mt-md-0 column-gap-1 bg-primary text-white fs-5",href:"/categories",style:{display:"inline-flex",padding:"0.8rem 3rem",textDecoration:"none",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:[e.jsx("span",{children:"Все категории"}),e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"fs-4"})]})})]})}),e.jsx(i,{categories:x,className:"mt-5"}),e.jsx("div",{className:"pt-5",children:e.jsxs(o,{className:"overflow-hidden position-relative mt-5 rounded-1 row-gap-5 row-gap-lg-0 bg-primary",children:[e.jsxs("div",{className:"d-none d-lg-flex",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 70% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-50 h-100",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0, 100% 100%, 30% 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs("div",{className:"d-flex d-lg-none flex-column",style:{position:"absolute",top:0,right:0,bottom:0,left:0},children:[e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(0 0, 100% 0, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})}),e.jsx("div",{className:"w-100 h-50",style:{backgroundImage:"url(/api/media/file/furniture.webp)",backgroundSize:"cover",clipPath:"polygon(100% 0%, 100% 100%, 0 100%)"},children:e.jsx("div",{className:"h-100",style:{backgroundColor:"rgb(from var(--bs-primary) r g b / 0.5)"}})})]}),e.jsxs(t,{className:"position-relative z-1 justify-content-between",style:{paddingTop:"80px"},children:[e.jsxs(d,{lg:3,className:"px-4 mb-3 mb-lg-0 d-flex flex-lg-column text-uppercase text-white",children:[e.jsx("h1",{children:"процесс "}),e.jsx("h1",{className:"ms-lg-auto",children:"работы"})]}),e.jsx(d,{lg:9,className:"position-relative z-2 pe-4 pe-lg-5",children:e.jsxs(o,{className:"d-flex flex-column row-gap-5 p-4 mb-5 bg-white rounded-1",style:{boxShadow:" 15px 15px rgb(from var(--bs-primary-bg-subtle) r g b / 0.8)"},children:[e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"01"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Вы оставляете заявку"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Опишите, что вам нужно — мы свяжемся, уточним детали и начнём подбор."})})]}),e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"02"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Находим и проверяем поставщика"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Сравниваем предложения, проверяем документы и товар перед закупкой."})})]}),e.jsxs(t,{className:"pb-3",style:{borderBottom:"2px dashed gray"},children:[e.jsx(d,{md:1,children:e.jsx("h6",{className:"fw-bold",children:"03"})}),e.jsx(d,{md:4,children:e.jsx("h5",{className:"fw-bold",children:"Оформляем и доставляем покупателю"})}),e.jsx(d,{md:7,children:e.jsx("span",{children:"Закупаем товар, проверяем качество, оформляем таможенные документы и организуем доставку на склад или по адресу."})})]})]})})]})]})}),e.jsx(r,{style:{marginTop:"100px"}}),e.jsx(a,{style:{marginTop:"100px",paddingBottom:"100px"}})]})}


version_title: Категории
version_path: /categories
version_src_type: jsx
version_updated_at: 2025-11-17T10:00:57.299Z
version_created_at: 2025-11-17T09:48:13.902Z
version__status: published
created_at: 2025-11-17T10:00:57.311Z
updated_at: 2025-11-17T10:00:57.311Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { CategoriesGrid, ProductsGrid, Breadcrumb },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    let categoryItems = data?.categories.docs || []
    categoryItems = categoryItems.sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        <Container>
          <Breadcrumb pathMap={[{ label: 'Главная', link: '/' }, { label: 'Каталог' }]} />
          <Row className="d-flex flex-column flex-md-row justify-content-between mt-4">
            <Col sm={9} lg={6} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Каталог товаров</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">из Азии под заказ</h1>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categoryItems} className="mt-5" />

        <Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xs={8} sm={6} lg={4} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Популярные</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">товары</h1>
            </Col>
          </Row>
        </Container>
        {/*<ProductsGrid productData={data?.popularProducts} style={{ marginBottom: '100px' }} />*/}
      </>
    )
  } satisfies PageJsx<{
    categories: PaginatedDocs<Category>
    popularProducts: PaginatedDocs<Product>
  }>)

version_fetch_data:
  export default async function FetchData({ deps: { app } }) {
      const payload = await app.getPayload();
      const categories = await payload.find({
          collection: 'categories',
          where: {
              'attributes.key': {
                  in: ['homeWidth', 'homeOrder'],
              },
              hidden: {
                  equals: false,
              },
          },
      });
      const popularProducts = await payload.find({
          collection: 'products',
          where: {
              'attributes.key': {
                  equals: 'isPopular',
              },
              'attributes.boolean': {
                  equals: true,
              },
              hidden: {
                  equals: false,
              },
              'category.hidden': {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              img: true,
              category: true,
          },
          pagination: false,
      });
      return { categories, popularProducts };
  }

version_code:
  export default function({runtime:e,components:{CategoriesGrid:s,ProductsGrid:l,Breadcrumb:t},deps:{rb:{Container:r,Row:m,Col:a}},props:{data:n}}){let c=n?.categories.docs||[];return c=c.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),t=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(t?.number??0)}),e.jsxs(e.Fragment,{children:[e.jsxs(r,{children:[e.jsx(t,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог"}]}),e.jsx(m,{className:"d-flex flex-column flex-md-row justify-content-between mt-4",children:e.jsxs(a,{sm:9,lg:6,className:"d-flex flex-column mb-xl-0 mb-2 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Каталог товаров"}),e.jsx("h1",{className:"mb-0 ms-auto lh-1 text-primary",children:"из Азии под заказ"})]})})]}),e.jsx(s,{categories:c,className:"mt-5"}),e.jsx(r,{style:{marginTop:"100px"},children:e.jsx(m,{className:"d-flex flex-column flex-md-row justify-content-between",children:e.jsxs(a,{xs:8,sm:6,lg:4,className:"d-flex flex-column mb-xl-0 mb-2 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Популярные"}),e.jsx("h1",{className:"mb-0 ms-auto lh-1 text-primary",children:"товары"})]})})})]})}


version_title: Категории
version_path: /categories
version_src_type: jsx
version_updated_at: 2025-11-17T10:01:19.884Z
version_created_at: 2025-11-17T09:48:13.902Z
version__status: published
created_at: 2025-11-17T10:01:19.895Z
updated_at: 2025-11-17T10:01:19.895Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { CategoriesGrid, ProductsGrid, Breadcrumb },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    let categoryItems = data?.categories.docs || []
    categoryItems = categoryItems.sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        <Container>
          <Breadcrumb pathMap={[{ label: 'Главная', link: '/' }, { label: 'Каталог' }]} />
          <Row className="d-flex flex-column flex-md-row justify-content-between mt-4">
            <Col sm={9} lg={6} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Каталог товаров</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">из Азии под заказ</h1>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categoryItems} className="mt-5" />

        {/*<Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xs={8} sm={6} lg={4} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Популярные</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">товары</h1>
            </Col>
          </Row>
        </Container>
        <ProductsGrid productData={data?.popularProducts} style={{ marginBottom: '100px' }} />*/}
      </>
    )
  } satisfies PageJsx<{
    categories: PaginatedDocs<Category>
    popularProducts: PaginatedDocs<Product>
  }>)

version_fetch_data:
[cell repeats an earlier one in this file: 1012 characters]

version_code:
  export default function({runtime:e,components:{CategoriesGrid:s,ProductsGrid:l,Breadcrumb:t},deps:{rb:{Container:r,Row:a,Col:n}},props:{data:m}}){let c=m?.categories.docs||[];return c=c.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),t=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(t?.number??0)}),e.jsxs(e.Fragment,{children:[e.jsxs(r,{children:[e.jsx(t,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог"}]}),e.jsx(a,{className:"d-flex flex-column flex-md-row justify-content-between mt-4",children:e.jsxs(n,{sm:9,lg:6,className:"d-flex flex-column mb-xl-0 mb-2 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Каталог товаров"}),e.jsx("h1",{className:"mb-0 ms-auto lh-1 text-primary",children:"из Азии под заказ"})]})})]}),e.jsx(s,{categories:c,className:"mt-5"})]})}


version_title: Категории
version_path: /categories
version_src_type: jsx
version_updated_at: 2025-11-17T10:01:39.010Z
version_created_at: 2025-11-17T09:48:13.902Z
version__status: published
created_at: 2025-11-17T10:01:39.020Z
updated_at: 2025-11-17T10:01:39.020Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { CategoriesGrid, ProductsGrid, Breadcrumb },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    let categoryItems = data?.categories.docs || []
    categoryItems = categoryItems.sort((a, b) => {
      const attr_a = a.attributes!.find((x) => x.key === 'homeOrder')
      const attr_b = b.attributes!.find((x) => x.key === 'homeOrder')

      return (attr_a?.number ?? 0) - (attr_b?.number ?? 0)
    })

    return (
      <>
        <Container className="mb-5">
          <Breadcrumb pathMap={[{ label: 'Главная', link: '/' }, { label: 'Каталог' }]} />
          <Row className="d-flex flex-column flex-md-row justify-content-between mt-4">
            <Col sm={9} lg={6} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Каталог товаров</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">из Азии под заказ</h1>
            </Col>
          </Row>
        </Container>
        <CategoriesGrid categories={categoryItems} className="mt-5" />

        {/*<Container style={{ marginTop: '100px' }}>
          <Row className="d-flex flex-column flex-md-row justify-content-between">
            <Col xs={8} sm={6} lg={4} className="d-flex flex-column mb-xl-0 mb-2 text-uppercase">
              <h1 className="lh-1">Популярные</h1>
              <h1 className="mb-0 ms-auto lh-1 text-primary">товары</h1>
            </Col>
          </Row>
        </Container>
        <ProductsGrid productData={data?.popularProducts} style={{ marginBottom: '100px' }} />*/}
      </>
    )
  } satisfies PageJsx<{
    categories: PaginatedDocs<Category>
    popularProducts: PaginatedDocs<Product>
  }>)

version_fetch_data:
[cell repeats an earlier one in this file: 1012 characters]

version_code:
  export default function({runtime:e,components:{CategoriesGrid:s,ProductsGrid:l,Breadcrumb:t},deps:{rb:{Container:r,Row:a,Col:m}},props:{data:n}}){let c=n?.categories.docs||[];return c=c.sort((e,s)=>{let l=e.attributes.find(e=>"homeOrder"===e.key),t=s.attributes.find(e=>"homeOrder"===e.key);return(l?.number??0)-(t?.number??0)}),e.jsxs(e.Fragment,{children:[e.jsxs(r,{className:"mb-5",children:[e.jsx(t,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог"}]}),e.jsx(a,{className:"d-flex flex-column flex-md-row justify-content-between mt-4",children:e.jsxs(m,{sm:9,lg:6,className:"d-flex flex-column mb-xl-0 mb-2 text-uppercase",children:[e.jsx("h1",{className:"lh-1",children:"Каталог товаров"}),e.jsx("h1",{className:"mb-0 ms-auto lh-1 text-primary",children:"из Азии под заказ"})]})})]}),e.jsx(s,{categories:c,className:"mt-5"})]})}


version_title: Контакты
version_path: /contacts
version_src_type: jsx
version_updated_at: 2025-11-17T10:29:50.976Z
version_created_at: 2025-11-17T09:48:13.878Z
version__status: published
created_at: 2025-11-17T10:29:50.986Z
updated_at: 2025-11-17T10:29:50.986Z
version_jsx:
  import type { Form } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Form },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    const formData = data?.formData
    return (
      <>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1462.1171926811026!2d74.57999676365375!3d42.86789679569354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9444cb1ab61%3A0x9099b136b1f4b28f!2zTmV0Y28g0L7QvdC70LDQudC9INC80LDRgNC60LXRgg!5e0!3m2!1sru!2skg!4v1755187004065!5m2!1sru!2skg"
          allowFullScreen={false}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          style={{
            position: 'absolute',
            height: '100%',
            width: '100%',
            filter: 'invert(90%) hue-rotate(180deg) brightness(90%) contrast(85%)',
          }}
        />
        <Container>
          <Row style={{ minHeight: '60vh' }} className="d-block d-md-none" />
          <Row className="d-flex justify-content-end px-2 mb-5">
            <Col
              sm={10}
              md={4}
              className="position-relative z-2 py-5 px-4 bg-dark rounded"
              style={{ top: '80px' }}
            >
              <Form formData={formData} />
            </Col>
          </Row>
        </Container>
      </>
    )
  } satisfies PageJsx<{ formData: Form }>)

version_fetch_data:
  export default async function FetchData({ deps }) {
      const payload = await deps.app.getPayload();
      const config = await deps.app.getGlobalConfig();
      const formId = config.forms.feedbackForm || 0;
      const formData = await payload.find({
          collection: 'forms',
          where: {
              id: formId,
          },
          pagination: false,
      });
      return { formData: formData.docs[0] };
  }

version_code:
  export default function({runtime:e,components:{Form:s},deps:{rb:{Container:r,Row:t,Col:n}},props:{data:o}}){let d=o?.formData;return e.jsxs(e.Fragment,{children:[e.jsx("iframe",{src:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1462.1171926811026!2d74.57999676365375!3d42.86789679569354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9444cb1ab61%3A0x9099b136b1f4b28f!2zTmV0Y28g0L7QvdC70LDQudC9INC80LDRgNC60LXRgg!5e0!3m2!1sru!2skg!4v1755187004065!5m2!1sru!2skg",allowFullScreen:!1,loading:"lazy",referrerPolicy:"no-referrer-when-downgrade",style:{position:"absolute",height:"100%",width:"100%",filter:"invert(90%) hue-rotate(180deg) brightness(90%) contrast(85%)"}}),e.jsxs(r,{children:[e.jsx(t,{style:{minHeight:"60vh"},className:"d-block d-md-none"}),e.jsx(t,{className:"d-flex justify-content-end px-2 mb-5",children:e.jsx(n,{sm:10,md:4,className:"position-relative z-2 py-5 px-4 bg-dark rounded",style:{top:"80px"},children:e.jsx(s,{formData:d})})})]})]})}


version_title: Контакты
version_path: /contacts
version_src_type: jsx
version_updated_at: 2025-11-17T10:41:40.111Z
version_created_at: 2025-11-17T09:48:13.878Z
version__status: draft
created_at: 2025-11-17T10:41:40.111Z
updated_at: 2025-11-17T10:41:40.111Z
version_jsx:
  import type { Form } from '@/payload-types'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Form },
    deps: {
      rb: { Container, Row, Col },
    },
    props: { data },
  }) {
    const formData = data?.formData
    return (
      <>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1462.1171926811026!2d74.57999676365375!3d42.86789679569354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9444cb1ab61%3A0x9099b136b1f4b28f!2zTmV0Y28g0L7QvdC70LDQudC9INC80LDRgNC60LXRgg!5e0!3m2!1sru!2skg!4v1755187004065!5m2!1sru!2skg"
          allowFullScreen={false}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          style={{
            position: 'absolute',
            paddingTop: '70px',
            height: '100%',
            width: '100%',
            filter: 'invert(90%) hue-rotate(180deg) brightness(90%) contrast(85%)',
          }}
        />
        <Container>
          <Row style={{ minHeight: '60vh' }} className="d-block d-md-none" />
          <Row className="d-flex justify-content-end px-2 mb-5">
            <Col
              sm={10}
              md={4}
              className="position-relative z-2 py-5 px-4 bg-dark rounded"
              style={{ top: '80px' }}
            >
              <Form formData={formData} />
            </Col>
          </Row>
        </Container>
      </>
    )
  } satisfies PageJsx<{ formData: Form }>)

version_fetch_data:
[cell repeats an earlier one in this file: 408 characters]

version_code:
  export default function({runtime:e,components:{Form:s},deps:{rb:{Container:r,Row:t,Col:d}},props:{data:n}}){let o=n?.formData;return e.jsxs(e.Fragment,{children:[e.jsx("iframe",{src:"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1462.1171926811026!2d74.57999676365375!3d42.86789679569354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9444cb1ab61%3A0x9099b136b1f4b28f!2zTmV0Y28g0L7QvdC70LDQudC9INC80LDRgNC60LXRgg!5e0!3m2!1sru!2skg!4v1755187004065!5m2!1sru!2skg",allowFullScreen:!1,loading:"lazy",referrerPolicy:"no-referrer-when-downgrade",style:{position:"absolute",paddingTop:"70px",height:"100%",width:"100%",filter:"invert(90%) hue-rotate(180deg) brightness(90%) contrast(85%)"}}),e.jsxs(r,{children:[e.jsx(t,{style:{minHeight:"60vh"},className:"d-block d-md-none"}),e.jsx(t,{className:"d-flex justify-content-end px-2 mb-5",children:e.jsx(d,{sm:10,md:4,className:"position-relative z-2 py-5 px-4 bg-dark rounded",style:{top:"80px"},children:e.jsx(s,{formData:o})})})]})]})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.currentCategory.name };
  }

version_title: Категории слаг
version_path: /categories/:slug
version_src_type: jsx
version_updated_at: 2025-11-18T10:30:21.776Z
version_created_at: 2025-11-17T09:48:13.942Z
version__status: published
created_at: 2025-11-18T10:30:21.786Z
updated_at: 2025-11-18T10:30:21.786Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Breadcrumb, Template, Slider, RichText, ProductCard },
    deps: {
      rb: { Container, Image, Row, Col, Pagination },
      next: { Link },
      react: { Fragment },
    },
    props: { route, data },
  }) {
    let template = undefined
    const { categoriesData, productData, currentCategory } = data!
    const templateData = currentCategory.template || undefined
    const { docs, totalPages, page = 1 } = productData
    const categoryName = currentCategory.name

    const categoryElements = categoriesData.docs.map((category: Category) => {
      const imgUrl = (typeof category.img !== 'number' && category.img?.sizes?.main?.url) || undefined

      return (
        <Link
          href={`/categories/${category.slug}`}
          key={category.slug}
          className="link-light"
          style={{ display: 'block', position: 'relative', height: '100%' }}
        >
          <Image
            src={imgUrl}
            alt={category.name}
            style={{
              width: '250px',
              height: '250px',
              objectFit: 'cover',
              display: 'block',
            }}
          />
          <div
            style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              width: '100%',
              height: '50%',
              background: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)',
              pointerEvents: 'none',
            }}
          />
          <h5 className="position-absolute bottom-0 mx-4 mb-4 fw-semibold">{category.name}</h5>
        </Link>
      )
    })
    if (templateData) {
      template = <Template template={templateData} className="my-5" {...{ route, data }} />
    } else {
      template = (
        <Container className="my-5">
          <Row className="row-gap-4">
            {docs.map((p, i) => (
              <Fragment key={p.id}>
                {i > 0 && i % 8 === 0 && (
                  <Col xs={12} className="d-none">
                    <Link href="https://solbi.kg" target="_blank" className="d-block">
                      <Image
                        src="/api/media/file/banner_solbi_8x1.jpg"
                        fluid
                        className="border rounded"
                      />
                    </Link>
                  </Col>
                )}
                <Col key={p.id} xs={12} sm={6} lg={3}>
                  <Link
                    href={`${route.path}/${p.slug}`}
                    className="link-dark link-underline-opacity-0 link-underline-opacity-100-hover"
                  >
                    <ProductCard product={p} />
                  </Link>
                </Col>
              </Fragment>
            ))}
          </Row>
          <Row className="position-sticky bottom-0 mt-5">
            <Col>
              <Link href="https://solbi.kg" target="_blank" className="d-block mx-n2 mx-sm-0">
                <Image
                  src="/api/media/file/banner_solbi_8x1.jpg"
                  fluid
                  className="rounded-top shadow"
                />
              </Link>
            </Col>
          </Row>
          {totalPages > 1 && (
            <Row className="py-5">
              <Pagination className="justify-content-center">
                <Pagination.First
                  as={Link}
                  href={`${route.path}?p=1`}
                  disabled={page === 1}
                  className="d-none d-sm-block"
                />
                <Pagination.Prev
                  as={Link}
                  href={`${route.path}?p=${page - 1}`}
                  disabled={page === 1}
                />

                {page > 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=1`}>
                    {1}
                  </Pagination.Item>
                )}
                {page > 3 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=2`} className="d-none d-sm-block">
                    {2}
                  </Pagination.Item>
                )}
                {page > 4 && <Pagination.Ellipsis className="d-none d-sm-block" />}

                {page > 2 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page - 1}`}>
                    {page - 1}
                  </Pagination.Item>
                )}
                <Pagination.Item as={Link} active>
                  {page}
                </Pagination.Item>
                {page < totalPages - 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page + 1}`}>
                    {page + 1}
                  </Pagination.Item>
                )}

                {page < totalPages - 3 && <Pagination.Ellipsis className="d-none d-sm-block" />}
                {page < totalPages - 2 && (
                  <Pagination.Item
                    as={Link}
                    href={`${route.path}?p=${totalPages - 1}`}
                    className="d-none d-sm-block"
                  >
                    {totalPages - 1}
                  </Pagination.Item>
                )}
                {page < totalPages && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${totalPages}`}>
                    {totalPages}
                  </Pagination.Item>
                )}

                <Pagination.Next
                  as={Link}
                  href={`${route.path}?p=${page + 1}`}
                  disabled={page === totalPages}
                />
                <Pagination.Last
                  as={Link}
                  href={`${route.path}?p=${totalPages}`}
                  disabled={page === totalPages}
                  className="d-none d-sm-block"
                />
              </Pagination>
            </Row>
          )}
        </Container>
      )
    }
    return (
      <>
        <div style={{ position: 'relative', height: '400px' }}>
          <Image
            src={'/api/media/file/categories-slug-bg.jpg'}
            alt="cars delivery background"
            className="position-absolute w-100 h-100"
            style={{ objectFit: 'cover' }}
          />
          <Container className="position-relative z-1 text-white">
            <Row style={{ paddingTop: '80px' }}>
              <Col xs={12}>
                <h1 className="text-uppercase">{currentCategory.name}</h1>
              </Col>
              <Col xs={0} lg={1} />
              <Col className="mt-lg-3" xs={12} lg={6}>
                <RichText data={currentCategory.description} />
              </Col>
            </Row>
          </Container>
          <div
            style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))',
              pointerEvents: 'none',
              mask: 'url(#fullpage-mask)',
              maskRepeat: 'no-repeat',
              maskPosition: 'bottom right',
            }}
          />

          <svg width="0" height="0" style={{ position: 'absolute' }}>
            <defs>
              <mask id="fullpage-mask">
                <rect width="100vw" height="100vh" fill="white" />
                <use href="#dynamic-mask-shapes" x={'calc(60vw)'} y={-50} />
              </mask>
            </defs>
          </svg>
        </div>
        <Container className="mt-4">
          <Row>
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}` },
              ]}
            />
          </Row>
        </Container>
        <div className="overflow-hidden mt-3">
          <Slider className="overflow-visible mx-3">{categoryElements}</Slider>
        </div>

        {template}
      </>
    )
  } satisfies PageJsx<{
    categoriesData: PaginatedDocs<Category>
    productData: PaginatedDocs<Product>
    currentCategory: Category
  }>)

version_fetch_data:
  export default async function ({ route, deps }) {
      const slug = route.params.slug;
      if (!slug) {
          return undefined;
      }
      const page = route.searchParams.p;
      const payload = await deps.app.getPayload();
      const productData = await payload.find({
          collection: 'products',
          where: {
              'category.slug': {
                  in: slug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              img: true,
              category: true,
          },
          limit: 16,
          page: page ? Number(page) : undefined,
          pagination: true,
      });
      const categoryData = await payload.find({
          collection: 'categories',
          where: {
              slug: {
                  equals: slug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              description: true,
          },
          limit: 1,
          pagination: false,
      });
      const categoriesData = await payload.find({
          collection: 'categories',
          where: {
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              img: true,
          },
          pagination: false,
      });
      const currentCategory = categoryData.docs[0];
      if (!currentCategory) {
          return deps.next.notFound();
      }
      return { categoriesData, productData, currentCategory };
  }

version_code:
  export default function({runtime:s,components:{Breadcrumb:e,Template:a,Slider:l,RichText:i,ProductCard:t},deps:{rb:{Container:n,Image:r,Row:d,Col:c,Pagination:o},next:{Link:h},react:{Fragment:m}},props:{route:p,data:x}}){let j,{categoriesData:b,productData:g,currentCategory:f}=x,k=f.template||void 0,{docs:u,totalPages:N,page:v=1}=g,y=f.name,$=b.docs.map(e=>{let a="number"!=typeof e.img&&e.img?.sizes?.main?.url||void 0;return s.jsxs(h,{href:`/categories/${e.slug}`,className:"link-light",style:{display:"block",position:"relative",height:"100%"},children:[s.jsx(r,{src:a,alt:e.name,style:{width:"250px",height:"250px",objectFit:"cover",display:"block"}}),s.jsx("div",{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"50%",background:"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)",pointerEvents:"none"}}),s.jsx("h5",{className:"position-absolute bottom-0 mx-4 mb-4 fw-semibold",children:e.name})]},e.slug)});return j=k?s.jsx(a,{template:k,className:"my-5",route:p,data:x}):s.jsxs(n,{className:"my-5",children:[s.jsx(d,{className:"row-gap-4",children:u.map((e,a)=>s.jsxs(m,{children:[a>0&&a%8==0&&s.jsx(c,{xs:12,className:"d-none",children:s.jsx(h,{href:"https://solbi.kg",target:"_blank",className:"d-block",children:s.jsx(r,{src:"/api/media/file/banner_solbi_8x1.jpg",fluid:!0,className:"border rounded"})})}),s.jsx(c,{xs:12,sm:6,lg:3,children:s.jsx(h,{href:`${p.path}/${e.slug}`,className:"link-dark link-underline-opacity-0 link-underline-opacity-100-hover",children:s.jsx(t,{product:e})})},e.id)]},e.id))}),s.jsx(d,{className:"position-sticky bottom-0 mt-5",children:s.jsx(c,{children:s.jsx(h,{href:"https://solbi.kg",target:"_blank",className:"d-block mx-n2 mx-sm-0",children:s.jsx(r,{src:"/api/media/file/banner_solbi_8x1.jpg",fluid:!0,className:"rounded-top shadow"})})})}),N>1&&s.jsx(d,{className:"py-5",children:s.jsxs(o,{className:"justify-content-center",children:[s.jsx(o.First,{as:h,href:`${p.path}?p=1`,disabled:1===v,className:"d-none d-sm-block"}),s.jsx(o.Prev,{as:h,href:`${p.path}?p=${v-1}`,disabled:1===v}),v>1&&s.jsx(o.Item,{as:h,href:`${p.path}?p=1`,children:1}),v>3&&s.jsx(o.Item,{as:h,href:`${p.path}?p=2`,className:"d-none d-sm-block",children:2}),v>4&&s.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v>2&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${v-1}`,children:v-1}),s.jsx(o.Item,{as:h,active:!0,children:v}),v<N-1&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${v+1}`,children:v+1}),v<N-3&&s.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v<N-2&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${N-1}`,className:"d-none d-sm-block",children:N-1}),v<N&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${N}`,children:N}),s.jsx(o.Next,{as:h,href:`${p.path}?p=${v+1}`,disabled:v===N}),s.jsx(o.Last,{as:h,href:`${p.path}?p=${N}`,disabled:v===N,className:"d-none d-sm-block"})]})})]}),s.jsxs(s.Fragment,{children:[s.jsxs("div",{style:{position:"relative",height:"400px"},children:[s.jsx(r,{src:"/api/media/file/categories-slug-bg.jpg",alt:"cars delivery background",className:"position-absolute w-100 h-100",style:{objectFit:"cover"}}),s.jsx(n,{className:"position-relative z-1 text-white",children:s.jsxs(d,{style:{paddingTop:"80px"},children:[s.jsx(c,{xs:12,children:s.jsx("h1",{className:"text-uppercase",children:f.name})}),s.jsx(c,{xs:0,lg:1}),s.jsx(c,{className:"mt-lg-3",xs:12,lg:6,children:s.jsx(i,{data:f.description})})]})}),s.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))",pointerEvents:"none",mask:"url(#fullpage-mask)",maskRepeat:"no-repeat",maskPosition:"bottom right"}}),s.jsx("svg",{width:"0",height:"0",style:{position:"absolute"},children:s.jsx("defs",{children:s.jsxs("mask",{id:"fullpage-mask",children:[s.jsx("rect",{width:"100vw",height:"100vh",fill:"white"}),s.jsx("use",{href:"#dynamic-mask-shapes",x:"calc(60vw)",y:-50})]})})})]}),s.jsx(n,{className:"mt-4",children:s.jsx(d,{children:s.jsx(e,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${y}`}]})})}),s.jsx("div",{className:"overflow-hidden mt-3",children:s.jsx(l,{className:"overflow-visible mx-3",children:$})}),j]})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.currentCategory.name };
  }

version_title: Категории слаг
version_path: /categories/:slug
version_src_type: jsx
version_updated_at: 2025-11-18T10:33:49.385Z
version_created_at: 2025-11-17T09:48:13.942Z
version__status: published
created_at: 2025-11-18T10:33:49.415Z
updated_at: 2025-11-18T10:33:49.415Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Breadcrumb, Template, Slider, RichText, ProductCard },
    deps: {
      rb: { Container, Image, Row, Col, Pagination },
      next: { Link },
      react: { Fragment },
    },
    props: { route, data },
  }) {
    let template = undefined
    const { categoriesData, productData, currentCategory } = data!
    const templateData = currentCategory.template || undefined
    const { docs, totalPages, page = 1 } = productData
    const categoryName = currentCategory.name

    const categoryElements = categoriesData.docs.map((category: Category) => {
      const imgUrl = (typeof category.img !== 'number' && category.img?.sizes?.main?.url) || undefined

      return (
        <Link
          href={`/categories/${category.slug}`}
          key={category.slug}
          className="link-light"
          style={{ display: 'block', position: 'relative', height: '100%' }}
        >
          <Image
            src={imgUrl}
            alt={category.name}
            style={{
              width: '250px',
              height: '250px',
              objectFit: 'cover',
              display: 'block',
            }}
          />
          <div
            style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              width: '100%',
              height: '50%',
              background: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)',
              pointerEvents: 'none',
            }}
          />
          <h5 className="position-absolute bottom-0 mx-4 mb-4 fw-semibold">{category.name}</h5>
        </Link>
      )
    })
    if (templateData) {
      template = <Template template={templateData} className="my-5" {...{ route, data }} />
    } else {
      template = (
        <Container className="my-5">
          <Row className="row-gap-4">
            {docs.map((p, i) => (
              <Fragment key={p.id}>
                {i > 0 && i % 8 === 0 && (
                  <Col xs={12} className="d-none">
                    <Link href="https://solbi.kg" target="_blank" className="d-block">
                      <Image
                        src="/api/media/file/banner_solbi_8x1.jpg"
                        fluid
                        className="border rounded"
                      />
                    </Link>
                  </Col>
                )}
                <Col key={p.id} xs={12} sm={6} lg={3}>
                  <Link
                    href={`${route.path}/${p.slug}`}
                    className="link-dark link-underline-opacity-0 link-underline-opacity-100-hover"
                  >
                    <ProductCard product={p} />
                  </Link>
                </Col>
              </Fragment>
            ))}
          </Row>
          <Row className="d-none position-sticky bottom-0 mt-5">
            <Col>
              <Link href="https://solbi.kg" target="_blank" className="d-block mx-n2 mx-sm-0">
                <Image
                  src="/api/media/file/banner_solbi_8x1.jpg"
                  fluid
                  className="rounded-top shadow"
                />
              </Link>
            </Col>
          </Row>
          {totalPages > 1 && (
            <Row className="py-5">
              <Pagination className="justify-content-center">
                <Pagination.First
                  as={Link}
                  href={`${route.path}?p=1`}
                  disabled={page === 1}
                  className="d-none d-sm-block"
                />
                <Pagination.Prev
                  as={Link}
                  href={`${route.path}?p=${page - 1}`}
                  disabled={page === 1}
                />

                {page > 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=1`}>
                    {1}
                  </Pagination.Item>
                )}
                {page > 3 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=2`} className="d-none d-sm-block">
                    {2}
                  </Pagination.Item>
                )}
                {page > 4 && <Pagination.Ellipsis className="d-none d-sm-block" />}

                {page > 2 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page - 1}`}>
                    {page - 1}
                  </Pagination.Item>
                )}
                <Pagination.Item as={Link} active>
                  {page}
                </Pagination.Item>
                {page < totalPages - 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page + 1}`}>
                    {page + 1}
                  </Pagination.Item>
                )}

                {page < totalPages - 3 && <Pagination.Ellipsis className="d-none d-sm-block" />}
                {page < totalPages - 2 && (
                  <Pagination.Item
                    as={Link}
                    href={`${route.path}?p=${totalPages - 1}`}
                    className="d-none d-sm-block"
                  >
                    {totalPages - 1}
                  </Pagination.Item>
                )}
                {page < totalPages && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${totalPages}`}>
                    {totalPages}
                  </Pagination.Item>
                )}

                <Pagination.Next
                  as={Link}
                  href={`${route.path}?p=${page + 1}`}
                  disabled={page === totalPages}
                />
                <Pagination.Last
                  as={Link}
                  href={`${route.path}?p=${totalPages}`}
                  disabled={page === totalPages}
                  className="d-none d-sm-block"
                />
              </Pagination>
            </Row>
          )}
        </Container>
      )
    }
    return (
      <>
        <div style={{ position: 'relative', height: '400px' }}>
          <Image
            src={'/api/media/file/categories-slug-bg.jpg'}
            alt="cars delivery background"
            className="position-absolute w-100 h-100"
            style={{ objectFit: 'cover' }}
          />
          <Container className="position-relative z-1 text-white">
            <Row style={{ paddingTop: '80px' }}>
              <Col xs={12}>
                <h1 className="text-uppercase">{currentCategory.name}</h1>
              </Col>
              <Col xs={0} lg={1} />
              <Col className="mt-lg-3" xs={12} lg={6}>
                <RichText data={currentCategory.description} />
              </Col>
            </Row>
          </Container>
          <div
            style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))',
              pointerEvents: 'none',
              mask: 'url(#fullpage-mask)',
              maskRepeat: 'no-repeat',
              maskPosition: 'bottom right',
            }}
          />

          <svg width="0" height="0" style={{ position: 'absolute' }}>
            <defs>
              <mask id="fullpage-mask">
                <rect width="100vw" height="100vh" fill="white" />
                <use href="#dynamic-mask-shapes" x={'calc(60vw)'} y={-50} />
              </mask>
            </defs>
          </svg>
        </div>
        <Container className="mt-4">
          <Row>
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}` },
              ]}
            />
          </Row>
        </Container>
        <div className="overflow-hidden mt-3">
          <Slider className="overflow-visible mx-3">{categoryElements}</Slider>
        </div>

        {template}
      </>
    )
  } satisfies PageJsx<{
    categoriesData: PaginatedDocs<Category>
    productData: PaginatedDocs<Product>
    currentCategory: Category
  }>)

version_fetch_data:
  export default async function ({ route, deps }) {
      const slug = route.params.slug;
      if (!slug) {
          return undefined;
      }
      const page = route.searchParams.p;
      const payload = await deps.app.getPayload();
      const productData = await payload.find({
          collection: 'products',
          where: {
              'category.slug': {
                  in: slug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              img: true,
              category: true,
          },
          limit: 16,
          page: page ? Number(page) : undefined,
          pagination: true,
      });
      const categoryData = await payload.find({
          collection: 'categories',
          where: {
              slug: {
                  equals: slug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              description: true,
          },
          limit: 1,
          pagination: false,
      });
      const categoriesData = await payload.find({
          collection: 'categories',
          where: {
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              img: true,
          },
          pagination: false,
      });
      const currentCategory = categoryData.docs[0];
      if (!currentCategory) {
          return deps.next.notFound();
      }
      return { categoriesData, productData, currentCategory };
  }

version_code:
  export default function({runtime:s,components:{Breadcrumb:e,Template:a,Slider:l,RichText:i,ProductCard:t},deps:{rb:{Container:n,Image:r,Row:d,Col:c,Pagination:o},next:{Link:h},react:{Fragment:m}},props:{route:p,data:x}}){let j,{categoriesData:b,productData:g,currentCategory:f}=x,k=f.template||void 0,{docs:u,totalPages:N,page:v=1}=g,y=f.name,$=b.docs.map(e=>{let a="number"!=typeof e.img&&e.img?.sizes?.main?.url||void 0;return s.jsxs(h,{href:`/categories/${e.slug}`,className:"link-light",style:{display:"block",position:"relative",height:"100%"},children:[s.jsx(r,{src:a,alt:e.name,style:{width:"250px",height:"250px",objectFit:"cover",display:"block"}}),s.jsx("div",{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"50%",background:"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)",pointerEvents:"none"}}),s.jsx("h5",{className:"position-absolute bottom-0 mx-4 mb-4 fw-semibold",children:e.name})]},e.slug)});return j=k?s.jsx(a,{template:k,className:"my-5",route:p,data:x}):s.jsxs(n,{className:"my-5",children:[s.jsx(d,{className:"row-gap-4",children:u.map((e,a)=>s.jsxs(m,{children:[a>0&&a%8==0&&s.jsx(c,{xs:12,className:"d-none",children:s.jsx(h,{href:"https://solbi.kg",target:"_blank",className:"d-block",children:s.jsx(r,{src:"/api/media/file/banner_solbi_8x1.jpg",fluid:!0,className:"border rounded"})})}),s.jsx(c,{xs:12,sm:6,lg:3,children:s.jsx(h,{href:`${p.path}/${e.slug}`,className:"link-dark link-underline-opacity-0 link-underline-opacity-100-hover",children:s.jsx(t,{product:e})})},e.id)]},e.id))}),s.jsx(d,{className:"d-none position-sticky bottom-0 mt-5",children:s.jsx(c,{children:s.jsx(h,{href:"https://solbi.kg",target:"_blank",className:"d-block mx-n2 mx-sm-0",children:s.jsx(r,{src:"/api/media/file/banner_solbi_8x1.jpg",fluid:!0,className:"rounded-top shadow"})})})}),N>1&&s.jsx(d,{className:"py-5",children:s.jsxs(o,{className:"justify-content-center",children:[s.jsx(o.First,{as:h,href:`${p.path}?p=1`,disabled:1===v,className:"d-none d-sm-block"}),s.jsx(o.Prev,{as:h,href:`${p.path}?p=${v-1}`,disabled:1===v}),v>1&&s.jsx(o.Item,{as:h,href:`${p.path}?p=1`,children:1}),v>3&&s.jsx(o.Item,{as:h,href:`${p.path}?p=2`,className:"d-none d-sm-block",children:2}),v>4&&s.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v>2&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${v-1}`,children:v-1}),s.jsx(o.Item,{as:h,active:!0,children:v}),v<N-1&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${v+1}`,children:v+1}),v<N-3&&s.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v<N-2&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${N-1}`,className:"d-none d-sm-block",children:N-1}),v<N&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${N}`,children:N}),s.jsx(o.Next,{as:h,href:`${p.path}?p=${v+1}`,disabled:v===N}),s.jsx(o.Last,{as:h,href:`${p.path}?p=${N}`,disabled:v===N,className:"d-none d-sm-block"})]})})]}),s.jsxs(s.Fragment,{children:[s.jsxs("div",{style:{position:"relative",height:"400px"},children:[s.jsx(r,{src:"/api/media/file/categories-slug-bg.jpg",alt:"cars delivery background",className:"position-absolute w-100 h-100",style:{objectFit:"cover"}}),s.jsx(n,{className:"position-relative z-1 text-white",children:s.jsxs(d,{style:{paddingTop:"80px"},children:[s.jsx(c,{xs:12,children:s.jsx("h1",{className:"text-uppercase",children:f.name})}),s.jsx(c,{xs:0,lg:1}),s.jsx(c,{className:"mt-lg-3",xs:12,lg:6,children:s.jsx(i,{data:f.description})})]})}),s.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))",pointerEvents:"none",mask:"url(#fullpage-mask)",maskRepeat:"no-repeat",maskPosition:"bottom right"}}),s.jsx("svg",{width:"0",height:"0",style:{position:"absolute"},children:s.jsx("defs",{children:s.jsxs("mask",{id:"fullpage-mask",children:[s.jsx("rect",{width:"100vw",height:"100vh",fill:"white"}),s.jsx("use",{href:"#dynamic-mask-shapes",x:"calc(60vw)",y:-50})]})})})]}),s.jsx(n,{className:"mt-4",children:s.jsx(d,{children:s.jsx(e,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${y}`}]})})}),s.jsx("div",{className:"overflow-hidden mt-3",children:s.jsx(l,{className:"overflow-visible mx-3",children:$})}),j]})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.currentCategory.name };
  }

version_title: Категории слаг
version_path: /categories/:slug
version_src_type: jsx
version_updated_at: 2025-11-18T10:38:03.197Z
version_created_at: 2025-11-17T09:48:13.942Z
version__status: published
created_at: 2025-11-18T10:38:03.208Z
updated_at: 2025-11-18T10:38:03.208Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Breadcrumb, Template, Slider, RichText, ProductCard },
    deps: {
      rb: { Container, Image, Row, Col, Pagination },
      next: { Link },
      react: { Fragment },
    },
    props: { route, data },
  }) {
    let template = undefined
    const { categoriesData, productData, currentCategory } = data!
    const templateData = currentCategory.template || undefined
    const { docs, totalPages, page = 1 } = productData
    const categoryName = currentCategory.name

    const categoryElements = categoriesData.docs.map((category: Category) => {
      const imgUrl = (typeof category.img !== 'number' && category.img?.sizes?.main?.url) || undefined

      return (
        <Link
          href={`/categories/${category.slug}`}
          key={category.slug}
          className="link-light"
          style={{ display: 'block', position: 'relative', height: '100%' }}
        >
          <Image
            src={imgUrl}
            alt={category.name}
            style={{
              width: '250px',
              height: '250px',
              objectFit: 'cover',
              display: 'block',
            }}
          />
          <div
            style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              width: '100%',
              height: '50%',
              background: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)',
              pointerEvents: 'none',
            }}
          />
          <h5 className="position-absolute bottom-0 mx-4 mb-4 fw-semibold">{category.name}</h5>
        </Link>
      )
    })
    if (templateData) {
      template = <Template template={templateData} className="my-5" {...{ route, data }} />
    } else {
      template = (
        <Container className="my-5">
          <Row className="row-gap-4">
            {docs.map((p, i) => (
              <Fragment key={p.id}>
                {i > 0 && i % 8 === 0 && (
                  <Col xs={12} className="d-none">
                    <Link href="https://solbi.kg" target="_blank" className="d-block">
                      <Image
                        src="/api/media/file/banner_solbi_8x1.jpg"
                        fluid
                        className="border rounded"
                      />
                    </Link>
                  </Col>
                )}
                <Col key={p.id} xs={12} sm={6} lg={3}>
                  <Link
                    href={`${route.path}/${p.slug}`}
                    className="link-dark link-underline-opacity-0 link-underline-opacity-100-hover"
                  >
                    <ProductCard product={p} />
                  </Link>
                </Col>
              </Fragment>
            ))}
          </Row>
          <Row className="position-sticky bottom-0 mt-5">
            <Col>
              <Link href="https://solbi.kg" target="_blank" className="d-block mx-n2 mx-sm-0">
                <Image
                  src="/api/media/file/banner_solbi_8x1.jpg"
                  fluid
                  className="rounded-top shadow"
                />
              </Link>
            </Col>
          </Row>
          {totalPages > 1 && (
            <Row className="py-5">
              <Pagination className="justify-content-center">
                <Pagination.First
                  as={Link}
                  href={`${route.path}?p=1`}
                  disabled={page === 1}
                  className="d-none d-sm-block"
                />
                <Pagination.Prev
                  as={Link}
                  href={`${route.path}?p=${page - 1}`}
                  disabled={page === 1}
                />

                {page > 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=1`}>
                    {1}
                  </Pagination.Item>
                )}
                {page > 3 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=2`} className="d-none d-sm-block">
                    {2}
                  </Pagination.Item>
                )}
                {page > 4 && <Pagination.Ellipsis className="d-none d-sm-block" />}

                {page > 2 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page - 1}`}>
                    {page - 1}
                  </Pagination.Item>
                )}
                <Pagination.Item as={Link} active>
                  {page}
                </Pagination.Item>
                {page < totalPages - 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page + 1}`}>
                    {page + 1}
                  </Pagination.Item>
                )}

                {page < totalPages - 3 && <Pagination.Ellipsis className="d-none d-sm-block" />}
                {page < totalPages - 2 && (
                  <Pagination.Item
                    as={Link}
                    href={`${route.path}?p=${totalPages - 1}`}
                    className="d-none d-sm-block"
                  >
                    {totalPages - 1}
                  </Pagination.Item>
                )}
                {page < totalPages && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${totalPages}`}>
                    {totalPages}
                  </Pagination.Item>
                )}

                <Pagination.Next
                  as={Link}
                  href={`${route.path}?p=${page + 1}`}
                  disabled={page === totalPages}
                />
                <Pagination.Last
                  as={Link}
                  href={`${route.path}?p=${totalPages}`}
                  disabled={page === totalPages}
                  className="d-none d-sm-block"
                />
              </Pagination>
            </Row>
          )}
        </Container>
      )
    }
    return (
      <>
        <div style={{ position: 'relative', height: '400px' }}>
          <Image
            src={'/api/media/file/categories-slug-bg.jpg'}
            alt="cars delivery background"
            className="position-absolute w-100 h-100"
            style={{ objectFit: 'cover' }}
          />
          <Container className="position-relative z-1 text-white">
            <Row style={{ paddingTop: '80px' }}>
              <Col xs={12}>
                <h1 className="text-uppercase">{currentCategory.name}</h1>
              </Col>
              <Col xs={0} lg={1} />
              <Col className="mt-lg-3" xs={12} lg={6}>
                <RichText data={currentCategory.description} />
              </Col>
            </Row>
          </Container>
          <div
            style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))',
              pointerEvents: 'none',
              mask: 'url(#fullpage-mask)',
              maskRepeat: 'no-repeat',
              maskPosition: 'bottom right',
            }}
          />

          <svg width="0" height="0" style={{ position: 'absolute' }}>
            <defs>
              <mask id="fullpage-mask">
                <rect width="100vw" height="100vh" fill="white" />
                <use href="#dynamic-mask-shapes" x={'calc(60vw)'} y={-50} />
              </mask>
            </defs>
          </svg>
        </div>
        <Container className="mt-4">
          <Row>
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}` },
              ]}
            />
          </Row>
        </Container>
        <div className="overflow-hidden mt-3">
          <Slider className="overflow-visible mx-3">{categoryElements}</Slider>
        </div>

        {template}
      </>
    )
  } satisfies PageJsx<{
    categoriesData: PaginatedDocs<Category>
    productData: PaginatedDocs<Product>
    currentCategory: Category
  }>)

version_fetch_data:
  export default async function ({ route, deps }) {
    const slug = route.params.slug
    if (!slug) {
      return undefined
    }

    const page = route.searchParams.p

    const payload = await deps.app.getPayload()
    const productData = await payload.find({
      collection: 'products',
      where: {
        'category.slug': {
          in: slug,
        },
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        img: true,
        category: true,
      },
      limit: 16,
      page: Number(page) || undefined,
      pagination: true,
    })

    const categoryData = await payload.find({
      collection: 'categories',
      where: {
        slug: {
          equals: slug,
        },
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        description: true,
        template: true,
      },
      limit: 1,
      pagination: false,
    })

    const categoriesData = await payload.find({
      collection: 'categories',
      where: {
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        img: true,
      },
      pagination: false,
    })

    const currentCategory = categoryData.docs[0]

    if (!currentCategory) {
      return deps.next.notFound()
    }

    return { categoriesData, productData, currentCategory }
  }

version_code:
  export default function({runtime:s,components:{Breadcrumb:e,Template:a,Slider:l,RichText:i,ProductCard:t},deps:{rb:{Container:n,Image:r,Row:d,Col:c,Pagination:o},next:{Link:h},react:{Fragment:m}},props:{route:p,data:x}}){let j,{categoriesData:b,productData:g,currentCategory:f}=x,k=f.template||void 0,{docs:u,totalPages:N,page:v=1}=g,y=f.name,$=b.docs.map(e=>{let a="number"!=typeof e.img&&e.img?.sizes?.main?.url||void 0;return s.jsxs(h,{href:`/categories/${e.slug}`,className:"link-light",style:{display:"block",position:"relative",height:"100%"},children:[s.jsx(r,{src:a,alt:e.name,style:{width:"250px",height:"250px",objectFit:"cover",display:"block"}}),s.jsx("div",{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"50%",background:"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)",pointerEvents:"none"}}),s.jsx("h5",{className:"position-absolute bottom-0 mx-4 mb-4 fw-semibold",children:e.name})]},e.slug)});return j=k?s.jsx(a,{template:k,className:"my-5",route:p,data:x}):s.jsxs(n,{className:"my-5",children:[s.jsx(d,{className:"row-gap-4",children:u.map((e,a)=>s.jsxs(m,{children:[a>0&&a%8==0&&s.jsx(c,{xs:12,className:"d-none",children:s.jsx(h,{href:"https://solbi.kg",target:"_blank",className:"d-block",children:s.jsx(r,{src:"/api/media/file/banner_solbi_8x1.jpg",fluid:!0,className:"border rounded"})})}),s.jsx(c,{xs:12,sm:6,lg:3,children:s.jsx(h,{href:`${p.path}/${e.slug}`,className:"link-dark link-underline-opacity-0 link-underline-opacity-100-hover",children:s.jsx(t,{product:e})})},e.id)]},e.id))}),s.jsx(d,{className:"position-sticky bottom-0 mt-5",children:s.jsx(c,{children:s.jsx(h,{href:"https://solbi.kg",target:"_blank",className:"d-block mx-n2 mx-sm-0",children:s.jsx(r,{src:"/api/media/file/banner_solbi_8x1.jpg",fluid:!0,className:"rounded-top shadow"})})})}),N>1&&s.jsx(d,{className:"py-5",children:s.jsxs(o,{className:"justify-content-center",children:[s.jsx(o.First,{as:h,href:`${p.path}?p=1`,disabled:1===v,className:"d-none d-sm-block"}),s.jsx(o.Prev,{as:h,href:`${p.path}?p=${v-1}`,disabled:1===v}),v>1&&s.jsx(o.Item,{as:h,href:`${p.path}?p=1`,children:1}),v>3&&s.jsx(o.Item,{as:h,href:`${p.path}?p=2`,className:"d-none d-sm-block",children:2}),v>4&&s.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v>2&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${v-1}`,children:v-1}),s.jsx(o.Item,{as:h,active:!0,children:v}),v<N-1&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${v+1}`,children:v+1}),v<N-3&&s.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v<N-2&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${N-1}`,className:"d-none d-sm-block",children:N-1}),v<N&&s.jsx(o.Item,{as:h,href:`${p.path}?p=${N}`,children:N}),s.jsx(o.Next,{as:h,href:`${p.path}?p=${v+1}`,disabled:v===N}),s.jsx(o.Last,{as:h,href:`${p.path}?p=${N}`,disabled:v===N,className:"d-none d-sm-block"})]})})]}),s.jsxs(s.Fragment,{children:[s.jsxs("div",{style:{position:"relative",height:"400px"},children:[s.jsx(r,{src:"/api/media/file/categories-slug-bg.jpg",alt:"cars delivery background",className:"position-absolute w-100 h-100",style:{objectFit:"cover"}}),s.jsx(n,{className:"position-relative z-1 text-white",children:s.jsxs(d,{style:{paddingTop:"80px"},children:[s.jsx(c,{xs:12,children:s.jsx("h1",{className:"text-uppercase",children:f.name})}),s.jsx(c,{xs:0,lg:1}),s.jsx(c,{className:"mt-lg-3",xs:12,lg:6,children:s.jsx(i,{data:f.description})})]})}),s.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))",pointerEvents:"none",mask:"url(#fullpage-mask)",maskRepeat:"no-repeat",maskPosition:"bottom right"}}),s.jsx("svg",{width:"0",height:"0",style:{position:"absolute"},children:s.jsx("defs",{children:s.jsxs("mask",{id:"fullpage-mask",children:[s.jsx("rect",{width:"100vw",height:"100vh",fill:"white"}),s.jsx("use",{href:"#dynamic-mask-shapes",x:"calc(60vw)",y:-50})]})})})]}),s.jsx(n,{className:"mt-4",children:s.jsx(d,{children:s.jsx(e,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${y}`}]})})}),s.jsx("div",{className:"overflow-hidden mt-3",children:s.jsx(l,{className:"overflow-visible mx-3",children:$})}),j]})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.currentCategory.name };
  }

version_title: Категории слаг
version_path: /categories/:slug
version_src_type: jsx
version_updated_at: 2025-11-18T10:46:28.633Z
version_created_at: 2025-11-17T09:48:13.942Z
version__status: published
created_at: 2025-11-18T10:46:28.644Z
updated_at: 2025-11-18T10:46:28.644Z
version_jsx:
[cell repeats an earlier one in this file: 8002 characters]

version_fetch_data:
  export default async function ({ route, deps }) {
    const slug = route.params.slug
    if (!slug) {
      return undefined
    }

    const page = route.searchParams.p

    const payload = await deps.app.getPayload()
    const productData = await payload.find({
      collection: 'products',
      where: {
        'category.slug': {
          in: slug,
        },
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        img: true,
        category: true,
      },
      limit: 16,
      page: Number(page) || undefined,
      pagination: true,
    })

    const categoryData = await payload.find({
      collection: 'categories',
      where: {
        slug: {
          equals: slug,
        },
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        description: true,
        template: true,
      },
  	populate: {
  		template: {
  			id: true,
  			name: true,
  			type: true,
  			srcType: true,
  			code: true,
  			updatedAt: true,
  		}
  	},
      limit: 1,
      pagination: false,
    })

    const categoriesData = await payload.find({
      collection: 'categories',
      where: {
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        img: true,
      },
      pagination: false,
    })

    const currentCategory = categoryData.docs[0]

    if (!currentCategory) {
      return deps.next.notFound()
    }

    return { categoriesData, productData, currentCategory }
  }

version_code:
[cell repeats an earlier one in this file: 4128 characters]


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.currentCategory.name };
  }

version_title: Категории слаг
version_path: /categories/:slug
version_src_type: jsx
version_updated_at: 2025-11-18T10:49:22.341Z
version_created_at: 2025-11-17T09:48:13.942Z
version__status: published
created_at: 2025-11-18T10:49:22.352Z
updated_at: 2025-11-18T10:49:22.352Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Breadcrumb, Template, Slider, RichText, ProductCard },
    deps: {
      rb: { Container, Image, Row, Col, Pagination },
      next: { Link },
    },
    props: { route, data },
  }) {
    let template = undefined
    const { categoriesData, productData, currentCategory } = data!
    const templateData = currentCategory.template || undefined
    const { docs, totalPages, page = 1 } = productData
    const categoryName = currentCategory.name

    const categoryElements = categoriesData.docs.map((category: Category) => {
      const imgUrl = (typeof category.img !== 'number' && category.img?.sizes?.main?.url) || undefined

      return (
        <Link
          href={`/categories/${category.slug}`}
          key={category.slug}
          className="link-light"
          style={{ display: 'block', position: 'relative', height: '100%' }}
        >
          <Image
            src={imgUrl}
            alt={category.name}
            style={{
              width: '250px',
              height: '250px',
              objectFit: 'cover',
              display: 'block',
            }}
          />
          <div
            style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              width: '100%',
              height: '50%',
              background: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)',
              pointerEvents: 'none',
            }}
          />
          <h5 className="position-absolute bottom-0 mx-4 mb-4 fw-semibold">{category.name}</h5>
        </Link>
      )
    })
    if (templateData) {
      template = <Template template={templateData} className="my-5" {...{ route, data }} />
    } else {
      template = (
        <Container className="my-5">
          <Row className="row-gap-4">
            {docs.map((p, i) => (
              <Col key={p.id} xs={12} sm={6} lg={3}>
                <Link
                  href={`${route.path}/${p.slug}`}
                  className="link-dark link-underline-opacity-0 link-underline-opacity-100-hover"
                >
                  <ProductCard product={p} />
                </Link>
              </Col>
            ))}
          </Row>
          {totalPages > 1 && (
            <Row className="py-5">
              <Pagination className="justify-content-center">
                <Pagination.First
                  as={Link}
                  href={`${route.path}?p=1`}
                  disabled={page === 1}
                  className="d-none d-sm-block"
                />
                <Pagination.Prev
                  as={Link}
                  href={`${route.path}?p=${page - 1}`}
                  disabled={page === 1}
                />

                {page > 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=1`}>
                    {1}
                  </Pagination.Item>
                )}
                {page > 3 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=2`} className="d-none d-sm-block">
                    {2}
                  </Pagination.Item>
                )}
                {page > 4 && <Pagination.Ellipsis className="d-none d-sm-block" />}

                {page > 2 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page - 1}`}>
                    {page - 1}
                  </Pagination.Item>
                )}
                <Pagination.Item as={Link} active>
                  {page}
                </Pagination.Item>
                {page < totalPages - 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page + 1}`}>
                    {page + 1}
                  </Pagination.Item>
                )}

                {page < totalPages - 3 && <Pagination.Ellipsis className="d-none d-sm-block" />}
                {page < totalPages - 2 && (
                  <Pagination.Item
                    as={Link}
                    href={`${route.path}?p=${totalPages - 1}`}
                    className="d-none d-sm-block"
                  >
                    {totalPages - 1}
                  </Pagination.Item>
                )}
                {page < totalPages && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${totalPages}`}>
                    {totalPages}
                  </Pagination.Item>
                )}

                <Pagination.Next
                  as={Link}
                  href={`${route.path}?p=${page + 1}`}
                  disabled={page === totalPages}
                />
                <Pagination.Last
                  as={Link}
                  href={`${route.path}?p=${totalPages}`}
                  disabled={page === totalPages}
                  className="d-none d-sm-block"
                />
              </Pagination>
            </Row>
          )}
        </Container>
      )
    }
    return (
      <>
        <div style={{ position: 'relative', height: '400px' }}>
          <Image
            src={'/api/media/file/categories-slug-bg.jpg'}
            alt="cars delivery background"
            className="position-absolute w-100 h-100"
            style={{ objectFit: 'cover' }}
          />
          <Container className="position-relative z-1 text-white">
            <Row style={{ paddingTop: '80px' }}>
              <Col xs={12}>
                <h1 className="text-uppercase">{currentCategory.name}</h1>
              </Col>
              <Col xs={0} lg={1} />
              <Col className="mt-lg-3" xs={12} lg={6}>
                <RichText data={currentCategory.description} />
              </Col>
            </Row>
          </Container>
          <div
            style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))',
              pointerEvents: 'none',
              mask: 'url(#fullpage-mask)',
              maskRepeat: 'no-repeat',
              maskPosition: 'bottom right',
            }}
          />

          <svg width="0" height="0" style={{ position: 'absolute' }}>
            <defs>
              <mask id="fullpage-mask">
                <rect width="100vw" height="100vh" fill="white" />
                <use href="#dynamic-mask-shapes" x={'calc(60vw)'} y={-50} />
              </mask>
            </defs>
          </svg>
        </div>
        <Container className="mt-4">
          <Row>
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}` },
              ]}
            />
          </Row>
        </Container>
        <div className="overflow-hidden mt-3">
          <Slider className="overflow-visible mx-3">{categoryElements}</Slider>
        </div>

        {template}
      </>
    )
  } satisfies PageJsx<{
    categoriesData: PaginatedDocs<Category>
    productData: PaginatedDocs<Product>
    currentCategory: Category
  }>)

version_fetch_data:
  export default async function ({ route, deps }) {
    const slug = route.params.slug
    if (!slug) {
      return undefined
    }

    const page = route.searchParams.p

    const payload = await deps.app.getPayload()
    const productData = await payload.find({
      collection: 'products',
      where: {
        'category.slug': {
          in: slug,
        },
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        img: true,
        category: true,
      },
      limit: 16,
      page: Number(page) || undefined,
      pagination: true,
    })

    const categoryData = await payload.find({
      collection: 'categories',
      where: {
        slug: {
          equals: slug,
        },
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        description: true,
        template: true,
      },
      populate: {
        template: {
          id: true,
          name: true,
          type: true,
          srcType: true,
          code: true,
          updatedAt: true,
        },
      },
      limit: 1,
      pagination: false,
    })

    const categoriesData = await payload.find({
      collection: 'categories',
      where: {
        hidden: {
          equals: false,
        },
      },
      select: {
        name: true,
        slug: true,
        img: true,
      },
      pagination: false,
    })

    const currentCategory = categoryData.docs[0]

    if (!currentCategory) {
      return deps.next.notFound()
    }

    return { categoriesData, productData, currentCategory }
  }

version_code:
  export default function({runtime:e,components:{Breadcrumb:s,Template:a,Slider:l,RichText:i,ProductCard:t},deps:{rb:{Container:n,Image:r,Row:d,Col:c,Pagination:o},next:{Link:h}},props:{route:m,data:p}}){let x,{categoriesData:j,productData:b,currentCategory:g}=p,u=g.template||void 0,{docs:f,totalPages:k,page:v=1}=b,N=g.name,$=j.docs.map(s=>{let a="number"!=typeof s.img&&s.img?.sizes?.main?.url||void 0;return e.jsxs(h,{href:`/categories/${s.slug}`,className:"link-light",style:{display:"block",position:"relative",height:"100%"},children:[e.jsx(r,{src:a,alt:s.name,style:{width:"250px",height:"250px",objectFit:"cover",display:"block"}}),e.jsx("div",{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"50%",background:"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)",pointerEvents:"none"}}),e.jsx("h5",{className:"position-absolute bottom-0 mx-4 mb-4 fw-semibold",children:s.name})]},s.slug)});return x=u?e.jsx(a,{template:u,className:"my-5",route:m,data:p}):e.jsxs(n,{className:"my-5",children:[e.jsx(d,{className:"row-gap-4",children:f.map((s,a)=>e.jsx(c,{xs:12,sm:6,lg:3,children:e.jsx(h,{href:`${m.path}/${s.slug}`,className:"link-dark link-underline-opacity-0 link-underline-opacity-100-hover",children:e.jsx(t,{product:s})})},s.id))}),k>1&&e.jsx(d,{className:"py-5",children:e.jsxs(o,{className:"justify-content-center",children:[e.jsx(o.First,{as:h,href:`${m.path}?p=1`,disabled:1===v,className:"d-none d-sm-block"}),e.jsx(o.Prev,{as:h,href:`${m.path}?p=${v-1}`,disabled:1===v}),v>1&&e.jsx(o.Item,{as:h,href:`${m.path}?p=1`,children:1}),v>3&&e.jsx(o.Item,{as:h,href:`${m.path}?p=2`,className:"d-none d-sm-block",children:2}),v>4&&e.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v>2&&e.jsx(o.Item,{as:h,href:`${m.path}?p=${v-1}`,children:v-1}),e.jsx(o.Item,{as:h,active:!0,children:v}),v<k-1&&e.jsx(o.Item,{as:h,href:`${m.path}?p=${v+1}`,children:v+1}),v<k-3&&e.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v<k-2&&e.jsx(o.Item,{as:h,href:`${m.path}?p=${k-1}`,className:"d-none d-sm-block",children:k-1}),v<k&&e.jsx(o.Item,{as:h,href:`${m.path}?p=${k}`,children:k}),e.jsx(o.Next,{as:h,href:`${m.path}?p=${v+1}`,disabled:v===k}),e.jsx(o.Last,{as:h,href:`${m.path}?p=${k}`,disabled:v===k,className:"d-none d-sm-block"})]})})]}),e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{position:"relative",height:"400px"},children:[e.jsx(r,{src:"/api/media/file/categories-slug-bg.jpg",alt:"cars delivery background",className:"position-absolute w-100 h-100",style:{objectFit:"cover"}}),e.jsx(n,{className:"position-relative z-1 text-white",children:e.jsxs(d,{style:{paddingTop:"80px"},children:[e.jsx(c,{xs:12,children:e.jsx("h1",{className:"text-uppercase",children:g.name})}),e.jsx(c,{xs:0,lg:1}),e.jsx(c,{className:"mt-lg-3",xs:12,lg:6,children:e.jsx(i,{data:g.description})})]})}),e.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))",pointerEvents:"none",mask:"url(#fullpage-mask)",maskRepeat:"no-repeat",maskPosition:"bottom right"}}),e.jsx("svg",{width:"0",height:"0",style:{position:"absolute"},children:e.jsx("defs",{children:e.jsxs("mask",{id:"fullpage-mask",children:[e.jsx("rect",{width:"100vw",height:"100vh",fill:"white"}),e.jsx("use",{href:"#dynamic-mask-shapes",x:"calc(60vw)",y:-50})]})})})]}),e.jsx(n,{className:"mt-4",children:e.jsx(d,{children:e.jsx(s,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${N}`}]})})}),e.jsx("div",{className:"overflow-hidden mt-3",children:e.jsx(l,{className:"overflow-visible mx-3",children:$})}),x]})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.currentCategory.name };
  }

version_title: Категории слаг
version_path: /categories/:slug
version_src_type: jsx
version_updated_at: 2025-11-18T11:53:02.479Z
version_created_at: 2025-11-17T09:48:13.942Z
version__status: draft
created_at: 2025-11-18T11:53:02.479Z
updated_at: 2025-11-18T11:53:02.479Z
version_jsx:
  import type { Category, Product } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { Breadcrumb, Template, Slider, RichText, ProductCard },
    deps: {
      rb: { Container, Image, Row, Col, Pagination },
      next: { Link },
    },
    props: { route, data },
  }) {
    let template = undefined
    const { categoriesData, productData, currentCategory } = data!
    const templateData = currentCategory.template || undefined
    const { docs, totalPages, page = 1 } = productData
    const categoryName = currentCategory.name

    const categoryElements = categoriesData.docs.map((category: Category) => {
      const imgUrl = (typeof category.img !== 'number' && category.img?.sizes?.main?.url) || undefined

      return (
        <Link
          href={`/categories/${category.slug}`}
          key={category.slug}
          className="link-light hover-zoom"
          style={{ display: 'block', position: 'relative', height: '100%' }}
        >
          <Image
            src={imgUrl}
            alt={category.name}
            className="hz-target"
            style={{
              width: '250px',
              height: '250px',
              objectFit: 'cover',
              display: 'block',
            }}
          />
          <div
            style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              width: '100%',
              height: '50%',
              background: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)',
              pointerEvents: 'none',
            }}
          />
          <h5 className="position-absolute bottom-0 mx-4 mb-4 fw-semibold">{category.name}</h5>
        </Link>
      )
    })
    if (templateData) {
      template = <Template template={templateData} className="my-5" {...{ route, data }} />
    } else {
      template = (
        <Container className="my-5">
          <Row className="row-gap-4">
            {docs.map((p, i) => (
              <Col key={p.id} xs={12} sm={6} lg={3}>
                <Link
                  href={`${route.path}/${p.slug}`}
                  className="link-dark link-underline-opacity-0 link-underline-opacity-100-hover"
                >
                  <ProductCard product={p} />
                </Link>
              </Col>
            ))}
          </Row>
          {totalPages > 1 && (
            <Row className="py-5">
              <Pagination className="justify-content-center">
                <Pagination.First
                  as={Link}
                  href={`${route.path}?p=1`}
                  disabled={page === 1}
                  className="d-none d-sm-block"
                />
                <Pagination.Prev
                  as={Link}
                  href={`${route.path}?p=${page - 1}`}
                  disabled={page === 1}
                />

                {page > 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=1`}>
                    {1}
                  </Pagination.Item>
                )}
                {page > 3 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=2`} className="d-none d-sm-block">
                    {2}
                  </Pagination.Item>
                )}
                {page > 4 && <Pagination.Ellipsis className="d-none d-sm-block" />}

                {page > 2 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page - 1}`}>
                    {page - 1}
                  </Pagination.Item>
                )}
                <Pagination.Item as={Link} active>
                  {page}
                </Pagination.Item>
                {page < totalPages - 1 && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${page + 1}`}>
                    {page + 1}
                  </Pagination.Item>
                )}

                {page < totalPages - 3 && <Pagination.Ellipsis className="d-none d-sm-block" />}
                {page < totalPages - 2 && (
                  <Pagination.Item
                    as={Link}
                    href={`${route.path}?p=${totalPages - 1}`}
                    className="d-none d-sm-block"
                  >
                    {totalPages - 1}
                  </Pagination.Item>
                )}
                {page < totalPages && (
                  <Pagination.Item as={Link} href={`${route.path}?p=${totalPages}`}>
                    {totalPages}
                  </Pagination.Item>
                )}

                <Pagination.Next
                  as={Link}
                  href={`${route.path}?p=${page + 1}`}
                  disabled={page === totalPages}
                />
                <Pagination.Last
                  as={Link}
                  href={`${route.path}?p=${totalPages}`}
                  disabled={page === totalPages}
                  className="d-none d-sm-block"
                />
              </Pagination>
            </Row>
          )}
        </Container>
      )
    }
    return (
      <>
        <div style={{ position: 'relative', height: '400px' }}>
          <Image
            src={'/api/media/file/categories-slug-bg.jpg'}
            alt="cars delivery background"
            className="position-absolute w-100 h-100"
            style={{ objectFit: 'cover' }}
          />
          <Container className="position-relative z-1 text-white">
            <Row style={{ paddingTop: '80px' }}>
              <Col xs={12}>
                <h1 className="text-uppercase">{currentCategory.name}</h1>
              </Col>
              <Col xs={0} lg={1} />
              <Col className="mt-lg-3" xs={12} lg={6}>
                <RichText data={currentCategory.description} />
              </Col>
            </Row>
          </Container>
          <div
            style={{
              position: 'absolute',
              inset: 0,
              background: 'linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))',
              pointerEvents: 'none',
              mask: 'url(#fullpage-mask)',
              maskRepeat: 'no-repeat',
              maskPosition: 'bottom right',
            }}
          />

          <svg width="0" height="0" style={{ position: 'absolute' }}>
            <defs>
              <mask id="fullpage-mask">
                <rect width="100vw" height="100vh" fill="white" />
                <use href="#dynamic-mask-shapes" x={'calc(60vw)'} y={-50} />
              </mask>
            </defs>
          </svg>
        </div>
        <Container className="mt-4">
          <Row>
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}` },
              ]}
            />
          </Row>
        </Container>
        <div className="overflow-hidden mt-3">
          <Slider className="overflow-visible mx-3">{categoryElements}</Slider>
        </div>

        {template}
      </>
    )
  } satisfies PageJsx<{
    categoriesData: PaginatedDocs<Category>
    productData: PaginatedDocs<Product>
    currentCategory: Category
  }>)

version_fetch_data:
[cell repeats an earlier one in this file: 1502 characters]

version_code:
  export default function({runtime:e,components:{Breadcrumb:s,Template:a,Slider:l,RichText:i,ProductCard:t},deps:{rb:{Container:n,Image:r,Row:c,Col:d,Pagination:o},next:{Link:h}},props:{route:m,data:p}}){let x,{categoriesData:j,productData:g,currentCategory:b}=p,u=b.template||void 0,{docs:f,totalPages:k,page:v=1}=g,N=b.name,$=j.docs.map(s=>{let a="number"!=typeof s.img&&s.img?.sizes?.main?.url||void 0;return e.jsxs(h,{href:`/categories/${s.slug}`,className:"link-light hover-zoom",style:{display:"block",position:"relative",height:"100%"},children:[e.jsx(r,{src:a,alt:s.name,className:"hz-target",style:{width:"250px",height:"250px",objectFit:"cover",display:"block"}}),e.jsx("div",{style:{position:"absolute",bottom:0,left:0,width:"100%",height:"50%",background:"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)",pointerEvents:"none"}}),e.jsx("h5",{className:"position-absolute bottom-0 mx-4 mb-4 fw-semibold",children:s.name})]},s.slug)});return x=u?e.jsx(a,{template:u,className:"my-5",route:m,data:p}):e.jsxs(n,{className:"my-5",children:[e.jsx(c,{className:"row-gap-4",children:f.map((s,a)=>e.jsx(d,{xs:12,sm:6,lg:3,children:e.jsx(h,{href:`${m.path}/${s.slug}`,className:"link-dark link-underline-opacity-0 link-underline-opacity-100-hover",children:e.jsx(t,{product:s})})},s.id))}),k>1&&e.jsx(c,{className:"py-5",children:e.jsxs(o,{className:"justify-content-center",children:[e.jsx(o.First,{as:h,href:`${m.path}?p=1`,disabled:1===v,className:"d-none d-sm-block"}),e.jsx(o.Prev,{as:h,href:`${m.path}?p=${v-1}`,disabled:1===v}),v>1&&e.jsx(o.Item,{as:h,href:`${m.path}?p=1`,children:1}),v>3&&e.jsx(o.Item,{as:h,href:`${m.path}?p=2`,className:"d-none d-sm-block",children:2}),v>4&&e.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v>2&&e.jsx(o.Item,{as:h,href:`${m.path}?p=${v-1}`,children:v-1}),e.jsx(o.Item,{as:h,active:!0,children:v}),v<k-1&&e.jsx(o.Item,{as:h,href:`${m.path}?p=${v+1}`,children:v+1}),v<k-3&&e.jsx(o.Ellipsis,{className:"d-none d-sm-block"}),v<k-2&&e.jsx(o.Item,{as:h,href:`${m.path}?p=${k-1}`,className:"d-none d-sm-block",children:k-1}),v<k&&e.jsx(o.Item,{as:h,href:`${m.path}?p=${k}`,children:k}),e.jsx(o.Next,{as:h,href:`${m.path}?p=${v+1}`,disabled:v===k}),e.jsx(o.Last,{as:h,href:`${m.path}?p=${k}`,disabled:v===k,className:"d-none d-sm-block"})]})})]}),e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{position:"relative",height:"400px"},children:[e.jsx(r,{src:"/api/media/file/categories-slug-bg.jpg",alt:"cars delivery background",className:"position-absolute w-100 h-100",style:{objectFit:"cover"}}),e.jsx(n,{className:"position-relative z-1 text-white",children:e.jsxs(c,{style:{paddingTop:"80px"},children:[e.jsx(d,{xs:12,children:e.jsx("h1",{className:"text-uppercase",children:b.name})}),e.jsx(d,{xs:0,lg:1}),e.jsx(d,{className:"mt-lg-3",xs:12,lg:6,children:e.jsx(i,{data:b.description})})]})}),e.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0.2))",pointerEvents:"none",mask:"url(#fullpage-mask)",maskRepeat:"no-repeat",maskPosition:"bottom right"}}),e.jsx("svg",{width:"0",height:"0",style:{position:"absolute"},children:e.jsx("defs",{children:e.jsxs("mask",{id:"fullpage-mask",children:[e.jsx("rect",{width:"100vw",height:"100vh",fill:"white"}),e.jsx("use",{href:"#dynamic-mask-shapes",x:"calc(60vw)",y:-50})]})})})]}),e.jsx(n,{className:"mt-4",children:e.jsx(c,{children:e.jsx(s,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${N}`}]})})}),e.jsx("div",{className:"overflow-hidden mt-3",children:e.jsx(l,{className:"overflow-visible mx-3",children:$})}),x]})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.productData?.name };
  }

version_title: Страница товара
version_path: /categories/:categorySlug/:productSlug
version_src_type: jsx
version_updated_at: 2025-11-27T04:49:18.952Z
version_created_at: 2025-11-17T09:48:13.973Z
version__status: published
created_at: 2025-11-27T04:49:18.961Z
updated_at: 2025-11-27T04:49:18.961Z
version_jsx:
  import type { Product, ProductImage } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ProductsGrid, Breadcrumb, Template, RichText },
    deps: {
      rb: { Container, Image, Row, Col, Button, Modal, Carousel },
      react: { useState },
      next: { Link },
    },
    props: { route, data },
  }) {
    const { productData, productSuggestions } = data!
    let templateData = undefined
    let template = undefined
    if (productData.template) {
      templateData = productData.template
    } else if (typeof productData.category !== 'number' && productData.category?.productTemplate) {
      templateData = productData.category.productTemplate
    }

    const [showPreview, setShowPreview] = useState(false)
    const [activeIndex, setActiveIndex] = useState(0)

    if (templateData) {
      template = <Template template={templateData} {...{ route, productData, productSuggestions }} />
    } else {
      const handleOpenPreview = (index: number) => {
        setActiveIndex(index)
        setShowPreview(true)
      }

      const handleClosePreview = () => {
        setShowPreview(false)
      }
      // @ts-ignore
      let productImages: ProductImage[] = productData.img
      if (!productImages || typeof productImages[0] === 'number') {
        productImages = []
      }

      const categorySlug = route.params.categorySlug
      const categoryName = typeof productData.category === 'number' ? '' : productData.category?.name
      const productName = productData.name
      const productProperties = productData.meta
      const imagesCount = productImages.length || 0
      const previewSlots = Math.max(0, Math.min(imagesCount - 1, 4))
      const previewWidth = (previewSlots / 4) * 100

      const slicedImages = productImages.slice(1, Math.min(imagesCount, 4))
      const previewImages = slicedImages.map((img, index) => (
        <div
          key={index}
          // each item must be a flex item that can shrink
          style={{
            flex: '1 1 0', // allow shrinking and equal share
            minWidth: 0, // crucial for webkit (prevents overflow)
            height: '100%',
            display: 'block',
          }}
          onClick={() => handleOpenPreview(index + 1)}
          className="rounded-1"
        >
          <Image
            src={img.sizes?.small?.url || ''}
            alt={productName}
            style={{
              objectFit: 'cover',
              height: '100%',
              width: '100%',
              cursor: 'pointer',
              borderRadius: '0.25rem',
            }}
          />
        </div>
      ))

      if (imagesCount > 4) {
        // push the "more" overlay as one of the flex items with same item style
        previewImages.push(
          <div
            key={4}
            onClick={() => handleOpenPreview(4)}
            style={{
              flex: '1 1 0',
              minWidth: 0,
              height: '100%',
              position: 'relative',
              display: 'flex',
              justifyContent: 'center',
            }}
            className="cursor-pointer mb-4"
          >
            <Image
              src={productImages[4].url || ''}
              alt={productName}
              style={{
                display: 'block',
                objectFit: 'cover',
                width: '100%',
                height: '100%',
                borderRadius: '0.25rem',
              }}
            />
            {imagesCount > 5 && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    borderRadius: '0.25rem',
                  }}
                />
                <span className="position-absolute top-50 start-50 translate-middle fs-5 text-white">
                  +{imagesCount - 5}
                </span>
              </>
            )}
          </div>,
        )
      }

      const previewImagesStrip =
        imagesCount > 1 ? (
          <div
            className="d-flex gap-1 gap-lg-3"
            style={{
              width: previewWidth + '%',
              gap: '0.75rem', // use gap (supported widely) instead of justify-content-between
              alignItems: 'stretch',
              boxSizing: 'border-box',
              // optional: prevent rounding errors causing overflow
              overflow: 'hidden',
            }}
          >
            {previewImages}
          </div>
        ) : null

      template = (
        <>
          <Container className="mb-5">
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}`, link: `/categories/${categorySlug}` },
                { label: `${productName}` },
              ]}
            />

            <Row className="mb-5">
              <Col lg={6} className="d-flex flex-column gap-2 gap-lg-3">
                <h2 className="d-block d-lg-none mb-3 fw-semibold">{productName}</h2>
                <Image
                  src={productImages[0].sizes?.large?.url || ''}
                  alt={productName}
                  onClick={() => handleOpenPreview(0)}
                  className="img-fluid rounded-1 shadow"
                  style={{
                    aspectRatio: '4 / 3',
                    objectFit: 'cover',
                    height: '100%',
                    width: '100%',
                    cursor: 'pointer',
                  }}
                />
                {previewImagesStrip}
                {/* Modal with carousel */}
                <Modal
                  show={showPreview}
                  onHide={handleClosePreview}
                  centered
                  size="xl"
                  contentClassName="bg-transparent border-0"
                >
                  <Modal.Body className="p-0 position-relative">
                    <Carousel
                      activeIndex={activeIndex}
                      onSelect={(selectedIndex) => setActiveIndex(selectedIndex)}
                      interval={null}
                      indicators={false}
                      nextIcon={
                        <iconify-icon
                          icon="lucide:chevron-right"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      prevIcon={
                        <iconify-icon
                          icon="lucide:chevron-left"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      controls={true}
                    >
                      {productImages.map((img, index) => {
                        if (typeof img === 'number') {
                          return null
                        }
                        return (
                          <Carousel.Item key={index}>
                            <Image
                              src={img.url || ''}
                              alt={productName}
                              className="d-block w-100"
                              style={{
                                objectFit: 'contain',
                                maxHeight: 'calc(100vh - 180px)',
                              }}
                            />
                          </Carousel.Item>
                        )
                      })}
                    </Carousel>

                    {/* Thumbnail strip */}
                    <div
                      className="d-flex justify-content-center mt-3 flex-wrap"
                      style={{ gap: '0.5rem' }}
                    >
                      {productImages.map((img, index) => {
                        return (
                          <Image
                            key={index}
                            src={img.sizes?.small?.url || ''}
                            alt={productName}
                            onClick={() => setActiveIndex(index)}
                            className={`rounded shadow-sm ${index === activeIndex ? 'border border-light border-3' : ''}`}
                            style={{
                              height: '90px',
                              width: '120px',
                              objectFit: 'cover',
                              cursor: 'pointer',
                            }}
                          />
                        )
                      })}
                    </div>
                  </Modal.Body>
                </Modal>
              </Col>
              <Col lg={6} className="d-flex flex-column justify-content-between">
                <div>
                  <h2 className="d-none d-lg-block fw-semibold">{productName}</h2>
                  <h5 className="mt-5 mb-3 fw-semibold">Описание:</h5>
                  <RichText data={productData.description} />
                </div>
                <div>
                  {(() => {
                    const priceFrom =
                      productData.priceFrom &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceFrom,
                      )
                    const priceTo =
                      productData.priceTo &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceTo,
                      )

                    let price = undefined
                    if (priceFrom && priceTo) {
                      price = priceFrom === priceTo ? priceFrom : `от ${priceFrom} до ${priceTo}`
                    } else {
                      price = (priceFrom && `от ${priceFrom}`) || (priceTo && `до ${priceTo}`)
                    }
                    price = price && `${price} сом`

                    return price ? <h2 className="my-4 fw-semibold">{price}</h2> : undefined
                  })()}
                  <Button
                    href="#footer-anchor"
                    className="fs-5 rounded-0 text-white"
                    style={{ padding: '0.8rem 2rem' }}
                  >
                    Оставить заявку
                  </Button>
                </div>
              </Col>
            </Row>
            <Row>
              <h5 className="mb-4 fw-semibold">Характеристики:</h5>
              <style>
                {`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}
              </style>
              {productProperties && (
                <Col
                  style={{
                    display: 'grid',
                    rowGap: '1rem',
                    columnGap: '2rem',
                  }}
                  className="product-properties-grid"
                >
                  {Object.entries(productProperties).map(([key, value], index) => [
                    <div
                      key={`container-${index}`}
                      style={{ display: 'grid', columnGap: '1rem', gridTemplateColumns: '1fr 1fr' }}
                    >
                      <span key={`key-${index}`}>{key}:</span>
                      <span key={`value-${index}`}>{String(value)}</span>
                    </div>,
                  ])}
                </Col>
              )}
            </Row>
            <Row
              className="row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white"
              style={{
                clipPath: 'polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)',
                marginTop: '2.5rem',
                marginBottom: '2.5rem',
              }}
            >
              <Col lg={4}>
                <h2 className="lh-1 text-uppercase">
                  Мы берём
                  <br />
                  ответственность
                  <br />
                  на себя
                </h2>
              </Col>
              <Col lg={4} className="d-flex flex-column justify-content-center row-gap-3 ms-auto">
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Договор на руках
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Проверка качества до отправки
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Доставка — до склада или на дом
                </div>
              </Col>
              <Col lg={3} className="d-flex flex-column justify-content-center mx-auto">
                <Link // should it change color on hover?
                  className="my-auto me-auto bg-white text-primary fs-6"
                  href="#footer-anchor"
                  style={{
                    display: 'inline-flex',
                    padding: '0.8rem 2rem',
                    textDecoration: 'none',
                    textWrap: 'nowrap',
                    clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                    transition: '#1D1D1D .2s',
                  }}
                >
                  Получить консультацию
                </Link>
              </Col>
            </Row>
            {/*<Row className="row-gap-3 mt-5">
              <Col
                lg={3}
                className="d-flex flex-lg-column mb-lg-0 text-uppercase"
                style={{ maxWidth: '500px' }}
              >
                <h1 className="lh-1">похожие&nbsp;</h1>
                <h1 className="mb-0 ms-lg-auto lh-1 text-primary">товары</h1>
              </Col>
              <Col lg={1} className="d-none d-lg-block"></Col>
              <Col className="mt-auto" lg={6}>
                <span>
                  Похожие варианты, которые могут заинтересовать вас и помочь сделать идеальный выбор.
                </span>
              </Col>
            </Row>*/}
          </Container>
          {/*<ProductsGrid productData={productSuggestions} className="mb-5" />*/}
        </>
      )
    }
    return <>{template}</>
  } satisfies PageJsx<{ productData: Product; productSuggestions: PaginatedDocs<Product> }>)

version_fetch_data:
  export default async function ({ route, deps }) {
      const categorySlug = route.params.categorySlug;
      const productSlug = route.params.productSlug;
      if (!categorySlug || !productSlug) {
          return undefined;
      }
      const payload = await deps.app.getPayload();
      const productSuggestions = await payload.find({
          collection: 'products',
          where: {
              'category.slug': {
                  equals: categorySlug,
              },
              slug: {
                  not_equals: productSlug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              priceFrom: true,
              priceTo: true,
              hidden: true,
              img: true,
              category: true,
          },
          limit: 4,
          pagination: false,
      });
      const productData = await payload.find({
          collection: 'products',
          where: {
              slug: {
                  equals: productSlug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              priceFrom: true,
              priceTo: true,
              img: true,
              category: true,
              meta: true,
              description: true,
          },
          limit: 1,
          pagination: false,
      });
      if (!productData.docs[0]) {
          return deps.next.notFound();
      }
      return {
          productData: productData.docs[0],
          productSuggestions: productSuggestions,
      };
  }

version_code:
  export default function({runtime:e,components:{ProductsGrid:s,Breadcrumb:l,Template:t,RichText:i},deps:{rb:{Container:r,Image:a,Row:c,Col:n,Button:o,Modal:d,Carousel:m},react:{useState:x},next:{Link:h}},props:{route:p,data:g}}){let u,j,{productData:f,productSuggestions:b}=g;f.template?u=f.template:"number"!=typeof f.category&&f.category?.productTemplate&&(u=f.category.productTemplate);let[y,N]=x(!1),[w,v]=x(0);if(u)j=e.jsx(t,{template:u,route:p,productData:f,productSuggestions:b});else{let s,t,x,g=e=>{v(e),N(!0)},u=f.img;u&&"number"!=typeof u[0]||(u=[]);let b=p.params.categorySlug,k="number"==typeof f.category?"":f.category?.name,F=f.name,$=f.meta,C=u.length||0,z=Math.max(0,Math.min(C-1,4)),G=u.slice(1,Math.min(C,4)).map((s,l)=>e.jsx("div",{style:{flex:"1 1 0",minWidth:0,height:"100%",display:"block"},onClick:()=>g(l+1),className:"rounded-1",children:e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,style:{objectFit:"cover",height:"100%",width:"100%",cursor:"pointer",borderRadius:"0.25rem"}})},l));C>4&&G.push(e.jsxs("div",{onClick:()=>g(4),style:{flex:"1 1 0",minWidth:0,height:"100%",position:"relative",display:"flex",justifyContent:"center"},className:"cursor-pointer mb-4",children:[e.jsx(a,{src:u[4].url||"",alt:F,style:{display:"block",objectFit:"cover",width:"100%",height:"100%",borderRadius:"0.25rem"}}),C>5&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)",borderRadius:"0.25rem"}}),e.jsxs("span",{className:"position-absolute top-50 start-50 translate-middle fs-5 text-white",children:["+",C-5]})]})]},4));let I=C>1?e.jsx("div",{className:"d-flex gap-1 gap-lg-3",style:{width:z/4*100+"%",gap:"0.75rem",alignItems:"stretch",boxSizing:"border-box",overflow:"hidden"},children:G}):null;j=e.jsx(e.Fragment,{children:e.jsxs(r,{className:"mb-5",children:[e.jsx(l,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${k}`,link:`/categories/${b}`},{label:`${F}`}]}),e.jsxs(c,{className:"mb-5",children:[e.jsxs(n,{lg:6,className:"d-flex flex-column gap-2 gap-lg-3",children:[e.jsx("h2",{className:"d-block d-lg-none mb-3 fw-semibold",children:F}),e.jsx(a,{src:u[0].sizes?.large?.url||"",alt:F,onClick:()=>g(0),className:"img-fluid rounded-1 shadow",style:{aspectRatio:"4 / 3",objectFit:"cover",height:"100%",width:"100%",cursor:"pointer"}}),I,e.jsx(d,{show:y,onHide:()=>{N(!1)},centered:!0,size:"xl",contentClassName:"bg-transparent border-0",children:e.jsxs(d.Body,{className:"p-0 position-relative",children:[e.jsx(m,{activeIndex:w,onSelect:e=>v(e),interval:null,indicators:!1,nextIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"text-black",style:{fontSize:"100px"}}),prevIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-left",className:"text-black",style:{fontSize:"100px"}}),controls:!0,children:u.map((s,l)=>"number"==typeof s?null:e.jsx(m.Item,{children:e.jsx(a,{src:s.url||"",alt:F,className:"d-block w-100",style:{objectFit:"contain",maxHeight:"calc(100vh - 180px)"}})},l))}),e.jsx("div",{className:"d-flex justify-content-center mt-3 flex-wrap",style:{gap:"0.5rem"},children:u.map((s,l)=>e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,onClick:()=>v(l),className:`rounded shadow-sm ${l===w?"border border-light border-3":""}`,style:{height:"90px",width:"120px",objectFit:"cover",cursor:"pointer"}},l))})]})})]}),e.jsxs(n,{lg:6,className:"d-flex flex-column justify-content-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"d-none d-lg-block fw-semibold",children:F}),e.jsx("h5",{className:"mt-5 mb-3 fw-semibold",children:"Описание:"}),e.jsx(i,{data:f.description})]}),e.jsxs("div",{children:[(s=f.priceFrom&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceFrom),t=f.priceTo&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceTo),(x=(x=s&&t?s===t?s:`от ${s} до ${t}`:s&&`от ${s}`||t&&`до ${t}`)&&`${x} сом`)?e.jsx("h2",{className:"my-4 fw-semibold",children:x}):void 0),e.jsx(o,{href:"#footer-anchor",className:"fs-5 rounded-0 text-white",style:{padding:"0.8rem 2rem"},children:"Оставить заявку"})]})]})]}),e.jsxs(c,{children:[e.jsx("h5",{className:"mb-4 fw-semibold",children:"Характеристики:"}),e.jsx("style",{children:`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}),$&&e.jsx(n,{style:{display:"grid",rowGap:"1rem",columnGap:"2rem"},className:"product-properties-grid",children:Object.entries($).map(([s,l],t)=>[e.jsxs("div",{style:{display:"grid",columnGap:"1rem",gridTemplateColumns:"1fr 1fr"},children:[e.jsxs("span",{children:[s,":"]},`key-${t}`),e.jsx("span",{children:String(l)},`value-${t}`)]},`container-${t}`)])})]}),e.jsxs(c,{className:"row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white",style:{clipPath:"polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)",marginTop:"2.5rem",marginBottom:"2.5rem"},children:[e.jsx(n,{lg:4,children:e.jsxs("h2",{className:"lh-1 text-uppercase",children:["Мы берём",e.jsx("br",{}),"ответственность",e.jsx("br",{}),"на себя"]})}),e.jsxs(n,{lg:4,className:"d-flex flex-column justify-content-center row-gap-3 ms-auto",children:[e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Договор на руках"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Проверка качества до отправки"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Доставка — до склада или на дом"]})]}),e.jsx(n,{lg:3,className:"d-flex flex-column justify-content-center mx-auto",children:e.jsx(h,{className:"my-auto me-auto bg-white text-primary fs-6",href:"#footer-anchor",style:{display:"inline-flex",padding:"0.8rem 2rem",textDecoration:"none",textWrap:"nowrap",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})})]})]})})}return e.jsx(e.Fragment,{children:j})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.productData?.name };
  }

version_title: Страница товара
version_path: /categories/:categorySlug/:productSlug
version_src_type: jsx
version_updated_at: 2025-11-27T04:52:00.387Z
version_created_at: 2025-11-17T09:48:13.973Z
version__status: published
created_at: 2025-11-27T04:52:00.397Z
updated_at: 2025-11-27T04:52:00.397Z
version_jsx:
  import type { Product, ProductImage } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ProductsGrid, Breadcrumb, Template, RichText },
    deps: {
      rb: { Container, Image, Row, Col, Button, Modal, Carousel },
      react: { useState },
      next: { Link },
    },
    props: { route, data },
  }) {
    const { productData, productSuggestions } = data!
    let templateData = undefined
    let template = undefined
    if (productData.template) {
      templateData = productData.template
    } else if (typeof productData.category !== 'number' && productData.category?.productTemplate) {
      templateData = productData.category.productTemplate
    }

    const [showPreview, setShowPreview] = useState(false)
    const [activeIndex, setActiveIndex] = useState(0)

    if (templateData) {
      template = <Template template={templateData} {...{ route, productData, productSuggestions }} />
    } else {
      const handleOpenPreview = (index: number) => {
        setActiveIndex(index)
        setShowPreview(true)
      }

      const handleClosePreview = () => {
        setShowPreview(false)
      }
      // @ts-ignore
      let productImages: ProductImage[] = productData.img
      if (!productImages || typeof productImages[0] === 'number') {
        productImages = []
      }

      const categorySlug = route.params.categorySlug
      const categoryName = typeof productData.category === 'number' ? '' : productData.category?.name
      const productName = productData.name
      const productProperties = productData.meta
      const imagesCount = productImages.length || 0
      const previewSlots = Math.max(0, Math.min(imagesCount - 1, 4))
      const previewWidth = (previewSlots / 4) * 100

      const slicedImages = productImages.slice(1, Math.min(imagesCount, 4))
      const previewImages = slicedImages.map((img, index) => (
        <div
          key={index}
          // each item must be a flex item that can shrink
          style={{
            flex: '1 1 0', // allow shrinking and equal share
            minWidth: 0, // crucial for webkit (prevents overflow)
            height: '100%',
            display: 'block',
          }}
          onClick={() => handleOpenPreview(index + 1)}
          className="rounded-1"
        >
          <Image
            src={img.sizes?.small?.url || ''}
            alt={productName}
            style={{
              objectFit: 'cover',
              height: '100%',
              width: '100%',
              cursor: 'pointer',
              borderRadius: '0.25rem',
            }}
          />
        </div>
      ))

      if (imagesCount > 4) {
        // push the "more" overlay as one of the flex items with same item style
        previewImages.push(
          <div
            key={4}
            onClick={() => handleOpenPreview(4)}
            style={{
              flex: '1 1 0',
              minWidth: 0,
              height: '100%',
              position: 'relative',
              display: 'flex',
              justifyContent: 'center',
            }}
            className="cursor-pointer mb-4"
          >
            <Image
              src={productImages[4].url || ''}
              alt={productName}
              style={{
                display: 'block',
                objectFit: 'cover',
                width: '100%',
                height: '100%',
                borderRadius: '0.25rem',
              }}
            />
            {imagesCount > 5 && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    borderRadius: '0.25rem',
                  }}
                />
                <span className="position-absolute top-50 start-50 translate-middle fs-5 text-white">
                  +{imagesCount - 5}
                </span>
              </>
            )}
          </div>,
        )
      }

      const previewImagesStrip =
        imagesCount > 1 ? (
          <div
            className="d-flex gap-1 gap-lg-3"
            style={{
              width: previewWidth + '%',
              gap: '0.75rem', // use gap (supported widely) instead of justify-content-between
              alignItems: 'stretch',
              boxSizing: 'border-box',
              // optional: prevent rounding errors causing overflow
              overflow: 'hidden',
            }}
          >
            {previewImages}
          </div>
        ) : null

      template = (
        <>
          <Container className="mb-5">
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}`, link: `/categories/${categorySlug}` },
                { label: `${productName}` },
              ]}
            />

            <Row className="mb-5">
              <Col lg={6} className="d-flex flex-column gap-2 gap-lg-3">
                <h2 className="d-block d-lg-none mb-3 fw-semibold">{productName}</h2>
                <Image
                  src={productImages[0].sizes?.large?.url || ''}
                  alt={productName}
                  onClick={() => handleOpenPreview(0)}
                  className="img-fluid rounded-1 shadow"
                  style={{
                    aspectRatio: '4 / 3',
                    objectFit: 'cover',
                    height: 'auto',
                    width: '100%',
                    cursor: 'pointer',
                  }}
                />
                {previewImagesStrip}
                {/* Modal with carousel */}
                <Modal
                  show={showPreview}
                  onHide={handleClosePreview}
                  centered
                  size="xl"
                  contentClassName="bg-transparent border-0"
                >
                  <Modal.Body className="p-0 position-relative">
                    <Carousel
                      activeIndex={activeIndex}
                      onSelect={(selectedIndex) => setActiveIndex(selectedIndex)}
                      interval={null}
                      indicators={false}
                      nextIcon={
                        <iconify-icon
                          icon="lucide:chevron-right"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      prevIcon={
                        <iconify-icon
                          icon="lucide:chevron-left"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      controls={true}
                    >
                      {productImages.map((img, index) => {
                        if (typeof img === 'number') {
                          return null
                        }
                        return (
                          <Carousel.Item key={index}>
                            <Image
                              src={img.url || ''}
                              alt={productName}
                              className="d-block w-100"
                              style={{
                                objectFit: 'contain',
                                maxHeight: 'calc(100vh - 180px)',
                              }}
                            />
                          </Carousel.Item>
                        )
                      })}
                    </Carousel>

                    {/* Thumbnail strip */}
                    <div
                      className="d-flex justify-content-center mt-3 flex-wrap"
                      style={{ gap: '0.5rem' }}
                    >
                      {productImages.map((img, index) => {
                        return (
                          <Image
                            key={index}
                            src={img.sizes?.small?.url || ''}
                            alt={productName}
                            onClick={() => setActiveIndex(index)}
                            className={`rounded shadow-sm ${index === activeIndex ? 'border border-light border-3' : ''}`}
                            style={{
                              height: '90px',
                              width: '120px',
                              objectFit: 'cover',
                              cursor: 'pointer',
                            }}
                          />
                        )
                      })}
                    </div>
                  </Modal.Body>
                </Modal>
              </Col>
              <Col lg={6} className="d-flex flex-column justify-content-between">
                <div>
                  <h2 className="d-none d-lg-block fw-semibold">{productName}</h2>
                  <h5 className="mt-5 mb-3 fw-semibold">Описание:</h5>
                  <RichText data={productData.description} />
                </div>
                <div>
                  {(() => {
                    const priceFrom =
                      productData.priceFrom &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceFrom,
                      )
                    const priceTo =
                      productData.priceTo &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceTo,
                      )

                    let price = undefined
                    if (priceFrom && priceTo) {
                      price = priceFrom === priceTo ? priceFrom : `от ${priceFrom} до ${priceTo}`
                    } else {
                      price = (priceFrom && `от ${priceFrom}`) || (priceTo && `до ${priceTo}`)
                    }
                    price = price && `${price} сом`

                    return price ? <h2 className="my-4 fw-semibold">{price}</h2> : undefined
                  })()}
                  <Button
                    href="#footer-anchor"
                    className="fs-5 rounded-0 text-white"
                    style={{ padding: '0.8rem 2rem' }}
                  >
                    Оставить заявку
                  </Button>
                </div>
              </Col>
            </Row>
            <Row>
              <h5 className="mb-4 fw-semibold">Характеристики:</h5>
              <style>
                {`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}
              </style>
              {productProperties && (
                <Col
                  style={{
                    display: 'grid',
                    rowGap: '1rem',
                    columnGap: '2rem',
                  }}
                  className="product-properties-grid"
                >
                  {Object.entries(productProperties).map(([key, value], index) => [
                    <div
                      key={`container-${index}`}
                      style={{ display: 'grid', columnGap: '1rem', gridTemplateColumns: '1fr 1fr' }}
                    >
                      <span key={`key-${index}`}>{key}:</span>
                      <span key={`value-${index}`}>{String(value)}</span>
                    </div>,
                  ])}
                </Col>
              )}
            </Row>
            <Row
              className="row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white"
              style={{
                clipPath: 'polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)',
                marginTop: '2.5rem',
                marginBottom: '2.5rem',
              }}
            >
              <Col lg={4}>
                <h2 className="lh-1 text-uppercase">
                  Мы берём
                  <br />
                  ответственность
                  <br />
                  на себя
                </h2>
              </Col>
              <Col lg={4} className="d-flex flex-column justify-content-center row-gap-3 ms-auto">
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Договор на руках
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Проверка качества до отправки
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Доставка — до склада или на дом
                </div>
              </Col>
              <Col lg={3} className="d-flex flex-column justify-content-center mx-auto">
                <Link // should it change color on hover?
                  className="my-auto me-auto bg-white text-primary fs-6"
                  href="#footer-anchor"
                  style={{
                    display: 'inline-flex',
                    padding: '0.8rem 2rem',
                    textDecoration: 'none',
                    textWrap: 'nowrap',
                    clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                    transition: '#1D1D1D .2s',
                  }}
                >
                  Получить консультацию
                </Link>
              </Col>
            </Row>
            {/*<Row className="row-gap-3 mt-5">
              <Col
                lg={3}
                className="d-flex flex-lg-column mb-lg-0 text-uppercase"
                style={{ maxWidth: '500px' }}
              >
                <h1 className="lh-1">похожие&nbsp;</h1>
                <h1 className="mb-0 ms-lg-auto lh-1 text-primary">товары</h1>
              </Col>
              <Col lg={1} className="d-none d-lg-block"></Col>
              <Col className="mt-auto" lg={6}>
                <span>
                  Похожие варианты, которые могут заинтересовать вас и помочь сделать идеальный выбор.
                </span>
              </Col>
            </Row>*/}
          </Container>
          {/*<ProductsGrid productData={productSuggestions} className="mb-5" />*/}
        </>
      )
    }
    return <>{template}</>
  } satisfies PageJsx<{ productData: Product; productSuggestions: PaginatedDocs<Product> }>)

version_fetch_data:
  export default async function ({ route, deps }) {
      const categorySlug = route.params.categorySlug;
      const productSlug = route.params.productSlug;
      if (!categorySlug || !productSlug) {
          return undefined;
      }
      const payload = await deps.app.getPayload();
      const productSuggestions = await payload.find({
          collection: 'products',
          where: {
              'category.slug': {
                  equals: categorySlug,
              },
              slug: {
                  not_equals: productSlug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              priceFrom: true,
              priceTo: true,
              hidden: true,
              img: true,
              category: true,
          },
          limit: 4,
          pagination: false,
      });
      const productData = await payload.find({
          collection: 'products',
          where: {
              slug: {
                  equals: productSlug,
              },
              hidden: {
                  equals: false,
              },
          },
          select: {
              name: true,
              slug: true,
              priceFrom: true,
              priceTo: true,
              img: true,
              category: true,
              meta: true,
              description: true,
          },
          limit: 1,
          pagination: false,
      });
      if (!productData.docs[0]) {
          return deps.next.notFound();
      }
      return {
          productData: productData.docs[0],
          productSuggestions: productSuggestions,
      };
  }

version_code:
  export default function({runtime:e,components:{ProductsGrid:s,Breadcrumb:l,Template:t,RichText:i},deps:{rb:{Container:r,Image:a,Row:c,Col:n,Button:o,Modal:d,Carousel:m},react:{useState:x},next:{Link:h}},props:{route:p,data:g}}){let u,j,{productData:f,productSuggestions:b}=g;f.template?u=f.template:"number"!=typeof f.category&&f.category?.productTemplate&&(u=f.category.productTemplate);let[y,N]=x(!1),[w,v]=x(0);if(u)j=e.jsx(t,{template:u,route:p,productData:f,productSuggestions:b});else{let s,t,x,g=e=>{v(e),N(!0)},u=f.img;u&&"number"!=typeof u[0]||(u=[]);let b=p.params.categorySlug,k="number"==typeof f.category?"":f.category?.name,F=f.name,$=f.meta,C=u.length||0,z=Math.max(0,Math.min(C-1,4)),G=u.slice(1,Math.min(C,4)).map((s,l)=>e.jsx("div",{style:{flex:"1 1 0",minWidth:0,height:"100%",display:"block"},onClick:()=>g(l+1),className:"rounded-1",children:e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,style:{objectFit:"cover",height:"100%",width:"100%",cursor:"pointer",borderRadius:"0.25rem"}})},l));C>4&&G.push(e.jsxs("div",{onClick:()=>g(4),style:{flex:"1 1 0",minWidth:0,height:"100%",position:"relative",display:"flex",justifyContent:"center"},className:"cursor-pointer mb-4",children:[e.jsx(a,{src:u[4].url||"",alt:F,style:{display:"block",objectFit:"cover",width:"100%",height:"100%",borderRadius:"0.25rem"}}),C>5&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)",borderRadius:"0.25rem"}}),e.jsxs("span",{className:"position-absolute top-50 start-50 translate-middle fs-5 text-white",children:["+",C-5]})]})]},4));let I=C>1?e.jsx("div",{className:"d-flex gap-1 gap-lg-3",style:{width:z/4*100+"%",gap:"0.75rem",alignItems:"stretch",boxSizing:"border-box",overflow:"hidden"},children:G}):null;j=e.jsx(e.Fragment,{children:e.jsxs(r,{className:"mb-5",children:[e.jsx(l,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${k}`,link:`/categories/${b}`},{label:`${F}`}]}),e.jsxs(c,{className:"mb-5",children:[e.jsxs(n,{lg:6,className:"d-flex flex-column gap-2 gap-lg-3",children:[e.jsx("h2",{className:"d-block d-lg-none mb-3 fw-semibold",children:F}),e.jsx(a,{src:u[0].sizes?.large?.url||"",alt:F,onClick:()=>g(0),className:"img-fluid rounded-1 shadow",style:{aspectRatio:"4 / 3",objectFit:"cover",height:"auto",width:"100%",cursor:"pointer"}}),I,e.jsx(d,{show:y,onHide:()=>{N(!1)},centered:!0,size:"xl",contentClassName:"bg-transparent border-0",children:e.jsxs(d.Body,{className:"p-0 position-relative",children:[e.jsx(m,{activeIndex:w,onSelect:e=>v(e),interval:null,indicators:!1,nextIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"text-black",style:{fontSize:"100px"}}),prevIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-left",className:"text-black",style:{fontSize:"100px"}}),controls:!0,children:u.map((s,l)=>"number"==typeof s?null:e.jsx(m.Item,{children:e.jsx(a,{src:s.url||"",alt:F,className:"d-block w-100",style:{objectFit:"contain",maxHeight:"calc(100vh - 180px)"}})},l))}),e.jsx("div",{className:"d-flex justify-content-center mt-3 flex-wrap",style:{gap:"0.5rem"},children:u.map((s,l)=>e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,onClick:()=>v(l),className:`rounded shadow-sm ${l===w?"border border-light border-3":""}`,style:{height:"90px",width:"120px",objectFit:"cover",cursor:"pointer"}},l))})]})})]}),e.jsxs(n,{lg:6,className:"d-flex flex-column justify-content-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"d-none d-lg-block fw-semibold",children:F}),e.jsx("h5",{className:"mt-5 mb-3 fw-semibold",children:"Описание:"}),e.jsx(i,{data:f.description})]}),e.jsxs("div",{children:[(s=f.priceFrom&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceFrom),t=f.priceTo&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceTo),(x=(x=s&&t?s===t?s:`от ${s} до ${t}`:s&&`от ${s}`||t&&`до ${t}`)&&`${x} сом`)?e.jsx("h2",{className:"my-4 fw-semibold",children:x}):void 0),e.jsx(o,{href:"#footer-anchor",className:"fs-5 rounded-0 text-white",style:{padding:"0.8rem 2rem"},children:"Оставить заявку"})]})]})]}),e.jsxs(c,{children:[e.jsx("h5",{className:"mb-4 fw-semibold",children:"Характеристики:"}),e.jsx("style",{children:`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}),$&&e.jsx(n,{style:{display:"grid",rowGap:"1rem",columnGap:"2rem"},className:"product-properties-grid",children:Object.entries($).map(([s,l],t)=>[e.jsxs("div",{style:{display:"grid",columnGap:"1rem",gridTemplateColumns:"1fr 1fr"},children:[e.jsxs("span",{children:[s,":"]},`key-${t}`),e.jsx("span",{children:String(l)},`value-${t}`)]},`container-${t}`)])})]}),e.jsxs(c,{className:"row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white",style:{clipPath:"polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)",marginTop:"2.5rem",marginBottom:"2.5rem"},children:[e.jsx(n,{lg:4,children:e.jsxs("h2",{className:"lh-1 text-uppercase",children:["Мы берём",e.jsx("br",{}),"ответственность",e.jsx("br",{}),"на себя"]})}),e.jsxs(n,{lg:4,className:"d-flex flex-column justify-content-center row-gap-3 ms-auto",children:[e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Договор на руках"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Проверка качества до отправки"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Доставка — до склада или на дом"]})]}),e.jsx(n,{lg:3,className:"d-flex flex-column justify-content-center mx-auto",children:e.jsx(h,{className:"my-auto me-auto bg-white text-primary fs-6",href:"#footer-anchor",style:{display:"inline-flex",padding:"0.8rem 2rem",textDecoration:"none",textWrap:"nowrap",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})})]})]})})}return e.jsx(e.Fragment,{children:j})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.productData?.name };
  }

version_title: Страница товара
version_path: /categories/:categorySlug/:productSlug
version_src_type: jsx
version_updated_at: 2025-11-27T04:56:39.061Z
version_created_at: 2025-11-17T09:48:13.973Z
version__status: draft
created_at: 2025-11-27T04:56:39.061Z
updated_at: 2025-11-27T04:56:39.061Z
version_jsx:
  import type { Product, ProductImage } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ProductsGrid, Breadcrumb, Template, RichText },
    deps: {
      rb: { Container, Image, Row, Col, Button, Modal, Carousel },
      react: { useState },
      next: { Link },
    },
    props: { route, data },
  }) {
    const { productData, productSuggestions } = data!
    let templateData = undefined
    let template = undefined
    if (productData.template) {
      templateData = productData.template
    } else if (typeof productData.category !== 'number' && productData.category?.productTemplate) {
      templateData = productData.category.productTemplate
    }

    const [showPreview, setShowPreview] = useState(false)
    const [activeIndex, setActiveIndex] = useState(0)

    if (templateData) {
      template = <Template template={templateData} {...{ route, productData, productSuggestions }} />
    } else {
      const handleOpenPreview = (index: number) => {
        setActiveIndex(index)
        setShowPreview(true)
      }

      const handleClosePreview = () => {
        setShowPreview(false)
      }
      // @ts-ignore
      let productImages: ProductImage[] = productData.img
      if (!productImages || typeof productImages[0] === 'number') {
        productImages = []
      }

      const categorySlug = route.params.categorySlug
      const categoryName = typeof productData.category === 'number' ? '' : productData.category?.name
      const productName = productData.name
      const productProperties = productData.meta
      const imagesCount = productImages.length || 0
      const previewSlots = Math.max(0, Math.min(imagesCount - 1, 4))
      const previewWidth = (previewSlots / 4) * 100

      const slicedImages = productImages.slice(1, Math.min(imagesCount, 4))
      const previewImages = slicedImages.map((img, index) => (
        <div
          key={index}
          // each item must be a flex item that can shrink
          style={{
            flex: '1 1 0', // allow shrinking and equal share
            minWidth: 0, // crucial for webkit (prevents overflow)
            height: '100%',
            display: 'block',
          }}
          onClick={() => handleOpenPreview(index + 1)}
          className="rounded-1"
        >
          <Image
            src={img.sizes?.small?.url || ''}
            alt={productName}
            style={{
              objectFit: 'cover',
              height: '100%',
              width: '100%',
              cursor: 'pointer',
              borderRadius: '0.25rem',
            }}
          />
        </div>
      ))

      if (imagesCount > 4) {
        // push the "more" overlay as one of the flex items with same item style
        previewImages.push(
          <div
            key={4}
            onClick={() => handleOpenPreview(4)}
            style={{
              flex: '1 1 0',
              minWidth: 0,
              height: '100%',
              position: 'relative',
              display: 'flex',
              justifyContent: 'center',
            }}
            className="cursor-pointer mb-4"
          >
            <Image
              src={productImages[4].url || ''}
              alt={productName}
              style={{
                display: 'block',
                objectFit: 'cover',
                width: '100%',
                height: '100%',
                borderRadius: '0.25rem',
              }}
            />
            {imagesCount > 5 && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    borderRadius: '0.25rem',
                  }}
                />
                <span className="position-absolute top-50 start-50 translate-middle fs-5 text-white">
                  +{imagesCount - 5}
                </span>
              </>
            )}
          </div>,
        )
      }

      const previewImagesStrip =
        imagesCount > 1 ? (
          <div
            className="d-flex gap-1 gap-lg-3"
            style={{
              width: previewWidth + '%',
              gap: '0.75rem', // use gap (supported widely) instead of justify-content-between
              alignItems: 'stretch',
              boxSizing: 'border-box',
              // optional: prevent rounding errors causing overflow
              overflow: 'hidden',
            }}
          >
            {previewImages}
          </div>
        ) : null

      template = (
        <>
          <Container className="mb-5">
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}`, link: `/categories/${categorySlug}` },
                { label: `${productName}` },
              ]}
            />

            <Row className="mb-5">
              <Col lg={6} className="d-flex flex-column gap-2 gap-lg-3">
                <h2 className="d-block d-lg-none mb-3 fw-semibold">{productName}</h2>
                <Image
                  src={productImages[0].sizes?.large?.url || ''}
                  alt={productName}
                  onClick={() => handleOpenPreview(0)}
                  className="img-fluid rounded-1 shadow"
                  style={{
                    aspectRatio: '4 / 3',
                    objectFit: 'cover',
                    height: 'auto',
                    width: '100%',
                    cursor: 'pointer',
                  }}
                />
                {previewImagesStrip}
                {/* Modal with carousel */}
                <Modal
                  show={showPreview}
                  onHide={handleClosePreview}
                  centered
                  size="xl"
                  contentClassName="bg-transparent border-0"
                >
                  <Modal.Body className="p-0 position-relative">
                    <Carousel
                      activeIndex={activeIndex}
                      onSelect={(selectedIndex) => setActiveIndex(selectedIndex)}
                      interval={null}
                      indicators={false}
                      nextIcon={
                        <iconify-icon
                          icon="lucide:chevron-right"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      prevIcon={
                        <iconify-icon
                          icon="lucide:chevron-left"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      controls={false}
                    >
                      {productImages.map((img, index) => {
                        if (typeof img === 'number') {
                          return null
                        }
                        return (
                          <Carousel.Item key={index}>
                            <Image
                              src={img.url || ''}
                              alt={productName}
                              className="d-block w-100"
                              style={{
                                objectFit: 'contain',
                                maxHeight: 'calc(100vh - 180px)',
                              }}
                            />
                          </Carousel.Item>
                        )
                      })}
                    </Carousel>

                    {/* Thumbnail strip */}
                    <div
                      className="d-flex justify-content-center mt-3 flex-wrap"
                      style={{ gap: '0.5rem' }}
                    >
                      {productImages.map((img, index) => {
                        return (
                          <Image
                            key={index}
                            src={img.sizes?.small?.url || ''}
                            alt={productName}
                            onClick={() => setActiveIndex(index)}
                            className={`rounded shadow-sm ${index === activeIndex ? 'border border-light border-3' : ''}`}
                            style={{
                              height: '90px',
                              width: '120px',
                              objectFit: 'cover',
                              cursor: 'pointer',
                            }}
                          />
                        )
                      })}
                    </div>
                  </Modal.Body>
                </Modal>
              </Col>
              <Col lg={6} className="d-flex flex-column justify-content-between">
                <div>
                  <h2 className="d-none d-lg-block fw-semibold">{productName}</h2>
                  <h5 className="mt-5 mb-3 fw-semibold">Описание:</h5>
                  <RichText data={productData.description} />
                </div>
                <div>
                  {(() => {
                    const priceFrom =
                      productData.priceFrom &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceFrom,
                      )
                    const priceTo =
                      productData.priceTo &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceTo,
                      )

                    let price = undefined
                    if (priceFrom && priceTo) {
                      price = priceFrom === priceTo ? priceFrom : `от ${priceFrom} до ${priceTo}`
                    } else {
                      price = (priceFrom && `от ${priceFrom}`) || (priceTo && `до ${priceTo}`)
                    }
                    price = price && `${price} сом`

                    return price ? <h2 className="my-4 fw-semibold">{price}</h2> : undefined
                  })()}
                  <Button
                    href="#footer-anchor"
                    className="fs-5 rounded-0 text-white"
                    style={{ padding: '0.8rem 2rem' }}
                  >
                    Оставить заявку
                  </Button>
                </div>
              </Col>
            </Row>
            <Row>
              <h5 className="mb-4 fw-semibold">Характеристики:</h5>
              <style>
                {`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}
              </style>
              {productProperties && (
                <Col
                  style={{
                    display: 'grid',
                    rowGap: '1rem',
                    columnGap: '2rem',
                  }}
                  className="product-properties-grid"
                >
                  {Object.entries(productProperties).map(([key, value], index) => [
                    <div
                      key={`container-${index}`}
                      style={{ display: 'grid', columnGap: '1rem', gridTemplateColumns: '1fr 1fr' }}
                    >
                      <span key={`key-${index}`}>{key}:</span>
                      <span key={`value-${index}`}>{String(value)}</span>
                    </div>,
                  ])}
                </Col>
              )}
            </Row>
            <Row
              className="row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white"
              style={{
                clipPath: 'polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)',
                marginTop: '2.5rem',
                marginBottom: '2.5rem',
              }}
            >
              <Col lg={4}>
                <h2 className="lh-1 text-uppercase">
                  Мы берём
                  <br />
                  ответственность
                  <br />
                  на себя
                </h2>
              </Col>
              <Col lg={4} className="d-flex flex-column justify-content-center row-gap-3 ms-auto">
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Договор на руках
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Проверка качества до отправки
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Доставка — до склада или на дом
                </div>
              </Col>
              <Col lg={3} className="d-flex flex-column justify-content-center mx-auto">
                <Link // should it change color on hover?
                  className="my-auto me-auto bg-white text-primary fs-6"
                  href="#footer-anchor"
                  style={{
                    display: 'inline-flex',
                    padding: '0.8rem 2rem',
                    textDecoration: 'none',
                    textWrap: 'nowrap',
                    clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                    transition: '#1D1D1D .2s',
                  }}
                >
                  Получить консультацию
                </Link>
              </Col>
            </Row>
            {/*<Row className="row-gap-3 mt-5">
              <Col
                lg={3}
                className="d-flex flex-lg-column mb-lg-0 text-uppercase"
                style={{ maxWidth: '500px' }}
              >
                <h1 className="lh-1">похожие&nbsp;</h1>
                <h1 className="mb-0 ms-lg-auto lh-1 text-primary">товары</h1>
              </Col>
              <Col lg={1} className="d-none d-lg-block"></Col>
              <Col className="mt-auto" lg={6}>
                <span>
                  Похожие варианты, которые могут заинтересовать вас и помочь сделать идеальный выбор.
                </span>
              </Col>
            </Row>*/}
          </Container>
          {/*<ProductsGrid productData={productSuggestions} className="mb-5" />*/}
        </>
      )
    }
    return <>{template}</>
  } satisfies PageJsx<{ productData: Product; productSuggestions: PaginatedDocs<Product> }>)

version_fetch_data:
[cell repeats an earlier one in this file: 1601 characters]

version_code:
  export default function({runtime:e,components:{ProductsGrid:s,Breadcrumb:l,Template:t,RichText:i},deps:{rb:{Container:r,Image:a,Row:c,Col:n,Button:o,Modal:d,Carousel:m},react:{useState:x},next:{Link:h}},props:{route:p,data:g}}){let u,j,{productData:f,productSuggestions:b}=g;f.template?u=f.template:"number"!=typeof f.category&&f.category?.productTemplate&&(u=f.category.productTemplate);let[y,N]=x(!1),[w,v]=x(0);if(u)j=e.jsx(t,{template:u,route:p,productData:f,productSuggestions:b});else{let s,t,x,g=e=>{v(e),N(!0)},u=f.img;u&&"number"!=typeof u[0]||(u=[]);let b=p.params.categorySlug,k="number"==typeof f.category?"":f.category?.name,F=f.name,$=f.meta,C=u.length||0,z=Math.max(0,Math.min(C-1,4)),G=u.slice(1,Math.min(C,4)).map((s,l)=>e.jsx("div",{style:{flex:"1 1 0",minWidth:0,height:"100%",display:"block"},onClick:()=>g(l+1),className:"rounded-1",children:e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,style:{objectFit:"cover",height:"100%",width:"100%",cursor:"pointer",borderRadius:"0.25rem"}})},l));C>4&&G.push(e.jsxs("div",{onClick:()=>g(4),style:{flex:"1 1 0",minWidth:0,height:"100%",position:"relative",display:"flex",justifyContent:"center"},className:"cursor-pointer mb-4",children:[e.jsx(a,{src:u[4].url||"",alt:F,style:{display:"block",objectFit:"cover",width:"100%",height:"100%",borderRadius:"0.25rem"}}),C>5&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)",borderRadius:"0.25rem"}}),e.jsxs("span",{className:"position-absolute top-50 start-50 translate-middle fs-5 text-white",children:["+",C-5]})]})]},4));let I=C>1?e.jsx("div",{className:"d-flex gap-1 gap-lg-3",style:{width:z/4*100+"%",gap:"0.75rem",alignItems:"stretch",boxSizing:"border-box",overflow:"hidden"},children:G}):null;j=e.jsx(e.Fragment,{children:e.jsxs(r,{className:"mb-5",children:[e.jsx(l,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${k}`,link:`/categories/${b}`},{label:`${F}`}]}),e.jsxs(c,{className:"mb-5",children:[e.jsxs(n,{lg:6,className:"d-flex flex-column gap-2 gap-lg-3",children:[e.jsx("h2",{className:"d-block d-lg-none mb-3 fw-semibold",children:F}),e.jsx(a,{src:u[0].sizes?.large?.url||"",alt:F,onClick:()=>g(0),className:"img-fluid rounded-1 shadow",style:{aspectRatio:"4 / 3",objectFit:"cover",height:"auto",width:"100%",cursor:"pointer"}}),I,e.jsx(d,{show:y,onHide:()=>{N(!1)},centered:!0,size:"xl",contentClassName:"bg-transparent border-0",children:e.jsxs(d.Body,{className:"p-0 position-relative",children:[e.jsx(m,{activeIndex:w,onSelect:e=>v(e),interval:null,indicators:!1,nextIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"text-black",style:{fontSize:"100px"}}),prevIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-left",className:"text-black",style:{fontSize:"100px"}}),controls:!1,children:u.map((s,l)=>"number"==typeof s?null:e.jsx(m.Item,{children:e.jsx(a,{src:s.url||"",alt:F,className:"d-block w-100",style:{objectFit:"contain",maxHeight:"calc(100vh - 180px)"}})},l))}),e.jsx("div",{className:"d-flex justify-content-center mt-3 flex-wrap",style:{gap:"0.5rem"},children:u.map((s,l)=>e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,onClick:()=>v(l),className:`rounded shadow-sm ${l===w?"border border-light border-3":""}`,style:{height:"90px",width:"120px",objectFit:"cover",cursor:"pointer"}},l))})]})})]}),e.jsxs(n,{lg:6,className:"d-flex flex-column justify-content-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"d-none d-lg-block fw-semibold",children:F}),e.jsx("h5",{className:"mt-5 mb-3 fw-semibold",children:"Описание:"}),e.jsx(i,{data:f.description})]}),e.jsxs("div",{children:[(s=f.priceFrom&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceFrom),t=f.priceTo&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceTo),(x=(x=s&&t?s===t?s:`от ${s} до ${t}`:s&&`от ${s}`||t&&`до ${t}`)&&`${x} сом`)?e.jsx("h2",{className:"my-4 fw-semibold",children:x}):void 0),e.jsx(o,{href:"#footer-anchor",className:"fs-5 rounded-0 text-white",style:{padding:"0.8rem 2rem"},children:"Оставить заявку"})]})]})]}),e.jsxs(c,{children:[e.jsx("h5",{className:"mb-4 fw-semibold",children:"Характеристики:"}),e.jsx("style",{children:`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}),$&&e.jsx(n,{style:{display:"grid",rowGap:"1rem",columnGap:"2rem"},className:"product-properties-grid",children:Object.entries($).map(([s,l],t)=>[e.jsxs("div",{style:{display:"grid",columnGap:"1rem",gridTemplateColumns:"1fr 1fr"},children:[e.jsxs("span",{children:[s,":"]},`key-${t}`),e.jsx("span",{children:String(l)},`value-${t}`)]},`container-${t}`)])})]}),e.jsxs(c,{className:"row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white",style:{clipPath:"polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)",marginTop:"2.5rem",marginBottom:"2.5rem"},children:[e.jsx(n,{lg:4,children:e.jsxs("h2",{className:"lh-1 text-uppercase",children:["Мы берём",e.jsx("br",{}),"ответственность",e.jsx("br",{}),"на себя"]})}),e.jsxs(n,{lg:4,className:"d-flex flex-column justify-content-center row-gap-3 ms-auto",children:[e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Договор на руках"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Проверка качества до отправки"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Доставка — до склада или на дом"]})]}),e.jsx(n,{lg:3,className:"d-flex flex-column justify-content-center mx-auto",children:e.jsx(h,{className:"my-auto me-auto bg-white text-primary fs-6",href:"#footer-anchor",style:{display:"inline-flex",padding:"0.8rem 2rem",textDecoration:"none",textWrap:"nowrap",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})})]})]})})}return e.jsx(e.Fragment,{children:j})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.productData?.name };
  }

version_title: Страница товара
version_path: /categories/:categorySlug/:productSlug
version_src_type: jsx
version_updated_at: 2025-11-27T05:07:03.749Z
version_created_at: 2025-11-17T09:48:13.973Z
version__status: published
created_at: 2025-11-27T05:07:03.758Z
updated_at: 2025-11-27T05:07:03.758Z
version_jsx:
  import type { Product, ProductImage } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ProductsGrid, Breadcrumb, Template, RichText },
    deps: {
      rb: { Container, Image, Row, Col, Button, Modal, Carousel },
      react: { useState },
      next: { Link },
    },
    props: { route, data },
  }) {
    const { productData, productSuggestions } = data!
    let templateData = undefined
    let template = undefined
    if (productData.template) {
      templateData = productData.template
    } else if (typeof productData.category !== 'number' && productData.category?.productTemplate) {
      templateData = productData.category.productTemplate
    }

    const [showPreview, setShowPreview] = useState(false)
    const [activeIndex, setActiveIndex] = useState(0)

    if (templateData) {
      template = <Template template={templateData} {...{ route, productData, productSuggestions }} />
    } else {
      const handleOpenPreview = (index: number) => {
        setActiveIndex(index)
        setShowPreview(true)
      }

      const handleClosePreview = () => {
        setShowPreview(false)
      }
      // @ts-ignore
      let productImages: ProductImage[] = productData.img || []
      if (!productImages || typeof productImages[0] === 'number') {
        productImages = []
      }

      const categorySlug = route.params.categorySlug
      const categoryName = typeof productData.category === 'number' ? '' : productData.category?.name
      const productName = productData.name
      const productProperties = productData.meta
      const imagesCount = productImages.length || 0
      const previewSlots = Math.max(0, Math.min(imagesCount - 1, 4))
      const previewWidth = (previewSlots / 4) * 100

      const slicedImages = productImages.slice(1, Math.min(imagesCount, 4))
      const previewImages = slicedImages.map((img, index) => (
        <div
          key={index}
          // each item must be a flex item that can shrink
          style={{
            flex: '1 1 0', // allow shrinking and equal share
            minWidth: 0, // crucial for webkit (prevents overflow)
            height: '100%',
            display: 'block',
          }}
          onClick={() => handleOpenPreview(index + 1)}
          className="rounded-1"
        >
          <Image
            src={img.sizes?.small?.url || ''}
            alt={productName}
            style={{
              objectFit: 'cover',
              height: '100%',
              width: '100%',
              cursor: 'pointer',
              borderRadius: '0.25rem',
            }}
          />
        </div>
      ))

      if (imagesCount > 4) {
        // push the "more" overlay as one of the flex items with same item style
        previewImages.push(
          <div
            key={4}
            onClick={() => handleOpenPreview(4)}
            style={{
              flex: '1 1 0',
              minWidth: 0,
              height: '100%',
              position: 'relative',
              display: 'flex',
              justifyContent: 'center',
            }}
            className="cursor-pointer mb-4"
          >
            <Image
              src={productImages[4].url || ''}
              alt={productName}
              style={{
                display: 'block',
                objectFit: 'cover',
                width: '100%',
                height: '100%',
                borderRadius: '0.25rem',
              }}
            />
            {imagesCount > 5 && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    borderRadius: '0.25rem',
                  }}
                />
                <span className="position-absolute top-50 start-50 translate-middle fs-5 text-white">
                  +{imagesCount - 5}
                </span>
              </>
            )}
          </div>,
        )
      }

      const previewImagesStrip =
        imagesCount > 1 ? (
          <div
            className="d-flex gap-1 gap-lg-3"
            style={{
              width: previewWidth + '%',
              gap: '0.75rem', // use gap (supported widely) instead of justify-content-between
              alignItems: 'stretch',
              boxSizing: 'border-box',
              // optional: prevent rounding errors causing overflow
              overflow: 'hidden',
            }}
          >
            {previewImages}
          </div>
        ) : null

      template = (
        <>
          <Container className="mb-5">
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}`, link: `/categories/${categorySlug}` },
                { label: `${productName}` },
              ]}
            />

            <Row className="mb-5">
              <Col lg={6} className="d-flex flex-column gap-2 gap-lg-3">
                <h2 className="d-block d-lg-none mb-3 fw-semibold">{productName}</h2>
                <Image
                  src={productImages[0].sizes?.large?.url || ''}
                  alt={productName}
                  onClick={() => handleOpenPreview(0)}
                  className="img-fluid rounded-1 shadow"
                  style={{
                    aspectRatio: '4 / 3',
                    objectFit: 'cover',
                    height: 'auto',
                    width: '100%',
                    cursor: 'pointer',
                  }}
                />
                {previewImagesStrip}
                {/* Modal with carousel */}
                <Modal
                  show={showPreview}
                  onHide={handleClosePreview}
                  centered
                  size="xl"
                  contentClassName="bg-transparent border-0"
                >
                  <Modal.Body className="p-0 position-relative">
                    <Carousel
                      activeIndex={activeIndex}
                      onSelect={(selectedIndex) => setActiveIndex(selectedIndex)}
                      interval={null}
                      indicators={false}
                      nextIcon={
                        <iconify-icon
                          icon="lucide:chevron-right"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      prevIcon={
                        <iconify-icon
                          icon="lucide:chevron-left"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      controls={productImages.length > 1}
                    >
                      {productImages.map((img, index) => {
                        if (typeof img === 'number') {
                          return null
                        }
                        return (
                          <Carousel.Item key={index}>
                            <Image
                              src={img.url || ''}
                              alt={productName}
                              className="d-block w-100"
                              style={{
                                objectFit: 'contain',
                                maxHeight: 'calc(100vh - 180px)',
                              }}
                            />
                          </Carousel.Item>
                        )
                      })}
                    </Carousel>

                    {/* Thumbnail strip */}
                    {productImages.length > 1 && <div
                      className="d-flex justify-content-center mt-3 flex-wrap"
                      style={{ gap: '0.5rem' }}
                    >
                      {productImages.map((img, index) => {
                        return (
                          <Image
                            key={index}
                            src={img.sizes?.small?.url || ''}
                            alt={productName}
                            onClick={() => setActiveIndex(index)}
                            className={`rounded shadow-sm ${index === activeIndex ? 'border border-light border-3' : ''}`}
                            style={{
                              height: '90px',
                              width: '120px',
                              objectFit: 'cover',
                              cursor: 'pointer',
                            }}
                          />
                        )
                      })}
                    </div>}
                  </Modal.Body>
                </Modal>
              </Col>
              <Col lg={6} className="d-flex flex-column justify-content-between">
                <div>
                  <h2 className="d-none d-lg-block fw-semibold">{productName}</h2>
                  <h5 className="mt-5 mb-3 fw-semibold">Описание:</h5>
                  <RichText data={productData.description} />
                </div>
                <div>
                  {(() => {
                    const priceFrom =
                      productData.priceFrom &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceFrom,
                      )
                    const priceTo =
                      productData.priceTo &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceTo,
                      )

                    let price = undefined
                    if (priceFrom && priceTo) {
                      price = priceFrom === priceTo ? priceFrom : `от ${priceFrom} до ${priceTo}`
                    } else {
                      price = (priceFrom && `от ${priceFrom}`) || (priceTo && `до ${priceTo}`)
                    }
                    price = price && `${price} сом`

                    return price ? <h2 className="my-4 fw-semibold">{price}</h2> : undefined
                  })()}
                  <Button
                    href="#footer-anchor"
                    className="fs-5 rounded-0 text-white"
                    style={{ padding: '0.8rem 2rem' }}
                  >
                    Оставить заявку
                  </Button>
                </div>
              </Col>
            </Row>
            <Row>
              <h5 className="mb-4 fw-semibold">Характеристики:</h5>
              <style>
                {`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}
              </style>
              {productProperties && (
                <Col
                  style={{
                    display: 'grid',
                    rowGap: '1rem',
                    columnGap: '2rem',
                  }}
                  className="product-properties-grid"
                >
                  {Object.entries(productProperties).map(([key, value], index) => [
                    <div
                      key={`container-${index}`}
                      style={{ display: 'grid', columnGap: '1rem', gridTemplateColumns: '1fr 1fr' }}
                    >
                      <span key={`key-${index}`}>{key}:</span>
                      <span key={`value-${index}`}>{String(value)}</span>
                    </div>,
                  ])}
                </Col>
              )}
            </Row>
            <Row
              className="row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white"
              style={{
                clipPath: 'polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)',
                marginTop: '2.5rem',
                marginBottom: '2.5rem',
              }}
            >
              <Col lg={4}>
                <h2 className="lh-1 text-uppercase">
                  Мы берём
                  <br />
                  ответственность
                  <br />
                  на себя
                </h2>
              </Col>
              <Col lg={4} className="d-flex flex-column justify-content-center row-gap-3 ms-auto">
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Договор на руках
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Проверка качества до отправки
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Доставка — до склада или на дом
                </div>
              </Col>
              <Col lg={3} className="d-flex flex-column justify-content-center mx-auto">
                <Link // should it change color on hover?
                  className="my-auto me-auto bg-white text-primary fs-6"
                  href="#footer-anchor"
                  style={{
                    display: 'inline-flex',
                    padding: '0.8rem 2rem',
                    textDecoration: 'none',
                    textWrap: 'nowrap',
                    clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                    transition: '#1D1D1D .2s',
                  }}
                >
                  Получить консультацию
                </Link>
              </Col>
            </Row>
            {/*<Row className="row-gap-3 mt-5">
              <Col
                lg={3}
                className="d-flex flex-lg-column mb-lg-0 text-uppercase"
                style={{ maxWidth: '500px' }}
              >
                <h1 className="lh-1">похожие&nbsp;</h1>
                <h1 className="mb-0 ms-lg-auto lh-1 text-primary">товары</h1>
              </Col>
              <Col lg={1} className="d-none d-lg-block"></Col>
              <Col className="mt-auto" lg={6}>
                <span>
                  Похожие варианты, которые могут заинтересовать вас и помочь сделать идеальный выбор.
                </span>
              </Col>
            </Row>*/}
          </Container>
          {/*<ProductsGrid productData={productSuggestions} className="mb-5" />*/}
        </>
      )
    }
    return <>{template}</>
  } satisfies PageJsx<{ productData: Product; productSuggestions: PaginatedDocs<Product> }>)

version_fetch_data:
[cell repeats an earlier one in this file: 1601 characters]

version_code:
  export default function({runtime:e,components:{ProductsGrid:s,Breadcrumb:l,Template:t,RichText:i},deps:{rb:{Container:r,Image:a,Row:c,Col:n,Button:o,Modal:d,Carousel:m},react:{useState:h},next:{Link:x}},props:{route:p,data:g}}){let u,j,{productData:f,productSuggestions:b}=g;f.template?u=f.template:"number"!=typeof f.category&&f.category?.productTemplate&&(u=f.category.productTemplate);let[y,N]=h(!1),[w,v]=h(0);if(u)j=e.jsx(t,{template:u,route:p,productData:f,productSuggestions:b});else{let s,t,h,g=e=>{v(e),N(!0)},u=f.img||[];u&&"number"!=typeof u[0]||(u=[]);let b=p.params.categorySlug,k="number"==typeof f.category?"":f.category?.name,F=f.name,$=f.meta,C=u.length||0,z=Math.max(0,Math.min(C-1,4)),G=u.slice(1,Math.min(C,4)).map((s,l)=>e.jsx("div",{style:{flex:"1 1 0",minWidth:0,height:"100%",display:"block"},onClick:()=>g(l+1),className:"rounded-1",children:e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,style:{objectFit:"cover",height:"100%",width:"100%",cursor:"pointer",borderRadius:"0.25rem"}})},l));C>4&&G.push(e.jsxs("div",{onClick:()=>g(4),style:{flex:"1 1 0",minWidth:0,height:"100%",position:"relative",display:"flex",justifyContent:"center"},className:"cursor-pointer mb-4",children:[e.jsx(a,{src:u[4].url||"",alt:F,style:{display:"block",objectFit:"cover",width:"100%",height:"100%",borderRadius:"0.25rem"}}),C>5&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)",borderRadius:"0.25rem"}}),e.jsxs("span",{className:"position-absolute top-50 start-50 translate-middle fs-5 text-white",children:["+",C-5]})]})]},4));let I=C>1?e.jsx("div",{className:"d-flex gap-1 gap-lg-3",style:{width:z/4*100+"%",gap:"0.75rem",alignItems:"stretch",boxSizing:"border-box",overflow:"hidden"},children:G}):null;j=e.jsx(e.Fragment,{children:e.jsxs(r,{className:"mb-5",children:[e.jsx(l,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${k}`,link:`/categories/${b}`},{label:`${F}`}]}),e.jsxs(c,{className:"mb-5",children:[e.jsxs(n,{lg:6,className:"d-flex flex-column gap-2 gap-lg-3",children:[e.jsx("h2",{className:"d-block d-lg-none mb-3 fw-semibold",children:F}),e.jsx(a,{src:u[0].sizes?.large?.url||"",alt:F,onClick:()=>g(0),className:"img-fluid rounded-1 shadow",style:{aspectRatio:"4 / 3",objectFit:"cover",height:"auto",width:"100%",cursor:"pointer"}}),I,e.jsx(d,{show:y,onHide:()=>{N(!1)},centered:!0,size:"xl",contentClassName:"bg-transparent border-0",children:e.jsxs(d.Body,{className:"p-0 position-relative",children:[e.jsx(m,{activeIndex:w,onSelect:e=>v(e),interval:null,indicators:!1,nextIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"text-black",style:{fontSize:"100px"}}),prevIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-left",className:"text-black",style:{fontSize:"100px"}}),controls:u.length>1,children:u.map((s,l)=>"number"==typeof s?null:e.jsx(m.Item,{children:e.jsx(a,{src:s.url||"",alt:F,className:"d-block w-100",style:{objectFit:"contain",maxHeight:"calc(100vh - 180px)"}})},l))}),u.length>1&&e.jsx("div",{className:"d-flex justify-content-center mt-3 flex-wrap",style:{gap:"0.5rem"},children:u.map((s,l)=>e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,onClick:()=>v(l),className:`rounded shadow-sm ${l===w?"border border-light border-3":""}`,style:{height:"90px",width:"120px",objectFit:"cover",cursor:"pointer"}},l))})]})})]}),e.jsxs(n,{lg:6,className:"d-flex flex-column justify-content-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"d-none d-lg-block fw-semibold",children:F}),e.jsx("h5",{className:"mt-5 mb-3 fw-semibold",children:"Описание:"}),e.jsx(i,{data:f.description})]}),e.jsxs("div",{children:[(s=f.priceFrom&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceFrom),t=f.priceTo&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceTo),(h=(h=s&&t?s===t?s:`от ${s} до ${t}`:s&&`от ${s}`||t&&`до ${t}`)&&`${h} сом`)?e.jsx("h2",{className:"my-4 fw-semibold",children:h}):void 0),e.jsx(o,{href:"#footer-anchor",className:"fs-5 rounded-0 text-white",style:{padding:"0.8rem 2rem"},children:"Оставить заявку"})]})]})]}),e.jsxs(c,{children:[e.jsx("h5",{className:"mb-4 fw-semibold",children:"Характеристики:"}),e.jsx("style",{children:`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}),$&&e.jsx(n,{style:{display:"grid",rowGap:"1rem",columnGap:"2rem"},className:"product-properties-grid",children:Object.entries($).map(([s,l],t)=>[e.jsxs("div",{style:{display:"grid",columnGap:"1rem",gridTemplateColumns:"1fr 1fr"},children:[e.jsxs("span",{children:[s,":"]},`key-${t}`),e.jsx("span",{children:String(l)},`value-${t}`)]},`container-${t}`)])})]}),e.jsxs(c,{className:"row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white",style:{clipPath:"polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)",marginTop:"2.5rem",marginBottom:"2.5rem"},children:[e.jsx(n,{lg:4,children:e.jsxs("h2",{className:"lh-1 text-uppercase",children:["Мы берём",e.jsx("br",{}),"ответственность",e.jsx("br",{}),"на себя"]})}),e.jsxs(n,{lg:4,className:"d-flex flex-column justify-content-center row-gap-3 ms-auto",children:[e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Договор на руках"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Проверка качества до отправки"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Доставка — до склада или на дом"]})]}),e.jsx(n,{lg:3,className:"d-flex flex-column justify-content-center mx-auto",children:e.jsx(x,{className:"my-auto me-auto bg-white text-primary fs-6",href:"#footer-anchor",style:{display:"inline-flex",padding:"0.8rem 2rem",textDecoration:"none",textWrap:"nowrap",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})})]})]})})}return e.jsx(e.Fragment,{children:j})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.productData?.name };
  }

version_title: Страница товара
version_path: /categories/:categorySlug/:productSlug
version_src_type: jsx
version_updated_at: 2025-12-02T05:50:14.392Z
version_created_at: 2025-11-17T09:48:13.973Z
version__status: published
created_at: 2025-12-02T05:50:14.400Z
updated_at: 2025-12-02T05:50:14.400Z
version_jsx:
  import type { Product, ProductImage } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ProductsGrid, Breadcrumb, Template, RichText },
    deps: {
      rb: { Container, Image, Row, Col, Button, Modal, Carousel },
      react: { useState },
      next: { Link },
    },
    props: { route, data },
  }) {
    const { productData, productSuggestions } = data!
    let templateData = undefined
    let template = undefined
    if (productData.template) {
      templateData = productData.template
    } else if (typeof productData.category !== 'number' && productData.category?.productTemplate) {
      templateData = productData.category.productTemplate
    }

    const [showPreview, setShowPreview] = useState(false)
    const [activeIndex, setActiveIndex] = useState(0)

    if (templateData) {
      template = <Template template={templateData} {...{ route, productData, productSuggestions }} />
    } else {
      const handleOpenPreview = (index: number) => {
        setActiveIndex(index)
        setShowPreview(true)
      }

      const handleClosePreview = () => {
        setShowPreview(false)
      }
      // @ts-ignore
      let productImages: ProductImage[] = productData.img || []
      if (!productImages || typeof productImages[0] === 'number') {
        productImages = []
      }

      const categorySlug = route.params.categorySlug
      const categoryName = typeof productData.category === 'number' ? '' : productData.category?.name
      const productName = productData.name
      const productProperties = Object.entries(productData.meta ?? {})
      const imagesCount = productImages.length || 0
      const previewSlots = Math.max(0, Math.min(imagesCount - 1, 4))
      const previewWidth = (previewSlots / 4) * 100

      const slicedImages = productImages.slice(1, Math.min(imagesCount, 4))
      const previewImages = slicedImages.map((img, index) => (
        <div
          key={index}
          // each item must be a flex item that can shrink
          style={{
            flex: '1 1 0', // allow shrinking and equal share
            minWidth: 0, // crucial for webkit (prevents overflow)
            height: '100%',
            display: 'block',
          }}
          onClick={() => handleOpenPreview(index + 1)}
          className="rounded-1"
        >
          <Image
            src={img.sizes?.small?.url || ''}
            alt={productName}
            style={{
              objectFit: 'cover',
              height: '100%',
              width: '100%',
              cursor: 'pointer',
              borderRadius: '0.25rem',
            }}
          />
        </div>
      ))

      if (imagesCount > 4) {
        // push the "more" overlay as one of the flex items with same item style
        previewImages.push(
          <div
            key={4}
            onClick={() => handleOpenPreview(4)}
            style={{
              flex: '1 1 0',
              minWidth: 0,
              height: '100%',
              position: 'relative',
              display: 'flex',
              justifyContent: 'center',
            }}
            className="cursor-pointer mb-4"
          >
            <Image
              src={productImages[4].url || ''}
              alt={productName}
              style={{
                display: 'block',
                objectFit: 'cover',
                width: '100%',
                height: '100%',
                borderRadius: '0.25rem',
              }}
            />
            {imagesCount > 5 && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    borderRadius: '0.25rem',
                  }}
                />
                <span className="position-absolute top-50 start-50 translate-middle fs-5 text-white">
                  +{imagesCount - 5}
                </span>
              </>
            )}
          </div>,
        )
      }

      const previewImagesStrip =
        imagesCount > 1 ? (
          <div
            className="d-flex gap-1 gap-lg-3"
            style={{
              width: previewWidth + '%',
              gap: '0.75rem', // use gap (supported widely) instead of justify-content-between
              alignItems: 'stretch',
              boxSizing: 'border-box',
              // optional: prevent rounding errors causing overflow
              overflow: 'hidden',
            }}
          >
            {previewImages}
          </div>
        ) : null

      template = (
        <>
          <Container className="mb-5">
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}`, link: `/categories/${categorySlug}` },
                { label: `${productName}` },
              ]}
            />

            <Row className="mb-5">
              <Col lg={6} className="d-flex flex-column gap-2 gap-lg-3">
                <h2 className="d-block d-lg-none mb-3 fw-semibold">{productName}</h2>
                <Image
                  src={productImages[0].sizes?.large?.url || ''}
                  alt={productName}
                  onClick={() => handleOpenPreview(0)}
                  className="img-fluid rounded-1 shadow"
                  style={{
                    aspectRatio: '4 / 3',
                    objectFit: 'cover',
                    height: 'auto',
                    width: '100%',
                    cursor: 'pointer',
                  }}
                />
                {previewImagesStrip}
                {/* Modal with carousel */}
                <Modal
                  show={showPreview}
                  onHide={handleClosePreview}
                  centered
                  size="xl"
                  contentClassName="bg-transparent border-0"
                >
                  <Modal.Body className="p-0 position-relative">
                    <Carousel
                      activeIndex={activeIndex}
                      onSelect={(selectedIndex) => setActiveIndex(selectedIndex)}
                      interval={null}
                      indicators={false}
                      nextIcon={
                        <iconify-icon
                          icon="lucide:chevron-right"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      prevIcon={
                        <iconify-icon
                          icon="lucide:chevron-left"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      controls={productImages.length > 1}
                    >
                      {productImages.map((img, index) => {
                        if (typeof img === 'number') {
                          return null
                        }
                        return (
                          <Carousel.Item key={index}>
                            <Image
                              src={img.url || ''}
                              alt={productName}
                              className="d-block w-100"
                              style={{
                                objectFit: 'contain',
                                maxHeight: 'calc(100vh - 180px)',
                              }}
                            />
                          </Carousel.Item>
                        )
                      })}
                    </Carousel>

                    {/* Thumbnail strip */}
                    {productImages.length > 1 && <div
                      className="d-flex justify-content-center mt-3 flex-wrap"
                      style={{ gap: '0.5rem' }}
                    >
                      {productImages.map((img, index) => {
                        return (
                          <Image
                            key={index}
                            src={img.sizes?.small?.url || ''}
                            alt={productName}
                            onClick={() => setActiveIndex(index)}
                            className={`rounded shadow-sm ${index === activeIndex ? 'border border-light border-3' : ''}`}
                            style={{
                              height: '90px',
                              width: '120px',
                              objectFit: 'cover',
                              cursor: 'pointer',
                            }}
                          />
                        )
                      })}
                    </div>}
                  </Modal.Body>
                </Modal>
              </Col>
              <Col lg={6} className="d-flex flex-column justify-content-between">
                <div>
                  <h2 className="d-none d-lg-block fw-semibold">{productName}</h2>
                  <h5 className="mt-5 mb-3 fw-semibold">Описание:</h5>
                  <RichText data={productData.description} />
                </div>
                <div>
                  {(() => {
                    const priceFrom =
                      productData.priceFrom &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceFrom,
                      )
                    const priceTo =
                      productData.priceTo &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceTo,
                      )

                    let price = undefined
                    if (priceFrom && priceTo) {
                      price = priceFrom === priceTo ? priceFrom : `от ${priceFrom} до ${priceTo}`
                    } else {
                      price = (priceFrom && `от ${priceFrom}`) || (priceTo && `до ${priceTo}`)
                    }
                    price = price && `${price} сом`

                    return price ? <h2 className="my-4 fw-semibold">{price}</h2> : undefined
                  })()}
                  <Button
                    href="#footer-anchor"
                    className="fs-5 rounded-0 text-white"
                    style={{ padding: '0.8rem 2rem' }}
                  >
                    Оставить заявку
                  </Button>
                </div>
              </Col>
            </Row>
            {productProperties.length > 0 && (<Row>
              <h5 className="mb-4 fw-semibold">Характеристики:</h5>
              <style>
                {`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}
              </style>
                <Col
                  style={{
                    display: 'grid',
                    rowGap: '1rem',
                    columnGap: '2rem',
                  }}
                  className="product-properties-grid"
                >
                  {productProperties.map(([key, value], index) => [
                    <div
                      key={index}
                      style={{ display: 'grid', columnGap: '1rem', gridTemplateColumns: '1fr 1fr' }}
                    >
                      <span>{key}:</span>
                      <span>{String(value)}</span>
                    </div>,
                  ])}
                </Col>
            </Row>
  		  )}
            <Row
              className="row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white"
              style={{
                clipPath: 'polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)',
                marginTop: '2.5rem',
                marginBottom: '2.5rem',
              }}
            >
              <Col lg={4}>
                <h2 className="lh-1 text-uppercase">
                  Мы берём
                  <br />
                  ответственность
                  <br />
                  на себя
                </h2>
              </Col>
              <Col lg={4} className="d-flex flex-column justify-content-center row-gap-3 ms-auto">
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Договор на руках
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Проверка качества до отправки
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Доставка — до склада или на дом
                </div>
              </Col>
              <Col lg={3} className="d-flex flex-column justify-content-center mx-auto">
                <Link // should it change color on hover?
                  className="my-auto me-auto bg-white text-primary fs-6"
                  href="#footer-anchor"
                  style={{
                    display: 'inline-flex',
                    padding: '0.8rem 2rem',
                    textDecoration: 'none',
                    textWrap: 'nowrap',
                    clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                    transition: '#1D1D1D .2s',
                  }}
                >
                  Получить консультацию
                </Link>
              </Col>
            </Row>
            {/*<Row className="row-gap-3 mt-5">
              <Col
                lg={3}
                className="d-flex flex-lg-column mb-lg-0 text-uppercase"
                style={{ maxWidth: '500px' }}
              >
                <h1 className="lh-1">похожие&nbsp;</h1>
                <h1 className="mb-0 ms-lg-auto lh-1 text-primary">товары</h1>
              </Col>
              <Col lg={1} className="d-none d-lg-block"></Col>
              <Col className="mt-auto" lg={6}>
                <span>
                  Похожие варианты, которые могут заинтересовать вас и помочь сделать идеальный выбор.
                </span>
              </Col>
            </Row>*/}
          </Container>
          {/*<ProductsGrid productData={productSuggestions} className="mb-5" />*/}
        </>
      )
    }
    return <>{template}</>
  } satisfies PageJsx<{ productData: Product; productSuggestions: PaginatedDocs<Product> }>)

version_fetch_data:
[cell repeats an earlier one in this file: 1601 characters]

version_code:
  export default function({runtime:e,components:{ProductsGrid:s,Breadcrumb:l,Template:t,RichText:i},deps:{rb:{Container:r,Image:a,Row:c,Col:n,Button:o,Modal:d,Carousel:m},react:{useState:h},next:{Link:x}},props:{route:p,data:g}}){let u,j,{productData:f,productSuggestions:b}=g;f.template?u=f.template:"number"!=typeof f.category&&f.category?.productTemplate&&(u=f.category.productTemplate);let[y,N]=h(!1),[w,v]=h(0);if(u)j=e.jsx(t,{template:u,route:p,productData:f,productSuggestions:b});else{let s,t,h,g=e=>{v(e),N(!0)},u=f.img||[];u&&"number"!=typeof u[0]||(u=[]);let b=p.params.categorySlug,k="number"==typeof f.category?"":f.category?.name,F=f.name,$=Object.entries(f.meta??{}),C=u.length||0,z=Math.max(0,Math.min(C-1,4)),G=u.slice(1,Math.min(C,4)).map((s,l)=>e.jsx("div",{style:{flex:"1 1 0",minWidth:0,height:"100%",display:"block"},onClick:()=>g(l+1),className:"rounded-1",children:e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,style:{objectFit:"cover",height:"100%",width:"100%",cursor:"pointer",borderRadius:"0.25rem"}})},l));C>4&&G.push(e.jsxs("div",{onClick:()=>g(4),style:{flex:"1 1 0",minWidth:0,height:"100%",position:"relative",display:"flex",justifyContent:"center"},className:"cursor-pointer mb-4",children:[e.jsx(a,{src:u[4].url||"",alt:F,style:{display:"block",objectFit:"cover",width:"100%",height:"100%",borderRadius:"0.25rem"}}),C>5&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)",borderRadius:"0.25rem"}}),e.jsxs("span",{className:"position-absolute top-50 start-50 translate-middle fs-5 text-white",children:["+",C-5]})]})]},4));let I=C>1?e.jsx("div",{className:"d-flex gap-1 gap-lg-3",style:{width:z/4*100+"%",gap:"0.75rem",alignItems:"stretch",boxSizing:"border-box",overflow:"hidden"},children:G}):null;j=e.jsx(e.Fragment,{children:e.jsxs(r,{className:"mb-5",children:[e.jsx(l,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${k}`,link:`/categories/${b}`},{label:`${F}`}]}),e.jsxs(c,{className:"mb-5",children:[e.jsxs(n,{lg:6,className:"d-flex flex-column gap-2 gap-lg-3",children:[e.jsx("h2",{className:"d-block d-lg-none mb-3 fw-semibold",children:F}),e.jsx(a,{src:u[0].sizes?.large?.url||"",alt:F,onClick:()=>g(0),className:"img-fluid rounded-1 shadow",style:{aspectRatio:"4 / 3",objectFit:"cover",height:"auto",width:"100%",cursor:"pointer"}}),I,e.jsx(d,{show:y,onHide:()=>{N(!1)},centered:!0,size:"xl",contentClassName:"bg-transparent border-0",children:e.jsxs(d.Body,{className:"p-0 position-relative",children:[e.jsx(m,{activeIndex:w,onSelect:e=>v(e),interval:null,indicators:!1,nextIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"text-black",style:{fontSize:"100px"}}),prevIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-left",className:"text-black",style:{fontSize:"100px"}}),controls:u.length>1,children:u.map((s,l)=>"number"==typeof s?null:e.jsx(m.Item,{children:e.jsx(a,{src:s.url||"",alt:F,className:"d-block w-100",style:{objectFit:"contain",maxHeight:"calc(100vh - 180px)"}})},l))}),u.length>1&&e.jsx("div",{className:"d-flex justify-content-center mt-3 flex-wrap",style:{gap:"0.5rem"},children:u.map((s,l)=>e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,onClick:()=>v(l),className:`rounded shadow-sm ${l===w?"border border-light border-3":""}`,style:{height:"90px",width:"120px",objectFit:"cover",cursor:"pointer"}},l))})]})})]}),e.jsxs(n,{lg:6,className:"d-flex flex-column justify-content-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"d-none d-lg-block fw-semibold",children:F}),e.jsx("h5",{className:"mt-5 mb-3 fw-semibold",children:"Описание:"}),e.jsx(i,{data:f.description})]}),e.jsxs("div",{children:[(s=f.priceFrom&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceFrom),t=f.priceTo&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceTo),(h=(h=s&&t?s===t?s:`от ${s} до ${t}`:s&&`от ${s}`||t&&`до ${t}`)&&`${h} сом`)?e.jsx("h2",{className:"my-4 fw-semibold",children:h}):void 0),e.jsx(o,{href:"#footer-anchor",className:"fs-5 rounded-0 text-white",style:{padding:"0.8rem 2rem"},children:"Оставить заявку"})]})]})]}),$.length>0&&e.jsxs(c,{children:[e.jsx("h5",{className:"mb-4 fw-semibold",children:"Характеристики:"}),e.jsx("style",{children:`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}),e.jsx(n,{style:{display:"grid",rowGap:"1rem",columnGap:"2rem"},className:"product-properties-grid",children:$.map(([s,l],t)=>[e.jsxs("div",{style:{display:"grid",columnGap:"1rem",gridTemplateColumns:"1fr 1fr"},children:[e.jsxs("span",{children:[s,":"]}),e.jsx("span",{children:String(l)})]},t)])})]}),e.jsxs(c,{className:"row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white",style:{clipPath:"polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)",marginTop:"2.5rem",marginBottom:"2.5rem"},children:[e.jsx(n,{lg:4,children:e.jsxs("h2",{className:"lh-1 text-uppercase",children:["Мы берём",e.jsx("br",{}),"ответственность",e.jsx("br",{}),"на себя"]})}),e.jsxs(n,{lg:4,className:"d-flex flex-column justify-content-center row-gap-3 ms-auto",children:[e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Договор на руках"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Проверка качества до отправки"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Доставка — до склада или на дом"]})]}),e.jsx(n,{lg:3,className:"d-flex flex-column justify-content-center mx-auto",children:e.jsx(x,{className:"my-auto me-auto bg-white text-primary fs-6",href:"#footer-anchor",style:{display:"inline-flex",padding:"0.8rem 2rem",textDecoration:"none",textWrap:"nowrap",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})})]})]})})}return e.jsx(e.Fragment,{children:j})}


version_generate_metadata:
  export default async function ({ data }) {
  return { title: data.productData?.name };
  }

version_title: Страница товара
version_path: /categories/:categorySlug/:productSlug
version_src_type: jsx
version_updated_at: 2025-12-02T05:54:20.218Z
version_created_at: 2025-11-17T09:48:13.973Z
version__status: published
created_at: 2025-12-02T05:54:20.226Z
updated_at: 2025-12-02T05:54:20.226Z
version_jsx:
  import type { Product, ProductImage } from '@/payload-types'
  import type { PaginatedDocs } from 'payload'
  import type { PageJsx } from 'scripts/bootstrap/types'

  export default (function Index({
    runtime,
    components: { ProductsGrid, Breadcrumb, Template, RichText },
    deps: {
      rb: { Container, Image, Row, Col, Button, Modal, Carousel },
      react: { useState },
      next: { Link },
    },
    props: { route, data },
  }) {
    const { productData, productSuggestions } = data!
    let templateData = undefined
    let template = undefined
    if (productData.template) {
      templateData = productData.template
    } else if (typeof productData.category !== 'number' && productData.category?.productTemplate) {
      templateData = productData.category.productTemplate
    }

    const [showPreview, setShowPreview] = useState(false)
    const [activeIndex, setActiveIndex] = useState(0)

    if (templateData) {
      template = <Template template={templateData} {...{ route, productData, productSuggestions }} />
    } else {
      const handleOpenPreview = (index: number) => {
        setActiveIndex(index)
        setShowPreview(true)
      }

      const handleClosePreview = () => {
        setShowPreview(false)
      }
      // @ts-ignore
      let productImages: ProductImage[] = productData.img || []
      if (!productImages || typeof productImages[0] === 'number') {
        productImages = []
      }

      const categorySlug = route.params.categorySlug
      const categoryName = typeof productData.category === 'number' ? '' : productData.category?.name
      const productName = productData.name
      const productProperties = Object.entries(productData.meta ?? {})
      const imagesCount = productImages.length || 0
      const previewSlots = Math.max(0, Math.min(imagesCount - 1, 4))
      const previewWidth = (previewSlots / 4) * 100

      const slicedImages = productImages.slice(1, Math.min(imagesCount, 4))
      const previewImages = slicedImages.map((img, index) => (
        <div
          key={index}
          // each item must be a flex item that can shrink
          style={{
            flex: '1 1 0', // allow shrinking and equal share
            minWidth: 0, // crucial for webkit (prevents overflow)
            height: '100%',
            display: 'block',
          }}
          onClick={() => handleOpenPreview(index + 1)}
          className="rounded-1"
        >
          <Image
            src={img.sizes?.small?.url || ''}
            alt={productName}
            style={{
              objectFit: 'cover',
              height: '100%',
              width: '100%',
              cursor: 'pointer',
              borderRadius: '0.25rem',
            }}
          />
        </div>
      ))

      if (imagesCount > 4) {
        // push the "more" overlay as one of the flex items with same item style
        previewImages.push(
          <div
            key={4}
            onClick={() => handleOpenPreview(4)}
            style={{
              flex: '1 1 0',
              minWidth: 0,
              height: '100%',
              position: 'relative',
              display: 'flex',
              justifyContent: 'center',
            }}
            className="cursor-pointer mb-4"
          >
            <Image
              src={productImages[4].url || ''}
              alt={productName}
              style={{
                display: 'block',
                objectFit: 'cover',
                width: '100%',
                height: '100%',
                borderRadius: '0.25rem',
              }}
            />
            {imagesCount > 5 && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    borderRadius: '0.25rem',
                  }}
                />
                <span className="position-absolute top-50 start-50 translate-middle fs-5 text-white">
                  +{imagesCount - 5}
                </span>
              </>
            )}
          </div>,
        )
      }

      const previewImagesStrip =
        imagesCount > 1 ? (
          <div
            className="d-flex gap-1 gap-lg-3"
            style={{
              width: previewWidth + '%',
              gap: '0.75rem', // use gap (supported widely) instead of justify-content-between
              alignItems: 'stretch',
              boxSizing: 'border-box',
              // optional: prevent rounding errors causing overflow
              overflow: 'hidden',
            }}
          >
            {previewImages}
          </div>
        ) : null

      template = (
        <>
          <Container className="mb-5">
            <Breadcrumb
              pathMap={[
                { label: 'Главная', link: '/' },
                { label: 'Каталог', link: '/categories' },
                { label: `${categoryName}`, link: `/categories/${categorySlug}` },
                { label: `${productName}` },
              ]}
            />

            <Row className="mb-5">
              <Col lg={6} className="d-flex flex-column gap-2 gap-lg-3">
                <h2 className="d-block d-lg-none mb-3 fw-semibold">{productName}</h2>
                <Image
                  src={productImages[0].sizes?.large?.url || ''}
                  alt={productName}
                  onClick={() => handleOpenPreview(0)}
                  className="img-fluid rounded-1 shadow"
                  style={{
                    aspectRatio: '4 / 3',
                    objectFit: 'cover',
                    height: 'auto',
                    width: '100%',
                    cursor: 'pointer',
                  }}
                />
                {previewImagesStrip}
                {/* Modal with carousel */}
                <Modal
                  show={showPreview}
                  onHide={handleClosePreview}
                  centered
                  size="xl"
                  contentClassName="bg-transparent border-0"
                >
                  <Modal.Body className="p-0 position-relative">
                    <Carousel
                      activeIndex={activeIndex}
                      onSelect={(selectedIndex) => setActiveIndex(selectedIndex)}
                      interval={null}
                      indicators={false}
                      nextIcon={
                        <iconify-icon
                          icon="lucide:chevron-right"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      prevIcon={
                        <iconify-icon
                          icon="lucide:chevron-left"
                          className="text-black"
                          style={{ fontSize: '100px' }}
                        />
                      }
                      controls={productImages.length > 1}
                    >
                      {productImages.map((img, index) => {
                        if (typeof img === 'number') {
                          return null
                        }
                        return (
                          <Carousel.Item key={index}>
                            <Image
                              src={img.url || ''}
                              alt={productName}
                              className="d-block w-100"
                              style={{
                                objectFit: 'contain',
                                maxHeight: 'calc(100vh - 180px)',
                              }}
                            />
                          </Carousel.Item>
                        )
                      })}
                    </Carousel>

                    {/* Thumbnail strip */}
                    {productImages.length > 1 && <div
                      className="d-flex justify-content-center mt-3 flex-wrap"
                      style={{ gap: '0.5rem' }}
                    >
                      {productImages.map((img, index) => {
                        return (
                          <Image
                            key={index}
                            src={img.sizes?.small?.url || ''}
                            alt={productName}
                            onClick={() => setActiveIndex(index)}
                            className={`rounded shadow-sm ${index === activeIndex ? 'border border-light border-3' : ''}`}
                            style={{
                              height: '90px',
                              width: '120px',
                              objectFit: 'cover',
                              cursor: 'pointer',
                            }}
                          />
                        )
                      })}
                    </div>}
                  </Modal.Body>
                </Modal>
              </Col>
              <Col lg={6} className="d-flex flex-column justify-content-between">
                <div>
                  <h2 className="d-none d-lg-block fw-semibold">{productName}</h2>
                  <h5 className="mt-5 mb-3 fw-semibold">Описание:</h5>
                  <RichText data={productData.description} />
                </div>
                <div>
                  {(() => {
                    const priceFrom =
                      productData.priceFrom &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceFrom,
                      )
                    const priceTo =
                      productData.priceTo &&
                      new Intl.NumberFormat('ky-KG', { useGrouping: true }).format(
                        productData.priceTo,
                      )

                    let price = undefined
                    if (priceFrom && priceTo) {
                      price = priceFrom === priceTo ? priceFrom : `от ${priceFrom} до ${priceTo}`
                    } else {
                      price = (priceFrom && `от ${priceFrom}`) || (priceTo && `до ${priceTo}`)
                    }
                    price = price && `${price} сом`

                    return price ? <h2 className="my-4 fw-semibold">{price}</h2> : undefined
                  })()}
                  <Button
                    href="#footer-anchor"
                    className="fs-5 rounded-0 text-white"
                    style={{ padding: '0.8rem 2rem' }}
                  >
                    Оставить заявку
                  </Button>
                </div>
              </Col>
            </Row>
            {productProperties.length > 0 && (<Row>
              <h5 className="mb-4 fw-semibold">Характеристики:</h5>
              <style>
                {`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}
              </style>
                <Col
                  style={{
                    display: 'grid',
                    rowGap: '1rem',
                    columnGap: '2rem',
                  }}
                  className="product-properties-grid"
                >
                  {productProperties.map(([key, value], index) => [
                    <div
                      key={index}
                      style={{ display: 'grid', columnGap: '1rem', gridTemplateColumns: '1fr 1fr' }}
                    >
                      <span>{key}:</span>
                      <span>{String(value)}</span>
                    </div>,
                  ])}
                </Col>
            </Row>
  		  ) || (
  			<Row className="my-5" />
  		  )}
            <Row
              className="row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white"
              style={{
                clipPath: 'polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)',
                marginTop: '2.5rem',
                marginBottom: '2.5rem',
              }}
            >
              <Col lg={4}>
                <h2 className="lh-1 text-uppercase">
                  Мы берём
                  <br />
                  ответственность
                  <br />
                  на себя
                </h2>
              </Col>
              <Col lg={4} className="d-flex flex-column justify-content-center row-gap-3 ms-auto">
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Договор на руках
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Проверка качества до отправки
                </div>
                <div className="d-flex align-items-center">
                  <iconify-icon icon="lucide:circle-check" className="me-1 fs-5" />
                  Доставка — до склада или на дом
                </div>
              </Col>
              <Col lg={3} className="d-flex flex-column justify-content-center mx-auto">
                <Link // should it change color on hover?
                  className="my-auto me-auto bg-white text-primary fs-6"
                  href="#footer-anchor"
                  style={{
                    display: 'inline-flex',
                    padding: '0.8rem 2rem',
                    textDecoration: 'none',
                    textWrap: 'nowrap',
                    clipPath: 'polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)',
                    transition: '#1D1D1D .2s',
                  }}
                >
                  Получить консультацию
                </Link>
              </Col>
            </Row>
            {/*<Row className="row-gap-3 mt-5">
              <Col
                lg={3}
                className="d-flex flex-lg-column mb-lg-0 text-uppercase"
                style={{ maxWidth: '500px' }}
              >
                <h1 className="lh-1">похожие&nbsp;</h1>
                <h1 className="mb-0 ms-lg-auto lh-1 text-primary">товары</h1>
              </Col>
              <Col lg={1} className="d-none d-lg-block"></Col>
              <Col className="mt-auto" lg={6}>
                <span>
                  Похожие варианты, которые могут заинтересовать вас и помочь сделать идеальный выбор.
                </span>
              </Col>
            </Row>*/}
          </Container>
          {/*<ProductsGrid productData={productSuggestions} className="mb-5" />*/}
        </>
      )
    }
    return <>{template}</>
  } satisfies PageJsx<{ productData: Product; productSuggestions: PaginatedDocs<Product> }>)

version_fetch_data:
[cell repeats an earlier one in this file: 1601 characters]

version_code:
  export default function({runtime:e,components:{ProductsGrid:s,Breadcrumb:l,Template:t,RichText:i},deps:{rb:{Container:r,Image:a,Row:c,Col:n,Button:o,Modal:d,Carousel:m},react:{useState:h},next:{Link:x}},props:{route:p,data:g}}){let u,j,{productData:f,productSuggestions:b}=g;f.template?u=f.template:"number"!=typeof f.category&&f.category?.productTemplate&&(u=f.category.productTemplate);let[y,N]=h(!1),[w,v]=h(0);if(u)j=e.jsx(t,{template:u,route:p,productData:f,productSuggestions:b});else{let s,t,h,g=e=>{v(e),N(!0)},u=f.img||[];u&&"number"!=typeof u[0]||(u=[]);let b=p.params.categorySlug,k="number"==typeof f.category?"":f.category?.name,F=f.name,$=Object.entries(f.meta??{}),C=u.length||0,z=Math.max(0,Math.min(C-1,4)),G=u.slice(1,Math.min(C,4)).map((s,l)=>e.jsx("div",{style:{flex:"1 1 0",minWidth:0,height:"100%",display:"block"},onClick:()=>g(l+1),className:"rounded-1",children:e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,style:{objectFit:"cover",height:"100%",width:"100%",cursor:"pointer",borderRadius:"0.25rem"}})},l));C>4&&G.push(e.jsxs("div",{onClick:()=>g(4),style:{flex:"1 1 0",minWidth:0,height:"100%",position:"relative",display:"flex",justifyContent:"center"},className:"cursor-pointer mb-4",children:[e.jsx(a,{src:u[4].url||"",alt:F,style:{display:"block",objectFit:"cover",width:"100%",height:"100%",borderRadius:"0.25rem"}}),C>5&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.5)",borderRadius:"0.25rem"}}),e.jsxs("span",{className:"position-absolute top-50 start-50 translate-middle fs-5 text-white",children:["+",C-5]})]})]},4));let I=C>1?e.jsx("div",{className:"d-flex gap-1 gap-lg-3",style:{width:z/4*100+"%",gap:"0.75rem",alignItems:"stretch",boxSizing:"border-box",overflow:"hidden"},children:G}):null;j=e.jsx(e.Fragment,{children:e.jsxs(r,{className:"mb-5",children:[e.jsx(l,{pathMap:[{label:"Главная",link:"/"},{label:"Каталог",link:"/categories"},{label:`${k}`,link:`/categories/${b}`},{label:`${F}`}]}),e.jsxs(c,{className:"mb-5",children:[e.jsxs(n,{lg:6,className:"d-flex flex-column gap-2 gap-lg-3",children:[e.jsx("h2",{className:"d-block d-lg-none mb-3 fw-semibold",children:F}),e.jsx(a,{src:u[0].sizes?.large?.url||"",alt:F,onClick:()=>g(0),className:"img-fluid rounded-1 shadow",style:{aspectRatio:"4 / 3",objectFit:"cover",height:"auto",width:"100%",cursor:"pointer"}}),I,e.jsx(d,{show:y,onHide:()=>{N(!1)},centered:!0,size:"xl",contentClassName:"bg-transparent border-0",children:e.jsxs(d.Body,{className:"p-0 position-relative",children:[e.jsx(m,{activeIndex:w,onSelect:e=>v(e),interval:null,indicators:!1,nextIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-right",className:"text-black",style:{fontSize:"100px"}}),prevIcon:e.jsx("iconify-icon",{icon:"lucide:chevron-left",className:"text-black",style:{fontSize:"100px"}}),controls:u.length>1,children:u.map((s,l)=>"number"==typeof s?null:e.jsx(m.Item,{children:e.jsx(a,{src:s.url||"",alt:F,className:"d-block w-100",style:{objectFit:"contain",maxHeight:"calc(100vh - 180px)"}})},l))}),u.length>1&&e.jsx("div",{className:"d-flex justify-content-center mt-3 flex-wrap",style:{gap:"0.5rem"},children:u.map((s,l)=>e.jsx(a,{src:s.sizes?.small?.url||"",alt:F,onClick:()=>v(l),className:`rounded shadow-sm ${l===w?"border border-light border-3":""}`,style:{height:"90px",width:"120px",objectFit:"cover",cursor:"pointer"}},l))})]})})]}),e.jsxs(n,{lg:6,className:"d-flex flex-column justify-content-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"d-none d-lg-block fw-semibold",children:F}),e.jsx("h5",{className:"mt-5 mb-3 fw-semibold",children:"Описание:"}),e.jsx(i,{data:f.description})]}),e.jsxs("div",{children:[(s=f.priceFrom&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceFrom),t=f.priceTo&&new Intl.NumberFormat("ky-KG",{useGrouping:!0}).format(f.priceTo),(h=(h=s&&t?s===t?s:`от ${s} до ${t}`:s&&`от ${s}`||t&&`до ${t}`)&&`${h} сом`)?e.jsx("h2",{className:"my-4 fw-semibold",children:h}):void 0),e.jsx(o,{href:"#footer-anchor",className:"fs-5 rounded-0 text-white",style:{padding:"0.8rem 2rem"},children:"Оставить заявку"})]})]})]}),$.length>0&&e.jsxs(c,{children:[e.jsx("h5",{className:"mb-4 fw-semibold",children:"Характеристики:"}),e.jsx("style",{children:`
            .product-properties-grid {
              grid-template-columns: 1fr;
            }
              
            /* TODO figure out a way to attach this to var(--bs-breakpoint-lg) */
            @media (min-width: 992px) {
              .product-properties-grid {
                grid-template-columns: 1fr 1fr;
              }
            }
            `}),e.jsx(n,{style:{display:"grid",rowGap:"1rem",columnGap:"2rem"},className:"product-properties-grid",children:$.map(([s,l],t)=>[e.jsxs("div",{style:{display:"grid",columnGap:"1rem",gridTemplateColumns:"1fr 1fr"},children:[e.jsxs("span",{children:[s,":"]}),e.jsx("span",{children:String(l)})]},t)])})]})||e.jsx(c,{className:"my-5"}),e.jsxs(c,{className:"row-gap-4 mt-5 mx-0 mx-sm-4 mx-lg-n5 py-5 px-2 px-sm-5 bg-primary text-white",style:{clipPath:"polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%)",marginTop:"2.5rem",marginBottom:"2.5rem"},children:[e.jsx(n,{lg:4,children:e.jsxs("h2",{className:"lh-1 text-uppercase",children:["Мы берём",e.jsx("br",{}),"ответственность",e.jsx("br",{}),"на себя"]})}),e.jsxs(n,{lg:4,className:"d-flex flex-column justify-content-center row-gap-3 ms-auto",children:[e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Договор на руках"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Проверка качества до отправки"]}),e.jsxs("div",{className:"d-flex align-items-center",children:[e.jsx("iconify-icon",{icon:"lucide:circle-check",className:"me-1 fs-5"}),"Доставка — до склада или на дом"]})]}),e.jsx(n,{lg:3,className:"d-flex flex-column justify-content-center mx-auto",children:e.jsx(x,{className:"my-auto me-auto bg-white text-primary fs-6",href:"#footer-anchor",style:{display:"inline-flex",padding:"0.8rem 2rem",textDecoration:"none",textWrap:"nowrap",clipPath:"polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)",transition:"#1D1D1D .2s"},children:"Получить консультацию"})})]})]})})}return e.jsx(e.Fragment,{children:j})}


