adjust homepgae

Author: Alex Patterson

app/(main)/page.tsx

@@ -26,7 +26,7 @@ export default async function HomePage() {
                   href={`/${homePage?.featuredCourse?._type}/${homePage?.featuredCourse?.slug}`}
                 >
                   {homePage?.featuredCourse?.coverImage && (
-                    <CoverImage image={homePage?.featuredCourse?.coverImage} />
+                    <CoverImage image={homePage?.featuredCourse?.coverImage} priority />
                   )}
                   <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                     {homePage?.featuredCourse?.title}
@@ -54,7 +54,7 @@ export default async function HomePage() {
                   href={`/${homePage?.latestPodcast?._type}/${homePage?.latestPodcast?.slug}`}
                 >
                   {homePage?.latestPodcast?.coverImage && (
-                    <CoverImage image={homePage?.latestPodcast?.coverImage} />
+                    <CoverImage image={homePage?.latestPodcast?.coverImage} priority />
                   )}
                   <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                     {homePage?.latestPodcast?.title}

components/cover-image.tsx

@@ -52,7 +52,9 @@ export default function CoverImage(props: CoverImageProps) {
         height={height || 1080}
         priority={priority}
         quality={quality || "auto"}
-        sizes="100vw"
+        sizes="(max-width: 768px) 100vw,
+          (max-width: 1200px) 50vw,
+          33vw"
         alt={source?.context?.custom?.alt || ""}
         src={source?.public_id}
         placeholder="blur"