V0.2

README.md

@@ -7,5 +7,12 @@ Talent Team - разработка корпоративных мероприят
 - Tailwind css
 - PHP
 
+#### V 0.2
+- Добавлен блоки "Связаться с нами" и Футер сайта
+- Реализованно выпадающее меню при наведении на элемент "Услуги"
+- Реализрованна плавная прокрутка к элементам
+- В Header добавлен номер телефона
+- Атрибут lang изменен с en на ru
+
 #### V 0.1
 - Инициализация

gatsby-ssr.js

@@ -8,5 +8,5 @@
  * @type {import('gatsby').GatsbySSR['onRenderBody']}
  */
 exports.onRenderBody = ({ setHtmlAttributes }) => {
-  setHtmlAttributes({ lang: `en` })
+  setHtmlAttributes({ lang: `ru` })
 }

package-lock.json

@@ -21,8 +21,10 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.7.1",
+        "react-scroll": "^1.8.9",
         "react-type-animation": "^3.0.1",
-        "swiper": "^9.3.2"
+        "swiper": "^9.3.2",
+        "uniqid": "^5.4.0"
       },
       "devDependencies": {
         "autoprefixer": "^10.4.13",
@@ -10805,6 +10807,11 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -13262,6 +13269,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
+      "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-server-dom-webpack": {
       "version": "0.0.0-experimental-c8b778b7f-20220825",
       "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-c8b778b7f-20220825.tgz",
@@ -15231,6 +15251,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/uniqid": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-5.4.0.tgz",
+      "integrity": "sha512-38JRbJ4Fj94VmnC7G/J/5n5SC7Ab46OM5iNtSstB/ko3l1b5g7ALt4qzHFgGciFkyiRNtDXtLNb+VsxtMSE77A=="
+    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -23835,6 +23860,11 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -25521,6 +25551,15 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ=="
     },
+    "react-scroll": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
+      "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-server-dom-webpack": {
       "version": "0.0.0-experimental-c8b778b7f-20220825",
       "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-c8b778b7f-20220825.tgz",
@@ -26994,6 +27033,11 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
       "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
     },
+    "uniqid": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-5.4.0.tgz",
+      "integrity": "sha512-38JRbJ4Fj94VmnC7G/J/5n5SC7Ab46OM5iNtSstB/ko3l1b5g7ALt4qzHFgGciFkyiRNtDXtLNb+VsxtMSE77A=="
+    },
     "unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",

package.json

@@ -17,8 +17,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
+    "react-scroll": "^1.8.9",
     "react-type-animation": "^3.0.1",
-    "swiper": "^9.3.2"
+    "swiper": "^9.3.2",
+    "uniqid": "^5.4.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",

src/components/About.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { StaticImage } from "gatsby-plugin-image"
 import Button from './UI/Button';
 
