Лонг  (от англ. long «длинная» позиция) — это направление торговли с ожиданием дальнейшего роста цены актива. Трейдер открывает позицию, покупая актив по текущей цене, с целью продать его позже дороже и зафиксировать прибыль на разнице.

Начало С чего начать Подключение биржи

Лонг  (от англ. long «длинная» позиция) — это направление торговли с ожиданием дальнейшего роста цены актива. Трейдер открывает позицию, покупая актив по текущей цене, с целью продать его позже дороже и зафиксировать прибыль на разнице.

Начало С чего начать Подключение биржи

Лонг  (от англ. long «длинная» позиция) — это направление торговли с ожиданием дальнейшего роста цены актива. Трейдер открывает позицию, покупая актив по текущей цене, с целью продать его позже дороже и зафиксировать прибыль на разнице.

Начало С чего начать Подключение биржи

Все результаты (140)

Базовые

Icon.astro

Просто добавь иконку в src/shared/assets/icons 
import Icon from '@shared/ui/icon/Icon.astro'
about-bg
about-facebook
about-instagram
about-vk
about-x
about-youtube
arrow-down-grad
arrow-down-small
arrow-down
arrow-left-grad
arrow-left
arrow-right-grad
arrow-right
arrow-small-left
arrow-small-right
arrow-unusual
arrow-up-grad
arrow-up-right
arrow-up
arrow-white
bg-banner-diff
bg-mobile
bg-tablet
bg
burger
chart
checkbox-check
chevron
close
cross
crosshair
download
dzen
expand
faq-banner-bg-mob
faq-banner-bg
file
icon-chevron
icon-color-success
icon-shevron
icon-success
like
logo-text
mail
play-small
play
rating-star-empty
rating-star-full
rating-star-half
reset
rutube
search
tg
tick
tooltip
trash
union
youtube

Title.astro

Набор заголовков и текстовых стилей. 
import Title from '@shared/ui/title/Title.astro'; import Text from '@shared/ui/text/Text.astro'

Title

variant="80"

Title

variant="64"

Title

variant="40"

Title

variant="24"

Title

variant="20"

Text

variant="16"

Text

variant="14"


<Title variant="240">Title</Title>
<Text variant="17">Text</Text>

Инпуты

Input.astro

Ввод текста. 
import Input from '@shared/ui/input/Input.astro'

<Input placeholder={'Input'} />
<Input
  placeholder={'Input'}
  class="mt-4"
  custom-placeholder={false}
/>

InputMask.astro

Маска ввода текста. 

<input
  type="tel"
  data-mask-phone
  placeholder="+7 (___) ___-__-__"
  class="mt-2 w-full border px-3 py-2"
/>

<input
  id="reinit-input"
  type="tel"
  data-mask-phone
  value="89123456789"
  class="mt-2 w-full border px-3 py-2"
/>

Textarea.astro

import Textarea from '@shared/ui/textarea/Textarea.astro'
Textarea 
<Textarea
  class="focus:outline-none"
  custom-placeholder={false}
  placeholder={'Textarea'}
/>
<Textarea
  class="mt-6 focus:outline-none"
  placeholder={'Textarea'}
/>

Checkbox.astro

Чекбокс. 
import Checkbox from '@shared/ui/checkbox/Checkbox.astro'

<Checkbox label="Checkbox" />
<Checkbox
  name={'checkbox'}
  checked={true}
>
  Checkbox с вложенной <a href="#" class="text-blue hover:text-red">ссылкой</a>
</Checkbox>
<Checkbox label="Checkbox disabled" disabled />

Radio.astro

Радио-кнопка. 
import Radio from '@shared/ui/radio/Radio.astro'

<Radio label="label" name="name" value="value1" />
<Radio label="label" name="name" value="value2" />
<Radio label="label" name="name" value="value2" />

Select.astro

Выпадающий список. 
import Select from '@shared/ui/select/select.astro'

<Select name="tomSelect1" id="tomSelect1" className="js-tomselect w-full">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>
<Select name="tomSelect2" id="tomSelect2" className="js-tomselect w-full" multiple>
  <option value="a">Multi A</option>
  <option value="b">Multi B</option>
  <option value="c">Multi C</option>
</Select>

Range.astro

Диапазонный слайдер на базе noUiSlider с одним или двумя ползунками. 
import Range from '@shared/ui/range/Range.astro'
100
10000
100
10000

