From ad33029dd2148ae0c2dc886a73c10f716410d2ca Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Tue, 16 May 2023 19:06:13 +0200
Subject: [PATCH] chore: toggle grid button

---
 apps/www/components/Hero/Hero.tsx           | 90 +++++++++++----------
 apps/www/components/Hero/HeroBackground.tsx |  4 +-
 2 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx
index 8e2f016efba..dc60ac2bee6 100644
--- a/apps/www/components/Hero/Hero.tsx
+++ b/apps/www/components/Hero/Hero.tsx
@@ -7,64 +7,72 @@ import { Button, IconBookOpen } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import HeroBackground from './HeroBackground'
 import FrontendFrameworks from './FrontendFrameworks'
+import { useState } from 'react'
 
 const Hero = () => {
   const router = useRouter()
   const telemetryProps = useTelemetryProps()
-
+  const [showGrid, setShowGrid] = useState(true)
   const sendTelemetryEvent = async (event: TelemetryEvent) => {
     await Telemetry.sendEvent(event, telemetryProps, router)
   }
 
   return (
-    <div className="relative">
-      <SectionContainer className="py-12 md:py-16 lg:py-20">
-        <div className="relative">
-          <div className="mx-auto">
-            <div className="mx-auto max-w-2xl lg:col-span-6 lg:flex lg:items-center justify-center text-center">
-              <div className="lg:h-[50vh] lg:min-h-[300px] lg:max-h-[450px] flex flex-col items-center justify-center sm:mx-auto md:w-3/4 lg:mx-0 lg:w-full gap-4 lg:gap-8">
-                <div>
-                  <h1
-                    className="
+    <>
+      <div className="absolute top-20 right-4 z-10">
+        <button onClick={() => setShowGrid((prev) => !prev)} className="text-scale-8 text-sm">
+          Toggle grid
+        </button>
+      </div>
+      <div className="relative">
+        <SectionContainer className="py-12 md:py-16 lg:py-20">
+          <div className="relative">
+            <div className="mx-auto">
+              <div className="mx-auto max-w-2xl lg:col-span-6 lg:flex lg:items-center justify-center text-center">
+                <div className="lg:h-[50vh] lg:min-h-[300px] lg:max-h-[450px] flex flex-col items-center justify-center sm:mx-auto md:w-3/4 lg:mx-0 lg:w-full gap-4 lg:gap-8">
+                  <div>
+                    <h1
+                      className="
                         text-scale-1200
                         text-3xl sm:text-5xl sm:leading-none lg:text-6xl
                         xl:text-7xl
                         "
-                  >
-                    <span className="block">Build in a weekend</span>
-                    <span className="text-transparent bg-clip-text bg-gradient-to-br from-[#3ECF8E] via-[#3ECF8E] to-[#3E9BCF] block md:ml-0">
-                      Scale to millions
-                    </span>
-                  </h1>
-                  <p className="pt-2 text-scale-1200 !mb-0 mt-1.5 text-sm sm:mt-5 sm:text-base lg:text-lg">
-                    Supabase is an open source Firebase alternative for building secure and
-                    performant Postgres backends with minimal configuration.
-                  </p>
+                    >
+                      <span className="block">Build in a weekend</span>
+                      <span className="text-transparent bg-clip-text bg-gradient-to-br from-[#3ECF8E] via-[#3ECF8E] to-[#3E9BCF] block md:ml-0">
+                        Scale to millions
+                      </span>
+                    </h1>
+                    <p className="pt-2 text-scale-1200 !mb-0 mt-1.5 text-sm sm:mt-5 sm:text-base lg:text-lg">
+                      Supabase is an open source Firebase alternative for building secure and
+                      performant Postgres backends with minimal configuration.
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Link href="https://app.supabase.com" as="https://app.supabase.com" passHref>
+                      <a onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_startProject'])}>
+                        <Button size="small" className="text-white">
+                          Start your project
+                        </Button>
+                      </a>
+                    </Link>
+                    <Link href="/docs" as="/docs" passHref>
+                      <a onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_documentation'])}>
+                        <Button size="small" type="default" icon={<IconBookOpen />}>
+                          Documentation
+                        </Button>
+                      </a>
+                    </Link>
+                  </div>
+                  <FrontendFrameworks className="mt-4 lg:mt-6" />
                 </div>
-                <div className="flex items-center gap-2">
-                  <Link href="https://app.supabase.com" as="https://app.supabase.com" passHref>
-                    <a onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_startProject'])}>
-                      <Button size="small" className="text-white">
-                        Start your project
-                      </Button>
-                    </a>
-                  </Link>
-                  <Link href="/docs" as="/docs" passHref>
-                    <a onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_documentation'])}>
-                      <Button size="small" type="default" icon={<IconBookOpen />}>
-                        Documentation
-                      </Button>
-                    </a>
-                  </Link>
-                </div>
-                <FrontendFrameworks className="mt-4 lg:mt-6" />
               </div>
             </div>
           </div>
-        </div>
-      </SectionContainer>
-      <HeroBackground />
-    </div>
+        </SectionContainer>
+        <HeroBackground showGrid={showGrid} />
+      </div>
+    </>
   )
 }
 
diff --git a/apps/www/components/Hero/HeroBackground.tsx b/apps/www/components/Hero/HeroBackground.tsx
index 22a2a113a64..dfa0d6be91a 100644
--- a/apps/www/components/Hero/HeroBackground.tsx
+++ b/apps/www/components/Hero/HeroBackground.tsx
@@ -4,7 +4,7 @@ import styles from './hero.module.css'
 
 const HeroGrid = dynamic(() => import('./HeroGrid'))
 
-const HeroBackground = () => (
+const HeroBackground = ({ showGrid }: any) => (
   <>
     <div
       className={[
@@ -22,7 +22,7 @@ const HeroBackground = () => (
     >
       <div className={['w-full h-full opacity-30 dark:opacity-60', styles['gradient']].join(' ')} />
       <div className="absolute bottom-0 z-[-2] w-full h-full bg-gradient-to-t from-scale-100 to-transparent" />
-      <HeroGrid />
+      {showGrid && <HeroGrid />}
     </div>
   </>
 )