-const About = () => {
+const About = ({...props}) => {
     return (
-        <section className='py-32 bg-[#0E0808]'>
+        <section {...props} className='py-32 bg-[#0E0808]'>
             <div className="container mx-auto flex justify-between items-center">
                 <div className='text-white basis-1/2 mr-5 leading-6'>
                     <h2 className='font-bold text-2xl mb-7'>Команда <span className='text-yellow-500'>«Talent Team»</span> гордится богатым, практическим опытом создания сплоченного, мотивированного коллектива, проведению оценки компетенций и развитию потенциала у сотрудников.</h2>

src/components/Advantages.jsx

@@ -5,7 +5,7 @@ import { TbWorld } from "react-icons/tb";
 import { BsPersonCheck } from "react-icons/bs";
 import { FaConnectdevelop } from "react-icons/fa";
 
-const Advantages = () => {
+const Advantages = ({...props}) => {
 
     const [advantages, setAdvantages] = useState([
         {id: 1, icon: <AiOutlineFieldTime size={30} color='#fff'/>, title: 'Опытность', description: 'Более 10 лет опыта'},
@@ -15,7 +15,7 @@ const Advantages = () => {
     ]);
 
     return (
-        <section className='py-24 container mx-auto px-10'>
+        <section {...props} className='py-24 container mx-auto px-10'>
             <div className="flex flex-col items-center mb-20">
                 <h2 className='text-3xl mb-6 font-semibold text-slate-800 text-center uppercase'>«Играя мы развиваем ваш бизнес»</h2>
                 <p className='text-center text-lg max-w-2xl text-slate-700'>Мы помогаем воодушевлять, развивать сотрудников с прицелом на плодотворную командную работу и результата для Бизнеса!</p>

src/components/Contact.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import Button from "./UI/Button";
+import Input from "./UI/Input";
+import Textarea from "./UI/Textarea";
+
+const Contact = ({...props}) => {
+    return (
+        <section {...props} className="py-32 bg-[#0E0808]">
+            <div className="container mx-auto px-24">
+                <h2 className='text-3xl mb-16 font-semibold text-white text-center uppercase'>Связаться с нами</h2>
+                <div className="flex mb-10">
+                    <div className="flex flex-col basis-[40%] mr-6">
+                        <Input className='mb-5' label='Ваше ФИО:' placeholder='Иванов Иван Иванович'></Input>
+                        <Input className='mb-5' label='Ваш Email:' placeholder='exampel@yandex.ru'></Input>
+                        <Input label='Ваш телефон:' placeholder='+7 (999) 999 99-99'></Input>
+                    </div>
+                    <div className="flex basis-[60%]">
+                        <Textarea className='h-full resize-none' label='Ваше обращение:' placeholder='Обращение...'></Textarea>
+                    </div>
+                </div>
+                <div className="flex justify-center">
+                    <Button>Отправить форму</Button>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Contact;

src/components/Courses.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-const Courses = () => {
+const Courses = ({...props}) => {
     return (
-        <section className='py-32'>
+        <section {...props} className='py-32'>
             <div className="container max-w-5xl mx-auto">
                 <div className="flex flex-col text-slate-900 text-base">
                     <h2 className='text-3xl mb-12 font-semibold text-slate-800 text-center uppercase'>Создание электронных обучающих курсов</h2>

src/components/Facilitations/Facilitations.jsx

@@ -5,7 +5,7 @@ import FacilitationsExample from './Example/Example';
 
 const Facilitations = {
     Main: function Main(props) {
-        return (<FacilitationsMain></FacilitationsMain>)
+        return (<FacilitationsMain props={props}></FacilitationsMain>)
     },
     Example: function Example(props) {
         return (<FacilitationsExample></FacilitationsExample>)

src/components/Facilitations/Main.jsx

@@ -3,7 +3,7 @@ import React, {useState} from 'react'
 import Step from './Step/Step'
 import Line from '../../images/line.svg'
 
-const Main = () => {
+const Main = ({props}) => {
     const [steps, setStep] = useState([
         {title: "Составление технического задания", ml: 'ml-[0px]'},
         {title: "Детализация запроса", ml: 'ml-[20px]'},
@@ -13,7 +13,7 @@ const Main = () => {
     ]);
 
     return (
-        <section className='bg-white relative py-32'>
+        <section {...props} className='bg-white relative py-32'>
             <div className="container mx-auto px-32 relative">
                 <h2 className='text-3xl mb-5 font-semibold text-slate-800 text-center uppercase'>Фасилитации</h2>
                 <h3 className='text-xl mb-20 font-medium text-slate-800 text-center uppercase'>Вы можете доверить проведение сессии нам — профессиональным фасилитаторам</h3>

src/components/Games/Games.jsx

@@ -3,7 +3,7 @@ import RecGame from './RecGame';
 import Game from './Game';
 import { useStaticQuery, graphql } from "gatsby"
 
-const Games = () => {
+const Games = ({...props}) => {
     const images = useStaticQuery(graphql`
     query {
         bridge: file(relativePath: {eq: "games/bridge.jpg"}) {
@@ -61,7 +61,7 @@ const Games = () => {
 
     return (
         <>
-            <section className='py-32'>
+            <section {...props} className='py-32'>
                 <div className="container mx-auto">
                     <div className="flex flex-col items-center mb-20">
                         <h2 className='text-3xl mb-6 font-semibold text-slate-800 text-center uppercase'>Бизнес-игры</h2>

src/components/Hero.jsx

@@ -6,9 +6,9 @@ import { getImage } from 'gatsby-plugin-image';
 import { TypeAnimation } from 'react-type-animation';
 import { motion } from "framer-motion"
 import { SlArrowDown } from "react-icons/sl";
+import { Link as AnchorLink, animateScroll as scroll, scroller } from "react-scroll";
 
-
-const Hero = () => {
+const Hero = ({...props}) => {
     const images = useStaticQuery(graphql`
     query {
         hero1: file(relativePath: {eq: "hero1.jpg"}) {
@@ -24,7 +24,7 @@ const Hero = () => {
     }`);
     return (
         <>
-            <section className='pt-28 flex h-[calc(100vh-36px)] pb-16 relative mt-9'>
+            <section {...props} className='pt-28 flex h-[calc(100vh-36px)] pb-16 relative mt-9'>
                 <div className="container px-8 mx-auto items-center flex justify-center relative ">
                     <div className="flex flex-col items-center max-w-5xl pb-16">
                         <TypeAnimation
@@ -44,12 +44,12 @@ const Hero = () => {
                             <li className="flex items-center text-lg text-white mr-5"><AiFillCheckCircle className='mr-2 text-green-500'/>обучение</li>
                             <li className="flex items-center text-lg text-white"><AiFillCheckCircle className='mr-2 text-green-500'/>развитие</li>
                         </ul>
-                        <Button className="max-w-[210px] mt-5">О компании</Button>
+                        <Button onClick={e=>scroller.scrollTo('about', {smooth: true})} className="max-w-[210px] mt-7">О компании</Button>
                     </div>
                 </div>
-                <div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-16 h-16 border-white border-2 rounded-full flex items-center justify-center">
+                <AnchorLink to="advantages" smooth={true} className="cursor-pointer absolute bottom-16 left-1/2 -translate-x-1/2 w-16 h-16 border-white border-2 rounded-full flex items-center justify-center">
                     <motion.div animate={{y: [0, 5, 0],}} transition={{ ease: "linear", duration: 2, repeat: Infinity }}><SlArrowDown className='text-white text-xl'></SlArrowDown></motion.div>
-                </div>
+                </AnchorLink>
                 <motion.div animate={{ opacity: 0 }} transition={{ delay: 5.5 }} style={{'--image-url': `url(${getImage(images.hero1).images.fallback.src})`}} className="-z-10 bg-fixed absolute w-full h-full top-0 bg-no-repeat bg-cover left-0 bg-[linear-gradient(to_bottom,rgba(14,8,8,0.52),rgba(14,8,8,1)),var(--image-url)]"></motion.div>
                 <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 5.6 }} style={{'--image-url': `url(${getImage(images.hero2).images.fallback.src})`}} className="-z-10 bg-fixed bg-no-repeat bg-cover absolute w-full h-full top-0 left-0 bg-[linear-gradient(to_bottom,rgba(14,8,8,0.52),rgba(14,8,8,1)),var(--image-url)]"></motion.div>
             </section>

src/components/Team/Team.jsx

@@ -3,7 +3,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import Person from './Person'
 
-const Team = () => {
+const Team = ({...props}) => {
 
     const images = useStaticQuery(graphql`
     query {
@@ -31,7 +31,7 @@ const Team = () => {
     ]);
 
     return (
-        <section className='py-32 bg-[#0E0808]'>
+        <section {...props} className='py-32 bg-[#0E0808]'>
             <div className="container mx-auto">
                 <h2 className='text-3xl mb-12 font-semibold text-white text-center uppercase'>Наша команда</h2>
                 <div className="flex">

src/components/Teambuilding/Main.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-const Main = () => {
+const Main = ({props}) => {
     return (
-        <section className='py-32'>
+        <section {...props} className='py-32'>
             <div className="container max-w-6xl mx-auto">
                 <div className="flex flex-col text-slate-900 text-base">
                     <h2 className='text-3xl mb-12 font-semibold text-slate-800 text-center uppercase'>Корпоративные мероприятия: Тимбилдинг/ Квесты</h2>

src/components/Teambuilding/Teambuilding.jsx

@@ -5,7 +5,7 @@ import TeambuildingExample from './Example/Example'
 
 const Teambuilding = {
     Main : function Main(props) {
-        return <TeambuildingMain></TeambuildingMain>
+        return <TeambuildingMain props={props}></TeambuildingMain>
     },
     Example : function Example(props) {
         return <TeambuildingExample></TeambuildingExample>

src/components/UI/Button.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-const Button = ({className, children}) => {
+const Button = ({className, children, ...props}) => {
     return (
-        <button className={['bg-yellow-500 rounded-md py-2.5 px-5 text-lg text-white hover:bg-yellow-600 transition delay-50', className].join(' ')}>{children}</button>
+        <button {...props} className={['bg-yellow-500 rounded-md py-2.5 px-5 text-lg text-white hover:bg-yellow-600 transition delay-50', className].join(' ')}>{children}</button>
     );
 }
 

src/components/UI/Input.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import uniqid from 'uniqid';
+
+const Input = ({ className, label, ...props }) => {
+
+    const uid = uniqid();
+
+    return (
+        <div className='flex flex-col'>
+            {label &&
+                <label className='mb-3 text-white ' htmlFor={uid}>{label}</label>
+            }
+            <input id={uid} className={['bg-white rounded-md py-3 px-5 text-base text-gray-800', className].join(' ')} {...props} type="text" />
+        </div>
+    );
+}
+
+export default Input;

src/components/UI/Textarea.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import uniqid from 'uniqid';
+
+const Textarea = ({ className, label, ...props }) => {
+
+    const uid = uniqid();
+
+    return (
+        <div className='flex flex-col w-full'>
+            {label &&
+                <label className='mb-3 text-white ' htmlFor={uid}>{label}</label>
+            }
+            <textarea id={uid} className={['bg-white rounded-md py-2.5 px-5 text-base text-gray-800', className].join(' ')} {...props}></textarea>
+        </div>
+    );
+}
+
+export default Textarea;

src/components/footer.jsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { Link as AnchorLink } from "react-scroll";
+import { Link } from "gatsby"
+import { StaticImage } from "gatsby-plugin-image"
+
+const Footer = () => (
+    <footer className="bg-[#0E0808] flex flex-col w-full">
+        <div className="bg-black h-12 w-full"></div>
+        <div className="container mx-auto flex flex-col py-16">
+            <div className="flex items-center justify-between border-b-[1px] border-white pb-10">
+                <AnchorLink smooth={true} className="cursor-pointer" to="hero"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-20"/></AnchorLink>
+                <ul className='flex items-center'>
+                    <li className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
+                    <li className="mr-12 text-white text-sm"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Услуги</AnchorLink></li>
+                    <li className="mr-12 text-white text-sm"><a href="#"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></a></li>
+                    <li className="text-white text-sm"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
+                </ul>
+            </div>
+            <div className="flex mt-8 justify-between">
+                <p className="text-white text-sm">© {new Date().getFullYear()} TalentTeam</p>
+                <a href="tel:+79200745505" className="text-white">8 (920) 074 55-05</a>
+            </div>
+        </div>
+    </footer>
+)
+
+export default Footer

src/components/header.jsx

@@ -1,19 +1,39 @@
-import * as React from "react"
+import React, { useState, useRef, useEffect } from "react";
 import { Link } from "gatsby"
 import { StaticImage } from "gatsby-plugin-image"
+import { Link as AnchorLink } from "react-scroll";
 
-const Header = ({ siteTitle }) => (
-    <header className="bg-black h-9 flex w-full fixed top-0 z-10">
-        <nav className="container mx-auto flex items-center justify-between">
-            <Link to="/"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-8"/></Link>
-            <ul className='flex items-center'>
-                <li className="mr-12 text-white text-xs"><a href="#">О компании</a></li>
-                <li className="mr-12 text-white text-xs"><a href="#">Услуги</a></li>
-                <li className="mr-12 text-white text-xs"><a href="#">Наша команда</a></li>
-                <li className=""><a href="#">Контакты</a></li>
-            </ul>
-        </nav>
-    </header>
-)
+const Header = ({ siteTitle }) => {
+    const ref = useRef(null);
+    const [menuH, setMenuH] = useState(0);
+    useEffect(() => {
+        setMenuH(ref.current.scrollHeight);
+    }, []);
+    
+    return (
+        <header className="bg-black h-9 flex w-full fixed top-0 z-30">
+            <nav className="container mx-auto flex items-center justify-between">
+                <div className="flex items-center">
+                    <Link to="/"><StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-8 mr-5"/></Link>
+                    <a href="tel:+79200745505" className="text-white text-xs">8 (920) 074 55-05</a>
+                </div>
+                <ul className='flex items-center'>
+                    <li className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to="about" smooth={true}>О компании</AnchorLink></li>
+                    <li style={{'--menu-h': `${menuH + 65 }px`}} className={"mr-12 text-white text-xs relative [&>.drop-menu]:hover:h-[var(--menu-h)]"}>
+                        <p className="cursor-pointer">Услуги</p>
+                        <ul ref={ref} className="absolute flex flex-col justify-center drop-menu bg-black px-4 -left-3 h-0 overflow-hidden transition-all">
+                            <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="games" smooth={true}>Бизнес-игры</AnchorLink></li>
+                            <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="facilitations" smooth={true}>Фасилитации</AnchorLink></li>
+                            <li className="mr-0 mb-2"><AnchorLink className="cursor-pointer" to="teambuilding" smooth={true}>Тимбилдинг</AnchorLink></li>
+                            <li className="mr-0"><AnchorLink className="cursor-pointer" to="courses" smooth={true}>Курсы</AnchorLink></li>
+                        </ul>
+                    </li>
+                    <li className="mr-12 text-white text-xs"><AnchorLink className="cursor-pointer" to="team" smooth={true}>Наша команда</AnchorLink></li>
+                    <li className="text-white text-xs"><AnchorLink className="cursor-pointer" to="contacts" smooth={true}>Контакты</AnchorLink></li>
+                </ul>
+            </nav>
+        </header>
+    )
+}
 
 export default Header

src/components/layout.jsx

@@ -9,6 +9,7 @@ import * as React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
+import Footer from "./footer"
 import "./layout.css"
 
 const Layout = ({ children }) => {
@@ -27,17 +28,8 @@ const Layout = ({ children }) => {
             <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
             <div>
                 <main>{children}</main>
-                <footer
-                    style={{
-                    marginTop: `var(--space-5)`,
-                    fontSize: `var(--font-sm)`,
-                    }}
-                >
-                    © {new Date().getFullYear()} &middot; Built with
-                    {` `}
-                    <a href="https://www.gatsbyjs.com">Gatsby</a>
-                </footer>
             </div>
+            <Footer></Footer>
         </>
     )
 }

src/pages/index.jsx

@@ -12,21 +12,23 @@ import Teambuilding from "../components/Teambuilding/Teambuilding"
 import Courses from "../components/Courses"
 import Team from "../components/Team/Team"
 import Reviews from "../components/Reviews/Reviews"
+import Contact from "../components/Contact"
 
 const IndexPage = ({data}) => {
     return(
         <Layout>
-            <Hero></Hero>
-            <Advantages></Advantages>
-            <About></About>
-            <Games></Games>
-            <Facilitations.Main></Facilitations.Main>
+            <Hero id='hero'></Hero>
+            <Advantages id='advantages'></Advantages>
+            <About id='about'></About>
+            <Games id='games'></Games>
+            <Facilitations.Main id='facilitations'></Facilitations.Main>
             <Facilitations.Example></Facilitations.Example>
-            <Teambuilding.Main></Teambuilding.Main>
+            <Teambuilding.Main id='teambuilding'></Teambuilding.Main>
             <Teambuilding.Example></Teambuilding.Example>
-            <Courses></Courses>
-            <Team></Team>
+            <Courses id="courses"></Courses>
+            <Team id="team"></Team>
             <Reviews></Reviews>
+            <Contact id="contacts"></Contact>
         </Layout>
     )
 
@@ -37,6 +39,6 @@ const IndexPage = ({data}) => {
  *
  * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
  */
-export const Head = () => <Seo title="Home" />
+export const Head = () => <Seo title="Главная" />
 
 export default IndexPage