banners

package.json

@@ -22,12 +22,14 @@
     "npm": "^10.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "react-image-gallery": "^1.3.0"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-image-gallery": "^1.2.4",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",
     "typescript": "^5"

public/sitemap-0.xml

@@ -1,12 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://menzorg.github.io/vshsdt/contacts</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://menzorg.github.io/vshsdt/education/interior-design</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://menzorg.github.io/vshsdt/education/fashion-stylist</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://menzorg.github.io/vshsdt/education</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://menzorg.github.io/vshsdt/education/interior-stylist</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://menzorg.github.io/vshsdt/education/style-consultant</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://menzorg.github.io/vshsdt/enrollment</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://menzorg.github.io/vshsdt/intro</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://menzorg.github.io/vshsdt</loc><lastmod>2024-03-07T14:29:05.973Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/contacts</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/education/ai-product-manager</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/education/fashion-stylist</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/education/interior-stylist</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/education/interior-design</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/education/nn-for-designers-and-stylists</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/education</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/education/style-consultant</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/enrollment</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt/intro</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://menzorg.github.io/vshsdt</loc><lastmod>2024-03-12T09:44:15.624Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>

src/app/education/ai-product-manager/page-data.json

@@ -285,7 +285,7 @@
     },
     {
       "banner": {
-        "type": "gallery",
+        "type": "cards",
         "data": [
           {"image": "http://localhost:3000/Group_72.jpg", "texts": [
             { "text": "Сабина Алекперова"}]},

src/app/education/fashion-stylist/page-data.json

@@ -151,7 +151,7 @@
     },
     {
       "banner": {
-        "type": "gallery",
+        "type": "cards",
         "data": [
           {"image": "http://localhost:3000/Group_72.jpg", "texts": [
             { "text": "Инесса Трубецкова  (Россия, Москва)"},

src/app/education/interior-design/page-data.json

@@ -135,7 +135,7 @@
     },
     {
       "banner": {
-        "type": "gallery",
+        "type": "cards",
         "data": [
           {"image": "http://localhost:3000/Group_72.jpg", "texts": [
             { "text": "Марина Костарнова (Россия, Бельгия)"},

src/app/education/interior-stylist/page-data.json

@@ -173,7 +173,7 @@
     },
     {
       "banner": {
-        "type": "gallery",
+        "type": "cards",
         "data": [
           {"image": "http://localhost:3000/Group_72.jpg", "texts": [
             { "text": "Марина Костарнова (Россия, Бельгия)"},

src/app/education/nn-for-designers-and-stylists/page-data.json

@@ -153,7 +153,7 @@
     },
     {
       "banner": {
-        "type": "gallery",
+        "type": "cards",
         "data": [
           {"image": "http://localhost:3000/Group_72.jpg", "texts": [
             { "text": "Анна Клименкоди (Россия, Испания)"}, { "text": "Практикующий дизайнер с международной практикой, предприниматель. С 2005 по 2022 г. Генеральный директор, главный дизайнер ООО Дизайн студия 'Крем'. г. Краснодар. Член Международной Ассоциации Дизайна IIDA. Специализируется в применении нейросетей в области графического дизайна и дизайна среды. Преподаватель ВШСДТ"}]}

src/app/education/page.tsx

@@ -23,7 +23,6 @@ export default function Home() {
     <VStack align="center" p={isMax959 ? "5rem 1rem" : "7rem 6rem"} spacing="2rem">
       { courses.map((course, i)=> <EducationCard key={i} {...course} /> ) }
     </VStack>
-
     <Breadcrumb separator='•' textAlign="center" fontSize='15px' p={isMax959 ? '0rem 2rem' : "0rem 6rem"}>
       <BreadcrumbItem>
         <BreadcrumbLink href='/'>ВШСДТ</BreadcrumbLink>

src/app/education/style-consultant/page-data.json

@@ -19,7 +19,15 @@
   ],
   "points": [
     {
-      "banner": true,
+      "banner": {
+        "type": "image",
+        "width": "100%",
+        "height": "400px",
+        "backgroundImage": "/banner_image_consultant.jpg",
+        "backgroundPosition": "center",
+        "backgroundRepeat": "no-repeat",
+        "backgroundColor": "#EBE8EB"
+      },
       "title2": "Характеристики программы",
       "content": [
         { "text": 
@@ -105,15 +113,6 @@
     },
     {
       "title2": "Как проходит обучение",
-      "banner": {
-        "type": "stepper",
-        "active": 3,
-        "steps": [
-          { "title": "First", "description": "Contact Info" },
-          { "title": "Second", "description": "Date & Time" },
-          { "title": "Third", "description": "Select Rooms" }
-        ]
-      },
       "content":[
         {"text": "Для реализации образовательной программы формируется график обучения. Это значит есть дата старта и дата окончания курса."},
         {"text": "В процессе обучения предусмотрено обязательное выполнение домашних заданий как элементов целостной проектной работы."},
@@ -124,18 +123,34 @@
     },
     {
       "title2": "Документ об образовании",
-      "banner": true,
+      "banner": {
+        "type": "stepper",
+        "active": 4,
+        "steps": [
+          { "title": "Лекции", "description": "Каждую неде­лю Вы изу­чаете теорию. Лекции ста­новятся доступны по мере про­хождения группой курса. Обучение движется в ком­форт­ном, рабочем рит­ме." },
+          { "title": "Домашние задания", "description": "По основным темам курса Вы получаете домашние задания. Это важная часть обучения, в результате ко­то­рой формируется итоговая проект­ная работа." },
+          { "title": "Практика", "description": "Каждую неделю — живое общение с груп­пой и пре­подавате­лем. Преподава­тель прове­ряет задания, находит ошибки, ком­мен­тирует, помо­гает, напра­вляет." },
+          { "title": "Практика + Книга стиля", "description": "В итоге обучения Вы созда­ете презентацию пер­сональ­ного стиля (Книгу стиля — stylebook), прово­дите шо­пинг, реали­зуете фото­сес­сию для Instagram" }
+        ]
+      },
       "content":[
         {"text": "Слушатели, заключившие договор на образовательные услуги в рамках программы повышения квалификации, выполнившие учебный план, сдавшие проектные работы, не имеющие академической задолженности и представившие все необходимые документы, получают документы установленного образца: удостоверение о повышении квалификации (ВШСДТ или НИ ТГУ в зависимости от договора на обучение) с правом деятель­ности в изучен­ной профес­сио­наль­ной области."}
       ]
     },
     {
+      "banner": {
+        "type": "gallery",
+        "text": "Курс дает системные и практические знания для старта карь­еры в индус­трии моды. После обу­че­ния Вы полу­чите диплом уста­новлен­ного госу­­дар­­ством образца о про­фес­сиональ­ной пере­под­готов­ке по про­грам­ме «Консультант по имиджу и стилю» с правом деятель­ности в изу­чен­ной профес­сио­наль­ной области.",
+        "items": [{
+          "original": "http://localhost:3000/diplom-2.jpg"
+        }]
+      },
       "title2": "Преподаватели",
       "id": "teachers"
     },
     {
       "banner": {
-        "type": "gallery",
+        "type": "cards",
         "data": [
           {"image": "http://localhost:3000/Group_72.jpg", "texts": [
             { "text": "Инесса Трубецкова  (Россия, Москва)" },

src/app/enrollment/page-data.json

@@ -35,7 +35,7 @@
           {"text": "Важно: ВШСДТ заключены соглашения о сотрудничестве с рядом ведущих государственных ВУЗов. Поэтому по многим направлениям Вы можете получить диплом об образовании крупного гос.ВУЗа - партнера ВШСДТ.", "textStyles": "Bold16", "mb": "3rem"},
           {"text": "Программы, доступные с оплатой от государства", "textStyles": "Bold20"},
           {"text": "Есть образовательные программы ВШСДТ, которые включены в федеральные проекты (список обновляется каждый год). В рамках таких программ определенным категориям граждан РФ обучение оплачивается государством. Это предоставляет возможность получить качественное образование без дополнительных финансовых затрат.", "mb": "3rem" },
-          {"text": "Открытое образования", "textStyles": "Bold20"},
+          {"text": "Открытое образование", "textStyles": "Bold20"},
           { "text": "ВШСДТ предлагает курсы открытого образования, которые доступны для широкой аудитории слушателей без необходимости оплаты. Эти курсы могут быть полезны для расширения знаний в различных областях. По итогам прохождения данных курсов не предусмотрена выдача документов об образовании, при этом в рамках открытого образования регулярно реализуются открытые практические занятия по выбранным направлениям" }
         ]
       }]

src/app/page.tsx

@@ -26,14 +26,14 @@ export default function Home() {
       <Text textStyle="h1" color="black" align={isMax959 ? 'center' : 'left'}>ДИЗАЙНА И ТЕХНОЛОГИЙ</Text>
     </Flex>
     <Flex direction="row" mb="1.5rem" p="1rem" justifyContent="center" alignItems="center">
-    <Box p="1rem" sx={{ borderRight: '1px solid black' }}>
-      <Text textStyle="h2">Мода</Text>
-      <Text textStyle="h2">Дизайн</Text>
-      <Text textStyle="h2">IT</Text>
-      <Text textStyle="Regular20">Профессиональная переподготовка</Text>
-      <Text textStyle="Regular20">и повышение квалификации</Text>
-      <Text textStyle="Regular20">в креативных индустриях</Text>
-    </Box>
+      <Box p="1rem" sx={{ borderRight: '1px solid black' }}>
+        <Text textStyle="h2">Мода</Text>
+        <Text textStyle="h2">Дизайн</Text>
+        <Text textStyle="h2">IT</Text>
+        <Text textStyle="Regular20">Профессиональная переподготовка</Text>
+        <Text textStyle="Regular20">и повышение квалификации</Text>
+        <Text textStyle="Regular20">в креативных индустриях</Text>
+      </Box>
       <Flex direction="column">
         <Box p="1rem">
           <Link as={NextLink} title="Образование" href="education"><Text textStyle="Regular20">Образование</Text></Link>

src/components/banner/banner.tsx

@@ -0,0 +1,16 @@
+import { memo } from "react";
+import Cards from "./cards";
+import Stepper from "./stepper";
+import Gallery from "./gallery";
+import ImageBanner from "./image";
+
+export default memo(function Banner(props: any) {
+    const { type, ...data } = props;
+    return(<>
+        { type === 'image' ? <ImageBanner {...data} /> : null }
+        { type === 'cards' ? <Cards {...data} /> : null }
+        { type === 'stepper' ? <Stepper {...data} /> : null }
+        { type === 'gallery' ? <Gallery {...data} /> : null }
+    </>);
+  })
+

src/components/gallery.tsx → src/components/banner/cards.tsx

@@ -2,18 +2,18 @@ import { Flex, Text, useMediaQuery } from '@chakra-ui/react'
 import { memo } from "react"
 import Image from 'next/image';
 
-export default memo(function Gallery(props: any) {
+export default memo(function Cards(props: any) {
   const { data } = props;
-  const [isMax1100] = useMediaQuery('(max-width: 1100px)')
+  const [isMax959] = useMediaQuery('(max-width: 959px)')
   return (
-    <Flex direction="column" w="100%" p={isMax1100 ? '1rem 2rem' : "3rem 6rem"} { ...props }>
-      <Flex direction={isMax1100 ? 'column' : 'row'} wrap="wrap" justifyContent="center"> 
+    <Flex direction="column" w="100%" p={isMax959 ? '1rem 2rem' : "3rem 6rem"} { ...props }>
+      <Flex direction={isMax959 ? 'column' : 'row'} wrap="wrap" justifyContent="center"> 
         {data ? data.map((item: {image: string; texts: { text: string }[]}, i:number) => { 
-          return <Flex key={i} direction="column" justify="center" mb="sm" mr={isMax1100 ? undefined : "sm"} borderWidth='2px' borderRadius='lg' p="1rem 1rem">
+          return <Flex key={i} direction="column" justify="center" mb="sm" mr={isMax959 ? undefined : "sm"} borderWidth='2px' borderRadius='lg' p="1rem 1rem">
             <Flex direction="row" justify="center" mb="1rem">
               <Image src={item.image} width='200' height="600" alt="logo" />
             </Flex>
-              { item.texts? item.texts.map((itemText: {text: string}, i:number) => <Flex key={i} w={isMax1100 ? '100%' : '370px'} direction="row" justify="center" mb="1rem"><Text>{itemText.text}</Text></Flex>) : null }
+              { item.texts? item.texts.map((itemText: {text: string}, i:number) => <Flex key={i} w={isMax959 ? '100%' : '370px'} direction="row" justify="center" mb="1rem"><Text>{itemText.text}</Text></Flex>) : null }
           </Flex>}) : null
         }
       </Flex>