<Range
  id="range1"
  maxLength={10}
  oneSided={false}
  data-step={100}
  min={100}
  max={10000}
  startMin={2500}
  startMax={7500}
/>
<Range
  id="range2"
  maxLength={10}
  oneSided={true}
  data-step={100}
  min={100}
  max={10000}
  startMin={2500}
/>

InputNumber.astro

Инпут для ввода чисел. 
import InputNumber from './_components/input-number/InputNumber.astro'

<InputNumber isPositive={true} valueMax={10} />
  <InputNumber
    isPositive={true}
    valueMax={10}
    border={false}
  />
<InputNumber id="idtest">
  <button
    slot="input-number-start"
    type="button"
    data-input-number-button-decrement
    class:list={['flex h-full w-full items-center justify-center']}
  >
    минус
  </button>
</InputNumber>
<InputNumber id="idtest" isEnd={false}>
  <div slot="input-number-start">
    <button
      type="button"
      data-input-number-button-decrement
      class:list={['flex h-full w-full items-center justify-center']}
    >
      минус
    </button>
    <button
      type="button"
      data-input-number-button-increment
      class:list={['flex h-full w-full items-center justify-center']}
    >
      плюс
    </button>
  </div>
</InputNumber>
<button
  type="button"
  class:list={['bg-slate-200 p-2']}
  data-input-number-button-increment-id="idtest"
>
  Эта кнопка увеличивает число во втором инпуте
</button>

Switch.astro

Переключатель. 
import Switch from '@shared/ui/switch/Switch.astro'

<Switch label="Switch | default" />
<Switch label="Switch | checked" checked />
<Switch label="Switch | disabled" disabled />
<Switch label="Switch | checked disabled" checked disabled />
<Switch>Switch | без label</Switch>

InputSearch.astro

Поле поиска. 
import InputSearch from '@widgets/input-search/InputSearch.astro'

<InputSearch placeholder="Поиск" />

InputUpload.astro

Загрузка файла. 
import InputUpload from '@shared/ui/input-upload/InputUpload.astro'
    
<InputUpload />

    Datepicker.astro

    Календарь. 
    import Datepicker from '@widgets/datepicker/Datepicker.astro'

    Выбранная дата: 

    
<Text> Выбранная дата: <span data-datepicker-date></span> </Text>
<Datepicker />

    DateInput.astro

    Ввод даты. 
    
<DateInput placeholder="ДД.ММ.ГГГГ" />
<DateInput placeholder="Выберите дату" id="custom-date" />

    Навигация

    Tabs.astro

    Компонент вкладок. 
    import Tabs from '@shared/ui/tabs/Tabs.astro'
    
<Tabs id="ui-tabs-01">
<TabsList slot="tabs-list">
<Tab id="ui-tab-01" isActive>Таб 1</Tab>
<Tab id="ui-tab-02">Таб 2</Tab>
</TabsList>
<TabPanel id="ui-tab-01-panel" isActive>Контент 1</TabPanel>
<TabPanel id="ui-tab-02-panel">Контент 2</TabPanel>
</Tabs>

    Accordion.astro

    Свертываемые блоки контента. 
    import Accordion from '@shared/ui/accordion/Accordion.astro'

    MoonBot — это торговый терминал, который связывается с биржами Binance, РHTX, Bybit и Gate по API и позволяет торговать быстрее, чем это делают остальные трейдеры, которые используют веб-интерфейсы этих бирж.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi eveniet culpa neque facere accusamus eius? Excepturi assumenda ullam pariatur recusandae quae nulla sunt repellat, numquam vero, vel quam, eveniet порро!

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eius vitae iste unde quo dolorem commodi facere ab? Aut consequatur magni dolorum dolor unde alias voluptatem et eveniet temporibus ipsam! 

    
<AccordionContainer id="accordion-container-01">
<Accordion title="Аккордеон 1" id="ac01">...</Accordion>
</AccordionContainer>

    accordion-sidebar.astro

    content

    CatalogMenu.astro

    Меню каталога с вложенностью. 
    import CatalogMenu from './_components/catalog-menu/CatalogMenu.astro'

    Главное меню

    Фильтры

    Фильтры 2

    Фильтры 3

    Фильтры 4

    <CatalogMenu />

    Button.astro







    <Button
  color="grad"
  iconEnd="arrow-right"
  >Скачать бесплатно</Button
>
<Button
  color="gray"
  iconEnd="play-small"
  >Смотреть видео о терминале</Button
>
<Button
  iconEnd="arrow-right"
  variant="big"
  color="dark"
  >Целевое действие</Button
