add more

.github/workflows/check.yaml

@@ -0,0 +1,39 @@
+name: Deploy static content to Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: I pnpm
+        run: npm i -g pnpm
+      - name: Install dependencies
+        run: pnpm i
+      - name: Build
+        run: pnpm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -14,6 +14,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.52.0",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.23.1",
     "sass": "^1.77.5"
   },
   "devDependencies": {

src/App.tsx

@@ -1,4 +1,5 @@
 import Before from "./Components/Before/Before"
+import Feedback from "./Components/Feedback/Feedback"
 import Info from "./Components/Info/Info"
 import Landing from "./Components/Landing/Landing"
 import Footer from "./Components/Layout/Footer/Footer"
@@ -16,6 +17,7 @@ function App() {
 				<Before />
 				<Trainers />
 				<Packets />
+				<Feedback />
 			</main>
 			<Footer />
 		</>

src/Components/Before/Before.sass

@@ -8,6 +8,7 @@
 			display: grid
 			grid-template-columns: repeat(auto-fill, 360px)
 			justify-content: space-between
+			row-gap: 50px
 			.before__item
 				h1
 					color: $color
@@ -18,4 +19,9 @@
 					color: $color
 					opacity: 0.7
 					line-height: 28px
-					font: 400 18px $font
+					font: 400 18px $font
+@media screen and (width <= 755px)
+	.befores
+		justify-content: center !important
+		.before__item
+			text-align: center

src/Components/Feedback/Feedback.sass

@@ -0,0 +1,65 @@
+@import "./../../styles/_option"
+.feedback
+	background-color: $accent
+	min-height: 460px
+	width: 100%
+
+	color: $background
+	overflow: hidden
+
+	display: inline-block
+	position: relative
+
+	margin-bottom: -6px
+	.img
+		position: absolute
+		width: 100%
+		bottom: 0px
+		img
+			width: 100%
+
+	.feedback__wrapper
+		display: flex
+		justify-content: space-between
+		padding-bottom: 40px
+		.feedback__form
+			position: relative
+			z-index: 3
+			margin-top: 87px
+			display: grid
+			row-gap: 10px
+			width: min(100%, 500px)
+			button
+				width: 100%
+				height: 64px
+				background-color: $black
+				border-radius: 5px
+				transition: transform .4s
+				&:hover
+					transform: scale(0.98)
+			label
+				width: 100%
+				input
+					color: $color
+					background-color: #F6F6F6
+					border-radius: 5px
+					height: 64px
+					padding: 20px
+					width: 100%
+		.feedback__text
+			margin-top: 106px
+			h1
+				width: 350px
+				font: 600 36px $font
+			p
+				font: 400 20px $font
+@media screen and (width <= 670px)
+	.feedback__wrapper
+		display: grid !important
+		justify-content: center !important
+		padding: 40px 10px
+		.feedback__text
+			text-align: center
+			margin: 0 !important
+			h1
+				width: 100% !important

src/Components/Feedback/Feedback.tsx

@@ -0,0 +1,20 @@
+import "./Feedback.sass"
+import Form from "./Form/Form"
+const Feedback = () => {
+	return (
+		<section className='feedback'>
+			<div className='container feedback__wrapper'>
+				<section className='feedback__text'>
+					<h1>Запишитесь на курс со скидкой 10%</h1>
+					<p>Акция действительна до 10 марта 2022 года</p>
+				</section>
+				<Form />
+			</div>
+			<div className='img'>
+				<img className='feedback__img' src='/procent.svg' alt='' />
+			</div>
+		</section>
+	)
+}
+
+export default Feedback

src/Components/Feedback/Form/Form.tsx

@@ -0,0 +1,51 @@
+import { useForm } from "react-hook-form"
+import { IForm } from "../../../types/form.types"
+
+const Form = () => {
+	const {
+		register,
+		reset,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<IForm>({ mode: "onChange" })
+
+	return (
+		<form className='feedback__form' onSubmit={handleSubmit(() => reset())}>
+			<label>
+				{errors.name && <p>{errors.name.message}</p>}
+				<input
+					type='text'
+					placeholder='Имя'
+					{...register("name", { required: "Введите имя" })}
+				/>
+			</label>
+			<label>
+				{errors.phone && <p>{errors.phone.message}</p>}
+				<input
+					type='text'
+					placeholder='Телефон'
+					{...register("phone", { required: "Введите телефон" })}
+				/>
+			</label>
+			<label>
+				{errors.email && <p>{errors.email.message}</p>}
+				<input
+					type='email'
+					placeholder='E-mail'
+					{...register("email", {
+						pattern: {
+							message: "Введите валидный E-mail!",
+
+							value:
+								/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+						},
+						required: "Введите E-mail",
+					})}
+				/>
+			</label>
+			<button>Оформить заявку</button>
+		</form>
+	)
+}
+
+export default Form

src/Components/Info/Statistics/Statistics.sass

@@ -3,6 +3,7 @@
 	display: grid
 	justify-content: space-between
 	margin-top: 60px
+	row-gap: 50px
 	grid-template-columns: repeat(auto-fill, 290px)
 	.statistic
 
@@ -18,4 +19,9 @@
 			width: 100%
 			line-height: 28px
 			color: $black
-			opacity: 0.7
+			opacity: 0.7
+@media screen and (width <= 615px)
+	.statistics
+		justify-content: center !important
+		.statistic
+			text-align: center

src/Components/Layout/Footer/Footer.sass

@@ -12,8 +12,15 @@
 
 	.footer__title
 		h1
-			font: 700 30px $font
+			font: 700 clamp(18px, 5vw, 30px) $font
 			line-height: 48px
 		h3
 			font: 400 16px $font
-			color: $gray
+			color: $gray
+@media screen and (width <= 700px)
+	.footer
+		height: 197px
+		display: grid
+		justify-content: center
+		row-gap: 20px
+		text-align: center

src/Components/Layout/Header/Header.sass

@@ -14,10 +14,26 @@
 	z-index: 999
 	.header__title
 		@include title()
+	.header-mobile__nav
+		display: none
 	.header__nav
 		display: flex
 		column-gap: 40px
 		.header__link
 			color: $background
 			font: 400 20px $font
-
+
+@media screen and (width <= 1040px)
+	.header
+		padding: 10px
+		.phone
+			display: none !important
+		.header-mobile__nav
+			display: flex !important
+			button
+				width: 44px
+				height: 44px
+				font-size: 30px
+
+		.header__nav
+			display: none !important