Update

src/App.js

@@ -3,7 +3,7 @@ import NavMenu from "./Components/NavMenu";
 
 function App() {
   return (
-    <div className="bg-black h-[450vh] text-white font-main">
+    <div className="bg-black text-white font-main">
         <NavMenu />
         <AboutSection />
     </div>

src/Components/AboutSection.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import {motion, useScroll, useMotionValueEvent, useAnimationControls, useTransform} from "framer-motion"
 import yachtImg from "../Images/yacht.jpg"
 import stock_man_img from "../Images/stock_about_placeholder.jpg"
@@ -7,14 +7,25 @@ import telegram_icon from "../Images/telegram_icon.png"
 const AboutSection = () => {
 
     const { scrollYProgress } = useScroll();
+    const serviceBlockRef = useRef(null);
+    const {serviceScrollYProgress} = useScroll(
+        {
+            target: serviceBlockRef,
+            offset: ["end end", "start start"],
+        }
+    );
     const menu_offset = useTransform(scrollYProgress, [0,1], ["-100%", "0%"]);
+    const service_offset = useTransform(scrollYProgress, [0.6,0.8], ["0%", "-20%"]);
+    const private_offset = useTransform(scrollYProgress, [0.6,0.8], ["0%", "30%"]);
     // const menu_offset2 = useTransform(scrollYProgress, [0,1], ["-50%", "0%"]);
     return (
         <>
             <div className='absolute inset-0'>
                 <img src={yachtImg} alt="yacht" className='w-full h-full object-cover brightness-[0.2] contrast-[1.1]' />
             </div>
-            <div className='absolute inset-0 flex justify-center'>
+            <div className='w-full flex justify-center'>
+                <div className='w-full max-w-[1920px] flex flex-col'>
+                    <div className='flex justify-center w-full h-screen relative'>
                         <div className='flex flex-col justify-end w-full h-full max-w-[1920px] gap-8 p-4 pb-[40%] md:gap-16 md:p-12 lg:gap-16 lg:p-12 2xl:gap-28 2xl:p-20'>
                             <div className='flex items-center md:h-[230px] lg:h-[280px]'>
                                 <h1 className='text-4xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl font-bold'>
@@ -28,7 +39,7 @@ const AboutSection = () => {
                             </div>
                         </div>
                     </div>
-            <div className='absolute top-[100vh] left-0 right-0 w-full flex flex-col'>
+                    <div className='w-full flex flex-col'>
                         <div className='flex w-full justify-center items-center overflow-hidden gap-20 border-b-[1px] border-gray-700'>
                             <motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
                                 style={{translateX: menu_offset}}
@@ -58,9 +69,9 @@ const AboutSection = () => {
                                 </div>
                             </div>
                             <div className='w-[49%] px-[7%] flex flex-col gap-16'>
-                        <img src={stock_man_img} alt="man" className='object-cover rounded-[20%] w-full h-full' />
+                                <img src={stock_man_img} alt="man" className='object-cover rounded-[20%] w-full h-[80%]' />
                                 <div className='w-full h-[1px] bg-gray-700 flex-shrink-0'></div>
-                        <div className='w-full h-[20%] flex justify-center items-start text-left'>
+                                <div className='w-full h-[20%] flex-shrink-0 flex justify-center items-start text-left'>
                                     Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                     Placeat tempore aperiam perspiciatis et rerum perferendis harum, 
                                     repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et?
@@ -109,11 +120,11 @@ const AboutSection = () => {
                                 </div>
                             </div>
                         </div>
-                <div className='h-[100vh] w-full px-20 flex gap-12'>
+                        <div ref={serviceBlockRef} className='h-[90vh] w-full px-20 flex gap-12'>
                             <div className='h-full w-[50%] flex flex-col justify-end items-end gap-8'>
-                        <h2 className='text-9xl self-start'>
+                                <motion.h2 className='text-9xl self-start' style={{translateX: private_offset}}>
                                     PRIVATE
-                        </h2>
+                                </motion.h2>
                                 <div className='relative w-[70%] h-[70%] flex bg-white rounded-2xl overflow-hidden group'>
                                     <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
                                     <div className='absolute inset-0 w-full h-full flex justify-center items-center'>
@@ -122,9 +133,9 @@ const AboutSection = () => {
                                 </div>
                             </div>
                             <div className='h-full w-[50%] flex flex-col justify-start gap-8'>
-                        <h2 className='text-9xl text-right'>
+                                <motion.h2 className='text-9xl text-right' style={{translateX: service_offset}}>
                                     SERVICE
-                        </h2>
+                                </motion.h2>
                                 <div className='relative w-[70%] h-[70%] flex bg-white rounded-2xl overflow-hidden group'>
                                     <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
                                     <div className='absolute inset-0 w-full h-full flex justify-center items-center'>
@@ -133,13 +144,42 @@ const AboutSection = () => {
                                 </div>
                             </div>
                         </div>
-                <div className='h-[400px] w-full flex justify-center items-center px-20 border-b-[1px] border-gray-700'>
+                        <div className='h-[400px] w-full flex justify-center items-center px-20'>
                             <p className='text-2xl w-[800px] text-center'>
                                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                                 Quos fugiat aspernatur neque illo molestias reiciendis quia, 
                                 rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima!
                             </p>
                         </div>
+                        <div className='w-full flex flex-col gap-8 h-[50vh] px-20 py-16'>
+                            <h2 className='text-8xl'>Если заинтересовались</h2>
+                            <div className='border-b-[1px] border-gray-700 w-[50%] h-[1px]'></div>
+                            <div className='w-full h-full flex'>
+                                <div className='flex w-[40%] h-full text-2xl'>
+                                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni maiores reiciendis asperiores dolore, 
+                                        illum doloremque placeat atque libero? Incidunt, itaque esse ea non velit exercitationem autem totam aspernatur ad. Nesciunt.
+                                    </p>
+                                </div>
+                            </div>
+                            <button className='w-[250px] h-[60px] text-xl flex-shrink-0 rounded-xl border-[1px] border-gray-700 transition-all duration-300 hover:border-gray-400'>
+                                Давайте поговорим
+                            </button>
+                        </div>
+                        <footer className='w-full h-[50vh] flex p-20'>
+                            <div className='flex w-full h-full flex-col relative px-8'>
+                                <p className='text-2xl'>+9 999 999-99-99</p>
+                                <p className='text-2xl opacity-50 max-w-[50%]'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quas accusamus quis commodi</p>
+                            </div>
+                            <div className='w-[1px] h-full flex-shrink-0 bg-gray-700'/>
+                            <div className='flex w-full h-full flex-col relative px-8'>
+                                <p className='text-2xl opacity-50 max-w-[65%]'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quas accusamus quis commodi</p>
+                                <button className='absolute left-8 bottom-0 w-[250px] h-[60px] text-xl flex-shrink-0 rounded-xl border-[1px] border-gray-700 transition-all duration-300 hover:border-gray-400'>
+                                    Свяжитесь с нами
+                                </button>
+                            </div>
+                        </footer>
+                    </div>
+                </div>
             </div>
         </>
     );

src/Components/NavMenu.jsx

@@ -47,7 +47,7 @@ const NavMenu = () => {
     };
     return (
         <>
-        <motion.div className={'hidden lg:flex sticky top-0 left-0 right-0 w-full px-12 h-24 transition-all duration-100 bg-transparent z-10 items-center text-xl select-none '
+        <motion.div className={'hidden lg:flex fixed top-0 left-0 right-0 w-full px-12 h-24 transition-all duration-100 bg-transparent z-10 items-center text-xl select-none '
                     + (scrollPosition > 0.0 ? "justify-end":"justify-center")}
                     // initial={{y:100, opacity: 0.1}}
                     // animate={{y: 0, opacity:1.0}}
@@ -64,16 +64,16 @@ const NavMenu = () => {
                         initial={{left: "50%", translateX: "-50%", top: "50%", translateY: "-50%"}}
                         animate={animControls}
                         >
-                        <a href="##" className='hover:opacity-50 transition-all duration-100 w-[55px]'>О нас</a>
+                        <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>О нас</a>
-                        <a href="##" className='hover:opacity-50 transition-all duration-100'>Сервисы</a>
+                        <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Сервисы</a>
-                        <a href="##" className='hover:opacity-50 transition-all duration-100'>Шаги</a>
+                        {/* <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Шаги</a> */}
-                        <a href="##" className='hover:opacity-50 transition-all duration-100'>Контакты</a>
+                        <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Контакты</a>
                     </motion.nav>
                 </div>
             </div>
             </div>
         </motion.div>
-        <motion.div className={'flex lg:hidden bg-black bg-opacity-30 justify-between sticky top-0 left-0 right-0 w-full px-12 h-16 transition-all duration-100 z-10 items-center text-xl select-none'}>
+        <motion.div className={'flex lg:hidden bg-black bg-opacity-30 justify-between fixed top-0 left-0 right-0 w-full px-12 h-16 transition-all duration-100 z-10 items-center text-xl select-none'}>
             <p className='text-3xl font-bold '>SanxPay</p>
             <div id='menu-icon'>
                 <button onClick={onClick}>
@@ -98,7 +98,7 @@ const NavMenu = () => {
                             transition={{type: "tween", duration: 0.3}}>
                     <a href="##" className='hover:opacity-50 transition-all duration-100 w-[55px]'>О нас</a>
                     <a href="##" className='hover:opacity-50 transition-all duration-100'>Сервисы</a>
-                    <a href="##" className='hover:opacity-50 transition-all duration-100'>Шаги</a>
+                    {/* <a href="##" className='hover:opacity-50 transition-all duration-100'>Шаги</a> */}
                     <a href="##" className='hover:opacity-50 transition-all duration-100'>Контакты</a>
 
                 </motion.nav>

src/path2.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="57.947277"
+   height="36.046539"
+   viewBox="0 0 57.947277 36.046539"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:export-bgcolor="#00000000" /><defs
+     id="defs1" /><g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="ink"
+     style="fill:#000000"
+     transform="translate(-60.657421,-58.177437)"><path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 71.814703,73.179754 h 32.895167 c 4.90125,0 4.5398,16.212298 -3.19499,16.212298 H 74.21133 c -1.011821,0 -1.985125,1.182328 -1.985125,2.202646 0,0.900267 0.538459,2.129278 1.384352,2.129278 h 27.616123 c 10.71535,0 11.90814,-15.082291 10.19451,-19.151164 -0.61709,-1.499533 -1.58687,-1.451243 -0.3914,-1.441237 l 5.27843,0.04418 c 0.95375,0.008 1.76747,-1.274377 1.79566,-2.227737 0.0256,-0.864389 -0.64111,-2.112514 -1.50588,-2.112514 H 72.004125 c -0.898309,0 -1.752902,1.09784 -1.812727,1.994155 -0.06341,0.949964 0.671227,2.350096 1.623305,2.350095 z"
+       id="path2"
+       sodipodi:nodetypes="ssssssscsssssss"
+       inkscape:export-filename="path2.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" /><path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 67.460565,79.27788 c 7.92891,0 17.365457,0 25.631998,0 0.88346,0 1.747256,1.086524 1.773472,1.969595 0.02853,0.960897 -0.837916,2.253881 -1.799236,2.253881 -7.961942,0 -17.309502,0 -25.600714,0 -0.868285,0 -1.664289,-1.113335 -1.691184,-1.981203 -0.02896,-0.934624 0.750591,-2.242273 1.685664,-2.242273 z"
+       id="path3"
+       sodipodi:nodetypes="sssssss" /><path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 78.350083,66.320667 c 5.088697,-3.158869 14.711284,-6.44496 23.459117,0 h 5.00077 C 101.63161,60.336258 96.977023,59.002455 92.556677,58.688232 89.517894,58.649 81.875133,58.501976 76.359506,63.382385 c -0.486453,0.596486 -0.620177,1.667923 -0.183536,2.301781 0.428374,0.621858 1.273033,0.83391 2.174113,0.636501 z"
+       id="path4"
+       sodipodi:nodetypes="ccccccc" /><ellipse
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path5"
+       cx="62.932747"
+       cy="70.910309"
+       rx="1.7753251"
+       ry="1.6776105" /><ellipse
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path5-6"
+       cx="62.979584"
+       cy="91.659416"
+       rx="1.7753251"
+       ry="1.6776105" /></g></svg>