add additional components

package.json

@@ -9,10 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^10.16.5",
     "gsap": "^3.12.2",
     "next": "13.5.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "tailwind-variants": "^0.1.18"
   },
   "devDependencies": {
     "autoprefixer": "^10",

src/components/IndexPage/hero.jsx

@@ -3,36 +3,67 @@ import Image from "next/image";
 import Delivery from "@/../public/delivery.svg";
 import Card from "@/components/reusable/card";
 import Input from "@/components/reusable/input";
-import {useRef, useEffect} from "react";
 import BoxImage from '@/../public/box.svg';
 import DeliveryIcon from '@/../public/delivery-icon.svg'
 import LocationImg from '@/../public/location.svg'
 
-import gsap from 'gsap'
+import {motion} from 'framer-motion'
 
+const BlockAnimation = {
+    'hidden': {
+        opacity: 0
+    },
+    'show': {
+        opacity: 1,
+        transition: {
+            delayChildren: .1,
+            staggerChildren: .4
+        }
+    }
+}
+
+const ItemAnimationLeft = {
+    hidden: {
+        opacity: 0,
+        x: -100
+    },
+    show: {
+        opacity: 1,
+        x: 0
+    }
+}
+
+const ItemAnimationRight = {
+    hidden: {
+        opacity: 0,
+        x: 100
+    },
+    show: {
+        opacity: 1,
+        x: 0
+    }
+}
+
+const ItemAnimationTop = {
+    hidden: {
+        opacity: 0,
+        y: 100
+    },
+    show: {
+        opacity: 1,
+        y: 0
+    }
+}
 
 const Hero = () => {
-
-    // Animations
-    const cardOne = useRef(null);
-    const cardTwo = useRef(null);
-    const cardThree = useRef(null);
-    const cardFour = useRef(null);
-    useEffect(() => {
-        console.log('i fire once');
-        if (typeof window === 'undefined') return
-        if (!cardOne.current || !cardTwo.current || !cardThree.current || !cardFour.current) return;
-        const timeline = gsap.timeline({repeat: 0})
-        timeline.from(cardOne.current, {x: -100, opacity: 0})
-        timeline.from(cardTwo.current, {x: -100, opacity: 0}, '>-0.3')
-        timeline.from(cardThree.current, {y: 100, opacity: 0}, '<+0.2')
-        timeline.from(cardFour.current, {x: 100, opacity: 0}, '>')
-    }, []);
-
-
     return (<section className={'container mx-auto'}>
-        <div className={'grid grid-rows-3 grid-cols-6 grid-flow-col gap-[20px]'}>
+        <motion.div className={'grid grid-rows-3 grid-cols-6 grid-flow-col gap-[20px]'}
-            <Card innerRef={cardOne} className={"row-span-2 col-span-4"}>
+                    variants={BlockAnimation}
+                    initial={'hidden'}
+                    animate={'show'}>
+            <motion.div className={"row-span-2 col-span-4"}
+                        variants={ItemAnimationLeft}>
+                <Card >
                     <form action='#' className="flex flex-col">
                         <h2 className={'text-title-2 font-inter font-semibold block mb-[40px]'}>Рассчитать
                             доставку</h2>
@@ -51,24 +82,30 @@ const Hero = () => {
                     </form>
 
                 </Card>
-            <Card innerRef={cardTwo} className={"col-span-3"}>
+            </motion.div>
+            <motion.div className={"col-span-3"} variants={ItemAnimationLeft}>
+                <Card >
                     <form action="#">
                         <h3 className={'text-title-3 font-somic font-medium mb-[20px]'}>Отследить посылку</h3>
                         <div className="grid grid-cols-12 gap-[25px]">
                             <Input className={'w-full col-span-10'} placeholder={'Введите трек номер'}></Input>
                             <ButtonRaw
-                            className={'flex justify-center items-center px-[0px] py-[0px] w-full col-span-2'}
+                                className={'flex justify-center items-center px-[0px] py-[0px] w-full col-span-2 rounded-[20px]'}>
-                            rounded={20}>
                                 <Image src={LocationImg} alt={'#'} width={36} height={36}></Image>
                             </ButtonRaw>
                         </div>
                     </form>
                 </Card>
-            <ButtonRaw innerRef={cardThree} className={'flex flex-col justify-center px-4 py-4 items-center'}>
+            </motion.div>
+
+            <motion.div variants={ItemAnimationTop}>
+                <ButtonRaw className={'flex flex-col justify-center px-4 py-4 items-center h-full'}>
                     <span className={'normal-case font-inter text-center mb-2'}>Забери свой подарок!</span>
                     <Image src={BoxImage} alt={'#'} width={108} height={88}></Image>
                 </ButtonRaw>
-            <Card innerRef={cardFour} className="row-span-3 col-span-2">
+            </motion.div>
+            <motion.div className="row-span-3 col-span-2" variants={ItemAnimationRight}>
+                <Card >
                     <div className="flex flex-col justify-center items-center">
                         <h3 className={'font-somic text-title-1'}>Кешбэк 10%</h3>
                         <p className={'text-right mb-4'}>Кешбэк баллами вырастет до 10% после отправки 5 посылок в течении
@@ -77,7 +114,8 @@ const Hero = () => {
                         <Image src={Delivery} width={323} height={306} alt={'delivery'}></Image>
                     </div>
                 </Card>
-        </div>
+            </motion.div>
+        </motion.div>
     </section>)
 }
 export default Hero

src/components/IndexPage/index.jsx

@@ -6,57 +6,7 @@ import Logo from '@/../public/logoBig.png'
 const MainPage = () => {
     return (
         <>
-            <Header/>
-
-            <main className={'mt-[82px] mb-[165px]'}>
                 <Hero/>
-            </main>
-
-            <footer
-                className={'bg-white-p py-[62px] text-black font-somic [&_a]:text-caption [&_h3]:font-bold [&_h3]:text-base'}>
-                <div className="container mx-auto">
-                    <div className="flex justify-between">
-                        <Image src={Logo} width={338} height={140} alt={'logo'}/>
-                        <nav className={'flex flex-col justify-between'}>
-                            <h3>Меню</h3>
-                            <a href="#">О компании</a>
-                            <a href="#">Правила получения</a>
-                            <a href="#">Отследить посылку</a>
-                            <a href="#">Отправить посылку</a>
-                        </nav>
-                        <div className="flex flex-col justify-between">
-                            <h3>Контакты</h3>
-                            <div className="flex text-caption [&_a]:ml-2">Телефон: <a href="tel:+790000000000">+7 (900) 000-00-00</a></div>
-                            <div className="text-caption flex [&_*]:ml-2">Почта: <a href="mailto:example@example.com">+7 (000) 000-00-00</a>
-                            </div>
-                            <div className="text-caption flex [&_*]:ml-2">Адрес: 46865, г.Москва, ул. Ленина 54, д5</div>
-                            <div className="text-caption flex [&_*]:ml-2">Лицензия:</div>
-                        </div>
-                        <div className="flex flex-col">
-                            <h3 className={'mb-2'}>Социальные сети</h3>
-                            <div className="flex">
-                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
-                                     xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        d="M12 2C6.47708 2 2 6.47708 2 12C2 17.5229 6.47708 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47708 17.5229 2 12 2ZM15.8458 13.2823C15.8458 13.2823 16.7302 14.1552 16.9479 14.5604C16.9542 14.5688 16.9573 14.5771 16.9594 14.5812C17.0479 14.7302 17.0688 14.8458 17.025 14.9323C16.9521 15.076 16.7021 15.1469 16.6167 15.1531H15.0542C14.9458 15.1531 14.7188 15.125 14.4437 14.9354C14.2323 14.7875 14.024 14.5448 13.8208 14.3083C13.5177 13.9562 13.2552 13.6521 12.9906 13.6521C12.957 13.652 12.9236 13.6573 12.8917 13.6677C12.6917 13.7323 12.4354 14.0177 12.4354 14.7781C12.4354 15.0156 12.2479 15.1521 12.1156 15.1521H11.4C11.1562 15.1521 9.88646 15.0667 8.76146 13.8802C7.38437 12.4271 6.14479 9.5125 6.13437 9.48542C6.05625 9.29687 6.21771 9.19583 6.39375 9.19583H7.97187C8.18229 9.19583 8.25104 9.32396 8.29896 9.4375C8.35521 9.56979 8.56146 10.0958 8.9 10.6875C9.44896 11.6521 9.78542 12.0437 10.0552 12.0437C10.1058 12.0432 10.1555 12.0303 10.2 12.0062C10.5521 11.8104 10.4865 10.5552 10.4708 10.2948C10.4708 10.2458 10.4698 9.73333 10.2896 9.4875C10.1604 9.30937 9.94062 9.24167 9.80729 9.21667C9.86126 9.1422 9.93236 9.08182 10.0146 9.04062C10.2562 8.91979 10.6917 8.90208 11.124 8.90208H11.3646C11.8333 8.90833 11.9542 8.93854 12.124 8.98125C12.4677 9.06354 12.475 9.28542 12.4448 10.0448C12.4354 10.2604 12.426 10.5042 12.426 10.7917C12.426 10.8542 12.4229 10.9208 12.4229 10.9917C12.4125 11.3781 12.4 11.8167 12.6729 11.9969C12.7085 12.0192 12.7497 12.0311 12.7917 12.0312C12.8865 12.0312 13.1719 12.0312 13.9448 10.7052C14.1832 10.2784 14.3903 9.83487 14.5646 9.37812C14.5802 9.35104 14.626 9.26771 14.6802 9.23542C14.7202 9.21504 14.7645 9.20467 14.8094 9.20521H16.6646C16.8667 9.20521 17.0052 9.23542 17.0312 9.31354C17.0771 9.4375 17.0229 9.81562 16.176 10.9625L15.7979 11.4615C15.0302 12.4677 15.0302 12.5188 15.8458 13.2823Z"
-                                        fill="#EB275E"/>
-                                </svg>
-                                <span>@milya.russian</span>
-                            </div>
-
-                            <div className="flex">
-                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
-                                     xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16.64 8.8C16.49 10.38 15.84 14.22 15.51 15.99C15.37 16.74 15.09 16.99 14.83 17.02C14.25 17.07 13.81 16.64 13.25 16.27C12.37 15.69 11.87 15.33 11.02 14.77C10.03 14.12 10.67 13.76 11.24 13.18C11.39 13.03 13.95 10.7 14 10.49C14.0069 10.4582 14.006 10.4252 13.9973 10.3938C13.9886 10.3624 13.9724 10.3337 13.95 10.31C13.89 10.26 13.81 10.28 13.74 10.29C13.65 10.31 12.25 11.24 9.52 13.08C9.12 13.35 8.76 13.49 8.44 13.48C8.08 13.47 7.4 13.28 6.89 13.11C6.26 12.91 5.77 12.8 5.81 12.45C5.83 12.27 6.08 12.09 6.55 11.9C9.47 10.63 11.41 9.79 12.38 9.39C15.16 8.23 15.73 8.03 16.11 8.03C16.19 8.03 16.38 8.05 16.5 8.15C16.6 8.23 16.63 8.34 16.64 8.42C16.63 8.48 16.65 8.66 16.64 8.8Z"
-                                        fill="#EB275E"/>
-                                </svg>
-                                <span>@milya.russian</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </footer>
         </>
     )
 }

src/components/reusable/buttons.jsx

@@ -1,12 +1,17 @@
 import Image from "next/image";
+import {tv} from "tailwind-variants";
 
 export const ButtonRaw = (props) => {
-    const {rounded, innerRef} = props
+    const {children, className} = props
-    const {children, className: classNameAdd} = props
+    console.log(className)
-    const className = `bg-black text-white uppercase font-somic font-medium rounded-[${rounded || '40'}px] `
+
+    const variant = tv({
+        base: `bg-black text-white uppercase font-somic font-medium rounded-[40px]`,
+    })
+
     return (
 
-    <a ref={innerRef} href={'#'} className={className + classNameAdd}>
+    <a href={'#'} className={variant({class: className})}>
         {children}
     </a>
 )}

src/components/reusable/card.jsx

@@ -1,18 +1,21 @@
+import {tv} from "tailwind-variants";
+
 const Card = (props) => {
-    let {className: classNameAdd, theme, innerRef} = props
+    let {className, theme} = props
-    const propsData = {...props, theme: undefined, innerRef: undefined}
+    const propsData = {...props, theme: undefined}
+
+    const variant = tv({
+        base: "bg-white-p rounded-[20px] px-[40px] py-[40px] h-full",
+        variants: {
+            theme: {
+                dark: "bg-black text-white",
+            }
+        }
+    })
 
     theme = theme || 'white'
-
-    const themeClassNames = {
-        'dark': ' bg-black rounded-[20px] px-[40px] py-[40px] text-white',
-        'white': ' bg-white-p rounded-[20px] px-[40px] py-[40px] hover:scale-[101%]'
-    }
-
-    const classNameOrig = themeClassNames[theme]
     return (
-
+        <div {...propsData} className={variant({theme, class: className})}>
-        <div ref={innerRef} {...propsData} className={classNameAdd + classNameOrig}>
             {props.children}
         </div>
     )

src/components/reusable/footer.jsx

@@ -0,0 +1,51 @@
+import Image from "next/image";
+import Logo from "../../../public/logoBig.png";
+
+const Footer = () => (
+    <footer
+        className={'bg-white-p py-[62px] text-black font-somic [&_a]:text-caption [&_h3]:font-bold [&_h3]:text-base'}>
+        <div className="container mx-auto">
+            <div className="flex justify-between">
+                <Image src={Logo} width={338} height={140} alt={'logo'}/>
+                <nav className={'flex flex-col justify-between'}>
+                    <h3>Меню</h3>
+                    <a href="#">О компании</a>
+                    <a href="#">Правила получения</a>
+                    <a href="#">Отследить посылку</a>
+                    <a href="#">Отправить посылку</a>
+                </nav>
+                <div className="flex flex-col justify-between">
+                    <h3>Контакты</h3>
+                    <div className="flex text-caption [&_a]:ml-2">Телефон: <a href="tel:+790000000000">+7 (900) 000-00-00</a></div>
+                    <div className="text-caption flex [&_*]:ml-2">Почта: <a href="mailto:example@example.com">+7 (000) 000-00-00</a>
+                    </div>
+                    <div className="text-caption flex [&_*]:ml-2">Адрес: 46865, г.Москва, ул. Ленина 54, д5</div>
+                    <div className="text-caption flex [&_*]:ml-2">Лицензия:</div>
+                </div>
+                <div className="flex flex-col">
+                    <h3 className={'mb-2'}>Социальные сети</h3>
+                    <div className="flex">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                             xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M12 2C6.47708 2 2 6.47708 2 12C2 17.5229 6.47708 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47708 17.5229 2 12 2ZM15.8458 13.2823C15.8458 13.2823 16.7302 14.1552 16.9479 14.5604C16.9542 14.5688 16.9573 14.5771 16.9594 14.5812C17.0479 14.7302 17.0688 14.8458 17.025 14.9323C16.9521 15.076 16.7021 15.1469 16.6167 15.1531H15.0542C14.9458 15.1531 14.7188 15.125 14.4437 14.9354C14.2323 14.7875 14.024 14.5448 13.8208 14.3083C13.5177 13.9562 13.2552 13.6521 12.9906 13.6521C12.957 13.652 12.9236 13.6573 12.8917 13.6677C12.6917 13.7323 12.4354 14.0177 12.4354 14.7781C12.4354 15.0156 12.2479 15.1521 12.1156 15.1521H11.4C11.1562 15.1521 9.88646 15.0667 8.76146 13.8802C7.38437 12.4271 6.14479 9.5125 6.13437 9.48542C6.05625 9.29687 6.21771 9.19583 6.39375 9.19583H7.97187C8.18229 9.19583 8.25104 9.32396 8.29896 9.4375C8.35521 9.56979 8.56146 10.0958 8.9 10.6875C9.44896 11.6521 9.78542 12.0437 10.0552 12.0437C10.1058 12.0432 10.1555 12.0303 10.2 12.0062C10.5521 11.8104 10.4865 10.5552 10.4708 10.2948C10.4708 10.2458 10.4698 9.73333 10.2896 9.4875C10.1604 9.30937 9.94062 9.24167 9.80729 9.21667C9.86126 9.1422 9.93236 9.08182 10.0146 9.04062C10.2562 8.91979 10.6917 8.90208 11.124 8.90208H11.3646C11.8333 8.90833 11.9542 8.93854 12.124 8.98125C12.4677 9.06354 12.475 9.28542 12.4448 10.0448C12.4354 10.2604 12.426 10.5042 12.426 10.7917C12.426 10.8542 12.4229 10.9208 12.4229 10.9917C12.4125 11.3781 12.4 11.8167 12.6729 11.9969C12.7085 12.0192 12.7497 12.0311 12.7917 12.0312C12.8865 12.0312 13.1719 12.0312 13.9448 10.7052C14.1832 10.2784 14.3903 9.83487 14.5646 9.37812C14.5802 9.35104 14.626 9.26771 14.6802 9.23542C14.7202 9.21504 14.7645 9.20467 14.8094 9.20521H16.6646C16.8667 9.20521 17.0052 9.23542 17.0312 9.31354C17.0771 9.4375 17.0229 9.81562 16.176 10.9625L15.7979 11.4615C15.0302 12.4677 15.0302 12.5188 15.8458 13.2823Z"
+                                fill="#EB275E"/>
+                        </svg>
+                        <span>@milya.russian</span>
+                    </div>
+
+                    <div className="flex">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                             xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16.64 8.8C16.49 10.38 15.84 14.22 15.51 15.99C15.37 16.74 15.09 16.99 14.83 17.02C14.25 17.07 13.81 16.64 13.25 16.27C12.37 15.69 11.87 15.33 11.02 14.77C10.03 14.12 10.67 13.76 11.24 13.18C11.39 13.03 13.95 10.7 14 10.49C14.0069 10.4582 14.006 10.4252 13.9973 10.3938C13.9886 10.3624 13.9724 10.3337 13.95 10.31C13.89 10.26 13.81 10.28 13.74 10.29C13.65 10.31 12.25 11.24 9.52 13.08C9.12 13.35 8.76 13.49 8.44 13.48C8.08 13.47 7.4 13.28 6.89 13.11C6.26 12.91 5.77 12.8 5.81 12.45C5.83 12.27 6.08 12.09 6.55 11.9C9.47 10.63 11.41 9.79 12.38 9.39C15.16 8.23 15.73 8.03 16.11 8.03C16.19 8.03 16.38 8.05 16.5 8.15C16.6 8.23 16.63 8.34 16.64 8.42C16.63 8.48 16.65 8.66 16.64 8.8Z"
+                                fill="#EB275E"/>
+                        </svg>
+                        <span>@milya.russian</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+)
+export default Footer;

src/components/reusable/header.jsx

@@ -2,45 +2,63 @@ import Image from "next/image";
 import logoMin from '@/../public/logo-min.png'
 import {ButtonHref} from "@/components/reusable/buttons";
 import {useEffect, useRef} from "react";
-import gsap from "gsap";
+import {motion} from 'framer-motion';
+import Link from "next/link";
+
+const LogoAnimation = {
+    hidden: {
+        opacity: 0,
+        x: -100
+    },
+    show: {
+        opacity: 1,
+        x: 0,
+        transition: {
+            staggerChildren: .4
+        }
+    }
+}
+const AnimationNavContainer = {...LogoAnimation}
+const AnimationNavItems = {
+    hidden: {
+        opacity: 0,
+        y: -10
+    },
+    show: {
+        opacity: 1,
+        y: 0
+    }
+}
 
 const LogoHeader = () => {
-    const ref = useRef()
-    useEffect(() => {
-        gsap.fromTo(ref.current, {
-            x: -100, opacity: 0
-        }, {x: 0, opacity: 1})
-    }, [])
-
     return (
-        <div ref={ref}
+        <motion.div variants={LogoAnimation} initial={'hidden'} animate={'show'}
-            className="inline-flex text-caption pl-[15px] pr-[41px] py-[12px] border-[1px] border-black rounded-[40px] items-center">
+                    >
+            <Link href={'/'} className={"inline-flex text-caption pl-[15px] pr-[41px] py-[12px] border-[1px] border-black rounded-[40px] items-center"}>
                 <div className="bg-black px-[37px] py-[10px] max-w-fit rounded-[80px]">
                     <Image src={logoMin} width={55} height={36} alt={'logo'}/>
                 </div>
                 <span className={'ml-[83px] max-w-[189px] text-right'}>Курьерская доставка по России</span>
-        </div>
+            </Link>
+        </motion.div>
     )
 }
 
 const NavBar = () => {
 
-
-        useEffect(() => {
-            gsap.fromTo('.header__link', {
-                y: -10, opacity: 0,
-            }, {y: 0, opacity: 1})
-        }, [])
-
     return (
-
+        <motion.nav variants={AnimationNavContainer} initial={'hidden'} animate={'show'}
-
-            <nav
                     className={'[&_a]:uppercase [&_a]:text-black inline-flex flex-1 justify-between items-center font-somic font-medium text-base px-[70px]'}>
-                <a className={'header__link'} href="#">О компании</a>
+            <motion.div variants={AnimationNavItems} >
-                <a className={'header__link'} href="#">Правила получения</a>
+                <Link href={'/about'}>О компании</Link>
-                <a className={'header__link'} href="#">Контакты</a>
+            </motion.div>
-            </nav>
+
+            <motion.div variants={AnimationNavItems}><Link
+                href={'#'}>Правила получения</Link>
+            </motion.div>
+            <motion.div variants={AnimationNavItems}><Link href={'#'}>Контакты</Link>
+            </motion.div>
+        </motion.nav>
     )
 }
 
@@ -48,7 +66,9 @@ const LogoHeader = () => {
     <header className={'container mx-auto pt-[50px] flex items-center justify-between'}>
         <LogoHeader/>
         <NavBar/>
+        <motion.div initial={{x: 100, opacity: 0}} animate={{x: 0, opacity: 1}} transition={{delay: 1.2}}>
             <ButtonHref title={'Отследить посылку'} className={'rounded-[40px]'}/>
+        </motion.div>
     </header>
 )
 

src/pages/_app.js

@@ -1,6 +1,18 @@
 import '@/styles/fonts.css'
 import '@/styles/globals.css'
+import Header from "@/components/reusable/header";
+import Footer from "@/components/reusable/footer";
 
 export default function App({Component, pageProps}) {
-  return <Component {...pageProps} />
+
+    return (
+        <>
+            <Header/>
+            <main className={'mt-[82px] mb-[165px] min-h-screen'}>
+                <Component {...pageProps} />
+            </main>
+            <Footer/>
+        </>
+
+    )
 }

src/pages/about.js

@@ -0,0 +1,177 @@
+import Card from "@/components/reusable/card";
+import Image from 'next/image';
+import {ButtonHref, ButtonRaw} from "@/components/reusable/buttons";
+import {motion} from "framer-motion";
+
+
+const contentData = {
+    heroBlock: {
+        title: "Полностью Онлайн, всегда рядом",
+        subBlocks: [
+            {
+                title: "Нет отеделний и очередей",
+                text: "Все заказы обрабатываются онлайн. Курьер приедет и заберет вашу поссылку",
+                image: <svg className={'group-hover:fill-pink2 fill-[rgba(40,_40,_40,_.5)] transition-colors'} width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
+                    <g clip-path="url(#clip0_230_460)">
+                        <path d="M60.667 26.2501H35.0003V49.5834H32.0837V61.2501H14.5837C13.8101 61.2501 13.0682 60.9428 12.5213 60.3958C11.9743 59.8488 11.667 59.107 11.667 58.3334V32.0834H2.91699L33.0374 4.70176C33.5744 4.21315 34.2743 3.94238 35.0003 3.94238C35.7263 3.94238 36.4263 4.21315 36.9632 4.70176L60.667 26.2501ZM40.8337 32.0834H67.0837V52.5001H40.8337V32.0834ZM37.917 61.2501H70.0003V55.4168H37.917V61.2501Z" />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_230_460">
+                            <rect width="70" height="70" fill="white"/>
+                        </clipPath>
+                    </defs>
+                </svg>
+
+            },
+            {
+                title: "Безопасная доставкаи",
+                text: "Ваш груз в надежных руках. Мы гарантируем его безопасность.",
+                image: <svg className={'group-hover:fill-pink2 fill-[rgba(40,_40,_40,_.5)] transition-colors'} width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
+                    <g clip-path="url(#clip0_232_467)">
+                        <path d="M26.25 28.2715L35 24.9902L43.75 28.2715V35.0819C43.7497 36.7069 43.2968 38.2998 42.4422 39.6819C41.5876 41.0641 40.3649 42.1809 38.9113 42.9073L35 44.8644L31.0858 42.9102C29.6318 42.183 28.4092 41.0651 27.555 39.6818C26.7009 38.2986 26.249 36.7047 26.25 35.079V28.2715Z" />
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M37.0475 6.4019C35.7274 5.90705 34.2727 5.90705 32.9525 6.4019L12.5358 14.0582C11.4237 14.475 10.4653 15.2215 9.78878 16.1977C9.11226 17.1739 8.74985 18.3334 8.75 19.5211V35.1632C8.74989 40.0381 10.1073 44.8169 12.6702 48.9638C15.2331 53.1108 18.9001 56.4621 23.2604 58.6423L33.0429 63.5307C33.6505 63.8346 34.3206 63.9928 35 63.9928C35.6794 63.9928 36.3495 63.8346 36.9571 63.5307L46.7396 58.6394C51.0999 56.4592 54.7669 53.1079 57.3298 48.9609C59.8927 44.8139 61.2501 40.0352 61.25 35.1602V19.524C61.2501 18.3363 60.8877 17.1768 60.2112 16.2006C59.5347 15.2244 58.5763 14.478 57.4642 14.0611L37.0475 6.40482V6.4019ZM36.5371 19.3373C35.5461 18.9654 34.4539 18.9654 33.4629 19.3373L23.2546 23.164C22.4206 23.4769 21.7021 24.037 21.1949 24.7693C20.6878 25.5015 20.4163 26.3712 20.4167 27.2619V35.0786C20.4162 37.7873 21.1702 40.4427 22.5941 42.747C24.018 45.0513 26.0555 46.9135 28.4783 48.1248L33.3696 50.569C33.8758 50.8221 34.434 50.9539 35 50.9539C35.566 50.9539 36.1242 50.8221 36.6304 50.569L41.5217 48.1248C43.944 46.9137 45.9813 45.052 47.4051 42.7482C48.829 40.4445 49.5832 37.7897 49.5833 35.0815V27.2619C49.5837 26.3712 49.3122 25.5015 48.8051 24.7693C48.2979 24.037 47.5794 23.4769 46.7454 23.164L36.5371 19.3373Z" />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_232_467">
+                            <rect width="70" height="70"/>
+                        </clipPath>
+                    </defs>
+                </svg>
+
+
+            },
+            {
+                title: "Надежные авиаперевозки по всей России",
+                text: "Наша транспортная компания испоьзует авиацию в отличии от ЖД-грузоперевозок. Профессионализм, сохранность и скорость - наши главные приоритеты.",
+                image: <svg className={'group-hover:fill-pink2 fill-[rgba(40,_40,_40,_.5)] transition-colors'} width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M40.8333 26.0956L64.1667 40.8335V46.6668L40.8333 39.2993V54.9327L49.5833 59.7918V64.1668L36.4583 61.2502L23.3333 64.1668V59.7918L32.0833 54.9297V39.2964L8.75 46.6668V40.8335L32.0833 26.0956V10.2085C32.0833 9.04817 32.5443 7.93538 33.3647 7.1149C34.1852 6.29443 35.298 5.8335 36.4583 5.8335C37.6187 5.8335 38.7315 6.29443 39.5519 7.1149C40.3724 7.93538 40.8333 9.04817 40.8333 10.2085V26.0956Z" />
+                </svg>
+
+            },
+            {
+                title: "Доступные цены",
+                text: "Оптимальные тарифы для каждого клиента.",
+                image: <svg className={'group-hover:fill-pink2 fill-[rgba(40,_40,_40,_.5)] transition-colors'} width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M47.0665 13.7899L52.404 19.1274C60.244 26.9732 64.1669 30.8932 64.1669 35.7641C64.1669 40.6378 60.244 44.5578 52.4011 52.4007C44.5582 60.2495 40.6382 64.1666 35.7644 64.1666C30.8936 64.1666 26.9707 60.2437 19.1278 52.4007L13.7903 47.0632C9.28401 42.557 7.02943 40.3053 6.19234 37.3799C5.35234 34.4545 6.06984 31.3482 7.50484 25.1387L8.33026 21.557C9.53484 16.3303 10.1386 13.717 11.9265 11.9262C13.7173 10.1382 16.3307 9.53449 21.5573 8.3299L25.139 7.50157C31.3515 6.06949 34.4548 5.35199 37.3803 6.18907C40.3057 7.02907 42.5603 9.28365 47.0665 13.7899ZM32.5123 41.7899C30.5494 39.8299 30.564 37.0124 31.7394 34.7812C31.4484 34.3608 31.3138 33.8519 31.359 33.3427C31.4042 32.8335 31.6263 32.3562 31.9867 31.9936C32.3472 31.6311 32.8232 31.4063 33.3321 31.3582C33.8411 31.3101 34.3508 31.4417 34.7728 31.7303C35.7644 31.2053 36.8523 30.9253 37.9373 30.937C38.5175 30.9424 39.0718 31.1781 39.4782 31.5921C39.8846 32.0062 40.1098 32.5647 40.1044 33.1449C40.099 33.7251 39.8634 34.2793 39.4493 34.6857C39.0352 35.0921 38.4767 35.3174 37.8965 35.312C37.2212 35.3369 36.5829 35.6272 36.1203 36.1199C34.9915 37.2487 35.2861 38.3803 35.604 38.6982C35.9248 39.0162 37.0536 39.3107 38.1823 38.182C40.469 35.8953 44.4182 35.137 46.9469 37.6657C48.9098 39.6287 48.8953 42.4462 47.7198 44.6774C48.009 45.0978 48.1421 45.6061 48.0961 46.1142C48.0501 46.6224 47.8279 47.0985 47.468 47.4601C47.1081 47.8218 46.6331 48.0463 46.1251 48.0947C45.6172 48.1431 45.1083 48.0125 44.6865 47.7253C43.3776 48.4432 41.8594 48.6825 40.3932 48.402C39.8246 48.2852 39.3258 47.9473 39.0063 47.4627C38.6869 46.9781 38.573 46.3864 38.6898 45.8178C38.8067 45.2493 39.1445 44.7504 39.6292 44.431C40.1138 44.1115 40.7055 43.9977 41.274 44.1145C41.7903 44.2224 42.6244 44.0532 43.339 43.3387C44.4678 42.207 44.1732 41.0782 43.8553 40.7603C43.5344 40.4424 42.4057 40.1478 41.2769 41.2766C38.9903 43.5632 35.0411 44.3216 32.5123 41.7899ZM29.2282 30.0212C29.7698 29.4794 30.1993 28.8362 30.4924 28.1284C30.7854 27.4206 30.9362 26.662 30.936 25.896C30.9359 25.1299 30.7849 24.3714 30.4916 23.6637C30.1983 22.956 29.7685 22.313 29.2267 21.7714C28.6849 21.2298 28.0418 20.8002 27.334 20.5072C26.6262 20.2141 25.8676 20.0634 25.1015 20.0635C24.3355 20.0636 23.5769 20.2147 22.8692 20.5079C22.1615 20.8012 21.5185 21.231 20.9769 21.7728C19.8831 22.867 19.2688 24.3509 19.2691 25.898C19.2693 27.4452 19.8842 28.9288 20.9784 30.0226C22.0726 31.1164 23.5564 31.7307 25.1036 31.7305C26.6507 31.7302 28.1344 31.1153 29.2282 30.0212Z" />
+                </svg>
+
+            },
+        ]
+    }
+}
+
+const SubBlock = ({title, text, image}) => (
+    <div className={'flex [&_div]:mr-4 group'}>
+        <div className="bg-white flex w-fit h-fit p-4 rounded-[20px] fill-black">
+            {image}
+        </div>
+        <div>
+            <h2 className={"text-title-3 font-bold opacity-50 group-hover:opacity-100 transition-opacity"}>{title}</h2>
+            <p className={'text-base opacity-50 group-hover:opacity-100 transition-opacity'}>{text}</p>
+        </div>
+
+    </div>
+)
+
+
+const ValuesAnimationVariants = {
+    hidden: {
+        opacity: 0
+    },
+    show: {
+        opacity: 1,
+        when: 'beforeChildren',
+        transition: {
+            staggerChildren: 0.3
+        }
+    }
+}
+
+const ValuesItemsAnimationVariants = {
+    hidden: {
+        x: -100,
+        opacity: 0
+    },
+    show: {
+        x: 0,
+        opacity: 1
+    }
+}
+
+const HeroBlock = () => (
+    <Card className={"text-black mb-16"}>
+        <motion.h1 initial={{y:-100, opacity: 0}} animate={{y: 0, opacity: 1}} className={'text-title-2 text-center font-bold font-somic mb-8'}>Полностью Онлайн. Всегда рядом</motion.h1>
+        <div className={'grid grid-cols-2 grid-rows-2 grid-flow-col gap-8'}>
+            {contentData.heroBlock.subBlocks.map((elem, idx) => (
+                <motion.div key={elem.title} initial={{x: [0, 1].includes(idx) ? -100 : 100, opacity: 0}} animate={{x: 0, opacity: 1}} transition={{delay: .5}}>
+                    <SubBlock title={elem.title} text={elem.text} image={elem.image} />
+                </motion.div>
+            ))}
+        </div>
+    </Card>
+)
+
+const AboutPage = () => {
+    return (
+        <div className={'container mx-auto'}>
+            <HeroBlock/>
+
+            <div className="grid grid-cols-2 gap-4">
+                <motion.div initial={{x: -100, opacity: 0}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}}>
+                    <Card className={"text-black"}>
+                        <h2 className={"text-title-3 font-bold mb-8"}>
+                            Миссия
+                        </h2>
+                        <p className={'text-base'}>С заботой о вас и вашем времени, обеспечиваем быструю и надежную доставку грузов. Высокий уровень
+                            сервиса и Инновационные решения</p>
+                    </Card>
+                </motion.div>
+                <motion.div initial={{x: 100, opacity: 0}} whileInView={{opacity: 1, x: 0}} viewport={{once: true}}>
+                    <Card className={"text-black"}>
+                        <p className={"mb-8 text-base"}>Мы - команда профессионалов в мире доставки, предоставляющая качественные и надежные услуги с 2023 года. Наша миссия - сделать жизнь наших клиентов проще, обеспечивая экспресс-доставку по всей стране.</p>
+                        <ButtonRaw className={"py-3 px-7 bg-gray2 text-base normal-case text-white font-normal"}>
+                            Узнать больше
+                        </ButtonRaw>
+                    </Card>
+                </motion.div>
+            </div>
+
+            <div className="grid grid-cols-4 pt-40 gap-4">
+                <h2 className={'text-title-2 font-bold'}>Ценности</h2>
+                <motion.div variants={ValuesItemsAnimationVariants} initial={'hidden'} whileInView={'show'}>
+                    <Card>
+                        <span className={'flex text-title-2 text-white bg-pink2 w-[60px] justify-center rounded-[10px] mb-4'}>1</span>
+                        <h3 className={'text-title-2 font-bold'}>Качество</h3>
+                        <p className={'text-base'}>– предоставление высокого уровня сервиса с заботой о нашем клиенте</p>
+                    </Card>
+                </motion.div>
+
+                <motion.div variants={ValuesItemsAnimationVariants} initial={'hidden'} whileInView={'show'} transition={{delay: .2}} className={'col-span-2'}>
+                    <Card>
+                        <span className={'flex text-title-2 text-white bg-pink2 w-[60px] justify-center rounded-[10px] mb-4'}>3</span>
+                        <h3 className={'text-title-2 font-bold'}>Клиентоориентированность </h3>
+                        <p className={'text-base'}>– стремимся удовлетворить все потребности и запросы клиентов предоставляя им индивидуальное внимание и качественное обслуживание</p>
+                    </Card>
+                </motion.div>
+
+                <motion.div variants={ValuesItemsAnimationVariants} className={'col-start-2 col-span-2'} initial={'hidden'} whileInView={'show'} transition={{delay: .4}}>
+                    <Card>
+                        <span className={'flex text-title-2 text-white bg-pink2 w-[60px] justify-center rounded-[10px] mb-4'}>2</span>
+                        <h3 className={'text-title-2 font-bold'}>Ответственность</h3>
+                        <p className={'text-base'}>– бережное отношение к грузам клиентов и гарантированное выполнение всех обязательств</p>
+                    </Card>
+                </motion.div>
+
+                <motion.div variants={ValuesItemsAnimationVariants} initial={'hidden'} whileInView={'show'} transition={{delay: .6}}>
+                    <Card>
+                        <span className={'flex text-title-2 text-white bg-pink2 w-[60px] justify-center rounded-[10px] mb-4'}>4</span>
+                        <h3 className={'text-title-2 font-bold'}>Надежность</h3>
+                        <p className={'text-base'}>– обеспечение бесперебойной и безопасной доставки грузов клиентам</p>
+                    </Card>
+                </motion.div>
+
+            </div>
+        </div>
+    )
+}
+export default AboutPage;

tailwind.config.js

@@ -11,7 +11,9 @@ module.exports = {
         black: "#282828",
         "white-p": "#F5F5F5",
         "gray": "#909090",
-        "pink": "#EB275E"
+        "gray2": "#3E515A",
+        "pink": "#EB275E",
+        "pink2": "#BB4263"
       },
       fontFamily: {
         "inter": ["Inter", "sans-serif"],

yarn.lock

@@ -19,6 +19,18 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -1042,6 +1054,15 @@ fraction.js@^4.3.6:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@^10.16.5:
+  version "10.16.5"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.5.tgz#f1ad625adf213a8906f1ea52a31a4ef222f056d5"
+  integrity sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2205,6 +2226,18 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwind-merge@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
+  integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
+
+tailwind-variants@^0.1.18:
+  version "0.1.18"
+  resolved "https://registry.yarnpkg.com/tailwind-variants/-/tailwind-variants-0.1.18.tgz#6ed75fe906ffb1ffa0db703e96d9994ea8cd48fc"
+  integrity sha512-yoydMYm3FbZRw7wak+E2sqwYv2Uo3YWRqVZR03DGqDGm0ytzDrEnWO/Q/GMHdhaz8adOvycKw/bwCgQFCfmfhg==
+  dependencies:
+    tailwind-merge "^1.14.0"
+
 tailwindcss@^3:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"