From b6b10f32c05de5aceb0e24397ac2a89414bc0077 Mon Sep 17 00:00:00 2001 From: beknaruto Date: Wed, 7 Jun 2023 17:46:20 +0300 Subject: [PATCH] V0.2 --- README.md | 7 +++ gatsby-ssr.js | 2 +- package-lock.json | 46 +++++++++++++++++- package.json | 4 +- src/components/About.jsx | 4 +- src/components/Advantages.jsx | 4 +- src/components/Contact.jsx | 30 ++++++++++++ src/components/Courses.jsx | 4 +- .../Facilitations/Facilitations.jsx | 2 +- src/components/Facilitations/Main.jsx | 4 +- src/components/Games/Games.jsx | 4 +- src/components/Hero.jsx | 12 ++--- src/components/Team/Team.jsx | 4 +- src/components/Teambuilding/Main.jsx | 4 +- src/components/Teambuilding/Teambuilding.jsx | 2 +- src/components/UI/Button.jsx | 4 +- src/components/UI/Input.jsx | 18 +++++++ src/components/UI/Textarea.jsx | 18 +++++++ src/components/footer.jsx | 27 +++++++++++ src/components/header.jsx | 48 +++++++++++++------ src/components/layout.jsx | 12 +---- src/pages/index.jsx | 20 ++++---- 22 files changed, 220 insertions(+), 60 deletions(-) create mode 100644 src/components/Contact.jsx create mode 100644 src/components/UI/Input.jsx create mode 100644 src/components/UI/Textarea.jsx create mode 100644 src/components/footer.jsx diff --git a/README.md b/README.md index 5315e05..9bd19be 100644 --- a/README.md +++ b/README.md @@ -7,5 +7,12 @@ Talent Team - разработка корпоративных мероприят - Tailwind css - PHP +#### V 0.2 +- Добавлен блоки "Связаться с нами" и Футер сайта +- Реализованно выпадающее меню при наведении на элемент "Услуги" +- Реализрованна плавная прокрутка к элементам +- В Header добавлен номер телефона +- Атрибут lang изменен с en на ru + #### V 0.1 - Инициализация diff --git a/gatsby-ssr.js b/gatsby-ssr.js index ded145e..b14f488 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -8,5 +8,5 @@ * @type {import('gatsby').GatsbySSR['onRenderBody']} */ exports.onRenderBody = ({ setHtmlAttributes }) => { - setHtmlAttributes({ lang: `en` }) + setHtmlAttributes({ lang: `ru` }) } diff --git a/package-lock.json b/package-lock.json index db7b697..dbc0721 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index cd43100..5a165cc 100644 --- a/package.json +++ b/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", diff --git a/src/components/About.jsx b/src/components/About.jsx index 8c301ed..5155a7d 100644 --- a/src/components/About.jsx +++ b/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 ( -
+

Команда «Talent Team» гордится богатым, практическим опытом создания сплоченного, мотивированного коллектива, проведению оценки компетенций и развитию потенциала у сотрудников.

