feat(ui): make the landing page more responsive 📱 (#92)

.changeset/purple-dodos-swim.md

@@ -0,0 +1,2 @@
+---
+---

apps/web/src/sections/Features/cards/api-docs.tsx

@@ -22,8 +22,8 @@ const requests: RequestBarProps[] = [
 
 const APIDocs = () => {
   return (
-    <div className="flex items-center gap-x-4">
-      <div className="space-y-2">
+    <div className="flex flex-col items-center gap-x-4 gap-y-4 md:flex-row md:gap-y-0">
+      <div className="w-full space-y-2">
         {requests.map(({ method, endpoint }, i) => (
           <RequestBar key={i} method={method} endpoint={endpoint} />
         ))}

apps/web/src/sections/Features/cards/cross-platform.tsx

@@ -31,12 +31,12 @@ const tools: { src: string; alt: string }[] = [
 
 const CrossPlatform = () => {
   return (
-    <div className="dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative mx-auto grid h-full w-full grid-cols-4 gap-2 bg-white pt-7 md:gap-y-8 dark:bg-black">
+    <div className="dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative mx-auto grid h-full w-full grid-cols-4 gap-2 gap-y-6 bg-white pt-7 md:gap-y-8 dark:bg-black">
       {tools.map(({ src, alt }) => (
         <img
           src={src}
           alt={alt}
-          className="z-10 h-10 w-10 justify-self-center"
+          className="z-10 h-9 w-9 justify-self-center md:h-10 md:w-10"
         />
       ))}
       <div className="pointer-events-none absolute inset-0 z-0 flex items-center justify-center bg-white transition-all [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>

apps/web/src/sections/Features/cards/open-source.tsx

@@ -1,8 +1,10 @@
 const OpenSource = () => {
   return (
-    <div className="dark:bg-dot-white/[0.6] bg-dot-black/[0.6] relative mx-auto flex h-full w-full grid-cols-4 items-center justify-center gap-2 bg-white md:gap-y-8 dark:bg-black">
+    <div className="dark:bg-dot-white/[0.6] bg-dot-black/[0.6] relative mx-auto flex h-[150px] w-full grid-cols-4 items-center justify-center gap-2 bg-white md:h-full md:gap-y-8 dark:bg-black">
       <div className="flex flex-col items-center gap-y-3">
-        <p className="text-4xl font-bold">Open Source & Free</p>
+        <p className="z-10 text-3xl font-bold md:text-4xl">
+          Open Source & Free
+        </p>
         <a href="https://github.com/kareemmahlees/tablex">
           <img
             src="https://cdn.simpleicons.org/github/white"

apps/web/src/sections/Features/cards/updater.tsx

@@ -2,7 +2,7 @@ import { CheckCircle } from "lucide-react"
 
 const Updater = () => {
   return (
-    <div className="dark:bg-dot-white/[0.6] bg-dot-black/[0.6] relative mx-auto flex h-full w-full grid-cols-4 items-center justify-center gap-2 bg-white md:gap-y-8 dark:bg-black">
+    <div className="dark:bg-dot-white/[0.6] bg-dot-black/[0.6] relative flex h-[130px] w-full items-center justify-center gap-2 bg-white md:h-[160px] md:gap-y-8 lg:h-full dark:bg-black">
       <CheckCircle className="h-9 w-9" />
       <div className="pointer-events-none absolute inset-0 z-0 flex items-center justify-center bg-white transition-all [mask-image:radial-gradient(ellipse_at_center,transparent_25%,black)] dark:bg-black"></div>
     </div>

apps/web/src/sections/Features/features.tsx

@@ -24,45 +24,45 @@ const items = [
     description:
       "Powered by Rust & Tauri, TableX supports Windows, MacOS and Linux.",
     header: <CrossPlatform />,
-    icon: <Globe2 className="h-5 w-5" />,
-    className: "md:col-span-3"
+    icon: <Globe2 className="h-4 w-4 md:h-5 md:w-5" />,
+    className: "md:col-span-2 lg:col-span-3"
   },
   {
     title: "Your App, your Settings.",
     description:
       "Change how TableX behaves with configurable settings inspired by VSCode.",
     header: <Settings />,
-    icon: <SettingsIcon className="h-5 w-5" />,
+    icon: <SettingsIcon className="h-4 w-4 md:h-5 md:w-5" />,
     className: "md:col-span-2"
   },
   {
     title: "Leverage the full power of your Keyboard.",
     description:
       "A configurable keybindings system that meets your needs. Inspired by VSCode.",
     header: <Keybindings />,
-    icon: <Keyboard className="h-5 w-5" />,
+    icon: <Keyboard className="h-4 w-4 md:h-5 md:w-5" />,
     className: "md:col-span-2 "
   },
   {
     title: "Quick access to available commands.",
     description: "Invoke functionality from a central command palette.",
     header: <CommandPalette />,
-    icon: <Palette className="h-5 w-5" />,
+    icon: <Palette className="h-4 w-4 md:h-5 md:w-5" />,
     className: "md:col-span-2 "
   },
   {
     title: "Staying up-to-date always.",
     description: "TableX can self-update with our built in updater.",
     header: <Updater />,
-    icon: <Check className="h-5 w-5" />,
-    className: "md:col-span-1"
+    icon: <Check className="h-4 w-4 md:h-5 md:w-5" />,
+    className: "md:col-span-2 lg:col-span-1"
   },
   {
     title: "Terminal friendly.",
     description:
       "You can use TableX from right within your terminal thanks to our shipped-by-default CLI.",
     header: <CLI />,
-    icon: <Terminal className="h-5 w-5" />,
+    icon: <Terminal className="h-4 w-4 md:h-5 md:w-5" />,
     className: "md:col-span-2"
   },
 
@@ -79,22 +79,22 @@ const items = [
       </p>
     ),
     header: <APIDocs />,
-    icon: <Webhook className="h-5 w-5" />,
-    className: "md:col-span-3"
+    icon: <Webhook className="h-4 w-4 md:h-5 md:w-5" />,
+    className: "md:col-span-full lg:col-span-3"
   },
   {
     title: "100% Open-Source and Free.",
     description:
       "We believe in open source philosophy, that's why TableX is completely open-source and free with no login or sign-up required. ",
     header: <OpenSource />,
-    icon: <GitBranch className="h-5 w-5" />,
+    icon: <GitBranch className="h-4 w-4 md:h-5 md:w-5" />,
     className: "md:col-span-full"
   }
 ]
 
 const Features = () => {
   return (
-    <BentoGrid className="mt-40 grid max-w-5xl grid-cols-1 md:auto-rows-[20rem] md:grid-cols-3 lg:grid-cols-5">
+    <BentoGrid className="mx-4 mt-40 grid max-w-5xl grid-cols-1 md:mx-8 md:auto-rows-[20rem] md:grid-cols-4 lg:mx-auto lg:grid-cols-5">
       {items.map((item, i) => (
         <BentoGridItem
           key={i}

apps/web/src/sections/Footer/Footer.astro

@@ -2,7 +2,9 @@
 
 ---
 
-<footer class="text-muted-foreground mt-[100px] text-center md:pb-5">
+<footer
+  class="text-muted-foreground mt-[100px] text-center text-sm md:text-base md:pb-5"
+>
   <p>
     Developed by{" "}
     <a

apps/web/src/sections/Heading/Heading.astro

@@ -9,7 +9,7 @@ import AnimatedStar from "./animated-star"
 import DownloadBtn from "./download-btn"
 ---
 
-<header class="flex flex-col items-center gap-y-40">
+<header class="flex flex-col items-center gap-y-32 md:gap-y-36 lg:gap-y-40">
   <MaxWidthWrapper
     className="relative mt-24 flex flex-col items-center gap-y-6 break-keep md:mt-32 md:gap-y-8"
   >
@@ -66,16 +66,19 @@ import DownloadBtn from "./download-btn"
     </div>
   </MaxWidthWrapper>
   <div
-    class="w-[400px] md:w-[600px] lg:w-[1080px] relative flex flex-col items-center"
+    class="w-[400px] md:w-[800px] lg:w-[1080px] relative flex flex-col items-center"
   >
     <Image
       src={Overview}
       alt="overview"
       aria-hidden
-      class="mt-5 rounded-sm [mask-image:linear-gradient(black,gray,transparent_85%)]"
+      class="rounded-sm [mask-image:linear-gradient(black,gray,transparent_85%)]"
       loading={"eager"}
     />
-    <div class="w-[75%] h-[25%] bg-white absolute -top-5 blur-3xl -z-10"></div>
+    <div
+      class="w-[69%] h-[15%] md:w-[75%] md:h-[25%] bg-white absolute -top-5 blur-3xl -z-10"
+    >
+    </div>
     <div class="w-[50%] h-[25%] bg-white absolute top-0 blur-xl -z-10"></div>
   </div>
 </header>

apps/web/src/sections/Nav/desktop-nav.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button"
+import { Button, buttonVariants } from "@/components/ui/button"
 import {
   Dialog,
   DialogContent,
@@ -7,11 +7,21 @@ import {
   DialogTitle,
   DialogTrigger
 } from "@/components/ui/dialog"
+import { cn } from "@tablex/lib/utils"
 
 const DesktopNav = () => {
   return (
     <Dialog>
       <ul className="hidden items-end text-sm md:flex md:gap-x-4 lg:gap-x-5">
+        <a
+          className={cn(
+            "text-muted-foreground",
+            buttonVariants({ variant: "ghost", size: "sm" })
+          )}
+          href="/overview"
+        >
+          Docs
+        </a>
         <Button
           variant={"ghost"}
           size={"sm"}

apps/web/src/sections/Nav/mobile-nav.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button"
+import { Button, buttonVariants } from "@/components/ui/button"
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"
 import { Menu } from "lucide-react"
 import { useState } from "react"
@@ -23,6 +23,12 @@ const MobileNav = () => {
         </DrawerTrigger>
         <DrawerContent className="flex items-center justify-center">
           <div className="grid h-full w-full grid-cols-3 p-5">
+            <a
+              className={buttonVariants({ variant: "ghost", size: "sm" })}
+              href="/overview"
+            >
+              Docs
+            </a>
             <Button
               variant={"ghost"}
               size={"sm"}