Add dev-ex-cards

website/package.json

@@ -69,7 +69,7 @@
  "@monaco-editor/react": "4.6.0",
  "@radix-ui/react-accordion": "^1.2.1",
  "@radix-ui/react-icons": "^1.3.0",
- "@theguild/components": "7.0.1-alpha-20241017144529-54e250136451f909f7d8d943756aa9ca255c7e2f",
+ "@theguild/components": "7.1.0-alpha-20241017190304-bc848b4342bcc3e950191d938fb88dbb5874e606",
  "classnames": "2.5.1",
  "date-fns": "2.30.0",
  "dedent": "1.5.3",

website/src/components/dev-ex-cards.tsx

@@ -0,0 +1,47 @@
+import { cn, Heading, InfoCard } from '@theguild/components';
+
+import boxSvg from './icons/box.svg';
+import checkmarksSvg from './icons/checkmarks.svg';
+import speedometerSvg from './icons/speedometer.svg';
+
+export function DevExCards(props: { className?: string }) {
+ return (
+ <section className={cn('px-4 py-6 sm:py-12 md:px-6 xl:px-[120px]', props.className)}>
+ <Heading as="h3" size="md" className="text-balance text-center">
+ Developer experience? Improved.
+ </Heading>
+ <p className="mx-auto mt-4 max-w-[700px] text-center text-green-800">
+ Codegen enhances your GraphQL development with fully typed client and server code, generating robust,
+ error-resistant solutions in seconds
+ </p>
+ <ul className="mt-6 flex flex-row flex-wrap justify-center gap-2 md:mt-16 md:gap-6">
+ <InfoCard
+ as="li"
+ heading="Typed Queries, Mutations, and Subscriptions"
+ icon={<img src={boxSvg.src} alt="" />}
+ className="flex-1 rounded-2xl md:rounded-3xl"
+ >
+ Automate the creation of typed queries, mutations, and subscriptions for frameworks like React, Vue, Angular,
+ and more.
+ </InfoCard>
+ <InfoCard
+ as="li"
+ heading="Typed GraphQL resolvers"
+ icon={<img src={speedometerSvg.src} alt="" />}
+ className="flex-1 basis-full rounded-2xl md:basis-0 md:rounded-3xl"
+ >
+ Generate typed GraphQL resolvers for any Node.js or Java GraphQL server, ensuring compatibility and
+ efficiency.
+ </InfoCard>
+ <InfoCard
+ as="li"
+ heading="Fully-typed Node.js SDKs"
+ icon={<img src={checkmarksSvg.src} alt="" />}
+ className="flex-1 basis-full rounded-2xl md:rounded-3xl lg:basis-0"
+ >
+ Produce fully-typed Node.js SDKs, enhancing development with reliable, strongly typed software components.
+ </InfoCard>
+ </ul>
+ </section>
+ );
+}

website/src/components/index-page.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, useEffect, useLayoutEffect } from 'react';
 import {
  HeroGradient,
  HeroIllustration,
@@ -9,12 +9,26 @@ import gqlCodegenCover from '../../public/assets/illustrations/gql-codegen-cover
 import gqlGenerateCodeIllustration from '../../public/assets/illustrations/gql-generate-code-illustration.svg';
 import gqlWatchForChangesIllustration from '../../public/assets/illustrations/gql-watch-for-changes-illustration.svg';
 
+import { DevExCards } from './dev-ex-cards';
+import { Page } from './page';
 // TODO:
 // import { FrequentlyAskedQuestions } from './frequently-asked-questions';
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 export function IndexPage(): ReactElement {
+ useIsomorphicLayoutEffect(() => {
+ // We add .light class to body to style the Headless UI
+ // portal containing search results.
+ document.body.classList.add('light');
+
+ return () => {
+ document.body.classList.remove('light');
+ };
+ }, []);
+
  return (
- <>
+ <Page className="light mx-auto max-w-[90rem] overflow-hidden text-green-1000">
  <style global jsx>
  {`
  html {
@@ -76,9 +90,10 @@ export function IndexPage(): ReactElement {
  className="[&>div]:max-w-6xl"
  />
 
+ <DevExCards className="mx-4 md:mx-6" />
  <ToolsAndLibrariesCards className="mx-4 mt-6 md:mx-6" />
  {/* <FrequentlyAskedQuestions className="mx-4 md:mx-6" /> */}
  <GetYourAPIGameRightSection className="mx-4 sm:mb-6 md:mx-6" />
- </>
+ </Page>
  );
 }

website/src/components/page.tsx

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { cn } from '@theguild/components';
+
+export function Page(props: { children: ReactNode; className?: string }) {
+ return <div className={cn('flex h-full flex-col', props.className)}>{props.children}</div>;
+}