>
<Button
  iconEnd="arrow-right-grad"
  variant="big"
  color='light'
  >Целевое действие белая</Button
>
<Button variant="middle">Скачать бесплатно</Button>
<Button
  iconEnd="arrow-right-grad"
  variant="text"
  >Смотреть отзыв в Telegram</Button
>

    ButtonSquare.astro

    <ButtonSquare iconName="search" />

    ButtonIcon.astro



    <ButtonIcon
  iconSize="16"
  color="gray"
  ><Icon name="arrow-right" /></ButtonIcon
>
<ButtonIcon
  color='light'
  iconSize="16"
  ><Icon name="arrow-right" /></ButtonIcon
>
<ButtonIcon
  iconSize="24"
  color="grad"
  ><Icon name="search" /></ButtonIcon
>
<ButtonIcon
  color="gray"
  size="big"
  ><Icon name="play" /></ButtonIcon
>

    ButtonTab.astro

    import ButtonTab from '@shared/ui/button-tab/ButtonTab.astro'
    Text Text
    Text 
    <ButtonTab class:list={['active']}>Text</ButtonTab>
<ButtonTab>Text</ButtonTab>
<ButtonTab
  as="a"
  href="#"
  >Text</ButtonTab
>
<ButtonTab
  as="span"
  >Text</ButtonTab
>
<ButtonTab
  as="div"
  >Text</ButtonTab
>

    ButtonSection.astro

    button section

    Отображение

    List.astro

    Списки с разными маркерами. 
    import List from '@shared/ui/list/List.astro'

    • Bullet list

    • Bullet list

    • Bullet list

    • Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cum minima maxime!


    OL нет на макете 
    
        <List
          items={['Bullet list', 'Bullet list', 'Bullet list', 'Long item...']}
        />
        <List as="ol" variant="numeric" items={['One', 'Two', 'Three']} />
        <List
          as="ol"
          variant="duo-numeric"
          items={[
            { title: 'Title', subitems: ['Subitem 1', 'Subitem 2'] }
          ]}
        />

    Table.astro

    Гибкая таблица, которая легко подстраивается под различные проекты, стрессоустойчива к правкам и изменениям, легко используемая и быстроверстающаяся. 
    import UiTable from './_components/ui-table/UiTable.astro'
    Накопительный счет «Первый»
    Валюта счета RUB
    Условия начисления процентов на Минимальный* остаток по Счету
    Сумма от 0,01 руб. до 1 млн Р, вкл. на сумму превышения 1 млн Р
    Процентная ставка: для Новых клиентов** базовая % ставка 10%
    с 1-го по 2-й Период**, включительно 17% 10%
    с 3-го Периода** 10% 
    table: {
  thead: [
    [
      {
        content: {
          text: 'Накопительный счет'
        },
        classList: ['table-example__th']
      },
      {
        content: {
          text: '«Первый»'
        },
        colspan: 3,
        classList: ['table-example__th']
      }
    ]
  ],
  tbody: [
    [
      {
        content: {
          text: 'Валюта счета'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'RUB'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Условия начисления процентов'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'на Минимальный* остаток по Счету'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Сумма'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'от 0,01 руб. до 1 млн Р, вкл.'
        },
        colspan: 2,
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'на сумму превышения 1 млн Р'
        },
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Процентная ставка:'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'для Новых клиентов**'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'базовая % ставка'
        },
        colspan: 1,
        classList: ['table-example__td']
      },
      {
        content: {
          text: '10%'
        },
        classList: ['table-example__td'],
        rowspan: 2
      }
    ],
    [
      {
        content: {
          text: 'с 1-го по 2-й Период**, включительно'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: '17%'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: '10%'
        },
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'с 3-го Периода**'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: '10%'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Возможность открытия'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'в любом удобном отделении банка'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Минимальная сумма счета'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'не ограничена'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Максимальная сумма счета'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'не ограничена'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Срок открытия счета'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'бессрочный'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Пополнение'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'да'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Неснижаемый остаток'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'нет'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Капитализация'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'да'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Способ выплаты процентов'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'ежемесячно, исходя из процентной ставки по счету и суммы Минимального* остатка по счету в течение Периода**'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ],
    [
      {
        content: {
          text: 'Расходные операции по счету'
        },
        classList: ['table-example__td']
      },
      {
        content: {
          text: 'без ограничений'
        },
        colspan: 3,
        classList: ['table-example__td']
      }
    ]
  ]
}

    DescriptionList.astro

    Таблица характеристик. 
    import Specifications from '@shared/ui/specifications/Specifications.astro'
    Мощность
    2 кВт
    Ширина
    200 мм
    Мощность
    2 кВт
    Мощность
    2 кВт
    Мощность
    2 кВт
    Мощность
    2 кВт
    <Specifications list={[{ title: 'Мощность', value: '2 кВт' }]} />

    Badge.astro

    Метки статусов. 
    import Badge from '@shared/ui/badge/Badge.astro'
    Новая Новая В работе Завершена В работе Отложена 
    
        <Badge text="Новая" />
        <Badge text="В работе" selectable />

    Rating.astro

    Звёздный рейтинг. 
    import Rating from '@shared/ui/rating/Rating.astro'
    <Rating /><Rating variant="static" />

    GalleryItem.astro

    Клик по изображению открывает галерею. 
    import GalleryItem from '@shared/ui/gallery-item/GalleryItem.astro'; import Picture from '@shared/ui/picture/Picture.astro'
    
        <GalleryItem src="./images/image.jpg" id="gl-01">
          <Picture src={Image} />
        </GalleryItem>

    Author.astro

    Блок автора. 
    import Author from '@shared/ui/author/Author.astro'

    Сделано в 

    <Author />

    EditableContent.astro

    Редактируемая область контента. 
    import EditableContent from '@shared/ui/editable-content/EditableContent.astro'

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.


      1. item
      2. item
      3. item
      4. item
      5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.
      6. item
      7. item
      8. item
      9. item
      10. item
      11. item
      12. item
      13. item
      14. item
      15. item
      16. item

      1. item
      2. item
      3. item

    1. item
    2. item
    3. item
    4. item
    5. item

    • Uno
    • Duo
    • Tres

    1. Uno
    2. Duo
    3. Tres

    Заголовок h1

    Заголовок h2

    Заголовок h3


    Ссылка

    Vestibulum ante ссылка в тексте ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Sed euismod, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. 

    <EditableContent>...content...</EditableContent>

    Divider.astro

    Text

    Text 

    <div class="rounded bg-white p-4 shadow">
