Skip to content

Commit ede9763

Browse files
author
Carla Goncalves
committed
Update image usages
1 parent 0e389f4 commit ede9763

8 files changed

Lines changed: 122 additions & 46 deletions

File tree

‎apps/site/src/app/about/page.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Image from "next/image";
12
import Antigravity from "../../components/homepage/antigravity";
23
import { createPageMetadata } from "@/lib/page-metadata";
34
import {
@@ -338,15 +339,19 @@ export default function About() {
338339
<div className="hero -mt-24 relative flex items-end justify-center px-4 pb-40 pt-30">
339340
<div className="absolute inset-0 z-1 bg-[linear-gradient(180deg,transparent_0%,var(--color-background-default)_150%)]" />
340341
<div className="w-screen absolute inset-0 z-0">
341-
<img
342+
<Image
342343
src="/illustrations/about/hero_bg.svg"
343344
alt="Hero lines"
344-
className="w-full h-full object-cover object-bottom hidden dark:block"
345+
fill
346+
className="object-cover object-bottom hidden dark:block"
347+
loading="lazy"
345348
/>
346-
<img
349+
<Image
347350
src="/illustrations/about/hero_bg_light.svg"
348351
alt="Hero lines"
349-
className="w-full h-full object-cover object-bottom block dark:hidden"
352+
fill
353+
className="object-cover object-bottom block dark:hidden"
354+
loading="lazy"
350355
/>
351356
</div>
352357
<div className="content relative z-2 my-12 flex flex-col gap-8 mt-30 py-12">
@@ -397,7 +402,14 @@ export default function About() {
397402
target="_blank"
398403
rel="noopener noreferrer"
399404
>
400-
<img src={company.logo} alt={company.name} className="w-auto" />
405+
<Image
406+
src={company.logo}
407+
alt={company.name}
408+
width={120}
409+
height={40}
410+
className="w-auto"
411+
loading="lazy"
412+
/>
401413
</a>
402414
))}
403415
</div>
@@ -406,10 +418,13 @@ export default function About() {
406418
{investors.people.map((investor: any, idx: number) => (
407419
<div key={idx} className="p-4 flex gap-4">
408420
<Avatar size="3xl">
409-
<img
421+
<Image
410422
src={investor.imageUrl}
411423
alt={investor.name}
424+
width={80}
425+
height={80}
412426
className="w-full"
427+
loading="lazy"
413428
/>
414429
</Avatar>
415430
<div className="flex flex-col gap-1">

‎apps/site/src/app/careers/page.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Metadata } from "next";
2+
import Image from "next/image";
23
import { Action, Button } from "@prisma/eclipse";
34
import { CardSection } from "@/components/homepage/card-section/card-section";
45
import { StatsList } from "@/components/careers/stats-list";
@@ -184,15 +185,19 @@ export default function Careers() {
184185
<main className="flex-1 w-full z-1 bg-background-default">
185186
<div className="hero -mt-24 relative flex items-end justify-center px-4 pt-24">
186187
<div className="w-screen absolute inset-0 opacity-20">
187-
<img
188+
<Image
188189
src="/illustrations/careers/hero_lines.svg"
189190
alt="Hero lines"
190-
className="w-full h-full object-cover object-bottom hidden dark:block"
191+
fill
192+
priority={true}
193+
className="object-cover object-bottom hidden dark:block"
191194
/>
192-
<img
195+
<Image
193196
src="/illustrations/careers/hero_lines_light.svg"
194197
alt="Hero lines"
195-
className="w-full h-full object-cover object-bottom block dark:hidden"
198+
fill
199+
priority={true}
200+
className="object-cover object-bottom block dark:hidden"
196201
/>
197202
</div>
198203
<div className="content relative z-2 my-12 flex flex-col gap-8 mt-30 py-12">

‎apps/site/src/app/client/page.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Image from "next/image";
12
import { createPageMetadata } from "@/lib/page-metadata";
23
import { Action, Button, Card } from "@prisma/eclipse";
34
import API from "@/components/client/api";
@@ -235,7 +236,13 @@ export default function Client() {
235236
size="4xl"
236237
className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong"
237238
>
238-
<img src={db.icon} alt={db.name} />
239+
<Image
240+
src={db.icon}
241+
alt={db.name}
242+
width={48}
243+
height={48}
244+
loading="lazy"
245+
/>
239246
</Action>
240247
</Technology>
241248
))}
@@ -258,7 +265,13 @@ export default function Client() {
258265
size="4xl"
259266
className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong"
260267
>
261-
<img src={fw.icon} alt={fw.name} />
268+
<Image
269+
src={fw.icon}
270+
alt={fw.name}
271+
width={48}
272+
height={48}
273+
loading="lazy"
274+
/>
262275
</Action>
263276
</Technology>
264277
))}

