minor design fixes to landing page

website/package.json

@@ -13,7 +13,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@theguild/components": "9.2.0",
+    "@theguild/components": "9.3.2",
     "fast-glob": "^3.3.2",
     "next": "15.1.6",
     "next-sitemap": "4.2.3",

website/src/app/(landing-pages)/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { HiveLayoutConfig } from '@theguild/components';
+
+export default function LandingLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <HiveLayoutConfig widths="landing-narrow" />
+    </>
+  );
+}

website/src/app/(landing-pages)/page.tsx

@@ -10,6 +10,8 @@ import {
   GitHubIcon,
   Heading,
   Hero,
+  HeroDecorationFromLogo,
+  HeroLogo,
   InfoCard,
   TextLink,
   ToolsAndLibrariesCards,
@@ -65,9 +67,14 @@ export default function IndexPage() {
   return (
     <Page className="mx-auto max-w-[90rem] overflow-hidden">
       <Hero
+        className="mx-4 md:mx-6"
         heading="High-performance GraphQL Server"
         text="Fully-featured GraphQL server designed for effortless setup and optimal developer experience."
-        logo={<YogaIcon />}
+        top={
+          <HeroLogo>
+            <YogaIcon />
+          </HeroLogo>
+        }
         checkmarks={['Fully open source', 'No vendor lock', 'Can be self-hosted!']}
       >
         <CallToAction variant="primary-inverted" href="/docs">
@@ -80,13 +87,14 @@ export default function IndexPage() {
           <GitHubIcon className="size-6" />
           GitHub
         </CallToAction>
+        {/* todo: this is not the same as in design, fix it when we have more time */}
+        <HeroDecorationFromLogo logo={<YogaIcon />} />
       </Hero>
 
       <ExploreMainProductCards />
       <EverythingHTTPSection />
-      <TrulyExtendableSection className="mt-24" />
-
-      <ReachZenQuickerWithYoga className="my-28" />
+      <TrulyExtendableSection className="mt-24 mx-4 md:mx-6" />
+      <ReachZenQuickerWithYoga />
 
       <RunAnywhereSection className="mx-4 md:mx-6">
         {[
@@ -209,7 +217,7 @@ function EverythingHTTPSection({ className }: { className?: string }) {
           icon={<Image src={checkBadge} alt="" />}
           className="flex-1 rounded-2xl md:rounded-3xl"
         >
-          Meets rigorous standards as confirmed by comprehensive <br />
+          Meets rigorous standards as confirmed by comprehensive{' '}
           <TextLink
             href="https://github.com/enisdenjo/graphql-http/blob/master/implementations/graphql-yoga/README.md"
             className="mt-4 text-green-800"
@@ -236,10 +244,10 @@ function EverythingHTTPSection({ className }: { className?: string }) {
           icon={<Image src={arrowUpBade} alt="" />}
           className="flex-1 basis-full rounded-2xl md:rounded-3xl lg:basis-0"
         >
-          Facilitates file uploads directly through GraphQL using <br />
+          Facilitates file uploads directly through GraphQL using{' '}
           <TextLink
             href="https://github.com/jaydenseric/graphql-multipart-request-spec"
-            className="mt-4 text-green-800"
+            className="mt-4 text-green-800 "
           >
             the multipart request specification
           </TextLink>

website/src/app/(landing-pages)/reach-zen-quicker-with-yoga.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ComponentProps, FC } from 'react';
-import { CallToAction, Heading, ComparisonTable as Table } from '@theguild/components';
+import { CallToAction, cn, Heading, ComparisonTable as Table } from '@theguild/components';
 import ComparisonTable from '../comparison-table.mdx';
 
-export const ReachZenQuickerWithYoga: FC<ComponentProps<'section'>> = props => {
+export const ReachZenQuickerWithYoga: FC<ComponentProps<'section'>> = ({ className, ...rest }) => {
   return (
-    <section {...props}>
-      <Heading as="h2" size="md" className="text-balance sm:text-center px-4">
+    <section className={cn('py-6 md:py-[120px]', className)} {...rest}>
+      <Heading as="h2" size="md" className="text-balance sm:text-center px-4 md:px-6">
         Using Apollo Server? Reach zen quicker with Yoga.
       </Heading>
-      <div className="mx-4 flex max-lg:flex-col gap-6 lg:gap-24 mt-6 sm:mt-[64px]">
+      <div className="px-4 md:px-6 flex max-lg:flex-col gap-6 lg:gap-24 mt-6 sm:mt-[64px]">
         <div className="basis-1/4">
           <Heading as="h3" size="sm" className="max-sm:text-2xl">
             Runtime&nbsp;Performance Champion