basic home page complete

components/Header.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Logo from "@/components/ui/Logo";
+import EmailButton from "@/components/ui/EmailButton";
+
+const Header = () => {
+    return (
+        <div className="w-full bg-primary pb-20 px-8 relative flex justify-between items-center">
+            <Logo/>
+            <EmailButton/>
+        </div>
+    );
+};
+
+export default Header;

components/Hero.tsx

@@ -1,8 +1,17 @@
+"use client";
 import React from "react";
+import {motion} from "framer-motion";
 
 const Hero = () => {
     return (
-        <div className="px-10 mt-20 w-full">
+        <div className="px-10 mt-10 md:mt-20 pb-10 w-full flex justify-center items-center">
+            <motion.div>
+
+            </motion.div>
+            <motion.div initial={{opacity:0,y:'2vh'}} transition={{ delay:.9}} animate={{opacity:1,y:0}} className="flex flex-col transition-all flex-wrap justify-center items-center">
+                <h1 className="lg:text-[7rem] xl:text-[10rem] transition-all duration-500 text-[3rem] md:text-[5rem] text-center xl:line-clamp-1 tracking-wider font-bold text-gray-900">Hello, I&apos;m Nadun</h1>
+                <p className="lg:text-xl mt-3 text-[1.1rem] md:text-[1.5rem] duration-500 xl:text-2xl transition-all text-center capitalize font-medium text-gray-500">A Passionate Mobile and Web Developer base in Sri Lanka.</p>
+            </motion.div>
         </div>
     );
 }

components/ui/EmailButton.tsx

@@ -1,21 +1,27 @@
-"use client";
-import React, {useState} from 'react';
-import {GoCopy} from "react-icons/go";
+"use client"
 import {motion} from "framer-motion";
+import {useState} from "react";
+import {GoCopy} from "react-icons/go";
+import {arrow} from "@/data";
+import Lottie from "lottie-react";
+import {useGlobalContext} from "@/context/GlobalProvider";
 
 const EmailButton = () => {
     const [copied, setCopied] = useState(false);
-
+    const {play, setPlay} = useGlobalContext();
     const handleClick = () => {
-        // @ts-ignore
-        navigator.clipboard.writeText(process.env.NEXT_PUBLIC_EMAIL)
         setCopied(true)
     }
     return (
-        <button onClick={handleClick} className="absolute hidden lg:block right-5 top-5">
-            <motion.div initial={{opacity:0}} animate={{opacity:1}}       transition={{ delay: .6 }} className="flex flex-row justify-center hover:border-[2px] hover:border-gray-900 items-center border-2 p-2 rounded-lg gap-1">
-                <GoCopy size={25} color="#111827"/>
-                <p className="font-medium text-gray-900 h-7 text-xl">{copied ? "Email Copied" : "Copy Email?"}</p>
+        <button onClick={handleClick} onMouseEnter={() => setPlay(true)} onMouseLeave={() => setPlay(false)}
+                className="absolute hidden lg:block right-5 top-5">
+            <motion.div initial={{opacity: 0}} animate={{opacity: 1}} transition={{delay: .6}} className="relative">
+                <div
+                    className="flex flex-row justify-center hover:border-[2px] hover:border-gray-900 items-center border-2 p-2 rounded-lg gap-1">
+                    <GoCopy size={25} color="#111827"/>
+                    <p className="font-medium text-gray-900 h-7 text-xl">{copied ? "Email Copied" : "Copy Email?"}</p>
+                </div>
+                {play && <Lottie animationData={arrow} loop={false} className="absolute hidden md:block w-24 right-0"/>}
             </motion.div>
         </button>
     );

components/ui/Footer.tsx

@@ -4,16 +4,18 @@ import {socialMedia} from "@/data";
 import Image from "next/image";
 import Link from "next/link";
 import {motion} from "framer-motion";
+import {useGlobalContext} from "@/context/GlobalProvider";
 
 const Footer = () => {
+    const {play, setPlay} = useGlobalContext();
     return (
-        <motion.footer initial={{opacity:0,y:'2vh'}}  transition={{ delay: .5,type:"spring", damping:10, stiffness:200}} animate={{opacity:1,y:0}} className="w-full pt-5 flex flex-col px-4 gap-5 md:flex-row justify-between items-center py-4 fixed bottom-0 left-0 md:px-10">
-            <p className="font-light text-gray-900 text-base md:text-xl">Copyright © {new Date().getFullYear()} HEWAGENKM</p>
-            <div className="flex items-center md:gap-3 gap-6">
+        <motion.footer  initial={{opacity:0,y:'2vh'}}  transition={{ duration:.5,delay: .5,type:"spring", damping:10, stiffness:200}} animate={{opacity:1,y:0}} className="w-full pt-5 flex flex-col px-4 gap-5 md:flex-row justify-between items-center pb-4 absolute bottom-0 md:px-10">
+            <p className="font-light text-gray-900 text-base md:text-xl">Copyright © {new Date().getFullYear()} HewageNKM</p>
+            <div onMouseEnter={()=> setPlay(true)} onMouseLeave={()=>setPlay(false)} className="flex items-center md:gap-3 gap-6">
                 {socialMedia.map(({img, id, link}) => (
                     <Link href={link} key={id} target="_blank"
                           className="bg-gray-900 hover:bg-gray-700 transition-all  p-3 rounded-[4px]">
-                        <Image src={img} width={20} height={20} alt="social_img"/>
+                        <Image src={img} width="auto" height="auto" alt="social_img" className="w-5 h-5 md:w-7 md:h-7"/>
                     </Link>
                 ))}
             </div>