diff --git a/public/index.html b/public/index.html index f352489..96face8 100644 --- a/public/index.html +++ b/public/index.html @@ -6,25 +6,15 @@ - Lux Service + SanxPay · консьерж-сервис
- diff --git a/src/App.js b/src/App.js index ad689bd..ab0243b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,11 @@ +import AboutSection from "./Components/AboutSection"; import NavMenu from "./Components/NavMenu"; function App() { return ( -
- +
+ +
); } diff --git a/src/Components/AboutSection.jsx b/src/Components/AboutSection.jsx new file mode 100644 index 0000000..eb3fbc6 --- /dev/null +++ b/src/Components/AboutSection.jsx @@ -0,0 +1,29 @@ +import React, { useState } from 'react'; +import {motion, useScroll, useMotionValueEvent, useAnimationControls} from "framer-motion" +import yachtImg from "../Images/yacht.jpg" + +const AboutSection = () => { + return ( + <> +
+ yacht +
+
+
+
+

+ Консьерж-сервис для VIP клиентов +

+
+
+

+ Добро пожаловать в мир непревзойденной роскоши и удобства. +

+
+
+
+ + ); +} + +export default AboutSection; diff --git a/src/Components/NavMenu.jsx b/src/Components/NavMenu.jsx index b6f0cd3..07cc748 100644 --- a/src/Components/NavMenu.jsx +++ b/src/Components/NavMenu.jsx @@ -1,42 +1,108 @@ import React, { useState } from 'react'; -import {motion, useScroll, useMotionValueEvent, useTransform} from "framer-motion" +import {motion, useScroll, useMotionValueEvent, useAnimationControls} from "framer-motion" + +const hamburger01Variants = { + open: { d: 'M3.06061 2.99999L21.0606 21' }, + closed: { d: 'M0 9.5L24 9.5' }, +}; + +const hamburger02Variants = { + open: { d: 'M3.00006 21.0607L21 3.06064' }, + moving: { d: 'M0 14.5L24 14.5' }, + closed: { d: 'M0 14.5L15 14.5' }, +}; + +const hmenuVariants = { + open: { translateY: "0rem", opacity: 1}, + closed: {translateY: "-4rem", opacity: 0.3}, +}; const NavMenu = () => { const { scrollYProgress } = useScroll(); - const menu_offset = useTransform(scrollYProgress, [0,0.1], ['50%', '100%']); - const menu_offset_l = useTransform(scrollYProgress, [0,0.1], ['-50%', '-100%']); + // const menu_offset = useTransform(scrollYProgress, [0,0.1], ['50%', '100%']); + // const menu_offset_l = useTransform(scrollYProgress, [0,0.1], ['-50%', '-100%']); const [scrollPosition, setScrollPosition] = useState(0.0); + const animControls = useAnimationControls(); useMotionValueEvent(scrollYProgress, "change", (latest) => { setScrollPosition(latest); + if(latest > 0.001) + { + animControls.start({left: "100%", translateX: "-100%", transition: {duration: 0.1}}); + } + else + { + animControls.stop(); + animControls.start({left: "50%", translateX: "-50%", transition: {duration: 0.1}}); + } }) + const [hmenustate, setHMenuState] = useState('closed'); + const onClick = () => { + setHMenuState('moving'); + setTimeout(() => { + setHMenuState(hmenustate === 'closed' ? 'open' : 'closed'); + }, 200); + }; return ( - + 0.0 ? "justify-end":"justify-center")} // initial={{y:100, opacity: 0.1}} // animate={{y: 0, opacity:1.0}} // transition={{type: "tween", stiffness:300}} > -
-

COMPANY NAME

+
+

SanxPay

+ +

SanxPay

+ + + + ); } diff --git a/src/Images/yacht.jpg b/src/Images/yacht.jpg new file mode 100644 index 0000000..31aa2ea Binary files /dev/null and b/src/Images/yacht.jpg differ diff --git a/src/SVG/menu-hamburger.jsx b/src/SVG/menu-hamburger.jsx new file mode 100644 index 0000000..9fcbad8 --- /dev/null +++ b/src/SVG/menu-hamburger.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +function HamburgerSVG0() { + return ( + + + + + ); +} + +export default Icon; \ No newline at end of file