diff --git a/public/icons/menu.svg b/public/icons/menu.svg index b65ebc3..e99f14d 100644 --- a/public/icons/menu.svg +++ b/public/icons/menu.svg @@ -1,3 +1,3 @@ - + diff --git a/public/logo.svg b/public/logo.svg index c9cd777..91e65ae 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,9 +1,9 @@ - - - - + + + + diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c5b4792..edd016e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import { Roboto } from "next/font/google" import { cn } from "@/lib/utils" import "./globals.css"; +import Header from "@/components/header"; const fontSans = Roboto({ subsets: ["latin"], @@ -27,6 +28,7 @@ export default function RootLayout({ fontSans.variable )}> +
{children} diff --git a/src/app/page.tsx b/src/app/page.tsx index f380331..448ba16 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,7 +5,6 @@ export default function Home() {
Hello BSC!
- Globe Grid
diff --git a/src/components/animations/hover-repeat.tsx b/src/components/animations/hover-repeat.tsx new file mode 100644 index 0000000..7d7e759 --- /dev/null +++ b/src/components/animations/hover-repeat.tsx @@ -0,0 +1,49 @@ +'use client'; + +import { PropsWithChildren } from "react"; +import { EasingDefinition, Variants, motion } from "framer-motion"; + +const ANIMATION_EASE: EasingDefinition = "linear"; +const ANIMATION_DURATION = 0.15; + +const contentAnimation: Variants = { + rest: { + y: 0, + transition: { ease: ANIMATION_EASE, duration: ANIMATION_DURATION }, + }, + hover: { + y: "105%", // Added an extra 5% as a buffer + transition: { ease: ANIMATION_EASE, duration: ANIMATION_DURATION }, + }, +}; + +const duplicatedContentAnimation: Variants = { + rest: { + y: "-105%", // Added an extra 5% as a buffer + transition: { ease: ANIMATION_EASE, duration: ANIMATION_DURATION }, + }, + hover: { + y: 0, + transition: { ease: ANIMATION_EASE, duration: ANIMATION_DURATION }, + }, +}; + +const HoverRepeatAnimation = ({ children }: PropsWithChildren) => { + return ( + + + {children} + + + {children} + + + ); +}; + +export default HoverRepeatAnimation; diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx new file mode 100644 index 0000000..f7bff1f --- /dev/null +++ b/src/components/header/index.tsx @@ -0,0 +1,21 @@ +import HoverRepeatAnimation from "@/components/animations/hover-repeat"; + +export default function Header() { + const MenuButton = () => ( + + ); + + return ( +
+
+ Logo + +
+
+ ); +}; \ No newline at end of file