Redesigned website (#10179)

* Bump @theguild/components

* Bump components to snapshot

* Modify Tailwind config

* Add a font, footer and navmenu

* Bump Components

* Disable autoImportThemeStyle

* Add draft FAQs

* Add sections reused between websites

* Comment out FrequentlyAskedQuestions

* Add dev-ex-cards

* Add favicon.svg

* Add eslint-plugin-tailwindcss

* Add a hero section

* Remove FAQs until they are needed

* Fix spacing

* Add TypeSafeCards

* Add a todo comment

* chore(dependencies): updated changesets for modified dependencies

* chore(dependencies): updated changesets for modified dependencies

* Add plugins search, tweak plugins icons

* Add postcss-nesting

* Add products, the-guild and gql foundation to _meta.ts

* Tweak margin

* Add ExploreMainProductCards and update texts

* Colocate plugin icons with plugins.ts

* Update modules icon to a temp one

* Tweak Vue icon

* Update Hasura icon

* Update icons

* Change logos in navmenu and footer

* Tweak footer logo

* Remove the yellow CTA section

* Use stable version, tweak margins, hide hamburger menu footer with theme switcher

* Update website/src/components/hero/index.tsx

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* Update website/src/components/hero/index.tsx

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* Update website/src/components/hero/index.tsx

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* Update website/public/favicon.svg

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* Update website/public/favicon.svg

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* Move eslint plugin dep and use a version that works

* Update lockfile

* Update ESLint and Tailwind configs

* Add missing Tailwind dependency, remove promoted line from config, bundler resolution

* Turn PostCSS config to mjs

* Add a missing dependency postcss-lightningcss

* Update website/src/components/hero/index.tsx

Co-authored-by: Dimitri POSTOLOV <[email protected]>

* Bump and format

* Move CSS vars to body

* Bump components

* Build again

* Configure .developerMenu in navigation

* Bump Components

* Bump Components to include wider navmenu

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Dimitri POSTOLOV <[email protected]>

.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.6-alpha-20241113150056-4fde1eeb45f35f58300f9d846528945f771121df",
     "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>
+  );
+}