---

Отлично. Перейдем к следующему компоненту.
Он посложнее
import React from "react";

export default function IndividualDesignAndLandscape() {
  return (
    <div>
      {/* Content will be added later */}
    </div>
  );
}

Смотри. Сначала идет текст - "ИНДИВИДУАЛЬНОЕ ПРОЕКТИРОВАНИЕ И ЛАНДШАФТ" - но не в апперкейсе без капса - заглавная буква первая (36пикс семиболд #22212A). Далее отступ 40 пикселей. 
После отступа располагается строка с выбором раздела - это будут кликабельные кнопки, которые будут менять содержимое нижней части компонента. Итак - всего 4 элемента - "Архитектурный раздел", "Конструктивный раздел", "Дизайн и инженерные сети", "Ландшафтный дизайн". Также есть подзаголовки - "от 400 ₽/м²", "от 350 ₽/м²", "от 1000 ₽/м²", "от 500 ₽/м²". Кнопка имеет следующие свойства - марджин 10пикс, без бордера, без фона, закругление 20 пикселей, паддинг 35пикс по вертикали и 5 по горизонтали, заголовок 20px медиум #22212A, подзаголовок находится ниже на 12пикселей со свойствами 20пикс фонт-300 #22212A. текста отцентрированы посередине. Если кнопка выбрана - у нее появляется фон #65406F. Отступ между кнопками организован следующим образом - между кнопками находится бордер на всю высоту этого контейнера 1пикс #22212A66 (только один вертикальный бордер в виде линии получается).
Далее отступ вниз 60 пикселей и располагается уже информация выбранного блока. Я тебе напишу верстку для первого блока (Архитектурный раздел) - для остальных придумай просто что-нибудь на свой взгляд, потому что это еще не готово.

Итак, сделай сразу шаблон имитации базы данных. Будет константа - каждый элемент имеет: фон, заголовок, цену, срок проектирования, ссылку на скачивание примера проекта (выведи ссылку на какое-нибудь изображение из /public/img/arc просто для примера. текст с подсказкой, строки "Базовый комплект" и "Расширенный комплект". В расширенном комплекте под каждым элементом также выводится отдельная ссылка на скачивание определенного файла.

Приведу пример для первой кнопки:
Изображение фона - соотношение 630x382, 20 пикс закругление, изображение прижато к левому краю. К правому краю прижата информация - высота регулируемая, ширина 330пикс. Между блоком изображения и информации минимальный гэп 10пикселей - далее идет перенос из строки в столбик. Информация имеет марджин 26пикселей сверху и снизу, все элементы информационного блока прижаты к левому краю. Сначала идет заголовок - "Архитектурный раздел - АР " 28пикс регуляр черный. Затем отступ вниз 20пикс и идет стоимость от 400 ₽/м² (тоесть это будет переменная, в которую впишется цифра 400) - #65406F 24пикс медиум. Затем идет отступ вниз 28 пикселей и располагается срок проектирования: сначала свг (<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="35" height="35" rx="13" fill="#65406F"/>
<path d="M20.74 7.5H14.26C10.5 7.5 10.21 10.88 12.24 12.72L22.76 22.28C24.79 24.12 24.5 27.5 20.74 27.5H14.26C10.5 27.5 10.21 24.12 12.24 22.28L22.76 12.72C24.79 10.88 24.5 7.5 20.74 7.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
) затем гэп 16пикс и текст "Срок проектирования 1.5 месяца", тоесть 1,5 месяца это значение которое будет введено в переменную, у этого текста параметры 16px черный регуляр, но переменная выделяется как семиболд. Затем вниз отступ 20пикселей и располагается кнопка скачивания примера проекта, к ней ты тоже обязан вывести переменную чтоб по нажатию на кнопки скачивался файл из ссылки указанной тобой в шаблоне. Свойства кнопки - Слева свг (<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 10H18C15 10 14 9 14 6V2L22 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 13H13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 17H11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
), потом гэп 16пикс и текст "скачать пример проекта" 16пикс регуляр #FFFFFF. кнопка имеет паддинг сверху 10пикс и сбоку 16пикс, а также закругление 20пикс и фон #411A47. Затем отступ 40 пикселей и идет текст с подсказкой. текст "*При заказе строительства Вы получаете скидку, равную стоимости архитектурного проекта" - 16пикс регуляр #411A47, ширина на всю ширину текстового блока, паддинг сверху 16пикс, фон #65406F1A, закругление 20пикс, бордер #65406F 2пикс лефт-сайд. 
На этом блок изображение+информация заканчивается, идет отступ вниз 60 пикселей и располагается два блока в строку (а когда места не хватает то в столбик) - "Базовый комплект" и "Расширенный комплект".
Тут все просто - Оба блока имеют паддинг 30пикс, закругление 20пикс, дроп шэдоу #00000026. Между ними идет гэп 20 пикселей, они занимают всю доступную ширину, пока в один момент, но когда ширина одного из двух блоков становится меньше 500 пикселей - они переходят в столбик и занимают также всю доступную ширину.
Тут тоже все элементы прижаты к левому краю. сначала идет заголовок "Базовый комплект" и "Расширенный комплект" соответственно - 26пикс регуляр #000000, Затем отступ вниз 28 пикселей и располагается список комплекта. 
Строка списка имеет следующий дизайн - слева прижатая кверху строки <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="34" height="34" rx="17" fill="#F0B9FF"/>
<path d="M25 11.843L19.6093 18.3118C17.4732 20.8752 16.4051 22.1569 15 22.1569C13.5949 22.1569 12.5268 20.8752 10.3907 18.3118L9 16.643" stroke="#411A47" stroke-width="2" stroke-linecap="round"/>
</svg>, затем отступ 10пикс вправо и текст "18пикс регуляр #000000" Между строками гэп 16пикселей, а у "Расширенный комплект" немного по другому - у каждой строки после текста снизу отступ 16пикселей и располагается кнопка, а от кнопки уже 16пикс гэп и следующая строка. Однако не всегда после строки расширенного комплекта будет идти файл - добавь еще переменную типа "Есть ли файл" - если есть, то он будет выведен, если нет - то не будет и будет просто строка как и у базового комплекта. Если строка с кнопкой - от кнопки отступ 28пикселей вниз к строке, если кнопки нет, то от строки просто отступ 16пикс к строке. Свойства кнопки - <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14" stroke="#411A47" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 10H18C15 10 14 9 14 6V2L22 10Z" stroke="#411A47" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 13H13" stroke="#411A47" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 17H11" stroke="#411A47" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>, затем гэп 16пикс и текст "скачать пример проекта" - #411A47 16пикс регуляр. Также у кнопки 16пикс паддинг, отсутствие фона, закругление 20пикс, бордер 1пикс #411A47. 

Вот текста для базового комплекта первой страницы:
Пояснительная записка с основными технико-экономическими показателями (ТЭП)
Поэтажные кладочные планы с указанием всех кладочных размеров и осевых привязок
Поэтажные функциональные планы с расстановкой мебели для понимания зонирования и габаритов помещений
План перекрытия для домов 2-х и более этажей
План кровли с указанием размеров скатов и уклонов
Фасады с указанием высотных отметок всех основных элементов
Спецификация материалов и элементов наружной отделки
Разрезы по основным архитектурным объемам для понимания высоты помещений, дверных и оконных проемов
Вентканалы в кладочных кирпичных размерах
Оконные проемы подсчет типологии окон, основные размеры и дизайн
Цветовое решение фасадов, трехмерные 3D изображения с 4-х сторон

Вот для расширенного комплекта:
Расчет и конструирование фундамента на основании геологии участка. Стоимость расчета формируется индивидуально после изучения проекта и геологии участка инженером конструктором
Расчет и конструирование фундамента на основании геологии участка. Стоимость расчета формируется индивидуально после изучения проекта и геологии участка инженером конструктором

Это я тебе описал подробную информацию по цсс свойствам - применяй их беспрекословно, а также сразу продумывай адаптивную верстку, наполнение для шаблонов - вставь для первой страницы, для 2,3,4 просто на свое усмотрение что-нибудь напиши, это мы еще не оформили.

Также прикладываю скриншот того, как это выглядит -