animation added

BasirKhan418 · Nov 6, 2023 · 69815ca · 69815ca
1 parent 2a42590
commit 69815ca
Show file tree

Hide file tree

Showing 14 changed files with 82 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "eslint-config-next": "^13.5.4",
     "express-fileupload": "^1.4.0",
     "feather-icons-react": "^0.5.0",
-    "framer-motion": "^10.15.0",
+    "framer-motion": "^10.16.4",
     "html-react-parser": "^4.2.2",
     "jsonwebtoken": "^9.0.0",
     "mongoose": "^7.3.0",

diff --git a/src/pages/components/Analytics.js b/src/pages/components/Analytics.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import AnaDetail from './AnaDetail'
 import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { AnimatePresence } from 'framer-motion'
 const Analytics = () => {
   return (
     <div>
@@ -19,7 +21,8 @@ const Analytics = () => {
                 <div className="px-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
       <div className="grid gap-5 row-gap-8 lg:grid-cols-2">
         <div className="flex flex-col justify-center">
-          <div className="max-w-xl mb-6">
+          <AnimatePresence mode="wait" initial={false}>
+          <motion.div className="max-w-xl mb-6" initial={{opacity:0,x:-200}} whileInView={{opacity:1,x:0}} transition={{duration:1}}>
             <div>
               <p className="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-white uppercase rounded-full bg-green-600">
                 Brand new
@@ -40,7 +43,8 @@ const Analytics = () => {
             Hey there, folks! we are diving into the world of project management where we provide how to showcase your projects using a dashboard.
 
             </p>
-          </div>
+          </motion.div>
+          </AnimatePresence>
           <Link href={"/components/AnaDetail"}><button
             href="/"
             aria-label=""
@@ -58,7 +62,8 @@ const Analytics = () => {
           </button>
           </Link>
         </div>
-        <div className="relative">
+<AnimatePresence mode="wait" initial={false}>
+        <motion.div className="relative" initial={{opacity:0,x:200}} whileInView={{opacity:1,x:0}} transition={{duration:1}}>
           <svg
             className="absolute w-full text-green-600"
             fill="currentColor"
@@ -83,7 +88,8 @@ const Analytics = () => {
             <rect x="420" y="205" width="75" height="187" rx="8" />
             <rect x="315" y="83" width="75" height="309" rx="8" />
           </svg>
-        </div>
+        </motion.div>
+        </AnimatePresence>
       </div>
     </div>
                 </section>

diff --git a/src/pages/components/Blog.js b/src/pages/components/Blog.js
@@ -1,8 +1,10 @@
 import React from 'react'
-
+import { motion } from 'framer-motion'
+import { AnimatePresence } from 'framer-motion'
 const Blog = () => {
   return (
-    <div>
+    <AnimatePresence mode='wait'  initial={false}>
+    <motion.div initial={{opacity:0,y:200}} whileInView={{opacity:1 ,y:0}} transition={{duration:1}}>
 
 <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
 
@@ -86,7 +88,8 @@ const Blog = () => {
 
 </div>
 
-    </div>
+    </motion.div>
+    </AnimatePresence>
   )
 }
 

diff --git a/src/pages/components/Cta.js b/src/pages/components/Cta.js
@@ -1,8 +1,9 @@
 import React from 'react'
 import Link from 'next/link'
+import { motion } from 'framer-motion'
 const Cta = () => {
   return (
-    <div>
+    <motion.div initial={{opacity:0,y:200}} whileInView={{opacity:1 ,y:0}} transition={{duration:1}}>
       <section className="py-2">
 
 <div className="bg-gradient-to-r from-red-500 via-purple-400 to-blue-500">
@@ -31,7 +32,7 @@ const Cta = () => {
 </div>
 
       </section>
-    </div>
+    </motion.div>
   )
 }
 

diff --git a/src/pages/components/Features.js b/src/pages/components/Features.js
@@ -2,12 +2,12 @@ import React from 'react'
 
 import { GiArtificialIntelligence } from 'react-icons/gi';
 import { FcCollaboration} from 'react-icons/fc';
-
+import { motion } from 'framer-motion';
 const Features = () => {
   return (
     <>
 
-<div className=" px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto" id="features">
+<motion.div className=" px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto" id="features" initial={{opacity:0,y:200}} whileInView={{opacity:1 ,y:0}} transition={{duration:1}}>
 
   <div className="mx-auto max-w-4xl mb-8 lg:mb-14 text-center">
     <h2 className="text-3xl lg:text-4xl font-bold text-gray-200">
@@ -73,7 +73,7 @@ const Features = () => {
     </div>
 
   </div>
-</div>
+</motion.div>
 
     </>
   )

diff --git a/src/pages/components/Hero.js b/src/pages/components/Hero.js
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { set } from "mongoose";
 import { useEffect } from "react";
+import { motion } from "framer-motion";
 const Hero = () => {
   const [console,setConsole]=useState(false);
   useEffect(()=>{
@@ -45,28 +46,31 @@ const Hero = () => {
         <section className="pt-12 bg-none sm:pt-16 ">
           <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
             <div className="max-w-2xl mx-auto text-center ">
-              <h1 className="px-6 lg:text-lg text-gray-200 sm:text-sm text-sm">
+              <motion.h1 className="px-6 lg:text-lg text-gray-200 sm:text-sm text-sm" initial={{opacity:0,y:-500}} animate={{opacity:1,y:0}}
+              transition={{duration:0.5}}
+              >
                 Welcome to Project Studio 🧑‍💻
-              </h1>
-              <p className="mt-5  hero-text font-bold leading-tight text-white sm:leading-tight sm:text-5xl lg:text-6xl lg:leading-normal text-2xl">
+              </motion.h1>
+              <motion.p className="mt-5  hero-text font-bold leading-tight text-white sm:leading-tight sm:text-5xl lg:text-6xl lg:leading-normal text-2xl" initial={{opacity:0,y:-500}} animate={{opacity:1,y:0}}
+              transition={{duration:0.5}}>
                 One Stop Solution For
                 {/* <span className="bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] blur-lg filter opacity-30 w-full h-full absolute inset-0"></span> */}
                 <span className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-transparent bg-clip-text">
                   {" "}
                   Project Mangement{" "}
                 </span>
-              </p>
+              </motion.p>
 
               <div className="px-8 sm:items-center sm:justify-center sm:px-0 sm:space-x-5 sm:flex mt-9">
-                <Link
+                <motion.div whileHover={{scale:1.05 }} whileTap={{scale:0.95}} transition={{duration:0.2}}><Link
                   href="/docs/Alldocs"
                   title=""
                   className="inline-flex  items-center justify-center w-full px-8 py-3 text-lg font-bold text-white transition-all duration-200 bg-purple-600 border-2 border-transparent sm:w-auto rounded-xl font-pj hover:bg-purple-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
                   role="button"
                 >
                   Explore More
                 </Link>
-
+                </motion.div>
                  {!console&&<Link 
                   href="/signup"
                   title=""
@@ -77,7 +81,7 @@ const Hero = () => {
                   Get Started
                   <Image src="/getstarted.png" alt="getstarted png" width={20} height={20} className="mx-2"/>
                 </Link>} 
-                {console&&<Link 
+                {console&&<motion.div whileHover={{scale:1.05 }} whileTap={{scale:0.95}} transition={{duration:0.2}}><Link 
                   href="/admin"
                   title=""
                   className="inline-flex items-center justify-center w-full px-6 py-3 mt-4 text-lg font-bold text-gray-200 transition-all duration-200 border-2 border-gray-400 sm:w-auto sm:mt-0 rounded-xl font-pj focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 hover:bg-gray-900 focus:bg-gray-900 hover:text-white focus:text-white hover:border-gray-900 focus:border-gray-900"
@@ -86,7 +90,7 @@ const Hero = () => {
 
                   Go to Console
                   <Image src="/getstarted.png" alt="getstarted png" width={20} height={20} className="mx-2"/>
-                </Link>}
+                </Link></motion.div>}
               </div>
             </div>
           </div>
@@ -99,9 +103,11 @@ const Hero = () => {
         <span className="relative w-3 h-3 border-2 rounded-full border-green-400"></span>
 
     </div>
-    <div className="relative bg-blue-600 border-t-0 w-full h-auto border-blue-900">
+    <motion.div className="relative bg-blue-600 border-t-0 w-full h-auto border-blue-900" initial={{x:-200,opacity:0}} animate={{opacity:1,x:0}}
+    duration={{duration:2}}
+    >
         <img src="https://res.cloudinary.com/dawzncoau/image/upload/v1699282604/dashboard_z7bik7.png" alt=""  className=""/>
-    </div>
+    </motion.div>
 </div>
         </section>
       </div>

diff --git a/src/pages/components/NewsLater.js b/src/pages/components/NewsLater.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import toast,{Toaster} from 'react-hot-toast'
+import { motion } from 'framer-motion'
 const NewsLater = () => {
     const[name,setName]=useState('')
     const[email,setEmail]=useState('')
@@ -42,7 +43,7 @@ else{
             setName('')
             setEmail('')
             setMessage('')
-            
+
             toast.success('Message sent successfully')
         }
         else{
@@ -51,7 +52,7 @@ else{
 }
 }
   return (
-    <section className="min-h-screen ">
+    <motion.section className="min-h-screen " initial={{opacity:0,y:200}} whileInView={{opacity:1 ,y:0}} transition={{duration:1}}>
     <Toaster/>
     <div className="container flex flex-col min-h-screen px-6 py-12 mx-auto bg-black">
         <div className="flex-1 lg:flex lg:items-center lg:-mx-6">
@@ -150,7 +151,7 @@ else{
             </div>
         </div>
     </div>
-</section>
+</motion.section>
 
   )
 }

diff --git a/src/pages/components/Pricing.js b/src/pages/components/Pricing.js
@@ -1,9 +1,9 @@
 import React from 'react'
-
+import { motion } from 'framer-motion'
 const Pricing = () => {
   return (
     <>
-      <section className="bg-black" id='price'>
+      <motion.section className="bg-black" id='price' initial={{opacity:0,y:200}} whileInView={{opacity:1 ,y:0}} transition={{duration:1}}>
   <div className="py-6 px-4 mx-auto max-w-screen-xl lg:py-6 lg:px-6">
       <div className="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
           <h2 className="mb-4 text-4xl tracking-tight  text-white font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-950">Our Pricing Plans</h2>
@@ -130,7 +130,7 @@ const Pricing = () => {
           </div>
       </div>
   </div>
-</section>
+</motion.section>
     </>
   )
 }

diff --git a/src/pages/components/Services.js b/src/pages/components/Services.js
@@ -1,12 +1,12 @@
 import React from 'react'
-
+import { motion } from 'framer-motion'
 const Services = () => {
   return (
     <>
     <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto" id='services'>
-<div className="relative p-6 md:p-16">
+<div className="relative p-6 md:p-16" >
 
-  <div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
+  <motion.div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center" initial={{opacity:0,x:200}} whileInView={{opacity:1,x:0}} transition={{duration:1}}>
     <div className="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
       <h2 className="text-2xl  font-bold sm:text-3x text-gray-200">
         Fully customizable rules to match your unique needs
@@ -81,7 +81,7 @@ const Services = () => {
       </div>
     </div>
 
-  </div>
+  </motion.div>
   <div className="absolute inset-0 grid grid-cols-12 w-full h-full">
     <div className="col-span-full lg:col-span-7 lg:col-start-6 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full bg-white/[.075]"></div>
   </div>

diff --git a/src/pages/components/Services2.js b/src/pages/components/Services2.js
@@ -1,8 +1,8 @@
 import React from 'react'
-
+import { motion } from 'framer-motion'
 const Services2 = () => {
   return (
-    <div>
+    <motion.div initial={{opacity:0,y:200}} whileInView={{opacity:1 ,y:0}} transition={{duration:1}}>
       <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
 
   <nav className="max-w-6xl mx-auto grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-4" aria-label="Tabs" role="tablist">
@@ -77,7 +77,7 @@ const Services2 = () => {
     </div>
     </div>
 
-    </div>
+    </motion.div>
 
   )
 }

diff --git a/src/pages/login.js b/src/pages/login.js
@@ -7,6 +7,7 @@ import Spinner from './components/Spinner';
 import Image from 'next/image';
 import { AiFillEye } from "react-icons/ai";
 import { AiFillEyeInvisible } from "react-icons/ai";
+import { motion } from 'framer-motion';
 import Head from 'next/head';
 // import { useMyContext } from '../context/Allstate';
 const Login = () => {
@@ -167,7 +168,7 @@ setPassword(e.target.value)
                             Password
                           </label>
                           <Link
-                            href={"/Forgot"}
+                            href={"/forgot"}
                             className="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline"
                           >
                             Forgot password?
@@ -200,12 +201,14 @@ setPassword(e.target.value)
                         )}
                       </div>
                       <div className="mt-6 ">
-                        <button
+                        <motion.button
+                          whileHover={{ scale: 1.05 }}
+                          whileTap={{ scale: 0.95 }}
                           onClick={handleSubmit}
                           className=" w-full px-4 py-2 tracking-wide text-white transition-colors duration-300 transform bg-purple-600 rounded-lg hover:bg-purple-800 focus:outline-none focus:bg-green-400 focus:ring focus:ring-green-300 focus:ring-opacity-50"
                         >
                           Sign in
-                        </button>
+                        </motion.button>
                       </div>
                       <div className="">
                         <p className="mt-4 text-center text-gray-200 dark:text-gray-400">

diff --git a/src/pages/signup.js b/src/pages/signup.js
@@ -67,6 +67,19 @@ setNumber(e.target.value)
         theme: "light",
         });
     }
+    else if(email.includes('@')==false&&email.includes('.')==false){
+      toast.error("Please Enter Valid Email Address", {
+        position: "top-left",
+        autoClose: 1500,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        });
+
+    }
     else{
     setLoading(true)
         const data ={name,email:email.toLowerCase(),password,number,npassword};
@@ -239,7 +252,7 @@ theme="light"
           <h1 className="text-center text-2xl font-bold text-indigo-600 sm:text-3xl hidden lg:block">
         Create Your Account 
       </h1>
-          <form  className="mt-8 grid grid-cols-6 gap-6">
+          <div  className="mt-8 grid grid-cols-6 gap-6">
 
             <div className="col-span-6 ">
               <label
@@ -348,7 +361,7 @@ theme="light"
                 .
               </p>
             </div>
-          </form>
+          </div>
         </div>
       </main>
     </div>