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/typedsql/page.tsx b/apps/site/src/app/typedsql/page.tsx new file mode 100644 index 0000000000..39c4831ba7 --- /dev/null +++ b/apps/site/src/app/typedsql/page.tsx @@ -0,0 +1,186 @@ +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/homepage/card-section/card-section.tsx b/apps/site/src/components/homepage/card-section/card-section.tsx index 3537d0b6f8..a7b4c70090 100644 --- a/apps/site/src/components/homepage/card-section/card-section.tsx +++ b/apps/site/src/components/homepage/card-section/card-section.tsx @@ -34,7 +34,7 @@ export const CardSection = ({ cardSection }: CardSectionProps) => { {cardSection.map((item, index) => (
{ item.visualType === "logoGrid" ? "max-w-full" : "lg:w-full", )} > - {item.visualType === "logoGrid" && item.useDefaultLogos && ( - - )} + {item.visualType === "logoGrid" && item.useDefaultLogos && } {item.visualType === "image" && item.imageUrl && ( <> { + 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 +

+
+