improve image optimization usage

next.config.mjs

@@ -30,19 +30,13 @@ const config = {
       },
       {
         protocol: 'https',
-        hostname: '*.ytimg.com',
+        hostname: 'tailwindui.com',
         port: '',
         pathname: '/**',
       },
       {
         protocol: 'https',
-        hostname: '*.imgur.com',
+        hostname: '*.producthunt.com',
-        port: '',
-        pathname: '/**',
-      },
-      {
-        protocol: 'https',
-        hostname: '*.githubusercontent.com',
         port: '',
         pathname: '/**',
       },

src/pages/index.tsx

@@ -10,12 +10,7 @@ import { CheckIcon } from "@heroicons/react/20/solid";
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
 import Footer from "~/components/Footer";
 import Header from "~/components/Header";
-
+import Image from "next/image";
-const navigation = [
-  { name: "Features", href: "#features" },
-  { name: "Pricing", href: "/pricing" },
-  { name: "Discord", href: "https://discord.com/invite/invalid" },
-];
 
 const Home: NextPage = () => {
   const [, setRecordOpen] = useAtom(recordVideoModalOpen);
@@ -115,7 +110,7 @@ const Home: NextPage = () => {
                         className="mr-8 h-[54px] min-w-[250px] overflow-hidden"
                       >
                         <a href={url} target="_blank">
-                          <img
+                          <Image
                             src={image}
                             alt={title}
                             className="h-[54px] w-[250px]"
@@ -145,8 +140,10 @@ const Home: NextPage = () => {
             </div>
             <div className="mt-6 flex flex-col gap-x-6 lg:mt-16 lg:flex-row lg:gap-x-20">
               <div className="mb-24 flex flex-1 items-center justify-center lg:mb-0">
-                <img
+                <Image
-                  src="https://i.ibb.co/wcpMNG9/633edb0b80d27778f9078a5c-home-main-2x.webp"
+                  src="https://f003.backblazeb2.com/file/test-cloudflares/how+it+works.webp"
+                  width={600}
+                  height={575}
                   alt="step description"
                 />
               </div>
@@ -210,6 +207,8 @@ const Home: NextPage = () => {
                     "To centralize team knowledge",
                     "To collaborate asynchronously",
                   ],
+                  image:
+                    "https://f003.backblazeb2.com/file/test-cloudflares/engineering+usecase.png",
                 },
                 {
                   title: "Bug Reporting",
@@ -220,6 +219,8 @@ const Home: NextPage = () => {
                     "Request a quick demo when the bug is fixed",
                     "Keep it in your issue tracking system",
                   ],
+                  image:
+                    "https://f003.backblazeb2.com/file/test-cloudflares/bug+report+usecase.webp",
                 },
                 {
                   title: "Education",
@@ -229,6 +230,8 @@ const Home: NextPage = () => {
                     "To complement a curriculum",
                     "To add context to assignments",
                   ],
+                  image:
+                    "https://f003.backblazeb2.com/file/test-cloudflares/education+usecase.webp",
                 },
                 {
                   title: "Support",
@@ -239,13 +242,15 @@ const Home: NextPage = () => {
                     "To improve self-serve content",
                     "To accelerate team onboarding",
                   ],
+                  image:
+                    "https://f003.backblazeb2.com/file/test-cloudflares/support+usecase.webp",
                 },
-              ].map(({ title, description, features }) => (
+              ].map(({ title, description, features, image }) => (
                 <div
                   key={title}
-                  className="flex-1 overflow-hidden rounded-lg border border-[#eaeaea]"
+                  className="max-w-[600px] flex-1 overflow-hidden rounded-lg border border-[#eaeaea]"
                 >
-                  <div className="flex flex-col py-8">
+                  <div className="flex flex-col pb-2 pt-8">
                     <div className="flex flex-col px-8">
                       <span className="mb-3 text-xl font-semibold">
                         {title}
@@ -261,9 +266,12 @@ const Home: NextPage = () => {
                       ))}
                     </div>
                   </div>
-                  <img
+                  <Image
-                    src="https://i.imgur.com/8UqJzoD.png"
+                    src={image}
+                    width={600}
+                    height={575}
                     alt="usecase cover"
+                    unoptimized
                   />
                 </div>
               ))}
@@ -280,7 +288,7 @@ const Home: NextPage = () => {
             ].map(({ stat, value }) => (
               <div
                 key={stat}
-                className="flex flex-1 flex-col py-5 text-center lg:border-r lg:border-[#eaeaea] lg:py-0"
+                className="flex flex-1 flex-col py-5 text-center lg:border-r lg:border-[#eaeaea] lg:py-0 lg:last:border-r-0"
               >
                 <span className="text-6xl font-bold text-black">{value}</span>
                 <span className="pt-2 text-sm font-semibold uppercase text-[#666]">

src/pages/videos.tsx

@@ -162,7 +162,7 @@ interface VideoCardProps {
 
 const VideoCardSkeleton = () => {
   return (
-    <div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
+    <div className="animate-pulse h-[240px] w-[250px] overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
       <figure className="relative aspect-video w-full bg-slate-200"></figure>
       <div className="m-4 flex flex-col">
         <span className="h-4 rounded bg-slate-200"></span>
@@ -177,7 +177,7 @@ const VideoCard = ({ title, id, createdAt, thumbnailUrl }: VideoCardProps) => {
     <Link href={`/share/${id}`}>
       <div className="h-[240px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
         <figure>
-          <Image
+          <img
             src={thumbnailUrl}
             alt="video thumbnail"
             width={248}