grid addons gallary address

src/app/contacts/address.tsx

@@ -0,0 +1,37 @@
+import { Box, Flex, Text, VStack, useMediaQuery } from '@chakra-ui/react'
+import { memo } from "react"
+
+export const Address = memo(function Address(props: any) {
+  const [isMax667] = useMediaQuery('(max-width: 667px)');
+  const [isMax959] = useMediaQuery('(max-width: 959px)')
+  return (
+      <Flex direction="column" w="100%" p={isMax959 ? '1rem 2rem' : "3rem 6rem"} >
+        <Flex justify={isMax959 ? 'flex-start' : 'space-between'} mb="sm">
+          { !isMax667 ? <Box w="xs" h="100%" mr="2rem">
+                <Box w="xs" h="xs" bg='secondary' />
+              </Box> : null
+          }
+          <VStack align="flex-start" w="calc(100% - 2rem)" >
+            <Text as="h2" textStyle="Light20">Адрес</Text>
+          </VStack>
+        </Flex>
+        <Flex direction="row" justify={isMax959 ? 'flex-start' : 'flex-end'}>
+          <Flex direction={isMax959 ? 'column' : 'row'} width={isMax959 ? '100%' : '75%'} justify={isMax959 ? 'flex-end' : 'flex-start'} mb="sm">
+            <Box w={isMax959 ? '100%' : '50%'}>
+              <Text>129085, г. Москва, проспект Мира, д. 101, стр.1, пом.210</Text>
+              <Text>Для почтовой корреспонденции: а/я 2-18</Text>
+              <Text>Телефон: +7 495 221-89-35</Text>
+              <Text>E-mail: [email protected]</Text>
+              <br/>
+              <Text>Время работы учебного отдела:</Text>
+              <Text>Пн-Пт с 09:30 до 18:30 (мск)</Text>
+              <Text>Время проведения занятий, в т.ч. онлайн:</Text>
+              <Text>Пн-Пт с 10:00 до 22:00 (мск)</Text>
+              <Text>Сб с 10:00 до 18:00</Text>
+            </Box>
+            <Box w={isMax959 ? '100%' : '40%'} h="10px" bg="blue"/>
+          </Flex>
+        </Flex>
+      </Flex>
+  )
+})

src/app/contacts/page-data.json

@@ -0,0 +1,18 @@
+{
+  "banner": true,
+  "points": [
+    {
+      "title": "Обратная связь",
+      "lists": [{
+        "texts": ["На данный момент запись на программы ВШСДТ и получения информации по обучению доступны только в следующих группах:"],
+        "type": "column",
+        "mb": "1.5rem",
+        "content": [
+          { "endLink": { "href": "https://t.me/styleschool_ask", "title": "Телеграм", "text": "Телеграм"} },
+          { "endLink": { "href": "https://chat.whatsapp.com/LQpG7XjdGSBAiaXNgcoE54", "title": "Телеграм", "text": "WhatsApp"} }
+        ]
+      }],
+      "details": ["Наши специалисты готовы ответить на ваши запросы в течение 48 часов в рабочие дни с 9:00 до 19:00 по московскому времени. Не стесняйтесь связаться с нами через указанные каналы для получения необходимой информации и поддержки."]
+    }
+  ]
+}

src/app/contacts/page.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Flex, Text, Box, Link } from '@chakra-ui/react';
+import Footer from '../footer';
+import Header from '../header';
+import { PageGrid } from '@/app/course/page-grid';
+import { Address } from './address';
+
+import data from "./page-data.json";
+
+export default function Home() {
+  return (
+  <Flex direction="column">
+    <Header breadcrumbs={[{text: 'Контакты'}]}/>
+    <PageGrid { ...data } />
+    <Address/>
+    <Footer/>
+  </Flex>
+  )
+}

src/app/course/components/list-items.tsx

@@ -1,10 +1,10 @@
-import { Flex, ListItem, UnorderedList, useMediaQuery, Text, Stack } from "@chakra-ui/react";
+import { Flex, ListItem, UnorderedList, useMediaQuery, Text, Stack, Link } from "@chakra-ui/react";
 import { TextDescription } from "./text-description";
 import { memo } from "react";
+import NextLink from 'next/link'
 
-export const UnorderList = memo(({children, props}:{children: any; [key: string]: any}) => {
+export const UnorderList = memo(({children, ...props}:{children: any; [key: string]: any}) => {
   const [isMax628] = useMediaQuery('(max-width: 628px)');
-
   return (<UnorderedList
       sx={{
         '&>*:not(:last-child)': {
@@ -20,13 +20,16 @@ export const UnorderList = memo(({children, props}:{children: any; [key: string]
 
 export const PointList = (props: {
   type: string;
-  content: any; isMax959:boolean }) => {
-  const { type, content, isMax959 } = props;
+  content: any;
+  isMax959:boolean;
+  mb?: string;
+}) => {
+  const { type, content, isMax959, mb } = props;
   return type === 'column' ? 
-    <UnorderList>
-      {content.map ? content.map((item:string, i:number) => (<ListItem key={i}>
+    <UnorderList mb={mb}>
+      {content.map ? content.map((item:{text: string; endLink?: {href: string; title: string; text: string}}, i:number) => (<ListItem key={i}>
         <Text key={i} textStyle="Regular16">
-          {`${item}`}
+          {item.text ? `${item.text}` : null} {item.endLink ? <Link as={NextLink} title={item.endLink.title} href={item.endLink.href}>{item.endLink.text}</Link> : null}
         </Text>
       </ListItem>)) : null}
     </UnorderList>
@@ -38,7 +41,7 @@ export const PointList = (props: {
          { item['2part'] ? <TextDescription mb={0} text={item['2part']} /> : null }
        </Stack> ) : null}
      </Flex>
-     <Flex direction="column" alignItems="flex-start" justify="flex-start" w={isMax959 ? '100%' : '50%'}>
+     <Flex mb={mb} direction="column" alignItems="flex-start" justify="flex-start" w={isMax959 ? '100%' : '50%'}>
      {content?.['2column'] ? content?.['2column'].map((item:any, i:number) => 
        <Stack direction={!isMax959 ? 'row' : 'column'} key={i} spacing={isMax959 ? '0.5rem' : '1rem'} mb="xs">
          { item['1part'] ? <Text textStyle="Bold16">{item['1part']}</Text> : null }