Footer & single project transitions + refactoring

Author: realstoman

src/components/projects/ProjectInfo.js

@@ -26,7 +26,7 @@ const ProjectInfo = () => {
 											className={
 												info.title === 'Website' ||
 												info.title === 'Phone'
-													? 'hover:underline cursor-pointer'
+													? 'hover:underline hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer duration-300'
 													: ''
 											}
 											aria-label="Project Website and Phone"
@@ -76,7 +76,7 @@ const ProjectInfo = () => {
 										href={social.url}
 										target="__blank"
 										aria-label="Share Project"
-										className="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
+										className="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm duration-500"
 									>
 										<span className="text-lg lg:text-2xl">
 											{social.icon}

src/components/shared/AppFooter.js

@@ -39,7 +39,7 @@ const AppFooter = () => {
 								href={link.url}
 								target="__blank"
 								key={link.id}
-								className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4"
+								className="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm p-4 duration-300"
 							>
 								<i className="text-xl sm:text-2xl md:text-3xl">
 									{link.icon}

src/components/shared/AppFooterCopyright.js

@@ -7,15 +7,15 @@ function AppFooterCopyright() {
 				© {new Date().getFullYear()}
 				<Link
 					to="https://github.com/realstoman/react-tailwindcss-portfolio"
-					className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1"
+					className="hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
 				>
 					React & TailwindCSS Portfolio
 				</Link>
 				.
 				<Link
 					to="https://stoman.me"
 					target="__blank"
-					className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1"
+					className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline hover:text-indigo-600 dark:hover:text-indigo-300 ml-1 duration-500"
 				>
 					Stoman
 				</Link>