website landing page

maticzav · Jul 5, 2021 · 6e5abab · 6e5abab · vercel · Jul 5, 2021
1 parent d8e42b1
commit 6e5abab
Show file tree

Hide file tree

Showing 8 changed files with 724 additions and 43 deletions.
diff --git a/website/public/assets/composable.png b/website/public/assets/composable.png
diff --git a/website/public/assets/fast.png b/website/public/assets/fast.png
diff --git a/website/public/assets/framework.png b/website/public/assets/framework.png
diff --git a/website/public/assets/framework.svg b/website/public/assets/framework.svg
diff --git a/website/public/assets/logo.svg b/website/public/assets/logo.svg
diff --git a/website/public/assets/safe.png b/website/public/assets/safe.png
diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx
@@ -9,14 +9,33 @@ export default class MyDocument extends Document {
       <Html>
         <Head />
         <head>
-          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+          {/* Icons */}
+          <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+          <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
+          <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
+          <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
+          <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
+          <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
+          <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
+          <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
+          <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
+          <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+          <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
           <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-          <link rel="manifest" href="/site.webmanifest" />
+          <link rel="manifest" href="/manifest.json" />
+          <meta name="msapplication-TileColor" content="#ffffff" />
+          <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
+          <meta name="theme-color" content="#ffffff" />
+
+          {/* Fonts */}
 
           <link rel="preconnect" href="https://fonts.gstatic.com" />
           <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=block" rel="stylesheet" />
           <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=block" rel="stylesheet" />
+
+          {/* Crisp */}
+          <script async src="https://the-guild.dev/static/crisp.js" />
         </head>
         <body>
           <ColorModeScript initialColorMode="light" />

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -8,9 +8,12 @@ export default function Index() {
       <Head>
         <title>GraphQL Shield</title>
       </Head>
+
+      <div style={{ paddingTop: '50px' }} />
+
       <HeroGradient
-        title="GraphQL permissions as another layer of abstraction."
-        description="Implement your server permissions in a clear and deterministic way."
+        title="GraphQL Permissions Framework For Complex Authorisation Systems"
+        description="Implement your server permissions in a clear and deterministic way and let it guard access to your schema."
         link={{
           href: '/docs',
           children: 'Get Started',
@@ -22,53 +25,48 @@ export default function Index() {
         //     <img src="https://badge.fury.io/js/%40envelop%2Fcore.svg" alt="npm version" height="18" />
         //   </a>
         // }
-        colors={['#FF34AE', '#1CC8EE']}
-        // image={{
-        //   src: '/assets/home-claw.png',
-        //   alt: 'Illustration',
-        // }}
+        colors={['#56C4FF', '#6B9CFF']}
+        image={{
+          src: '/assets/framework.png',
+          alt: 'Illustration',
+        }}
       />
-      <FeatureList
-        title="What's GraphQL Shield?"
-        items={[
-          {
-            image: {
-              alt: 'Pluggable',
-              src: '/assets/features-pluggable.png',
-            },
-            title: 'Pluggable',
-            description: 'Powerful plugin system that wraps the entire GraphQL execution pipeline.',
-          },
-          {
-            image: {
-              alt: 'Flexible',
-              src: '/assets/features-modern.png',
-            },
-            title: 'Flexible',
-            description: 'Use with any HTTP server, and any GraphQL schema libraries (code-first / schema-first).',
-          },
-          {
-            image: {
-              alt: 'Develop Faster',
-              src: '/assets/features-performant.png',
-            },
-            title: 'Develop Faster',
-            description: `You don't have to reinvent the wheel for every feature. You can write/use Envelop plugin for most workflows.`,
-          },
-        ]}
+
+      {/* Features */}
+
+      <HeroIllustration
+        title="Create a handful of rules and reuse them across your schema"
+        description={`Shield lets you create a handful of rules and compose them into meaningful structures using logical operators.`}
+        image={{
+          src: '/assets/composable.png',
+          alt: 'Composable',
+        }}
       />
 
       <HeroIllustration
-        title="How it works?"
-        description="GraphQL Shield wrapps your schema resolvers and inteligently manages access to fields."
+        title="Every rule is intelligently cached to prevent duplicated validation"
+        description={`To prevent recalculation of rules, every rule caches its result based on selected caching mechanism and speeds up query execution.`}
         image={{
-          src: '/assets/home-communication.png',
-          alt: 'Illustration',
+          src: '/assets/fast.png',
+          alt: 'Shield is Fast',
         }}
         flipped
       />
 
-      <InfoList
+      <HeroIllustration
+        title="Be confident that your rule is used at the right place"
+        description={`Shield generates a type-map from your schema to make sure you have assigned your rules to the right places.`}
+        image={{
+          src: '/assets/safe.png',
+          alt: 'Illustration',
+        }}
+      />
+
+      <div style={{ paddingBottom: '100px' }} />
+
+      {/* Info */}
+
+      {/* <InfoList
         title="Learn More"
         items={[
           {
@@ -92,7 +90,7 @@ export default function Index() {
             },
           },
         ]}
-      />
+      /> */}
     </>
   )
 }