Redesigned website

.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['@theguild'],
+  extends: ['@theguild', 'plugin:tailwindcss/recommended'],
   rules: {
     'no-empty': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',

package.json

@@ -48,7 +48,7 @@
     "@babel/preset-typescript": "7.24.7",
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.7",
-    "@theguild/eslint-config": "0.12.0",
+    "@theguild/eslint-config": "0.13.0",
     "@theguild/prettier-config": "0.1.1",
     "@types/jest": "28.1.8",
     "babel-jest": "29.7.0",
@@ -69,7 +69,8 @@
     "ts-node": "10.9.2",
     "tslib": "2.6.3",
     "tsx": "4.17.0",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "eslint-plugin-tailwindcss": "npm:@hasparus/[email protected]"
   },
   "lint-staged": {
     "packages/**/src/**/*.{ts,tsx}": [

website/next.config.js

@@ -6,6 +6,9 @@ const PLUGINS_REDIRECTS = Object.entries(CategoryToPackages).flatMap(([category,
 );
 
 export default withGuildDocs({
+  nextraConfig: {
+    autoImportThemeStyle: false,
+  },
   output: 'export',
   experimental: {
     urlImports: [

website/package.json

@@ -10,14 +10,17 @@
     "generate-json-config": "tsx generate-config-json-schema.ts"
   },
   "devDependencies": {
-    "@theguild/tailwind-config": "0.4.2",
+    "@theguild/tailwind-config": "0.6.0",
     "@types/dedent": "0.7.2",
     "@types/jsonpath": "0.2.4",
     "@types/node": "20.16.1",
     "@types/react": "18.3.3",
     "fast-xml-parser": "4.4.1",
     "jsonpath": "1.1.1",
-    "prettier-plugin-tailwindcss": "0.2.8"
+    "postcss-import": "^16.1.0",
+    "postcss-lightningcss": "^1.0.1",
+    "prettier-plugin-tailwindcss": "0.2.8",
+    "tailwindcss": "^3.4.14"
   },
   "dependencies": {
     "@graphql-codegen/add": "5.0.3",
@@ -67,7 +70,9 @@
     "@graphql-codegen/urql-introspection": "2.2.1",
     "@mizdra/graphql-codegen-typescript-fabbrica": "^0.6.0",
     "@monaco-editor/react": "4.6.0",
-    "@theguild/components": "6.6.3",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@theguild/components": "7.2.5-alpha-20241111112903-2ad9bd44c8a3035023a19f1dbe9ab4cd818f573c",
     "classnames": "2.5.1",
     "date-fns": "2.30.0",
     "dedent": "1.5.3",
@@ -76,6 +81,7 @@
     "next": "14.2.3",
     "next-mdx-remote": "4.4.1",
     "next-sitemap": "4.2.3",
+    "postcss-nesting": "^13.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "8.0.7",

website/postcss.config.mjs

@@ -0,0 +1,9 @@
+import config from '@theguild/tailwind-config/postcss.config';
+
+export default {
+  ...config,
+  plugins: {
+    ...config.plugins,
+    'postcss-nesting': {},
+  },
+};

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 lg:py-24 xl:px-[120px]', props.className)}>
+      <Heading as="h3" size="md" className="text-balance text-center">
+        Your chance to fully use GraphQL.
+      </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>
+  );
+}