diff --git a/website/package.json b/website/package.json
index 79eee770140..848d6cd5c97 100644
--- a/website/package.json
+++ b/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",
diff --git a/website/src/components/dev-ex-cards.tsx b/website/src/components/dev-ex-cards.tsx
new file mode 100644
index 00000000000..0689c544312
--- /dev/null
+++ b/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 (
+
+
+ Developer experience? Improved.
+
+
+ Codegen enhances your GraphQL development with fully typed client and server code, generating robust,
+ error-resistant solutions in seconds
+
+
+ }
+ 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.
+
+ }
+ 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.
+
+ }
+ 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.
+
+
+
+ );
+}
diff --git a/website/src/components/icons/box.svg b/website/src/components/icons/box.svg
new file mode 100644
index 00000000000..87c2c3f9314
--- /dev/null
+++ b/website/src/components/icons/box.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/src/components/icons/checkmarks.svg b/website/src/components/icons/checkmarks.svg
new file mode 100644
index 00000000000..307ad58210f
--- /dev/null
+++ b/website/src/components/icons/checkmarks.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/src/components/icons/speedometer.svg b/website/src/components/icons/speedometer.svg
new file mode 100644
index 00000000000..d463bd2c901
--- /dev/null
+++ b/website/src/components/icons/speedometer.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/src/components/index-page.tsx b/website/src/components/index-page.tsx
index 4018a333e25..c2fef2e827b 100644
--- a/website/src/components/index-page.tsx
+++ b/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 (
- <>
+