banner, text size, link in card, stepper

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

@@ -105,7 +105,15 @@
     },
     {
       "title2": "Как проходит обучение",
-      "banner": true,
+      "banner": {
+        "type": "stepper",
+        "active": 3,
+        "steps": [
+          { "title": "First", "description": "Contact Info" },
+          { "title": "Second", "description": "Date & Time" },
+          { "title": "Third", "description": "Select Rooms" }
+        ]
+      },
       "content":[
         {"text": "Для реализации образовательной программы формируется график обучения. Это значит есть дата старта и дата окончания курса."},
         {"text": "В процессе обучения предусмотрено обязательное выполнение домашних заданий как элементов целостной проектной работы."},

src/app/page.tsx

@@ -30,17 +30,17 @@ export default function Home() {
       <Text textStyle="h2">Мода</Text>
       <Text textStyle="h2">Дизайн</Text>
       <Text textStyle="h2">IT</Text>
-      <Text>Профессиональная переподготовка</Text>
-      <Text>и повышение квалификации</Text>
-      <Text>в креативных индустриях</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>Образование</Text></Link>
-          <Link as={NextLink} title="Поступление" href="enrollment"><Text>Поступление</Text></Link>
+          <Link as={NextLink} title="Образование" href="education"><Text textStyle="Regular20">Образование</Text></Link>
+          <Link as={NextLink} title="Поступление" href="enrollment"><Text textStyle="Regular20">Поступление</Text></Link>
           {/* <Link as={NextLink} title="Проекты" href=""><Text>Проекты</Text></Link>
           <Link as={NextLink} title="О Школе" href=""><Text>О Школе</Text></Link> */}
-          <Link as={NextLink} title="Контакты" href="contacts"><Text>Контакты</Text></Link>
+          <Link as={NextLink} title="Контакты" href="contacts"><Text textStyle="Regular20">Контакты</Text></Link>
         </Box>
       </Flex>
     </Flex>

src/components/address.tsx

@@ -29,7 +29,7 @@ export const Address = memo(function Address(props: any) {
               <Text>Пн-Пт с 10:00 до 22:00 (мск)</Text>
               <Text>Сб с 10:00 до 18:00</Text>
             </Box>
-            <Box w={isMax959 ? '100%' : '40%'} h="10px" bg="blue"/>
+            <Box w={isMax959 ? '100%' : '40%'} h="10px" bg="Cblue"/>
           </Flex>
         </Flex>
       </Flex>

src/components/banner.tsx

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

src/components/education-card.tsx

@@ -1,9 +1,10 @@
 
-import { Flex, VStack, HStack, Box, Text, useMediaQuery } from '@chakra-ui/react';
+import { Flex, VStack, HStack, Box, Text, useMediaQuery, Link } from '@chakra-ui/react';
 import { HoveredStyledLink } from './footer-link';
 import { PiPlayFill } from "react-icons/pi";
 import { IconProvider } from "./icon-provider";
 import { useRouter } from 'next/navigation'
+import NextLink from 'next/link'
 
 export default function EducationCard({tags, title, level, profession, document, link='#', key}: {tags: {href: string; text: string}[], title: string; level: string; profession: string; document?: string; key: any; link: string;}) {
   const [isMax628] = useMediaQuery('(max-width: 628px)');
@@ -18,7 +19,8 @@ export default function EducationCard({tags, title, level, profession, document,
             </HStack>
             : null
           }
-          <Text p="0rem 1rem" textStyle="h4" color="secondary">{title}</Text>
+          <Link as={NextLink} title="title" href={link}><Text p="0rem 1rem" textStyle="h4" color="secondary">{title}</Text></Link>
+
           <VStack align="left" p="1.5rem">
             <Text>Уровень: {level}</Text>
             <Text>Профессия: {profession}</Text>

src/components/footer-link.tsx

@@ -33,8 +33,8 @@ export const HoveredStyledLink = ({text, href}:{text: string; href: string}) =>
       sx: {
         textDecoration: 'underline',
         _hover: {
-          textDecorationColor: 'blue',
-          color: 'blue',
+          textDecorationColor: 'Cblue',
+          color: 'Cblue',
         }
       }
     }}/>)

src/components/gallery.tsx

@@ -2,7 +2,7 @@ import { Flex, Text, useMediaQuery } from '@chakra-ui/react'
 import { memo } from "react"
 import Image from 'next/image';
 
-export const Gallery = memo(function Gallery(props: any) {
+export default memo(function Gallery(props: any) {
   const { data } = props;
   const [isMax1100] = useMediaQuery('(max-width: 1100px)')
   return (

src/components/page-grid.tsx

@@ -5,7 +5,7 @@ import { HoveredStyledLink } from "./footer-link";
 import { TextContainer } from "./text-container";
 import { TextDescription } from "./text-description";
 import { PointList } from "./list-items";
-import { Gallery } from './gallery';
+import Banner from './banner';
 
 import {
   Breadcrumb,
@@ -69,7 +69,7 @@ export const PageGrid = memo(function PageGrid(props: any) {
 
       { points && points.length ? points.map((point: any, i:number) => <Box key={i}>
 
-        { point.banner && point.banner.type === 'gallery' ? <Gallery { ...point.banner }/> : point.banner ? <Box w="100%" h="10rem" bg="secondary" mb="sm" /> : null }
+        { point.banner && point.banner.type ? <Banner { ...point.banner }/> : point.banner ? <Box w="100%" h="10rem" bg="secondary" mb="sm" /> : null }
 
         { point.title || point.title2 || point.content || point.lists || point.button || point.details ?
           <Flex direction="column" w="100%"  p={title || title2 || description || details || tags || list ? isMax959 ? '2rem 2rem' : "3rem 6rem" : isMax959 ? '5rem 2rem 0rem' : '6rem 6rem 0rem'}>

src/components/stepper.tsx

@@ -0,0 +1,48 @@
+
+import { Flex,
+  Text,
+  Box,
+  useMediaQuery,
+  Step,
+  StepDescription,
+  StepIcon,
+  StepIndicator,
+  StepNumber,
+  StepSeparator,
+  StepStatus,
+  StepTitle,
+  Stepper,
+  useSteps
+  } from '@chakra-ui/react'
+import { memo } from "react"
+
+export default memo(function Gallery(props: any) {
+  const { steps, active } = props;
+  const [isMax1100] = useMediaQuery('(max-width: 1100px)');
+  const { activeStep } = useSteps({
+    index: active,
+    count: steps.length,
+  });
+  return (
+      <Stepper index={active} colorScheme='red' height='100px' gap='0'>
+      {steps.map((step: {title: string; description: string;}, index:number) => (
+        <Step key={index}>
+          <StepIndicator>
+            <StepStatus
+              complete={<StepNumber />}
+              incomplete={<StepNumber />}
+              active={<StepNumber />}
+            />
+          </StepIndicator>
+
+          <Box flexShrink='0'>
+            <StepTitle>{step.title}</StepTitle>
+            <StepDescription>{step.description}</StepDescription>
+          </Box>
+
+          <StepSeparator />
+        </Step>
+      ))}
+    </Stepper>
+  )
+})

src/components/theme.tsx

@@ -9,6 +9,26 @@ const config: ThemeConfig = {
   cssVarPrefix: 'vshsdt',
 }
 
+const stepperTheme = {
+  variants: {
+    active: {
+      indicator: {
+        borderRadius: 10,
+      },
+    },
+    complete: {
+      indicator: {
+        borderRadius: 10,
+      },
+    },
+    incomplete: {
+      indicator: {
+        borderRadius: 10,
+      },
+    },
+  }
+}
+
 const themeChakra = extendTheme({ 
   config,
   semanticTokens: {
@@ -43,8 +63,8 @@ const themeChakra = extendTheme({
     '2xs': "calc(0.5rem + 0.5vmax)",
     xs: "calc(0.75rem + 1vmax)",
     sm: 'calc(0.95rem + 1vmax)', //"0.875rem",
-    md: "calc(1rem + 0.5vmax)",
-    lg: "calc(1.5rem + 0.5vmax)",
+    md: "calc(1.25rem + 0.5vmax)",
+    lg: "calc(1.5rem + 0.6vmax)",
     xl: "calc(1.35rem + 0.8vmax)",
     "2xl": "calc(1.5rem + 0.5vmax)",
     "3xl": "calc(1.875rem + 0.5vmax)",
@@ -66,8 +86,8 @@ const themeChakra = extendTheme({
     darkBg: '#222222',
     primary: 'rgb(187,144,41)',  // gold
     secondary: 'rgb(125,1,1)', // red
-    gray: 'rgb(160, 160, 160)', // gray
-    blue: 'rgb(87,143,163)' // blue
+    Cgray: 'rgb(160, 160, 160)', // gray
+    Cblue: 'rgb(87,143,163)' // blue
   },
   space: { // единицы измерения для padding и margin
     4.5: '1.125rem',
@@ -78,7 +98,6 @@ const themeChakra = extendTheme({
   sizes: {
     'xs': '2rem',
     'sm': '3rem',
-
   },
   textStyles: {
     h1: {
@@ -205,7 +224,7 @@ const themeChakra = extendTheme({
     },
 
     footerText: {
-      fontSize: '3xs',
+      fontSize: '2xs',
       lineHeight: '1.5',
       fontWeight: 'regular',
       color: 'black',
@@ -220,7 +239,7 @@ const themeChakra = extendTheme({
       fontSize: '3xs',
       lineHeight: '1.5',
       fontWeight: 'regular',
-      color: 'gray',
+      color: 'Cgray',
     },
     body: {
       fontSize: 'xs',
@@ -232,7 +251,8 @@ const themeChakra = extendTheme({
   components: {
     ListItem: {
         fontSize: '0.6rem'
-    }
+    },
+    Stepper: stepperTheme
   }
 })