‎apps/site/src/app/orm/page.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { InfoStats } from "@/components/orm/info-stats";
88
import { cn } from "@/lib/cn";
99
import { Card as FeatureCard } from "@/components/homepage/bento";
1010
import { YouTubePlayer } from "@prisma-docs/ui/components/youtube-player";
11+
import Image from "next/image";
1112

1213
const statsSection = [
1314
{
@@ -334,13 +335,9 @@ export default function ORM() {
334335
<Action
335336
size="4xl"
336337
color="orm"
337-
className={cn(index === 0 && "p-0")}
338+
className={cn(index === 0 && "p-0", "relative")}
338339
>
339-
<img
340-
src={stat.icon}
341-
alt={stat.title}
342-
className="w-full h-full"
343-
/>
340+
<Image src={stat.icon} alt={stat.title} fill loading="lazy" />
344341
</Action>
345342
<h4 className="text-2xl font-sans-display stretch-display text-foreground-neutral">
346343
{stat.title}

‎apps/site/src/components/logo-parade.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22
import { useState } from "react";
3+
import Image from "next/image";
34

45
const logoParade = [
56
{
@@ -140,11 +141,12 @@ export default function LogoParade() {
140141
rel="noopener noreferrer"
141142
className="relative shrink-0 rounded-lg overflow-hidden cursor-pointer transition-transform duration-200 invert-100 dark:brightness-150 dark:hover:filter-none contrast-75 grayscale hover:filter-none"
142143
>
143-
<img
144+
<Image
144145
src={item.imageUrl}
145146
width={item.width}
146147
height={item.height}
147148
alt={item.label}
149+
loading="lazy"
148150
className="w-full h-full object-contain object-center"
149151
/>
150152
</a>

‎apps/site/src/components/postgres.tsx‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import Image from "next/image";
34
import parse from "html-react-parser";
45
import {
56
CodeBlock,
@@ -63,36 +64,54 @@ export function PostgresTabs({ data }: { data: HowSectionData }) {
6364
{body.image && (
6465
<>
6566
{/* Dark mode images - only visible in dark mode */}
66-
<img
67+
<Image
6768
src={`${body.image}.svg`}
6869
alt={body.title}
70+
width={1200}
71+
height={800}
72+
loading="lazy"
6973
className="hidden lg:dark:block md:max-h-83"
7074
/>
71-
<img
75+
<Image
7276
src={`${body.image}_tablet.svg`}
7377
alt={body.title}
78+
width={1200}
79+
height={800}
80+
loading="lazy"
7481
className="hidden sm:dark:block lg:dark:hidden md:max-h-83"
7582
/>
76-
<img
83+
<Image
7784
src={`${body.image}_mobile.svg`}
7885
alt={body.title}
86+
width={1200}
87+
height={800}
88+
loading="lazy"
7989
className="hidden dark:block sm:dark:hidden md:max-h-83"
8090
/>
8191

8292
{/* Light mode images - only visible in light mode */}
83-
<img
93+
<Image
8494
src={`${body.image}_light.svg`}
8595
alt={body.title}
96+
width={1200}
97+
height={800}
98+
loading="lazy"
8699
className="hidden lg:block dark:hidden md:max-h-83"
87100
/>
88-
<img
101+
<Image
89102
src={`${body.image}_tablet_light.svg`}
90103
alt={body.title}
104+
width={1200}
105+
height={800}
106+
loading="lazy"
91107
className="hidden sm:block lg:hidden dark:hidden md:max-h-83"
92108
/>
93-
<img
109+
<Image
94110
src={`${body.image}_mobile_light.svg`}
95111
alt={body.title}
112+
width={1200}
113+
height={800}
114+
loading="lazy"
96115
className="block sm:hidden dark:hidden md:max-h-83"
97116
/>
98117
</>

‎apps/site/src/components/prisma-with/community-section.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Image from "next/image";
12
import parse from "html-react-parser";
23
import { cn } from "../../lib/cn";
34
import { Card, Action } from "@prisma/eclipse";
@@ -45,9 +46,12 @@ export function CommunitySection({ data }: { data: CommunitySectionData }) {
4546
className="self-start flex-none"
4647
>
4748
{card.image ? (
48-
<img
49+
<Image
4950
src={card.image}
5051
alt=""
52+
width={24}
53+
height={24}
54+
loading="lazy"
5155
className="h-6 w-6 object-contain"
5256
/>
5357
) : (

‎apps/site/src/components/prisma-with/hero.tsx‎

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Image from "next/image";
12
import parse from "html-react-parser";
23
import { cn } from "../../lib/cn";
34
import { Button } from "@prisma/eclipse";
@@ -66,36 +67,56 @@ export function Hero({ data }: { data: HeroData }) {
6667
</div>
6768
<div className="logos relative max-h-78 hidden md:block">
6869
<div className="absolute left-0 top-0 w-57 h-44 object-cover bg-background-default flex items-center justify-center p-9 border border-stroke-ppg-weak rounded-2xl">
69-
<img
70-
src={data.imageUrl}
70+
<div
7171
className={cn(
72-
"dark:hidden h-full max-w-full contain",
72+
"dark:hidden h-full w-full relative",
7373
data.imageClassName,
7474
)}
75-
alt={`Prisma with ${data.tech}`}
76-
/>
75+
>
76+
<Image
77+
src={data.imageUrl}
78+
fill
79+
className="object-contain"
80+
alt={`Prisma with ${data.tech}`}
81+
priority={true}
82+
/>
83+
</div>
7784
{data.imageUrlLight && (
78-
<img
79-
src={data.imageUrlLight}
85+
<div
8086
className={cn(
81-
"hidden dark:block h-full max-w-full contain",
87+
"hidden dark:block h-full w-full relative",
8288
data.imageClassNameLight,
8389
)}
84-
alt={`Prisma with ${data.tech}`}
85-
/>
90+
>
91+
<Image
92+
src={data.imageUrlLight}
93+
fill
94+
className="object-contain"
95+
alt={`Prisma with ${data.tech}`}
96+
priority={true}
97+
/>
98+
</div>
8699
)}
87100
</div>
88101
<div className="absolute right-0 bottom-0 w-57 h-44 object-cover bg-background-default flex items-center justify-center p-9 border border-stroke-ppg-weak rounded-2xl">
89-
<img
90-
src="/icons/technologies/prisma.svg"
91-
className="dark:block hidden h-full contain"
92-
alt="Prisma"
93-
/>
94-
<img
95-
src="/icons/technologies/prisma_light.svg"
96-
className="dark:hidden h-full contain"
97-
alt="Prisma"
98-
/>
102+
<div className="dark:block hidden h-full w-full relative">
103+
<Image
104+
src="/icons/technologies/prisma.svg"
105+
fill
106+
className="object-contain"
107+
alt="Prisma"
108+
priority={true}
109+
/>
110+
</div>
111+
<div className="dark:hidden h-full w-full relative">
112+
<Image
113+
src="/icons/technologies/prisma_light.svg"
114+
fill
115+
className="object-contain"
116+
alt="Prisma"
117+
priority={true}
118+
/>
119+
</div>
99120
</div>
100121
</div>
101122
</div>

0 commit comments

Comments
 (0)