diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
index 0da80eb7b9..d7be4dd3cd 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -149,8 +149,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
-
-
+
diff --git a/apps/site/src/components/ecosystem/grid.tsx b/apps/site/src/components/ecosystem/grid.tsx
index 2640434c21..9e8923628b 100644
--- a/apps/site/src/components/ecosystem/grid.tsx
+++ b/apps/site/src/components/ecosystem/grid.tsx
@@ -33,6 +33,7 @@ export const EcosystemGrid = () => {
{filters.slice(0, -1).map((filter) => (
{
label={box.type}
>
-
+
{
alt={card.title}
width={1200}
height={800}
- loading="lazy"
+ loading="eager"
className="px-4 z-2 pt-0 pb-0 min-w-full min-h-[60%] object-fill object-[top_left] [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)_60%,transparent_90%)] [-webkit-mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)_60%,transparent_90%)]"
/>
)}
diff --git a/apps/site/src/components/orm/info-stats.tsx b/apps/site/src/components/orm/info-stats.tsx
index a5182ace66..2a31d05366 100644
--- a/apps/site/src/components/orm/info-stats.tsx
+++ b/apps/site/src/components/orm/info-stats.tsx
@@ -1,7 +1,14 @@
"use client";
-import { FunctionComponent } from "react";
-import AnimatedNumbers from "react-animated-numbers";
+import { type CSSProperties, FunctionComponent } from "react";
import { cn } from "@/lib/cn";
+
+const numberStyle = {
+ fontStyle: "normal",
+ fontWeight: 700,
+ lineHeight: "100%",
+ letterSpacing: "-0.02em",
+} satisfies CSSProperties;
+
export const InfoStats: FunctionComponent<{
icon?: any;
number?: string;
@@ -12,7 +19,7 @@ export const InfoStats: FunctionComponent<{
return (
match && (
-
+
{link && (
-
+
{match[1]}
{match[2]}
diff --git a/apps/site/src/components/postgres.tsx b/apps/site/src/components/postgres.tsx
index 8516ddefc3..94ec06d745 100644
--- a/apps/site/src/components/postgres.tsx
+++ b/apps/site/src/components/postgres.tsx
@@ -69,7 +69,7 @@ export function PostgresTabs({ data }: { data: HowSectionData }) {
alt={body.title}
width={1200}
height={800}
- loading="lazy"
+ loading="eager"
className="hidden lg:dark:block md:max-h-83"
/>
@@ -95,7 +95,7 @@ export function PostgresTabs({ data }: { data: HowSectionData }) {
alt={body.title}
width={1200}
height={800}
- loading="lazy"
+ loading="eager"
className="hidden lg:block dark:hidden md:max-h-83"
/>
>
diff --git a/packages/ui/src/components/youtube-player.tsx b/packages/ui/src/components/youtube-player.tsx
index 1639ba692e..e4097195cc 100644
--- a/packages/ui/src/components/youtube-player.tsx
+++ b/packages/ui/src/components/youtube-player.tsx
@@ -11,6 +11,7 @@ export const YouTubePlayer = ({
autoplay = false,
overlay,
playOnView = false,
+ loading = "lazy",
}: {
className?: string;
serverlessTalk?: boolean;
@@ -19,6 +20,7 @@ export const YouTubePlayer = ({
playOnView?: boolean;
autoplay?: boolean;
overlay?: string;
+ loading?: "eager" | "lazy";
}) => {
const [playing, setPlaying] = useState(false);
const [shouldAutoplay, setShouldAutoplay] = useState(autoplay);
@@ -97,6 +99,7 @@ export const YouTubePlayer = ({
serverlessTalk && "absolute top-0 left-0 w-full h-full",
)}
height="287"
+ loading={loading}
src={`https://www.youtube.com/embed/${video}${getAutoplayParams()}`}
title="YouTube Video"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; autoplay"