Merge pull request #305 from netlify-templates/tb/deved-89-update

updated to tailwind css v4

Author: TomasBankauskas

components/CustomImage.js

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 export default function CustomImage({ src, alt, ...otherProps }) {
   return (
-    <figure className="aspect-[4/3] relative">
+    <figure className="aspect-4/3 relative">
       <Image
         className="object-cover object-top"
         src={src}

components/Footer.js

@@ -57,7 +57,7 @@ const ThemeSwitcher = () => {
           document.documentElement.classList.add('dark');
           localStorage.setItem('theme', 'dark');
         }}
-        className="flex items-center justify-center w-24 h-10 p-2 pr-2 transition dark:bg-primary rounded-3xl align-center"
+        className="flex items-center justify-center w-24 h-10 p-2 pr-2 transition cursor-pointer dark:bg-primary rounded-3xl align-center"
       >
         {moonIcon}
       </button>
@@ -69,7 +69,7 @@ const ThemeSwitcher = () => {
           document.documentElement.classList.remove('dark');
           localStorage.setItem('theme', 'light');
         }}
-        className="flex items-center justify-center w-24 h-10 p-2 pr-2 transition bg-primary dark:bg-transparent rounded-3xl align-center"
+        className="flex items-center justify-center w-24 h-10 p-2 pr-2 transition cursor-pointer bg-primary dark:bg-transparent rounded-3xl align-center"
       >
         {sunIcon}
       </button>

components/Header.js

@@ -3,11 +3,9 @@ import Link from 'next/link';
 export default function Header({ name }) {
   return (
     <header className="pt-20 pb-12">
-      <div className="block w-12 h-12 mx-auto mb-4 rounded-full bg-gradient-conic from-gradient-3 to-gradient-4" />
+      <div className="block w-12 h-12 mx-auto mb-4 rounded-full bg-conic-180 from-gradient-3 from-0% to-gradient-4 to-100%" />
       <p className="text-2xl text-center dark:text-white">
-        <Link href="/">
-          {name}
-        </Link>
+        <Link href="/">{name}</Link>
       </p>
     </header>
   );