diff --git a/src/app/conf/_design-system/pixelarticons/bullseye.svg b/src/app/conf/_design-system/pixelarticons/bullseye.svg new file mode 100644 index 0000000000..f165de50af --- /dev/null +++ b/src/app/conf/_design-system/pixelarticons/bullseye.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/app/conf/_design-system/pixelarticons/gift.svg b/src/app/conf/_design-system/pixelarticons/gift.svg new file mode 100644 index 0000000000..1154911dd3 --- /dev/null +++ b/src/app/conf/_design-system/pixelarticons/gift.svg @@ -0,0 +1,13 @@ + + + diff --git a/src/app/conf/_design-system/pixelarticons/search.svg b/src/app/conf/_design-system/pixelarticons/search.svg new file mode 100644 index 0000000000..0eb37b1b91 --- /dev/null +++ b/src/app/conf/_design-system/pixelarticons/search.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/app/conf/_design-system/pixelarticons/tournament.svg b/src/app/conf/_design-system/pixelarticons/tournament.svg new file mode 100644 index 0000000000..7d81515d35 --- /dev/null +++ b/src/app/conf/_design-system/pixelarticons/tournament.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/app/conf/_design-system/pixelarticons/zap.svg b/src/app/conf/_design-system/pixelarticons/zap.svg new file mode 100644 index 0000000000..659729363b --- /dev/null +++ b/src/app/conf/_design-system/pixelarticons/zap.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/components/index-page/five-pillars.tsx b/src/components/index-page/five-pillars.tsx new file mode 100644 index 0000000000..cad895efa7 --- /dev/null +++ b/src/components/index-page/five-pillars.tsx @@ -0,0 +1,83 @@ +import { SectionLabel } from "@/app/conf/_design-system/section-label" + +import GiftIcon from "@/app/conf/_design-system/pixelarticons/gift.svg?svgr" +import TournamentIcon from "@/app/conf/_design-system/pixelarticons/tournament.svg?svgr" +import ZapIcon from "@/app/conf/_design-system/pixelarticons/zap.svg?svgr" +import BullseyeIcon from "@/app/conf/_design-system/pixelarticons/bullseye.svg?svgr" +import SearchIcon from "@/app/conf/_design-system/pixelarticons/search.svg?svgr" + +const items = [ + { + icon: GiftIcon, + title: "Product-centric", + description: + "GraphQL is unapologetically built for front-end engineers, aligning with their way of thinking, how views are structured and how data is consumed.", + }, + { + icon: TournamentIcon, + title: "Hierarchical", + description: + "Most product development involves the creation and manipulation of view hierarchies. GraphQL queries mirror UI structures, ensuring a natural way to request data that matches the shape of the response.", + }, + { + icon: ZapIcon, + title: "Strong-typing", + description: + "Every GraphQL service defines a type system, enabling tools to syntactically validate queries before execution and ensuring predictable responses.", + }, + { + icon: BullseyeIcon, + title: "Client-specified response", + description: + "A GraphQL service publishes the capabilities that its clients are allowed to consume. It is the client who control the data they receive, requesting only what they need at a field level, unlike traditional fixed endpoints.", + }, + { + icon: SearchIcon, + title: "Self-documenting", + description: + "GraphQL APIs can describe themselves, allowing tools and clients to query the schema for available types and capabilities. It serves as a powerful platform for building common tools and client software libraries.", + }, +] + +export function FivePillars() { + return ( +
+ design principles +

+ Five Pillars of GraphQL +

+ +
+ {items.map(({ title, icon: Icon, description }, index) => ( +
+
+
+
+ +
+

+ {title} +

+
+

+ {description} +

+
+ {index < items.length - 1 && } +
+ ))} +
+
+ ) +} + +function Separator() { + return ( +
+ ) +} diff --git a/src/components/index-page/index.tsx b/src/components/index-page/index.tsx index f3c4138a1b..6acce722f4 100644 --- a/src/components/index-page/index.tsx +++ b/src/components/index-page/index.tsx @@ -9,6 +9,7 @@ import { BringYourOwnCode } from "./bring-your-own-code" import { WhoIsUsing } from "./who-is-using" import { HowItWorks } from "./how-it-works" import { ProvenSolution } from "./proven-solution" +import { FivePillars } from "./five-pillars" export function IndexPage() { return ( @@ -17,6 +18,7 @@ export function IndexPage() { +

A query language for your API