<Text
variant="17"
weight="700"
>Text</Text
>
<Divider variant="24" />
<Text
variant="17"
weight="700"
>Text</Text
>
</div>

    ShowMore.astro

    Показать больше 
    import ShowMore from '@widgets/show-more/ShowMore.astro'

    Состав

    Финик, молочный шоколад, фисташковый марципан, фисташка, какао продукты, подсластитель изомальт, растительные масла (в натуральном и модифицированном виде), вишня вяленая, ром, инулин, молочные продукты, сладкий белок (браззеин), эмульгатор лецитин соевый, эмульгатор Е476, антиокислитель концентрат смеси токоферолов, ароматизатор натуральный ваниль

    Название ТУ

    Здесь будет полное название изделия 

    <ShowMore/>

    CardForWho.astro

    Эксперт

    ручной торговли

    • Торгуйте мгновенно — ставьте ордера кликом прямо на графике

    • Перемещайте ордера, TP и SL в торговом окне

    • Используйте скринер и детекты для поиска необычной активности

    • Используйте специальные стратегии для ручной торговли

    Документация 

    <CardForWho
        title="<span>Эксперт</span> <br class='desktop'> <br class='tablet'> ручной торговли"
        list={[
          'Торгуйте мгновенно — ставьте ордера кликом прямо на графике',
          'Перемещайте ордера, TP и SL в торговом окне',
          'Используйте скринер и детекты для поиска необычной активности',
          'Используйте специальные стратегии для ручной торговли'
        ]}
        btnText="Документация"
      />

    CardEvent.astro

    Успешная

    Успешная длинный длинный текст карточки

    rexr

    rexr 

    <CardEvent
        title="<span>Эксперт</span> <br class='desktop'> <br class='tablet'> ручной торговли"
        list={[
          'Торгуйте мгновенно — ставьте ордера кликом прямо на графике',
          'Перемещайте ордера, TP и SL в торговом окне',
          'Используйте скринер и детекты для поиска необычной активности',
          'Используйте специальные стратегии для ручной торговли'
        ]}
        btnText="Документация"
      />

    Обратная связь

    FormNews.astro

    Форма подписки на новости 
    import FormNews from '@widgets/form-news/FormNews.astro

    Подпишитесь на новости 

    <FormNews />

    Toast.astro

    Временные уведомления. 
    import Toast from '@shared/ui/toast/toast.astro'
    
        <Toast id="toast-success" data-toast-close>...</Toast>
        <button id="btn-show-success">Показать</button>

    Modals.astro

    Примеры модальных окон. 
    import UiModals from './_components/ui-modals/UiModals.astro'

    <Modal />

    <UiModals />

    ModalSuccess.astro

    Модалка успеха. id подставляет префикс `modal-success` 
    import ModalSuccess from '@shared/ui/(modals)/modal-success/ModalSuccess.astro'
    <button data-modal-trigger="modal-success-1">Запустить</button>
