Skip to content

Commit 7feec75

Browse files
mhartingtonmhartington
committed
chore(site): layout updates
1 parent 15b15e2 commit 7feec75

6 files changed

Lines changed: 70 additions & 56 deletions

File tree

‎apps/site/src/app/(index)/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const metadata: Metadata = {
8787
export default function SiteHome() {
8888
return (
8989
<main className="flex-1 w-full z-1 bg-background-default">
90-
<section className="hero h-full relative -mt-24 flex items-end justify-center px-4 pt-48">
90+
<section className="hero h-full relative -mt-24 flex items-end justify-center px-4 pt-40">
9191
<div className="w-screen h-full absolute inset-0">
9292
<Antigravity
9393
count={300}
@@ -108,7 +108,7 @@ export default function SiteHome() {
108108
/>
109109
</div>
110110
<div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-ppg)_0%,var(--color-background-default)_100%)] opacity-20" />
111-
<div className="content relative z-2 my-12 py-12 flex flex-col gap-8">
111+
<div className="content relative z-2 flex flex-col gap-8">
112112
<div className="flex flex-col gap-4 items-center text-center">
113113

114114
<h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">

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

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { cn } from "@/lib/cn";
1111
import { Card as FeatureCard } from "@/components/homepage/bento";
1212
import { YouTubePlayer } from "@prisma-docs/ui/components/youtube-player";
1313
import Image from "next/image";
14+
import Link from "next/link";
1415

1516
const statsSection = [
1617
{
@@ -44,13 +45,16 @@ const prismaPostgresQuickstartUrl =
4445
const CardFooter = () => (
4546
<>
4647
<Separator className="my-6" />
47-
<div className="flex flex-col md:flex-row justify-between w-full gap-8">
48+
<div className="flex flex-col items-center md:items-stretch md:flex-row justify-between w-full gap-8">
4849
{badge_list.map((badge: any) => (
49-
<div className="flex flex-col md:flex-row gap-2 md:gap-6 md:items-center" key={badge.title}>
50+
<div
51+
className="flex flex-col items-center md:items-center md:flex-row gap-2 md:gap-6"
52+
key={badge.title}
53+
>
5054
<h6 className="font-semibold text-2xs text-foreground-neutral uppercase">
5155
{badge.title}
5256
</h6>
53-
<div className="flex gap-3">
57+
<div className="flex justify-center md:justify-start gap-3">
5458
{badge.list &&
5559
badge.list.map((item: any) => (
5660
<Button
@@ -115,10 +119,10 @@ const twoCol = [
115119
Prisma's compatibility with popular tools ensures no stack lock-in, lower integration
116120
costs, and smooth transitions.
117121
</p>
118-
<a href="/stack" className="link-btn orm">
122+
<Link href="/stack" className="link-btn orm w-fit mx-auto lg:mx-0">
119123
<span>Learn more</span>
120124
<i className="fa-regular fa-arrow-right ml-2" />
121-
</a>
125+
</Link>
122126
</div>
123127
),
124128
imageUrl: null,
@@ -148,7 +152,7 @@ const twoCol_2 = [
148152
A meaningful comparison of database query latencies across database providers and ORM
149153
libraries in the Node.js & TypeScript ecosystem.
150154
</p>
151-
<Button variant="orm" size="xl" href="https://benchmarks.prisma.io" className="w-fit">
155+
<Button variant="orm" size="xl" href="https://benchmarks.prisma.io" className="w-fit mx-auto lg:w-full">
152156
<span>Explore Benchmarks</span>
153157
<i className="fa-regular fa-arrow-right ml-2!" />
154158
</Button>
@@ -180,10 +184,10 @@ const twoCol_2 = [
180184
intuitive, both for SQL veterans and developers brand new to databases. The
181185
auto-completion helps you figure out your query without the need for documentation.
182186
</p>
183-
<a href="/client" className="link-btn orm">
187+
<Link href="/client" className="link-btn orm w-fit mx-auto lg:mx-0">
184188
<span>Learn more</span>
185189
<i className="fa-regular fa-arrow-right ml-2" />
186-
</a>
190+
</Link>
187191
</div>
188192
),
189193
imageUrl: "/illustrations/orm/orm_2",
@@ -280,7 +284,7 @@ export default function ORM() {
280284
<JsonLd id="orm-software-application" data={ormStructuredData} />
281285
<div className="hero pt-40 -mt-24 flex items-end justify-center px-4 relative">
282286
<div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
283-
<div className="content relative z-2 my-12 py-12 flex flex-col gap-8">
287+
<div className="content relative z-2 flex flex-col gap-8">
284288
<div className="flex flex-col gap-4 items-center text-center">
285289
<div className="flex items-center gap-2 text-foreground-orm-weak uppercase tracking-widest text-sm font-sans-display font-black">
286290
<i className="fa-solid fa-database" />
@@ -318,7 +322,7 @@ export default function ORM() {
318322
</div>
319323
</div>
320324
</div>
321-
<div className="my-12 flex gap-30 w-fit mx-auto px-4 md:px-40">
325+
<div className="my-12 flex flex-col sm:flex-row gap-30 w-fit mx-auto px-4 sm:px-40">
322326
{statsSection?.map((stat: any, index: number) => (
323327
<InfoStats
324328
key={index}
@@ -339,15 +343,20 @@ export default function ORM() {
339343
<CardSection cardSection={twoCol_2} />
340344
<div className="grid md:grid-cols-2 gap-9">
341345
{twoCol_3.map((stat, index) => (
342-
<div key={stat.title} className="flex flex-col gap-4">
346+
<div key={stat.title} className="flex flex-col items-center md:items-start gap-4">
343347
<Action size="4xl" color="orm" className={cn(index === 0 && "p-0", "relative")}>
344348
<Image src={stat.icon} alt={stat.title} fill loading="lazy" />
345349
</Action>
346-
<h4 className="text-2xl font-sans-display stretch-display text-foreground-neutral">
350+
<h4 className="text-2xl text-center md:text-left font-sans-display stretch-display text-foreground-neutral">
347351
{stat.title}
348352
</h4>
349-
<p className="text-foreground-neutral-weak">{stat.description}</p>
350-
<Button variant="default-stronger" href={stat.btn.url} size="xl" className="w-fit">
353+
<p className="text-center md:text-left text-foreground-neutral-weak">{stat.description}</p>
354+
<Button
355+
variant="default-stronger"
356+
href={stat.btn.url}
357+
size="xl"
358+
className="w-fit mx-auto md:mx-0"
359+
>
351360
<span>
352361
{stat.btn.label} {stat.btn.icon && <i className={cn("ml-2", stat.btn.icon)} />}
353362
</span>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export default async function SiteHome() {
124124
<main className="flex-1 w-full z-1 bg-background-default">
125125
<div className="hero -mt-24 pt-40 flex items-end justify-center px-4 relative">
126126
<div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-ppg)_0%,var(--color-background-default)_100%)] opacity-20" />
127-
<div className="content relative z-2 my-12 py-12 flex flex-col gap-8">
127+
<div className="content relative z-2 flex flex-col gap-8">
128128
<div className="flex flex-col gap-4 items-center text-center">
129129
<div className="flex items-center gap-2 text-foreground-ppg-weak uppercase tracking-widest text-sm font-sans-display font-black">
130130
<i className="fa-solid fa-chart-pyramid" />
@@ -254,7 +254,7 @@ export default async function SiteHome() {
254254
</h3>
255255
<div className="content flex flex-col lg:flex-row gap-3 lg:gap-12 items-center md:items-start lg:items-center">
256256
<p className="max-w-94 w-full text-center md:text-left text-foreground-neutral-weak text-md">
257-
Usage-based pricing, with a generous free tier. 
Spend limits
257+
Usage-based pricing, with a generous free tier. Spend limits
258258
included, so you never get surprised.
259259
</p>
260260
<Button variant="ppg" size="2xl" href="/pricing">

‎apps/site/src/app/pricing/pricing-hero-plans.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ export function PricingHeroPlans({
3737

3838
return (
3939
<>
40-
<section className="-mt-24 pt-40 flex items-end justify-center px-4 relative">
40+
<section className="hero h-full relative -mt-24 flex items-end justify-center px-4 pt-40">
4141
<div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-ppg)_0%,var(--color-background-default)_100%)] opacity-20" />
42-
<div className="relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6 py-12">
42+
<div className="content relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6">
4343
<Badge
4444
color="ppg"
4545
size="lg"

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

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -126,51 +126,56 @@ export const metadata: Metadata = {
126126

127127
export default function StudioPage() {
128128
return (
129-
<main className="flex-1 w-full -mt-24 bg-background-default text-foreground-neutral">
129+
<main className="flex-1 w-full bg-background-default text-foreground-neutral">
130130
<JsonLd id="studio-software-application" data={studioStructuredData} />
131131
{/* Hero Section */}
132-
<section className="relative overflow-hidden bg-[linear-gradient(180deg,var(--color-background-orm)_0%,var(--color-background-default)_72%)] px-4 pt-60 pb-12">
132+
<section className="hero pt-40 -mt-24 flex items-end justify-center px-4 relative overflow-hidden bg-[linear-gradient(180deg,var(--color-background-orm)_0%,var(--color-background-default)_72%)]">
133133
<div className="pointer-events-none absolute inset-x-1/2 top-20 h-[780px] w-[1664px] -translate-x-1/2 rounded-full bg-[repeating-radial-gradient(circle_at_top,rgba(99,102,241,0.28)_0,rgba(99,102,241,0.28)_2px,transparent_2px,transparent_42px)] opacity-45 mask-[linear-gradient(to_bottom,rgba(0,0,0,0.9),transparent_78%)]" />
134134
<div className="pointer-events-none absolute inset-x-0 top-0 h-[520px] bg-[radial-gradient(70%_65%_at_50%_5%,rgba(79,70,229,0.3),transparent_70%)]" />
135135

136-
<div className="relative mx-auto flex max-w-[1200px] flex-col items-center gap-12">
137-
<div className="flex max-w-[766px] flex-col items-center gap-8 text-center">
138-
<div className="flex flex-col items-center gap-2">
139-
<p className="m-0 flex items-center gap-2 text-base uppercase tracking-[1.6px] text-foreground-orm-strong font-sans-display [font-variation-settings:'wght'_800]">
140-
<i className="fa-regular fa-table text-sm" aria-hidden="true" />
141-
Prisma Studio
142-
</p>
143-
<h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
144-
Explore and
145-
<br />
146-
understand your data
147-
</h1>
136+
<div className="content relative z-2 flex w-full max-w-[1200px] flex-col gap-8">
137+
<div className="flex flex-col gap-4 items-center text-center">
138+
<div className="flex items-center gap-2 text-foreground-orm-weak uppercase tracking-widest text-sm font-sans-display font-black">
139+
<i className="fa-regular fa-table" aria-hidden="true" />
140+
<span>Prisma Studio</span>
148141
</div>
142+
<h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
143+
Explore and
144+
<br />
145+
understand your data
146+
</h1>
147+
</div>
149148

150-
<p className="m-0 max-w-[650px] text-lg leading-8 text-foreground-neutral md:text-xl">
151-
The ultimate tool for exploring and editing data in your Prisma project. Work locally
152-
or team up inside the Prisma Console.
153-
</p>
149+
<p className="text-center text-foreground-neutral max-w-2xl mx-auto">
150+
The ultimate tool for exploring and editing data in your Prisma project. Work locally
151+
or team up inside the Prisma Console.
152+
</p>
154153

155-
<div className="flex flex-col items-center gap-4 sm:flex-row">
156-
<Button
157-
variant="orm"
158-
size="2xl"
159-
href={CONSOLE_URL}
160-
target="_blank"
161-
rel="noopener noreferrer"
162-
>
163-
<span>Explore Studio in Prisma Console</span>
164-
<i className="fa-regular fa-arrow-up-right ml-2" />
165-
</Button>
166-
<Button variant="default-stronger" size="2xl" href={STUDIO_DOCS_URL}>
167-
<span>Try locally</span>
168-
<i className="fa-regular fa-arrow-down ml-2" />
169-
</Button>
170-
</div>
154+
<div className="flex flex-col md:flex-row gap-4 items-center justify-center">
155+
<Button
156+
variant="orm"
157+
size="3xl"
158+
href={CONSOLE_URL}
159+
target="_blank"
160+
rel="noopener noreferrer"
161+
className="font-sans-display! font-[650]"
162+
>
163+
<span>Explore Studio in Prisma Console</span>
164+
<i className="fa-regular fa-arrow-up-right ml-2" />
165+
</Button>
166+
<Button
167+
variant="default-stronger"
168+
size="3xl"
169+
href={STUDIO_DOCS_URL}
170+
className="font-sans-display! font-[650]"
171+
>
172+
<span>Try locally</span>
173+
<i className="fa-regular fa-arrow-down ml-2" />
174+
</Button>
171175
</div>
172176

173177
<Image
178+
className="w-full h-auto"
174179
src="/illustrations/studio/hero.svg"
175180
alt="Prisma Studio Hero"
176181
width={1200}

‎apps/site/src/components/homepage/card-section/card-section.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ interface CardSectionProps {
3030

3131
const imageShadowClass = "shadow-[0_10px_25px_-5px_rgba(0,0,0,0.1)]";
3232
const sectionClass =
33-
"py-6 md:py-8 lg:py-12 my-6 md:my-8 lg:my-12 w-full overflow-visible";
33+
"py-6 md:py-8 lg:py-12 my-6 md:my-8 lg:my-12 w-full overflow-visible px-4 sm:px-0";
3434

3535
const getCardSectionItemKey = (item: TwoColumnItem) =>
3636
[
@@ -290,7 +290,7 @@ export const CardSection = ({ cardSection }: CardSectionProps) => {
290290
<div
291291
ref={containerRef}
292292
className={cn(
293-
"max-w-[1232px] mx-auto mt-8 px-4 overflow-visible",
293+
"max-w-[1232px] mx-auto mt-8 px-0 sm:px-4 overflow-visible",
294294
hasSteps && "flex-col md:flex-row items-start gap-6! relative",
295295
)}
296296
>

0 commit comments

Comments
 (0)