updt
This commit is contained in:
Marks
parent
f8e7549d4f
commit
b1e475c97e
@ -13,7 +13,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
|
||||
<title>SanxPay · консьерж-сервис</title>
|
||||
</head>
|
||||
<body>
|
||||
<body class="bg-black">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
@ -3,7 +3,7 @@ import NavMenu from "./Components/NavMenu";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="bg-black h-[2000px] text-white font-main">
|
||||
<div className="bg-black h-[450vh] text-white font-main">
|
||||
<NavMenu />
|
||||
<AboutSection />
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<div className='absolute inset-0'>
|
||||
@ -12,7 +18,7 @@ const AboutSection = () => {
|
||||
<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'>
|
||||
Консьерж-сервис для VIP клиентов
|
||||
Консьерж-сервис для <span className=''>VIP</span> клиентов
|
||||
</h1>
|
||||
</div>
|
||||
<div className='flex text-right self-end justify-end items-center max-w-[300px] lg:max-w-[400px]'>
|
||||
@ -22,6 +28,119 @@ const AboutSection = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='absolute top-[100vh] left-0 right-0 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}}
|
||||
>
|
||||
Lorem ipsum
|
||||
</motion.h1>
|
||||
<motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
|
||||
style={{translateX: menu_offset}}
|
||||
>
|
||||
Lorem ipsum
|
||||
</motion.h1>
|
||||
<motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
|
||||
style={{translateX: menu_offset}}
|
||||
>
|
||||
Lorem ipsum
|
||||
</motion.h1>
|
||||
</div>
|
||||
<div className='flex w-full h-[100vh] p-16'>
|
||||
<div className='w-[49%] flex h-full items-center justify-center text-center text-2xl px-[6%]'>
|
||||
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?
|
||||
</div>
|
||||
<div className='h-full w-[1px] flex justify-center'>
|
||||
<div className='h-full w-full bg-gray-700 '>
|
||||
|
||||
</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' />
|
||||
<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'>
|
||||
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?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex h-screen w-full flex-col px-20 gap-4'>
|
||||
<div className='w-full h-[50%] flex gap-4'>
|
||||
<div className='relative w-[33%] h-full 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'>
|
||||
<p className='text-3xl'>LUXURY CARS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='relative w-[33%] h-full 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'>
|
||||
<p className='text-3xl'>FLIGHTS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='relative w-[33%] h-full 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'>
|
||||
<p className='text-3xl'>YACHTS</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full h-[50%] flex'>
|
||||
<div className='relative w-full h-full 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'>
|
||||
{/* <p className='text-3xl'>YACHTS</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[400px] w-full flex justify-between items-center px-20'>
|
||||
<p className='text-2xl w-[40%]'>
|
||||
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 className='flex w-[300px] h-full items-center justify-center'>
|
||||
<div className='w-[100px] cursor-pointer group h-[100px] border-[2px] hover:border-gray-300 transition-all duration-300 rounded-full border-gray-500 bg-transparent flex justify-center items-center'>
|
||||
<img src={telegram_icon} alt="telegram" className='object-cover w-[40%] h-[40%] group-hover:scale-110 transition-all duration-300' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[100vh] 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'>
|
||||
PRIVATE
|
||||
</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'>
|
||||
{/* <p className='text-3xl'>YACHTS</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-[50%] flex flex-col justify-start gap-8'>
|
||||
<h2 className='text-9xl text-right'>
|
||||
SERVICE
|
||||
</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'>
|
||||
{/* <p className='text-3xl'>YACHTS</p> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[400px] w-full flex justify-center items-center px-20 border-b-[1px] border-gray-700'>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -53,12 +53,13 @@ const NavMenu = () => {
|
||||
// animate={{y: 0, opacity:1.0}}
|
||||
// transition={{type: "tween", stiffness:300}}
|
||||
>
|
||||
<div className='relative w-full h-full'>
|
||||
<div className='absolute top-[50%] left-12 translate-y-[-50%]'>
|
||||
<p className='text-3xl font-bold '>SanxPay</p>
|
||||
<p className='text-4xl font-bold '>SanxPay</p>
|
||||
</div>
|
||||
<div className='absolute top-0 left-12 right-12 bottom-0'>
|
||||
<div className='relative w-full h-full'>
|
||||
<motion.nav className='absolute flex gap-8 justify-center items-center'
|
||||
<motion.nav className='absolute flex gap-8 justify-center items-center lg:text-xl'
|
||||
transition={{type: "tween", duration: 0.5}}
|
||||
initial={{left: "50%", translateX: "-50%", top: "50%", translateY: "-50%"}}
|
||||
animate={animControls}
|
||||
@ -70,6 +71,7 @@ const NavMenu = () => {
|
||||
</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'}>
|
||||
<p className='text-3xl font-bold '>SanxPay</p>
|
||||
|
||||
0
src/Components/ServiceTile.jsx
Normal file
0
src/Components/ServiceTile.jsx
Normal file
BIN
src/Images/stock_about_placeholder.jpg
Normal file
BIN
src/Images/stock_about_placeholder.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 699 KiB |
BIN
src/Images/telegram_icon.png
Normal file
BIN
src/Images/telegram_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Loading…
x
Reference in New Issue
Block a user