Animate contact page

Author: realstoman

src/pages/Contact.js

@@ -1,12 +1,18 @@
+import { motion } from 'framer-motion';
 import ContactDetails from '../components/contact/ContactDetails';
 import ContactForm from '../components/contact/ContactForm';
 
 const Contact = () => {
 	return (
-		<div className="container mx-auto flex flex-col-reverse lg:flex-row py-5 lg:py-10 lg:mt-10">
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			exit={{ opacity: 0 }}
+			className="container mx-auto flex flex-col-reverse lg:flex-row py-5 lg:py-10 lg:mt-10"
+		>
 			<ContactForm />
 			<ContactDetails />
-		</div>
+		</motion.div>
 	);
 };