From e9aadb3e342ded21d152de0548362e8f8c2d0556 Mon Sep 17 00:00:00 2001
From: Kareem Mahlees <kareemmahlees@gmail.com>
Date: Thu, 4 Jan 2024 13:21:17 +0200
Subject: [PATCH] feat: speed insights and md screen responsive

---
 apps/web/package.json                 |  1 +
 apps/web/src/App.tsx                  |  2 ++
 apps/web/src/components/Heading.tsx   | 50 +++++++++++++++++++--------
 apps/web/src/components/Nav.tsx       |  7 +---
 apps/web/src/components/ui/button.tsx |  3 +-
 pnpm-lock.yaml                        | 11 ++++++
 6 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 2509a93f..d523ac3c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
+    "@vercel/speed-insights": "^1.0.2",
     "framer-motion": "^10.17.4",
     "vaul": "^0.8.0"
   }
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 90cd9d41..784de015 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,11 +1,13 @@
 import Heading from "@/components/Heading"
 import MaxWidthWrapper from "@/components/MaxWidthWrapper"
 import Nav from "@/components/Nav"
+import { SpeedInsights } from "@vercel/speed-insights/react"
 import { ThemeProvider } from "./components/providers/theme-provider"
 
 function App() {
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <SpeedInsights />
       <main className="font-[Rubik]">
         <Nav />
         <MaxWidthWrapper>
diff --git a/apps/web/src/components/Heading.tsx b/apps/web/src/components/Heading.tsx
index ded75cb0..1bbb5d92 100644
--- a/apps/web/src/components/Heading.tsx
+++ b/apps/web/src/components/Heading.tsx
@@ -1,9 +1,10 @@
+import { cn } from "@/lib/utils"
 import { motion } from "framer-motion"
-import { Button } from "./ui/button"
+import { Button, buttonVariants } from "./ui/button"
 
 const Heading = () => {
   return (
-    <header className="mt-16 break-keep gap-y-6 relative flex flex-col items-center">
+    <header className="mt-24 md:mt-32 break-keep gap-y-6 md:gap-y-8 relative flex flex-col items-center">
       <motion.image
         initial={{ opacity: 0 }}
         animate={{
@@ -11,33 +12,52 @@ const Heading = () => {
         }}
         aria-hidden
         transition={{ duration: 3 }}
-        className="absolute -top-20 -z-10 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)]"
+        className="absolute -top-20 md:-top-32 -z-10 opacity-20 md:opacity-10 [mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)] md:[mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)]"
       >
         <img src="/grid.svg" alt="bg" />
       </motion.image>
       <h1 className="font-bold text-4xl text-center md:text-5xl lg:text-6xl">
         Table viewer for modern developers
       </h1>
-      <p className="text-center text-muted-foreground ">
+      <p className="text-center text-muted-foreground md:text-lg lg:text-xl">
         Database browsing experience like never before
       </p>
       <div className="flex items-center gap-x-7">
-        <Button size={"sm"}>Get Started</Button>
-        <Button variant={"secondary"} size={"sm"} className="relative group">
-          <div className="absolute -z-10 -inset-1 bg-gradient-to-r from-amber-300 to-amber-300 rounded-lg blur opacity-30 hidden group-hover:block transition-colors" />
+        <Button className="font-semi">Download Now</Button>
+        <a
+          href="https://github.com/kareemmahlees/tablex"
+          target="_blank"
+          rel="noreferrer"
+          className={cn(
+            buttonVariants({
+              variant: "secondary"
+            }),
+            "relative group hover:bg-secondary"
+          )}
+        >
           <img src="/icons/github.svg" alt="github icon" className="w-5 h-5" />
-          {/* <img
-            src="/icons/start.svg"
-            alt="star"
-            className="absolute w-7 h-7 group-hover:-translate-y-5 transition-transform"
-            aria-hidden
-          /> */}
-        </Button>
+          <motion.image
+            className="absolute w-7 h-7 -z-10"
+            initial={{
+              opacity: 0
+            }}
+            animate={{
+              opacity: 100
+            }}
+          >
+            <img
+              src="/icons/start.svg"
+              alt="star"
+              className="group-hover:-translate-y-5 transition-transform"
+              aria-hidden
+            />
+          </motion.image>
+        </a>
       </div>
       <img
         src="/overview.png"
         alt="overview"
-        className="w-[400px] rounded-sm mt-5 [mask-image:linear-gradient(black,transparent_80%)]"
+        className="w-[400px] md:w-[600px] rounded-sm mt-5 [mask-image:linear-gradient(black,gray,transparent_75%)] brightness-[80%]"
       />
     </header>
   )
diff --git a/apps/web/src/components/Nav.tsx b/apps/web/src/components/Nav.tsx
index 242fec6c..a66ac8ab 100644
--- a/apps/web/src/components/Nav.tsx
+++ b/apps/web/src/components/Nav.tsx
@@ -4,12 +4,7 @@ import { Drawer, DrawerContent, DrawerTrigger } from "./ui/drawer"
 
 const Nav = () => {
   return (
-    <nav
-      className="w-full sticky bg-zinc-900 flex justify-between p-2 md:p-3 lg:p-4 items-center"
-      onScroll={(e) => {
-        e.currentTarget.style.background = "bg-zinc-800"
-      }}
-    >
+    <nav className="w-full fixed -top-0 backdrop-blur-md  flex justify-between p-2 md:p-3 lg:p-4 items-center">
       <Button
         size={"sm"}
         variant={"ghost"}
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index b8b77fb3..857f1ba4 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -53,4 +53,5 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-export { Button }
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 92882ddc..8e04d894 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -165,6 +165,9 @@ importers:
       "@radix-ui/react-slot":
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.2.46)(react@18.2.0)
+      "@vercel/speed-insights":
+        specifier: ^1.0.2
+        version: 1.0.2
       framer-motion:
         specifier: ^10.17.4
         version: 10.17.4(react-dom@18.2.0)(react@18.2.0)
@@ -3341,6 +3344,14 @@ packages:
       }
     dev: true
 
+  /@vercel/speed-insights@1.0.2:
+    resolution:
+      {
+        integrity: sha512-y5HWeB6RmlyVYxJAMrjiDEz8qAIy2cit0fhBq+MD78WaUwQvuBnQlX4+5MuwVTWi46bV3klaRMq83u9zUy1KOg==
+      }
+    requiresBuild: true
+    dev: false
+
   /@vitejs/plugin-react@4.2.1(vite@5.0.10):
     resolution:
       {