add animation

.env

@@ -1,2 +1,2 @@
 VITE_URL="robo-school"
-VITE_NODE_ENV="development"
+VITE_NODE_ENV="production"

src/Components/Before/Before.tsx

@@ -1,17 +1,31 @@
+import { motion } from "framer-motion"
+import { blockAnim } from "../../constants/animation"
 import Title from "../ui/Title/Title"
 import "./Before.sass"
 import BeforeItem from "./BeforeItem/BeforeItem"
 import { beforeData } from "./before.data"
+
 const Before = () => {
 	return (
 		<div className='before__wrapper'>
 			<div className='container before'>
 				<Title>Что вы получите после курса</Title>
-				<section className='befores'>
+				<motion.section
+					className='befores'
+					initial='hidden'
+					viewport={{ amount: 0.2, once: true }}
+					whileInView='visible'
+				>
 					{beforeData.map(({ text, title }, index) => (
-						<BeforeItem text={text} title={title} key={index} />
+						<BeforeItem
+							variants={blockAnim}
+							custom={index}
+							text={text}
+							title={title}
+							key={index}
+						/>
 					))}
-				</section>
+				</motion.section>
 			</div>
 		</div>
 	)

src/Components/Before/BeforeItem/BeforeItem.tsx

@@ -1,13 +1,16 @@
-import { FC } from "react"
+import { motion } from "framer-motion"
+import { FC, LegacyRef, forwardRef } from "react"
 import { IBefore } from "../before.data"
 
-const BeforeItem: FC<IBefore> = ({ text, title }) => {
-	return (
-		<section className='before__item'>
-			<h1>{title}</h1>
-			<p>{text}</p>
-		</section>
-	)
-}
-
+const MBeforeItem: FC<IBefore> = forwardRef(
+	({ text, title }, ref: LegacyRef<HTMLElement>) => {
+		return (
+			<section className='before__item' ref={ref}>
+				<h1>{title}</h1>
+				<p>{text}</p>
+			</section>
+		)
+	}
+)
+const BeforeItem = motion(MBeforeItem)
 export default BeforeItem

src/Components/Feedback/Feedback.tsx

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

src/Components/Feedback/Img/Img.tsx

@@ -0,0 +1,15 @@
+import { IMG_URL } from "../../../constants/sys"
+
+const Img = () => {
+	return (
+		<div className='img'>
+			<img
+				className='feedback__img'
+				src={`${IMG_URL}procent.svg`}
+				alt='Procents'
+			/>
+		</div>
+	)
+}
+
+export default Img

src/Components/Feedback/Text/Text.tsx

@@ -0,0 +1,22 @@
+import { motion } from "framer-motion"
+import { textAnim } from "../../../constants/animation"
+
+const Text = () => {
+	return (
+		<motion.section
+			className='feedback__text'
+			initial='hidden'
+			viewport={{ amount: 0.2, once: true }}
+			whileInView='visible'
+		>
+			<motion.h1 variants={textAnim} custom={1}>
+				Запишитесь на курс со скидкой 10%
+			</motion.h1>
+			<motion.p variants={textAnim} custom={2}>
+				Акция действительна до 10 марта 2022 года
+			</motion.p>
+		</motion.section>
+	)
+}
+
+export default Text

src/Components/Info/Info.tsx

@@ -1,15 +1,23 @@
+import { motion } from "framer-motion"
+import { textAnim } from "../../constants/animation"
 import "./Info.sass"
 import Statistics from "./Statistics/Statistics"
+
 const Info = () => {
 	return (
 		<div>
-			<section className='container info'>
-				<p>
+			<motion.section
+				initial='hidden'
+				viewport={{ amount: 0.1, once: true }}
+				whileInView='visible'
+				className='container info'
+			>
+				<motion.p custom={1} variants={textAnim}>
 					<span>Robo School</span> – учреждение для формирования кадрового
 					педагогического резерва в сфере робототехники программирования
-				</p>
+				</motion.p>
 				<Statistics />
-			</section>
+			</motion.section>
 		</div>
 	)
 }

src/Components/Info/Statistics/Statistic/Statistic.tsx

@@ -1,13 +1,16 @@
-import { FC } from "react"
+import { motion } from "framer-motion"
+import { FC, LegacyRef, forwardRef } from "react"
 import { IStatistic } from "../statistics.data"
 
-const Statistic: FC<IStatistic> = ({ count, text }) => {
-	return (
-		<section className='statistic'>
-			<h1>{count.toLocaleString()}</h1>
-			<p>{text}</p>
-		</section>
-	)
-}
-
+const MStatistic: FC<IStatistic> = forwardRef(
+	({ count, text }, ref: LegacyRef<HTMLElement>) => {
+		return (
+			<section className='statistic' ref={ref}>
+				<h1>{count.toLocaleString()}</h1>
+				<p>{text}</p>
+			</section>
+		)
+	}
+)
+const Statistic = motion(MStatistic)
 export default Statistic

src/Components/Info/Statistics/Statistics.tsx

@@ -1,11 +1,18 @@
+import { blockAnim } from "../../../constants/animation"
 import Statistic from "./Statistic/Statistic"
 import { statisticsData } from "./statistics.data"
 import "./Statistics.sass"
 const Statistics = () => {
 	return (
 		<section className='statistics'>
 			{statisticsData.map(({ count, text }, index) => (
-				<Statistic count={count} text={text} key={index} />
+				<Statistic
+					variants={blockAnim}
+					custom={index}
+					count={count}
+					text={text}
+					key={index}
+				/>
 			))}
 		</section>
 	)

src/Components/Landing/Landing.tsx

@@ -1,18 +1,30 @@
+import { motion } from "framer-motion"
+import { textAnim } from "../../constants/animation"
 import { IMG_URL } from "../../constants/sys"
 import Button from "../ui/Button/Button"
 import "./Landing.sass"
+
 const Landing = () => {
 	return (
 		<div className='landing'>
 			<div className='container'>
-				<section className='landing__title'>
-					<h1>ROBO SCHOOL</h1>
-					<p>
+				<motion.section
+					initial='hidden'
+					viewport={{ once: true }}
+					whileInView='visible'
+					className='landing__title'
+				>
+					<motion.h1 custom={2} variants={textAnim}>
+						ROBO SCHOOL
+					</motion.h1>
+					<motion.p custom={4} variants={textAnim}>
 						Курсы повышения квалификации по робототехнике для педагогов
 						начальной школы
-					</p>
-					<Button>Записаться на пробы</Button>
-				</section>
+					</motion.p>
+					<Button custom={4} variants={textAnim}>
+						Записаться на пробы
+					</Button>
+				</motion.section>
 				<img alt='logo' src={`${IMG_URL}landing.svg`}></img>
 			</div>
 		</div>

src/Components/Packets/Packet/Packet.tsx

@@ -1,22 +1,25 @@
-import { FC } from "react"
+import { motion } from "framer-motion"
+import { FC, LegacyRef, forwardRef } from "react"
 import Button from "../../ui/Button/Button"
 import { IPacket } from "../packet.data"
 import "./Packet.sass"
-const Packet: FC<IPacket> = ({ description, isActive, price, rang }) => {
-	return (
-		<article className={isActive ? "packet active" : "packet"}>
-			<h3 className='packet__rang'>– {rang} –</h3>
-			<div className='packet__text'>
-				<div>
-					<h1>{price.toLocaleString()} ₽</h1>
-					<p>{description}</p>
+const MPacket: FC<IPacket> = forwardRef(
+	({ description, isActive, price, rang }, ref: LegacyRef<HTMLElement>) => {
+		return (
+			<article className={isActive ? "packet active" : "packet"} ref={ref}>
+				<h3 className='packet__rang'>– {rang} –</h3>
+				<div className='packet__text'>
+					<div>
+						<h1>{price.toLocaleString()} ₽</h1>
+						<p>{description}</p>
+					</div>
 				</div>
-			</div>
-			<div className='packet__btn-cont'>
-				<Button>Оставить заявку</Button>
-			</div>
-		</article>
-	)
-}
-
+				<div className='packet__btn-cont'>
+					<Button>Оставить заявку</Button>
+				</div>
+			</article>
+		)
+	}
+)
+const Packet = motion(MPacket)
 export default Packet

src/Components/Packets/Packets.tsx

@@ -1,22 +1,33 @@
+import { motion } from "framer-motion"
+import { blockAnim } from "../../constants/animation"
 import Title from "../ui/Title/Title"
 import Packet from "./Packet/Packet"
 import "./Packets.sass"
 import { packetsData } from "./packet.data"
+
 const Packets = () => {
 	return (
 		<div className='container'>
 			<Title>Выберите нужный пакет</Title>
-			<section className='packets'>
+
+			<motion.section
+				className='packets'
+				initial='hidden'
+				viewport={{ amount: 0.2, once: true }}
+				whileInView='visible'
+			>
 				{packetsData.map(({ description, isActive, price, rang }, index) => (
 					<Packet
+						variants={blockAnim}
+						custom={index}
 						description={description}
 						isActive={isActive}
 						rang={rang}
 						price={price}
 						key={index}
 					/>
 				))}
-			</section>
+			</motion.section>
 		</div>
 	)
 }

src/Components/ui/Button/Button.tsx

@@ -1,13 +1,25 @@
-import { ButtonHTMLAttributes, FC, PropsWithChildren } from "react"
+import { motion } from "framer-motion"
+import {
+	ButtonHTMLAttributes,
+	FC,
+	LegacyRef,
+	PropsWithChildren,
+	forwardRef,
+} from "react"
 import "./Button.sass"
-const Button: FC<
-	PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>
-> = ({ children, className, ...rest }) => {
-	return (
-		<button {...rest} className={className ? `${className} btn` : "btn"}>
-			{children}
-		</button>
+const MButton: FC<PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>> =
+	forwardRef(
+		({ children, className, ...rest }, ref: LegacyRef<HTMLButtonElement>) => {
+			return (
+				<button
+					ref={ref}
+					{...rest}
+					className={className ? `${className} btn` : "btn"}
+				>
+					{children}
+				</button>
+			)
+		}
 	)
-}
-
+const Button = motion(MButton)
 export default Button

src/Components/ui/Title/Title.tsx

@@ -1,5 +1,15 @@
-import type { PropsWithChildren } from "react"
-import "./Title.sass"
-export default function Title({ children }: PropsWithChildren) {
-	return <h1 className='title'>{children}</h1>
+import { motion } from "framer-motion"
+import { FC, LegacyRef, ReactNode, forwardRef } from "react"
+interface IProps {
+	children: ReactNode
+	ref: LegacyRef<HTMLHeadingElement>
 }
+const MTitle: FC<IProps> = forwardRef(({ children, ref }) => {
+	return (
+		<h1 className='title' ref={ref}>
+			{children}
+		</h1>
+	)
+})
+const Title = motion(MTitle)
+export default Title