[feat] implement json data for project

components/Button.js

@@ -1,7 +1,7 @@
 const Button = ({ children, variation, ...props }) => (
 	<button
 		{...props}
-		className={`title  rounded-2xl px-8 py-2 shadow-md transition duration-300 ease-in-out ${
+		className={`title mr-3  rounded-2xl px-8 py-2 shadow-md transition duration-300 ease-in-out ${
 			variation === "primary"
 				? "bg-gray-400 hover:bg-slate-500 text-gray-100 hover:text-white"
 				: "transparent border border-gray-400 hover:border-slate-500 text-gray-400 hover:text-gray-300"

components/Footer.jsx

@@ -7,30 +7,38 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 export default function Footer() {
 	return (
-		<div className="flex justify-center items-center flex-col mt-5 self-start min-h-[50vh] bg-gray-200">
-			<Link href="/#contact">
-				<motion.h1
-					className="text-5xl font-bold mt-3 tracking-widest hover:underline"
-					initial={{
-						opacity: 0,
-						y: -200,
-					}}
-					whileInView={{
-						opacity: 1,
-						y: 0,
-					}}
-					transition={{
-						delay: 0.7,
-						duration: 1,
-						type: "spring",
-					}}>
-					Get In Touch{" "}
-					<FontAwesomeIcon
-						icon={faArrowRight}
-						className="text-5xl ml-2"
-					/>
-				</motion.h1>
-			</Link>
+		<div className="flex justify-center items-center flex-col mt-5 self-start ">
+			<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.h1
+						className="text-5xl md:text-7xl font-medium mt-3  hover:underline whitespace-nowrap leading-none"
+						initial={{
+							opacity: 0,
+							y: -200,
+						}}
+						whileInView={{
+							opacity: 1,
+							y: 0,
+						}}
+						transition={{
+							delay: 0.7,
+							duration: 1,
+							type: "spring",
+						}}>
+						Get In Touch{" "}
+						<FontAwesomeIcon
+							icon={faArrowRight}
+							className="text-5xl ml-2"
+						/>
+					</motion.h1>
+				</Link>
+			</div>
+			<footer className="flex justify-center items-center flex-col my-5 self-start]">
+				<p className="text-gray-800 text-sm">
+					&copy;{new Date().getFullYear()} -{" "}
+					<span className="text-gray-700 text-lg">Alvalens</span>
+				</p>
+			</footer>
 		</div>
 	);
 }

components/Navbar.js

@@ -175,8 +175,8 @@ const Navbar = () => {
 			<nav
 				ref={navRef}
 				className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
-					isNavOpen ? "bg-transparent" : "bg-gray-50"
-				} inset-0 backdrop-blur-md opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
+					isNavOpen ? "bg-transparent" : "backdrop-filter backdrop-blur-xl"
+				} inset-0  opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
 				<div className="">
 					<h1 className="text-2xl">Alvalens</h1>
 				</div>