remove index.less, refactor unused styles from landing page (#1677)

Author: dimaMachina

src/components/index-page/hero.tsx

@@ -5,7 +5,7 @@ import { clsx } from "clsx"
 
 export function Hero() {
   return (
-    <div className="hero">
+    <div className="[background:url('/img/graph-wash.png'),#171e26_repeat_center_center] xl:py-20">
       <div className="container conf-block">
         <section
           className={clsx(

src/components/index-page/index.tsx

@@ -9,7 +9,7 @@ import { WhoIsUsing } from "./who-is-using"
 
 export function IndexPage() {
   return (
-    <div className="index xl:mt-10">
+    <div className="index">
       <Hero />
       <section className="text-center flex flex-col container items-center conf-block max-w-3xl">
         <h2>A query language for your API</h2>

src/components/index-page/predictable-results/index.module.css

@@ -0,0 +1,12 @@
+.cursor {
+  animation: cursor-blink 0.5s infinite linear both alternate;
+  
+  @keyframes cursor-blink {
+    0%, 30% {
+      opacity: 0;
+    }
+    70%, 100% {
+      opacity: 1;
+    }
+  }
+}

src/components/index-page/predictable-results.tsx renamed to src/components/index-page/predictable-results/index.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from "react"
-import { PredictableResult } from "../code-blocks"
+import { PredictableResult } from "../../code-blocks"
 import { Pre } from "nextra/components"
+import { clsx } from "clsx"
+import classes from "./index.module.css"
 
 export function PredictableResults() {
   const ref = useRef<HTMLDivElement>(null)
@@ -85,19 +87,24 @@ export function PredictableResults() {
         </div>
         <div
           ref={ref}
-          className="faux-graphiql nextra-codeblocks flex *:w-1/2 [&_pre]:!h-48"
+          className="nextra-codeblocks flex *:w-1/2 [&_pre]:!h-48"
           aria-hidden
         >
           <Pre data-filename="Query" className="p-4">
             {"{"}
             {"\n  hero {"}
             {"\n    name"}
             {"\n    height\n    mass".split("").map((char, i) => (
-              <span key={i} id={"ch" + i} className="ch">
+              <span key={i} id={"ch" + i} className="hidden">
                 {char === "\n" ? <br /> : char}
               </span>
             ))}
-            <span className="cursor" />
+            <span
+              className={clsx(
+                "inline-block !bg-primary/50 h-4 w-2 ml-px -mb-0.5",
+                classes.cursor,
+              )}
+            />
             {"\n  }"}
             {"\n}"}
           </Pre>

src/components/index-page/single-request/index.tsx

@@ -1,58 +1,47 @@
 import { QueryHeroFriends, ResponseHeroFriends } from "../../code-blocks"
-import { clsx } from "clsx"
 import classes from "./index.module.css"
 import phoneImage from "public/img/phone.svg"
 import serverImage from "public/img/server.svg"
 import NextImage from "next-image-export-optimizer"
 
 export function SingleRequest() {
   return (
-    <div
-      className={clsx(
-        // "bg-gray-200",
-        "grayWash",
-      )}
+    <section
+      className="*:w-full lg:*:w-1/2 gap-14 flex max-lg:flex-col container conf-block !justify-around [&_pre]:!bg-transparent"
+      id="single-request"
     >
-      <section
-        className="*:w-full lg:*:w-1/2 gap-14 flex max-lg:flex-col container conf-block !justify-around [&_pre]:!bg-transparent"
-        id="single-request"
-      >
-        <div className="max-lg:text-center">
-          <h2>
-            Get many resources <br className="max-lg:hidden" />
-            in a single request
-          </h2>
-          {/*Illustration: a query 2 or 3 levels deep]*/}
-          <p>
-            GraphQL queries access not just the properties of one resource but
-            also smoothly follow references between them. While typical REST
-            APIs require loading from multiple URLs, GraphQL APIs get all the
-            data your app needs in a single request. Apps using GraphQL can be
-            quick even on slow mobile network connections.
-          </p>
+      <div className="max-lg:text-center">
+        <h2>
+          Get many resources <br className="max-lg:hidden" />
+          in a single request
+        </h2>
+        {/*Illustration: a query 2 or 3 levels deep]*/}
+        <p>
+          GraphQL queries access not just the properties of one resource but
+          also smoothly follow references between them. While typical REST APIs
+          require loading from multiple URLs, GraphQL APIs get all the data your
+          app needs in a single request. Apps using GraphQL can be quick even on
+          slow mobile network connections.
+        </p>
+      </div>
+      <div className="-my-8 h-[520px] relative pointer-events-none" aria-hidden>
+        <NextImage
+          src={serverImage}
+          alt="Server"
+          className="absolute left-1/2 -translate-x-1/2"
+        />
+        <NextImage
+          src={phoneImage}
+          alt="Phone"
+          className="absolute left-1/2 -translate-x-1/2 bottom-0"
+        />
+        <div className={classes.query}>
+          <QueryHeroFriends />
         </div>
-        <div
-          className="-my-8 h-[520px] relative pointer-events-none"
-          aria-hidden
-        >
-          <NextImage
-            src={serverImage}
-            alt="Server"
-            className="absolute left-1/2 -translate-x-1/2"
-          />
-          <NextImage
-            src={phoneImage}
-            alt="Phone"
-            className="absolute left-1/2 -translate-x-1/2 bottom-0"
-          />
-          <div className={classes.query}>
-            <QueryHeroFriends />
-          </div>
-          <div className={classes.response}>
-            <ResponseHeroFriends />
-          </div>
+        <div className={classes.response}>
+          <ResponseHeroFriends />
         </div>
-      </section>
-    </div>
+      </div>
+    </section>
   )
 }

src/index.less

@@ -4,7 +4,6 @@ import { useRouter } from "next/router"
 import { useEffect } from "react"
 import "@/globals.css"
 import "@/codemirror.less"
-import "@/index.less"
 
 const robotoFlex = Roboto_Flex({
   subsets: ["latin"],