finish. missing: page transition - required: Layout

components/common/Navbar.tsx

@@ -1,35 +1,33 @@
 import {
   Divider,
   Grid,
-  Box,
   Text,
   useColorModeValue,
   Center,
 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import NextImage from "next/image";
 import NextLink from "next/link";
 import { useRouter } from "next/router";
-import React from "react";
 import { nav } from "utils";
 import {
-  CustomVariants,
   _afterUnderlineStyle,
   _sxHoverAfterUnderlineStyle,
+  RotateWithZoomVariantProps,
+  routerShallowPush,
 } from "@/components/helper";
 
-const svgVariants: CustomVariants = {
-  hidden: {
-    // scale: 0,
-  },
+const logoVariants: RotateWithZoomVariantProps = {
   visible: {
-    // scale: 1,
     rotate: [0, 360],
-    transition: { repeat: "Infinity", duration: 2, ease: "linear" },
+    transition: { duration: 2, ease: "linear", repeat: Infinity }, // for rotate
+  },
+  hover: {
+    scale: 1.3,
   },
-  whileHover: {
-    scale: 1.5,
-    transition: { duration: 0.5, ease: "linear" },
+  // for hover
+  hoverTransition: {
+    duration: 1,
+    ease: "linear",
   },
 };
 
@@ -39,6 +37,7 @@ export interface NavbarProps {}
 export const Navbar = ({}: NavbarProps) => {
   const router = useRouter();
 
+
   return (
     <Grid
       autoFlow="column"
@@ -49,21 +48,33 @@ export const Navbar = ({}: NavbarProps) => {
         tablet: "0 0 0 24px",
         desktop: "20px 22.5px", // py px
       }}
+
     >
-      {/* <NextImage
-        src="/assets/shared/logo.svg"
-        alt="logo"
-        width="48"
-        height="48"
-        layout="fixed"
-      /> */}
+      {/* Ko dung vi logo size nho
+      <motion.div
+        variants={logoVariants}
+        animate="visible"
+        whileHover="hover"
+        transition={logoVariants.hoverTransition}
+      >
+        <NextImage
+          src="/assets/shared/logo.svg"
+          alt="logo"
+          width="48"
+          height="48"
+        />
+      </motion.div> */}
       <motion.img
         src="/assets/shared/logo.svg"
         alt="logo"
-        variants={svgVariants}
-        initial="hidden"
+        variants={logoVariants}
         animate="visible"
-        whileHover="whileHover"
+        whileHover="hover"
+        transition={logoVariants.hoverTransition}
+        onClick={() => routerShallowPush(router, "/")}
+        style={{
+          cursor: "pointer",
+        }}
       />
 
       <Grid

components/helper/FramerMotionHelper.tsx

@@ -1,29 +1,9 @@
-import {
-  Box,
-  BoxProps,
-  Center,
-  CenterProps,
-  Tab,
-  TabProps,
-} from "@chakra-ui/react";
-import { motion, HTMLMotionProps, Variants, Variant } from "framer-motion";
-import NextImage, { ImageProps as NextImageProps } from "next/image";
+import { Variant } from "framer-motion";
 
-type Merge<P, T> = Omit<P, keyof T> & T;
+// type Merge<P, T> = Omit<P, keyof T> & T;
 
-type BoxMotionProps = Merge<BoxProps, HTMLMotionProps<"div">>;
-export const BoxMotion: React.FC<BoxMotionProps> = motion(Box);
-
-type CenterMotionProps = Merge<CenterProps, HTMLMotionProps<"div">>;
-export const CenterMotion: React.FC<CenterMotionProps> = motion(Center);
-// export const CenterMotion = motion<CenterProps>(Center);
-
-type TabMotionProps = Merge<TabProps, HTMLMotionProps<"button">>;
-export const TabMotion: React.FC<TabMotionProps> = motion(Tab);
-
-// type NextImageMotionProps = Merge<NextImageProps, HTMLMotionProps<"img">>;
-// export const NextImageMotion: React.FC<NextImageMotionProps> = motion(NextImage);
-export const NextImageMotion = motion<NextImageProps>(NextImage);
+// type BoxMotionProps = Merge<BoxProps, HTMLMotionProps<"div">>;
+// export const BoxMotion: React.FC<BoxMotionProps> = motion(Box);
 
 /**
  * @description Strengthen _framer-motion_ `Variants, Variant` type

components/helper/NextHelper.tsx

@@ -0,0 +1,37 @@
+import { chakra, shouldForwardProp } from "@chakra-ui/react";
+import NextLink from "next/link";
+import { NextRouter } from "next/router";
+
+export const NextLinkHelper = chakra(NextLink, {
+  shouldForwardProp: (prop) => {
+    // don't forward Chakra's props
+    const isChakraProp = !shouldForwardProp(prop);
+    if (isChakraProp) return false;
+
+    // else, only forward `sample` prop
+    return [
+      "href",
+      "as",
+      "replace",
+      "scroll",
+      "shallow",
+      "passHref",
+      "prefetch",
+      "locale",
+    ].includes(prop);
+  },
+});
+
+// https://stackoverflow.com/questions/43335962/purpose-of-declare-keyword-in-typescript
+// Summary: declare fix loi bien nay da khai bao roi --> khai bao lai
+declare type Url = URL | string;
+
+/**
+ * Strengthen original router.push()
+ * @param router Component's current using router
+ * @param url
+ * @returns `router.push(url, undefined, { shallow: true })`
+ */
+export function routerShallowPush(router: NextRouter, url: Url) {
+  return router.push(url, undefined, { shallow: true });
+}

components/helper/index.ts

@@ -1,3 +1,3 @@
-export * from "./NextLinkHelper"
+export * from "./NextHelper"
 export * from "./FramerMotionHelper"
 export * from "./DynamicStyle"

pages/_app.tsx

@@ -1,4 +1,4 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "utils";

pages/destination.tsx

@@ -15,11 +15,8 @@ import {
 import type { NextPage } from "next";
 import { h1, h2, h4, h5, nav, listSubH1, listSubH2 } from "utils";
 import {
-  BoxMotion,
-  CenterMotion,
   CustomVariantsProps,
   RotateWithZoomVariantProps,
-  TabMotion,
   _afterUnderlineStyle,
   _sxHoverAfterUnderlineStyle,
 } from "@/components/helper";
@@ -69,7 +66,7 @@ const boxVariants: CustomVariantsProps = {
   },
 };
 
-const planetVariant: RotateWithZoomVariantProps = {
+const planetVariants: RotateWithZoomVariantProps = {
   visible: {
     rotate: [0, 360],
     transition: { duration: 60, ease: "linear", repeat: Infinity }, // for rotate
@@ -120,10 +117,10 @@ const Destination: NextPage = () => {
             Pick your destination
           </Text>
           <motion.div
-            variants={planetVariant}
+            variants={planetVariants}
             animate="visible"
             whileHover="hover"
-            transition={planetVariant.hoverTransition}
+            transition={planetVariants.hoverTransition}
           >
             <NextImage
               src={`/assets/destination/image-${content[tabIndex].name}.webp`}

pages/index.tsx

@@ -3,20 +3,39 @@ import { Navbar } from "@/components/common";
 import { Box, Center, Grid, Text } from "@chakra-ui/react";
 import type { NextPage } from "next";
 import { h1, h2, h4, h5 } from "utils";
-import { BoxMotion, CenterMotion, CustomVariants } from "@/components/helper";
+import { CustomVariantsProps, routerShallowPush } from "@/components/helper";
+import { motion } from "framer-motion";
+import { useRouter } from "next/router";
 
 // console.log(h5);
 
-const boxVariants: CustomVariants = {
-  hidden: { transform: "translateY(25%)", opacity: 0 },
+const contentVariants: CustomVariantsProps = {
+  hidden: { y: "200px", opacity: 0 }, // y = translateY
   visible: {
-    transform: "translateY(0%)",
+    y: "0px",
     opacity: 1,
     transition: { duration: 1.5, ease: "linear" },
   },
 };
 
+const exploreAuraVariants: CustomVariantsProps = {
+  visible: {
+    opacity: 0,
+  },
+  auraHover: {
+    scale: 1.8,
+    opacity: 1,
+  },
+  exploreHover: {
+    scale: 0.8,
+  },
+  // chakra transition
+  hoverTransition: "all 0.4s ease-out",
+};
+
 const Home: NextPage = () => {
+  const router = useRouter();
+
   return (
     <Box
       backgroundImage={{
@@ -35,13 +54,13 @@ const Home: NextPage = () => {
         justifyItems={{ mobile: "center", desktop: "unset" }}
         gap={{ mobile: "20", desktop: "0" }}
         py="32"
+        as={motion.div}
+        variants={contentVariants}
+        layout="size"
+        initial="hidden"
+        animate="visible"
       >
-        <BoxMotion
-          textAlign={{ mobile: "center", desktop: "start" }}
-          variants={boxVariants}
-          initial="hidden"
-          animate="visible"
-        >
+        <Box textAlign={{ mobile: "center", desktop: "start" }}>
           <Box>
             <Text
               {...h5.return()}
@@ -75,9 +94,10 @@ const Home: NextPage = () => {
             Well sit back, and relax because we&#39;ll give you a truly out of
             this world experience!
           </Text>
-        </BoxMotion>
+        </Box>
 
         <Center
+          as={motion.div}
           {...h4.return()}
           fontSize={{ mobile: "14px", tablet: h4.fontSize }}
           __css={{
@@ -89,29 +109,28 @@ const Home: NextPage = () => {
           bgColor="white"
           color="custom.1"
           letterSpacing="2px"
+          onClick={() => routerShallowPush(router, "/destination")}
+          cursor="pointer"
+          variants={exploreAuraVariants}
+          whileHover="exploreHover"
+          transition={exploreAuraVariants.hoverTransition} // chakra syntax
         >
           Explore
-          <CenterMotion
+          <Center
+            as={motion.div}
             __css={{
               aspectRatio: "1",
             }}
             width="100%"
             height="100%"
             borderRadius="50%"
             position="absolute"
-            bgColor="rgba(255,255,255,0.1)"
+            bgColor="rgba(255,255,255,0.2)"
             mixBlendMode="normal"
-            initial={{
-              scale: 1,
-              opacity: 0,
-            }}
-            whileHover={{
-              scale: 1.5,
-              opacity: 1,
-            }}
-            transition={{
-              duration: 0.5,
-            }}
+            variants={exploreAuraVariants}
+            animate="visible"
+            whileHover="auraHover"
+            transition={exploreAuraVariants.hoverTransition} // chakra syntax
           />
         </Center>
       </Grid>