diff --git a/logo.jpg b/logo.jpg new file mode 100644 index 0000000..59f7840 Binary files /dev/null and b/logo.jpg differ diff --git a/public/index.html b/public/index.html index 96face8..fd1053c 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@ SanxPay · консьерж-сервис - +
diff --git a/src/App.js b/src/App.js index ab0243b..2384619 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ import NavMenu from "./Components/NavMenu"; function App() { return ( -
+
diff --git a/src/Components/AboutSection.jsx b/src/Components/AboutSection.jsx index eb3fbc6..d0dae56 100644 --- a/src/Components/AboutSection.jsx +++ b/src/Components/AboutSection.jsx @@ -1,8 +1,14 @@ import React, { useState } from 'react'; -import {motion, useScroll, useMotionValueEvent, useAnimationControls} from "framer-motion" +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" +import telegram_icon from "../Images/telegram_icon.png" const AboutSection = () => { + + const { scrollYProgress } = useScroll(); + const menu_offset = useTransform(scrollYProgress, [0,1], ["-100%", "0%"]); + // const menu_offset2 = useTransform(scrollYProgress, [0,1], ["-50%", "0%"]); return ( <>
@@ -12,7 +18,7 @@ const AboutSection = () => {

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

@@ -22,6 +28,119 @@ const AboutSection = () => {
+
+
+ + Lorem ipsum + + + Lorem ipsum + + + Lorem ipsum + +
+
+
+ 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? +
+
+
+ +
+
+
+ man +
+
+ 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? +
+
+
+
+
+
+ tile +
+

LUXURY CARS

+
+
+
+ tile +
+

FLIGHTS

+
+
+
+ tile +
+

YACHTS

+
+
+
+
+
+ tile +
+ {/*

YACHTS

*/} +
+
+
+
+
+

+ 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! +

+
+
+ telegram +
+
+
+
+
+

+ PRIVATE +

+
+ tile +
+ {/*

YACHTS

*/} +
+
+
+
+

+ SERVICE +

+
+ tile +
+ {/*

YACHTS

*/} +
+
+
+
+
+

+ 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! +

+
+
); } diff --git a/src/Components/NavMenu.jsx b/src/Components/NavMenu.jsx index 07cc748..86ba9b9 100644 --- a/src/Components/NavMenu.jsx +++ b/src/Components/NavMenu.jsx @@ -53,12 +53,13 @@ const NavMenu = () => { // animate={{y: 0, opacity:1.0}} // transition={{type: "tween", stiffness:300}} > +
-

SanxPay

+

SanxPay

- {
+

SanxPay

diff --git a/src/Components/ServiceTile.jsx b/src/Components/ServiceTile.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/Images/stock_about_placeholder.jpg b/src/Images/stock_about_placeholder.jpg new file mode 100644 index 0000000..5e3e8ba Binary files /dev/null and b/src/Images/stock_about_placeholder.jpg differ diff --git a/src/Images/telegram_icon.png b/src/Images/telegram_icon.png new file mode 100644 index 0000000..00319aa Binary files /dev/null and b/src/Images/telegram_icon.png differ