<ModalSuccess id="1" />

    Tooltip.astro

    Подсказка при наведении. 
    import Tooltip from '@shared/ui/tooltip/Tooltip.astro'
    Наведи на меня 
    
        <Tooltip content="Подсказка" placement="top">Наведи</Tooltip>

    ProgressBar.astro

    Индикатор прогресса. 
    import UiProgressBar from './_components/ui-progress-bar/UiProgressBar.astro'

    <ProgressBar />

    import ProgressBar from '@shared/ui/progress-bar/ProgressBar.astro' 
    <UiProgressBar />

    Skeleton.astro

    Заглушка загрузки. 
    import Skeleton from '@shared/ui/skeleton/Skeleton.astro'
    <Skeleton />

    EmptyState.astro

    Пустое состояние. 
    import EmptyState from '@shared/ui/empty-state/EmptyState.astro'

    props title и subtitle

    Заголовок

    Подзаголовок

    slot

    Содержимое slot 

    
        <EmptyState title="Заголовок" subtitle="Подзаголовок" />
        <EmptyState><Text variant="14">Содержимое slot</Text></EmptyState>

    Медиа

    Marquee.astro

    Бегущая строка на GSAP. 
    import Marquee from '@shared/ui/gsap/marquee/Marquee.astro'
    
<Marquee>
  {
    list.map(item => (
      <div class="main-forwhom__item">
        <Picture
          src={item.src}
          alt={item.alt}
          quality={100}
        />
      </div>
    ))
  }
</Marquee>

    Swiper.astro

    Пример слайдера Swiper. 
    HTML markup
    
        <div
          class="swiper h-80 w-full rounded-xl"
          id="exampleSwiper-01"
          data-swiper="exampleSwiper-01"
        >
          <div class="swiper-wrapper">
            <div class="swiper-slide">Слайд 1</div>
            <div class="swiper-slide">Слайд 2</div>
            <div class="swiper-slide">Слайд 3</div>
          </div>
          <div data-swiper-pagination="exampleSwiper-01"></div>
          <div data-swiper-button-prev="exampleSwiper-01"></div>
          <div data-swiper-button-next="exampleSwiper-01"></div>
        </div>

    SliderCards.astro

    import SliderCards from '@widgets/sliders/slider-cards/SliderCards.astro

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd).

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd).

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd).

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd).

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd).

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd).

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd).

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd). 

    <div class:list={['bg-[#002A38]']}>
  <SliderCards id="ui-1" />
</div>
<div class:list={['bg-[#F5F7F8]']}>
  <SliderCards
    id="ui-2"
    isThemeLight
  >
    <div class="swiper-slide">
      <CardVideo isThemeLight />
    </div>
    <div class="swiper-slide"><CardVideo imageName='slider-cards-1' isThemeLight /></div>
    <div class="swiper-slide"><CardVideo imageName='slider-cards-2' isThemeLight /></div>
    <div class="swiper-slide"><CardVideo imageName='slider-cards-3' isThemeLight /></div>
  </SliderCards>
</div>

    CardVideo.astro

    import CardVideo from '@shared/ui/card-video/CardVideo.astro'

    История создания терминала для скальпинга MoonBot. Интервью с основателем проекта.

    Большое интервью с одним из основателей терминала для скальпинга криптовалют MoonBot — Андреем MoonBot (@crptdnd). 

    
<CardVideo />

    CardReview.astro

    import CardReview from '@shared/ui/card-review/CardReview.astro'

    Так совпало что сегодня день рождение у меня и благодаря мунботу и мунтрейдеру я могу сделать себе такой подарок

    Alexandr Скальпер с 10-летним стажем 
    
<CardReview />

    Компоненты

    Для заполнения.astro

    Для заполнения 
    import UiProgressBar from './_components/ui-progress-bar/UiProgressBar.astro'
    Для заполнения кода 
    <UiProgressBar />