diff --git a/package.json b/package.json index f2ee54d..c01fe78 100755 --- a/package.json +++ b/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", diff --git a/src/components/IndexPage/hero.jsx b/src/components/IndexPage/hero.jsx index 4907135..f32a899 100644 --- a/src/components/IndexPage/hero.jsx +++ b/src/components/IndexPage/hero.jsx @@ -3,81 +3,119 @@ 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 (
-
- -
-

Рассчитать - доставку

-
- - - -
- Рассчитать доставку - {'#'} + + + + +

Рассчитать + доставку

+
+ + + +
+ Рассчитать доставку + {'#'} -
- +
+ +
+ + + + + + + +
+

Отследить посылку

+
+ + + {'#'} + +
+
+ + + + + + Забери свой подарок! + {'#'} + + + + +
+

Кешбэк 10%

+

Кешбэк баллами вырастет до 10% после отправки 5 посылок в течении + месяца. Копите + баллы и оплачивайте до 99% следующих заказов

+ {'delivery'}
- - - - - -
-

Отследить посылку

-
- - - {'#'} - -
-
- - - Забери свой подарок! - {'#'} - - -
-

Кешбэк 10%

-

Кешбэк баллами вырастет до 10% после отправки 5 посылок в течении - месяца. Копите - баллы и оплачивайте до 99% следующих заказов

- {'delivery'} -
- -
+ + +
) } export default Hero \ No newline at end of file diff --git a/src/components/IndexPage/index.jsx b/src/components/IndexPage/index.jsx index 9d9b7f4..33f36c1 100644 --- a/src/components/IndexPage/index.jsx +++ b/src/components/IndexPage/index.jsx @@ -6,57 +6,7 @@ import Logo from '@/../public/logoBig.png' const MainPage = () => { return ( <> -
- -
-
- - ) } diff --git a/src/components/reusable/buttons.jsx b/src/components/reusable/buttons.jsx index ad5db15..99ffa5b 100644 --- a/src/components/reusable/buttons.jsx +++ b/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: classNameAdd} = props - const className = `bg-black text-white uppercase font-somic font-medium rounded-[${rounded || '40'}px] ` + const {children, className} = props + console.log(className) + + const variant = tv({ + base: `bg-black text-white uppercase font-somic font-medium rounded-[40px]`, + }) + return ( - + {children} )} diff --git a/src/components/reusable/card.jsx b/src/components/reusable/card.jsx index 2d61f01..97547fe 100644 --- a/src/components/reusable/card.jsx +++ b/src/components/reusable/card.jsx @@ -1,18 +1,21 @@ +import {tv} from "tailwind-variants"; + const Card = (props) => { - let {className: classNameAdd, theme, innerRef} = props - const propsData = {...props, theme: undefined, innerRef: undefined} + let {className, theme} = props + 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 ( - -
+
{props.children}
) diff --git a/src/components/reusable/footer.jsx b/src/components/reusable/footer.jsx new file mode 100644 index 0000000..7da210c --- /dev/null +++ b/src/components/reusable/footer.jsx @@ -0,0 +1,51 @@ +import Image from "next/image"; +import Logo from "../../../public/logoBig.png"; + +const Footer = () => ( + +) +export default Footer; \ No newline at end of file diff --git a/src/components/reusable/header.jsx b/src/components/reusable/header.jsx index 0053363..eb78bae 100644 --- a/src/components/reusable/header.jsx +++ b/src/components/reusable/header.jsx @@ -2,54 +2,74 @@ 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 ( -
-
- {'logo'}/ -
- Курьерская доставка по России -
+ + +
+ {'logo'}/ +
+ Курьерская доставка по России + + ) } - const NavBar = () => { +const NavBar = () => { + return ( + + + О компании + - useEffect(() => { - gsap.fromTo('.header__link', { - y: -10, opacity: 0, - }, {y: 0, opacity: 1}) - }, []) - - return ( - - - - ) - } - - const Header = () => ( -
- - - -
+ Правила получения + + Контакты + + ) +} - export default Header; \ No newline at end of file +const Header = () => ( +
+ + + + + +
+) + +export default Header; \ No newline at end of file diff --git a/src/pages/_app.js b/src/pages/_app.js index 2f82212..dabe601 100755 --- a/src/pages/_app.js +++ b/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 +export default function App({Component, pageProps}) { + + return ( + <> +
+
+ +
+