Neyury

Есть два варианта. Задать рамку изначально, но цветом фона, либо использовать тень: box-shadow

Пример:
box-shadow: 0 0 0 2px black;

Данное свойство будет имитировать рамку.

Если вы про общении между компонентами, которые не являются дочерним или родительским друг другу, то общение можно организовать через шину событий таким образом:

Перед созданием корневого компонента пишите это.

Vue.prototype.$bus = new Vue();

Если компоненты имеют общего родителя, то имеет смысл описывать логику в нем.
В любом месте можете посылать события таким образом:
this.$bus.$emit('eventname');
Каждый кто подпишется через this.$bus.$on сможет получать уведомления

Упростить код можно как-то так

goods = ['Товар1', 'Товар2', 'Товар3', 'Товар4', 'Товар5', 'Товар6', 'Товар7', 'Товар8', 'Товар9', 'Товар10', 'Товар11', 'Товар12']

@bot.message_handler(func=lambda mess: "Продукция1" == mess.text, content_types=['text'])
def handle_text(message):
    keyboard = types.ReplyKeyboardMarkup(row_width=2, resize_keyboard=True, one_time_keyboard=False)

    for goods_item in goods:
        keyboard.row(goods_item)

    bot.send_message(message.from_user.id, "Выберите товар", reply_markup=keyboard)

@bot.message_handler(func=lambda mess: mess.text in goods, content_types=['text'])
def handle_text(message):
    keyboard = types.ReplyKeyboardMarkup(row_width=2, resize_keyboard=True, one_time_keyboard=False)

    if message.text in goods:
        bot.send_message(message.chat.id, "", reply_markup=keyboard )

Массив goods соответственно можете определять динамически как вам удобно, формировать другие списки и т.д.

Вариантов хранения огромное множество, какой выбрать зависит от способа размещения бота и способа получения первоначальных данных. Это может бытьфайл txt, csv, json, xml, или python объекты, сохраненные через модули shelve или pickle, или sqlite база данных, или полноценная база данных.

UPD:
Функции называются одинаково, надо дать им разные названия

Использовать ORM и модели django в любом месте можно таким образом:

import os
import django

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings") # путь к файлу настроек
django.setup()

Если не получается импортировать project.settings, то можно дополнительно написать вначале

import sys

sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))) # В последнем параметре указываем путь, откуда можно сделать импорт.

<header>
    <div class="wrapper">
        контент
    </div> 
</header>
<div class="green">
    <div class="wrapper">
        контент
    </div> 
</div> 
<div>
    <div class="wrapper">
        контент
    </div> 
</div>

.wrapper{
    width: 1200px;
    margin: 0 auto;
}

Вы в func не передали параметры, которые передаются в функцию обертку.

def decor(func):
    def inner(*args, **kwargs):
        print('start')
        func(*args, **kwargs)
        print('end')
    return inner

Проблема с блоком line
LayerText -> container -> line

Я использую icons8.com

Как вариант - читать Лутца "программируем на python", там как раз все аспекты языка будут рассмотрены на практике, и работа с сетью, и графические приложения, и многое другое

Уточните используемый язык, так как web это не только PHP, но и python, ruby, js, java и другие.

Если нужен только html код, то в нем особо ничего сложного нет. К примеру карточка товара может выглядеть так.

<div class="preview">
  <div class="preview__image">
    <a href="#">
      <img src="" alt="">
    </a>
  </div>
  <div class="preview__title">
    <a href="#">item name</a>
  </div>
  <ul class="preview__price">
    <li class="preview__price-new">
      1700
    </li>
    <li class="preview__price-old">
      2300
    </li>
  </ul>
  <a href="#" class="preview__bay">Купить</a>
</div>

А сама страница товара

<div class="product">
  <div class="product__image"> // слайдер с картинками, или изображение или еще что
    <img src="" alt="">
  </div>
  <div class="product__info">
    <div class="product__title">
      Name item
    </div>
    <div class="product__description">
       velit esse cillum dolore eu fugiat nulla pariatur. 
    </div>
    <div class="product__property">
      <h3>Состав</h3>
      <p>Хлопок 20%, Полиэстр 80%</p>
    </div>
    <div class="product__property">
      <h3>Количество в упаковке</h3>
      <p>30</p>
    </div>
    <div class="product__menu">
      <input type="text" name="" value="">
      <button type="button" name="купить"></button>
    </div>
  </div>
</div>

разумеется помимо этого еще шапка, футер и другие необходимые блоки.

На сервере все это реализуется просто. Из базы берется список товаров, и при запросе пользователя ему отдается сгенерированная страница (как именно зависит от используемого языка и framework'a). Т.е с помощью цикла по списку товаров, на каждую итерацию генерируется код превью, и в нужные места вставляются данные товара в конкретной итерации.

В свойствах prevArrow, nextArrow можно указать свой html код для стрелок (а также DOM objects или Jquery селектор). Подробнее можно посмотреть на странице слайдера с описанием всех свойств и их примерами.

h1 блочный элемент, поэтому он занимает всю строчку. Пропишите ему display: inline-block;, чтобы он начал вести себя как блочно-строчный элемент. При необходимости нужно так же указать vertical-align: top;