remove Learn more button, point Get Started to Learn (#1670)

* aa

* fix

* aa

Author: dimaMachina

src/components/index-page/hero/index.tsx renamed to src/components/index-page/hero.tsx

@@ -1,50 +1,48 @@
 import Link from "next/link"
-import { CodeA, CodeB, CodeC } from "../../code-blocks"
+import { CodeA, CodeB, CodeC } from "../code-blocks"
 import { GraphQLLogo } from "@/icons"
 import { clsx } from "clsx"
-import classes from "./index.module.css"
 
 export function Hero() {
   return (
-    <div className="hero dark">
+    <div className="hero">
       <div className="container conf-block">
         <section
           className={clsx(
             "flex-wrap gap-14 justify-center items-center flex max-sm:flex-col",
             "[&_h3]:text-white [&_h3]:text-2xl max-lg:[&_h3]:text-center",
             "[&_pre]:!bg-transparent [&_pre]:ring-0 [&_pre_span]:text-[--shiki-dark]",
             "[&_h3]:font-extralight",
+            "[&_code]:whitespace-pre-wrap" /* fix scroll on mobile for code-blocks */,
           )}
         >
           <div className="max-md:grow max-xl:w-full flex flex-col items-center gap-2">
             <GraphQLLogo className="w-24" />
             <h1 className="text-primary text-3xl">GraphQL</h1>
           </div>
 
-          <div className={classes.col1}>
+          <div>
             <h3>Describe your data</h3>
             <CodeA />
           </div>
 
-          <div className={classes.col2}>
+          <div>
             <h3>Ask for what you want</h3>
             <CodeB />
           </div>
 
-          <div className={classes.col3}>
+          <div>
             <h3>Get predictable results</h3>
             <CodeC />
           </div>
         </section>
 
-        <div className="flex gap-2 justify-center pt-10">
-          <Link className={classes.button} href="/code">
-            Get Started
-          </Link>
-          <Link className={classes.button} href="/learn">
-            Learn More
-          </Link>
-        </div>
+        <Link
+          className="text-white border-white index-button block w-fit mx-auto mt-10"
+          href="/learn"
+        >
+          Get Started
+        </Link>
       </div>
     </div>
   )

src/components/index-page/hero/index.module.css

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react"
-import { V1, V2, V3, V4, V5 } from "../../code-blocks"
+import { V1, V2, V3, V4, V5 } from "../code-blocks"
 import { clsx } from "clsx"
 
 export function WithoutVersion() {
@@ -24,7 +24,7 @@ export function WithoutVersion() {
   return (
     <div className="index-gradient">
       <section
-        className="point5 container conf-block flex max-lg:flex-col lg:flex-row-reverse lg:*:w-1/2 gap-14 justify-around"
+        className="container conf-block flex max-lg:flex-col lg:flex-row-reverse lg:*:w-1/2 gap-14 justify-around"
         id="without-versions"
       >
         <div className="max-lg:text-center">

src/components/index-page/without-version/index.tsx renamed to src/components/index-page/without-version.tsx

@@ -341,7 +341,7 @@ div[id^="headlessui-menu-items"] {
 }
 
 .index-button {
-  @apply border border-black dark:border-current rounded-md transition-colors py-2.5 px-6;
+  @apply border border-current rounded-md transition-colors py-2.5 px-6;
 
   &:hover,
   &:focus {