feat: speed insights and md screen responsive

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"
   }

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>

apps/web/src/components/Heading.tsx

@@ -1,43 +1,63 @@
+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={{
           opacity: 0.2
         }}
         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>
   )

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"}

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 }