[feat(home)] reduce bouncy animation

app/(root)/page.jsx

@@ -103,9 +103,7 @@ const MyPage = () => {
 											Download CV
 										</Button>
 										<Button variation="secondary">
-											<a href="#contact">
+											<a href="#contact">Contact Me</a>
-												Contact Me
-											</a>
 										</Button>
 									</motion.div>
 								</motion.div>
@@ -148,6 +146,8 @@ const MyPage = () => {
 										transition={{
 											delay: 0.5,
 											type: "spring",
+											stiffness: 100,
+											damping: 20,
 										}}>
 										<Image
 											src={MeAbout}
@@ -215,6 +215,8 @@ const MyPage = () => {
 										transition={{
 											delay: 0.5,
 											type: "spring",
+											stiffness: 100,
+											damping: 20,
 										}}>
 										<Image
 											src={ProjectAll}
@@ -269,8 +271,8 @@ const MyPage = () => {
 							</div>
 						</div>
 						<div className="section">
-							<div className="relative md:h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col">
+							<div className="relative md:h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
-								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 overflow-x-hidden">
+								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 									<motion.div
 										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
 										initial={{
@@ -286,6 +288,8 @@ const MyPage = () => {
 										transition={{
 											delay: 0.5,
 											type: "spring",
+											stiffness: 100,
+											damping: 20,
 										}}>
 										<Image
 											src={Setup}

app/layout.jsx

@@ -11,10 +11,8 @@ export const metadata = {
 	title: "Alvalens | Portofolio",
 	description:
 		"My name is Alvalens, I'm a web developer and I'm passionate about it. I'm currently studying at Universitas Negeri Malang.",
-	image: Icon,
 	author: "Alvalens",
 	siteUrl: "https://www.alvalens.my.id",
-	ico: Icon,
 	applicationName: "Alvalens",
 	keywords: [
 		"alvalens",

components/Footer.jsx

@@ -3,32 +3,45 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowAltCircleRight } from "@fortawesome/free-regular-svg-icons";
 
 export default function Footer() {
 	return (
-		<div className="flex justify-center items-center flex-col mt-5 self-start ">
+		<div className="flex justify-center items-center flex-col mt-5 ">
 			<div className="flex justify-center items-center flex-col mt-5 self-center min-h-[50vh] border-b-2 min-w-[80vw] ">
 				<Link href="/#contact">
+					<motion.h2
+						className="text-xl font-medium mt-3 text-center text-gray-400  hover:underline whitespace-nowrap leading-none md:tracking-[0.5rem]"
+						initial={{
+							opacity: 0,
+							x: -200,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: 0,
+						}}
+						transition={{
+							delay: 0.2,
+						}}>
+						Want something like this?
+					</motion.h2>
 					<motion.h1
 						className="text-5xl md:text-7xl font-medium mt-3  hover:underline whitespace-nowrap leading-none"
 						initial={{
 							opacity: 0,
-							y: -200,
+							x: 200,
 						}}
 						whileInView={{
 							opacity: 1,
-							y: 0,
+							x: 0,
 						}}
 						transition={{
-							delay: 0.7,
+							delay: 0.5,
-							duration: 1,
-							type: "spring",
 						}}>
 						Get In Touch{" "}
 						<FontAwesomeIcon
-							icon={faArrowRight}
+							icon={faArrowAltCircleRight}
-							className="text-5xl ml-2"
+							className="text-5xl ml-2 "
 						/>
 					</motion.h1>
 				</Link>