From 0441cffb1e857038a05d87c5e4d36adf8ac997f7 Mon Sep 17 00:00:00 2001 From: ArthurGamby Date: Fri, 27 Mar 2026 18:31:05 +0100 Subject: [PATCH 1/3] feat(site): add TypedSQL product page Rebuild the TypedSQL page from the old website into the new apps/site with ORM color scheme, CardSection blocks, YouTube embed, and Card+Action expand section. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../typedsql/end-to-end-type-safety.svg | 70 +++++++ .../typedsql/end-to-end-type-safety_light.svg | 70 +++++++ .../typedsql/full-controll-sql.svg | 69 +++++++ .../typedsql/full-controll-sql_light.svg | 69 +++++++ .../illustrations/typedsql/great-dx.svg | 100 ++++++++++ .../illustrations/typedsql/great-dx_light.svg | 100 ++++++++++ apps/site/src/app/sitemap.ts | 5 + apps/site/src/app/typedsql/page.tsx | 180 ++++++++++++++++++ .../typedsql/expand-capabilities.tsx | 46 +++++ .../src/components/typedsql/video-section.tsx | 22 +++ 10 files changed, 731 insertions(+) create mode 100644 apps/site/public/illustrations/typedsql/end-to-end-type-safety.svg create mode 100644 apps/site/public/illustrations/typedsql/end-to-end-type-safety_light.svg create mode 100644 apps/site/public/illustrations/typedsql/full-controll-sql.svg create mode 100644 apps/site/public/illustrations/typedsql/full-controll-sql_light.svg create mode 100644 apps/site/public/illustrations/typedsql/great-dx.svg create mode 100644 apps/site/public/illustrations/typedsql/great-dx_light.svg create mode 100644 apps/site/src/app/typedsql/page.tsx create mode 100644 apps/site/src/components/typedsql/expand-capabilities.tsx create mode 100644 apps/site/src/components/typedsql/video-section.tsx diff --git a/apps/site/public/illustrations/typedsql/end-to-end-type-safety.svg b/apps/site/public/illustrations/typedsql/end-to-end-type-safety.svg new file mode 100644 index 0000000000..83f97c8178 --- /dev/null +++ b/apps/site/public/illustrations/typedsql/end-to-end-type-safety.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/illustrations/typedsql/end-to-end-type-safety_light.svg b/apps/site/public/illustrations/typedsql/end-to-end-type-safety_light.svg new file mode 100644 index 0000000000..83f97c8178 --- /dev/null +++ b/apps/site/public/illustrations/typedsql/end-to-end-type-safety_light.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/illustrations/typedsql/full-controll-sql.svg b/apps/site/public/illustrations/typedsql/full-controll-sql.svg new file mode 100644 index 0000000000..3e9ec634b1 --- /dev/null +++ b/apps/site/public/illustrations/typedsql/full-controll-sql.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/illustrations/typedsql/full-controll-sql_light.svg b/apps/site/public/illustrations/typedsql/full-controll-sql_light.svg new file mode 100644 index 0000000000..3e9ec634b1 --- /dev/null +++ b/apps/site/public/illustrations/typedsql/full-controll-sql_light.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/illustrations/typedsql/great-dx.svg b/apps/site/public/illustrations/typedsql/great-dx.svg new file mode 100644 index 0000000000..1f52baa951 --- /dev/null +++ b/apps/site/public/illustrations/typedsql/great-dx.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/illustrations/typedsql/great-dx_light.svg b/apps/site/public/illustrations/typedsql/great-dx_light.svg new file mode 100644 index 0000000000..1f52baa951 --- /dev/null +++ b/apps/site/public/illustrations/typedsql/great-dx_light.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/app/sitemap.ts b/apps/site/src/app/sitemap.ts index 9e93526e38..cf9bbf2a7f 100644 --- a/apps/site/src/app/sitemap.ts +++ b/apps/site/src/app/sitemap.ts @@ -12,5 +12,10 @@ export default function sitemap(): MetadataRoute.Sitemap { changeFrequency: "daily", priority: 1, }, + { + url: new URL("/typedsql", baseUrl).toString(), + changeFrequency: "weekly", + priority: 0.8, + }, ]; } diff --git a/apps/site/src/app/typedsql/page.tsx b/apps/site/src/app/typedsql/page.tsx new file mode 100644 index 0000000000..dc2d0e86e6 --- /dev/null +++ b/apps/site/src/app/typedsql/page.tsx @@ -0,0 +1,180 @@ +import type { Metadata } from "next"; +import { Button } from "@prisma/eclipse"; +import { CardSection } from "@/components/homepage/card-section/card-section"; +import { VideoSection } from "@/components/typedsql/video-section"; +import { ExpandCapabilities } from "@/components/typedsql/expand-capabilities"; + +const twoCol = [ + { + content: ( + <> +

+ End-to-end
type-safety +

+

+ All TypedSQL queries have typed inputs and outputs preventing errors related to incorrect + types and improving DX. Any type mismatches can be caught right away, while type-safety + significantly improves ergonomics while developing. +

+ + + ), + imageUrl: "/illustrations/typedsql/end-to-end-type-safety", + imageAlt: "End-to-end type-safety", + mobileImageUrl: null, + mobileImageAlt: null, + logos: null, + useDefaultLogos: false, + visualPosition: "right" as const, + visualType: "image" as const, + }, + { + content: ( + <> +

+ Full control
of SQL +

+

+ When you need the full control of the SQL engine, write and execute raw SQL queries + directly. This gives you the flexibility to use advanced SQL-specific features and + optimizations that are not available in the Prisma Client API, while maintaining type + safety. +

+ + + ), + imageUrl: "/illustrations/typedsql/full-controll-sql", + imageAlt: "Full control of SQL", + mobileImageUrl: null, + mobileImageAlt: null, + logos: null, + useDefaultLogos: false, + visualPosition: "left" as const, + visualType: "image" as const, + }, + { + content: ( + <> +

+ Great DX +

+

+ TypedSQL combines the productivity of a higher-level abstraction with type-safety for + crafting SQL directly. Use familiar SQL tools in your editor, complete with syntax + highlighting, error checking, and autocompletion. +

+ + ), + imageUrl: "/illustrations/typedsql/great-dx", + imageAlt: "Great DX", + mobileImageUrl: null, + mobileImageAlt: null, + logos: null, + useDefaultLogos: false, + visualPosition: "right" as const, + visualType: "image" as const, + }, +]; + +export const metadata: Metadata = { + title: "TypedSQL - Fully Type-Safe Raw SQL | Prisma ORM", + description: + "TypedSQL is the best way to express the full power of SQL in queries. Fully type-safe, with auto-completion, and a fantastic DX for using raw SQL with Prisma.", +}; + +export default function TypedSQLPage() { + return ( +
+
+
+
+
+ + TypedSQL + +

+ Fully type-safe
+ raw SQL +

+

+ TypedSQL is the best way to express the full power of SQL in queries. Fully type-safe, + with auto-completion, and a fantastic DX for using raw SQL with Prisma. +

+
+
+ + +
+
+
+
+ +
+ + +
+
+
+
+

+ Raw SQL with type-safety and autocompletion +

+

+ TypedSQL gives you even more flexibility and control in your database queries. Start + using TypedSQL in any new or existing Prisma project. +

+
+
+ + +
+
+
+
+
+ ); +} diff --git a/apps/site/src/components/typedsql/expand-capabilities.tsx b/apps/site/src/components/typedsql/expand-capabilities.tsx new file mode 100644 index 0000000000..b54c21d06f --- /dev/null +++ b/apps/site/src/components/typedsql/expand-capabilities.tsx @@ -0,0 +1,46 @@ +import { Card, CardContent, Action } from "@prisma/eclipse"; + +const capabilities = [ + { + icon: "fa-light fa-diagram-project", + title: "Works alongside Prisma Schema & Migrate", + description: + "TypedSQL complements Prisma Schema and Prisma Migrate. It extends the functionality you're already used to with type-safe SQL queries.", + }, + { + icon: "fa-light fa-bolt", + title: "Use with Prisma Accelerate", + description: + "Continue using SQL queries while benefiting from products built for Prisma Client, such as connection pooling and caching provided by Accelerate.", + }, +]; + +export const ExpandCapabilities = () => { + return ( +
+
+

+ Expand your capabilities +

+

+ Built on Prisma Client, TypedSQL pairs well with all Prisma products and features. +

+
+
+ {capabilities.map((item) => ( + + + + + +

+ {item.title} +

+

{item.description}

+ + + ))} +
+
+ ); +}; diff --git a/apps/site/src/components/typedsql/video-section.tsx b/apps/site/src/components/typedsql/video-section.tsx new file mode 100644 index 0000000000..164a183447 --- /dev/null +++ b/apps/site/src/components/typedsql/video-section.tsx @@ -0,0 +1,22 @@ +"use client"; + +export const VideoSection = () => { + return ( +
+

+ See TypedSQL in action +

+
+