diff --git a/src/components/Advantages.jsx b/src/components/Advantages.jsx index af05962..a8b3e2f 100644 --- a/src/components/Advantages.jsx +++ b/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: , title: 'Опытность', description: 'Более 10 лет опыта'}, @@ -15,7 +15,7 @@ const Advantages = () => { ]); return ( -
+

«Играя мы развиваем ваш бизнес»

Мы помогаем воодушевлять, развивать сотрудников с прицелом на плодотворную командную работу и результата для Бизнеса!

diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx new file mode 100644 index 0000000..aaff721 --- /dev/null +++ b/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 ( +
+
+

Связаться с нами

+
+
+ + + +
+
+ +
+
+
+ +
+
+
+ ) +} + +export default Contact; \ No newline at end of file diff --git a/src/components/Courses.jsx b/src/components/Courses.jsx index d2d5068..8695659 100644 --- a/src/components/Courses.jsx +++ b/src/components/Courses.jsx @@ -1,8 +1,8 @@ import React from 'react' -const Courses = () => { +const Courses = ({...props}) => { return ( -
+

Создание электронных обучающих курсов

diff --git a/src/components/Facilitations/Facilitations.jsx b/src/components/Facilitations/Facilitations.jsx index 1af1c86..7b8823e 100644 --- a/src/components/Facilitations/Facilitations.jsx +++ b/src/components/Facilitations/Facilitations.jsx @@ -5,7 +5,7 @@ import FacilitationsExample from './Example/Example'; const Facilitations = { Main: function Main(props) { - return () + return () }, Example: function Example(props) { return () diff --git a/src/components/Facilitations/Main.jsx b/src/components/Facilitations/Main.jsx index 43e50e5..7e0d5a7 100644 --- a/src/components/Facilitations/Main.jsx +++ b/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 ( -
+

Фасилитации

Вы можете доверить проведение сессии нам — профессиональным фасилитаторам

diff --git a/src/components/Games/Games.jsx b/src/components/Games/Games.jsx index 354348a..447e9d1 100644 --- a/src/components/Games/Games.jsx +++ b/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 ( <> -
+

Бизнес-игры

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 5c5a953..3a12c64 100644 --- a/src/components/Hero.jsx +++ b/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 ( <> -
+
{
  • обучение
  • развитие
    • - +
    -
    + -
    +
    diff --git a/src/components/Team/Team.jsx b/src/components/Team/Team.jsx index db61719..ae280ac 100644 --- a/src/components/Team/Team.jsx +++ b/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 ( -
    +

    Наша команда

    diff --git a/src/components/Teambuilding/Main.jsx b/src/components/Teambuilding/Main.jsx index bdab734..089bdc1 100644 --- a/src/components/Teambuilding/Main.jsx +++ b/src/components/Teambuilding/Main.jsx @@ -1,8 +1,8 @@ import React from 'react' -const Main = () => { +const Main = ({props}) => { return ( -
    +

    Корпоративные мероприятия: Тимбилдинг/ Квесты

    diff --git a/src/components/Teambuilding/Teambuilding.jsx b/src/components/Teambuilding/Teambuilding.jsx index 91219d4..b99cf57 100644 --- a/src/components/Teambuilding/Teambuilding.jsx +++ b/src/components/Teambuilding/Teambuilding.jsx @@ -5,7 +5,7 @@ import TeambuildingExample from './Example/Example' const Teambuilding = { Main : function Main(props) { - return + return }, Example : function Example(props) { return diff --git a/src/components/UI/Button.jsx b/src/components/UI/Button.jsx index e4f60db..5843656 100644 --- a/src/components/UI/Button.jsx +++ b/src/components/UI/Button.jsx @@ -1,8 +1,8 @@ import React from 'react'; -const Button = ({className, children}) => { +const Button = ({className, children, ...props}) => { return ( - + ); } diff --git a/src/components/UI/Input.jsx b/src/components/UI/Input.jsx new file mode 100644 index 0000000..5638c8e --- /dev/null +++ b/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 ( +
    + {label && + + } + +
    + ); +} + +export default Input; diff --git a/src/components/UI/Textarea.jsx b/src/components/UI/Textarea.jsx new file mode 100644 index 0000000..262e67f --- /dev/null +++ b/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 ( +
    + {label && + + } + +
    + ); +} + +export default Textarea; diff --git a/src/components/footer.jsx b/src/components/footer.jsx new file mode 100644 index 0000000..52c7b6d --- /dev/null +++ b/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 = () => ( + +) + +export default Footer diff --git a/src/components/header.jsx b/src/components/header.jsx index 3b081d4..91f40d5 100644 --- a/src/components/header.jsx +++ b/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 }) => ( -
    - -
    -) +const Header = ({ siteTitle }) => { + const ref = useRef(null); + const [menuH, setMenuH] = useState(0); + useEffect(() => { + setMenuH(ref.current.scrollHeight); + }, []); + + return ( +
    + +
    + ) +} export default Header diff --git a/src/components/layout.jsx b/src/components/layout.jsx index 1ace438..d7df191 100644 --- a/src/components/layout.jsx +++ b/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 }) => {
    {children}
    -
    - © {new Date().getFullYear()} · Built with - {` `} - Gatsby -
    +
    ) } diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 5c06aad..7e74701 100644 --- a/src/pages/index.jsx +++ b/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( - - - - - + + + + + - + - - + + + ) @@ -37,6 +39,6 @@ const IndexPage = ({data}) => { * * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/ */ -export const Head = () => +export const Head = () => export default IndexPage \ No newline at end of file