From 94a65f204d28479557c45488985501659809d852 Mon Sep 17 00:00:00 2001
From: Sergio <77530549+sergi0g@users.noreply.github.com>
Date: Thu, 27 Feb 2025 21:15:48 +0200
Subject: [PATCH] re-redesign docs home page

---
 docs/src/app/components/Card.tsx         |   6 +-
 docs/src/app/components/CopyableCode.tsx |  28 -----
 docs/src/app/components/GridPattern.tsx  |   3 +-
 docs/src/app/components/Section.tsx      |  28 -----
 docs/src/app/components/pages/home.tsx   | 124 ++++++++++-------------
 docs/src/app/layout.tsx                  |   2 +-
 6 files changed, 57 insertions(+), 134 deletions(-)
 delete mode 100644 docs/src/app/components/CopyableCode.tsx
 delete mode 100644 docs/src/app/components/Section.tsx

diff --git a/docs/src/app/components/Card.tsx b/docs/src/app/components/Card.tsx
index f0f4354..d2a17f8 100644
--- a/docs/src/app/components/Card.tsx
+++ b/docs/src/app/components/Card.tsx
@@ -10,12 +10,12 @@ export function Card({
   description: string;
 }) {
   return (
-    <div>
-      <Icon className="text-black size-7 dark:text-white inline mr-2" />
+    <div className="p-4 bg-white dark:bg-black group">
+      <Icon className="text-black size-7 group-hover:size-9 dark:text-white inline mr-2 transition-[width,height] duration-200" />
       <span className="align-middle text-2xl font-bold text-black dark:text-white">
         {name}
       </span>
-      <p className="text-2xl font-semibold text-neutral-500 dark:text-neutral-500">
+      <p className="text-xl font-semibold text-neutral-500 dark:text-neutral-500">
         {description}
       </p>
     </div>
diff --git a/docs/src/app/components/CopyableCode.tsx b/docs/src/app/components/CopyableCode.tsx
deleted file mode 100644
index 20be183..0000000
--- a/docs/src/app/components/CopyableCode.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import { IconCopy, IconCopyCheck } from "@tabler/icons-react";
-import { useState } from "react";
-
-export default function CopyableCode({ children }: { children: string }) {
-  const [success, setSuccess] = useState(false);
-  const handleClick = () => {
-    navigator.clipboard.writeText(children);
-    setSuccess(true);
-    setTimeout(() => setSuccess(false), 3000);
-  };
-  return (
-    <div className="relative rounded-md xl:w-auto">
-      <button
-        className="hover:bg-black/10 dark:hover:bg-black/60 flex w-full items-center justify-center gap-4 rounded-md border border-black/10 bg-black/5 px-8 py-3 font-mono text-sm font-medium text-black/70 transition-colors duration-200 md:px-10 md:py-3 md:text-base md:leading-6 dark:border-white/15 dark:bg-black dark:text-gray-300 backdrop-blur-md"
-        onClick={handleClick}
-      >
-        {children}
-        {success ? (
-          <IconCopyCheck className="stroke-black/40 dark:stroke-white/50" />
-        ) : (
-          <IconCopy className="stroke-black/40 dark:stroke-white/50" />
-        )}
-      </button>
-    </div>
-  );
-}
diff --git a/docs/src/app/components/GridPattern.tsx b/docs/src/app/components/GridPattern.tsx
index d9e8bc1..d376fab 100644
--- a/docs/src/app/components/GridPattern.tsx
+++ b/docs/src/app/components/GridPattern.tsx
@@ -8,7 +8,7 @@ export function GridPattern() {
   return (
     <svg
       aria-hidden="true"
-      className="pointer-events-none absolute inset-0 bottom-0 left-0 right-0 top-0 -z-10 h-full w-full stroke-neutral-200 dark:stroke-neutral-600/30"
+      className="pointer-events-none absolute inset-0 bottom-0 left-0 right-0 top-0 h-full w-full -z-10 bg-white stroke-neutral-200 dark:stroke-white/10 dark:bg-black"
     >
       <defs>
         <pattern
@@ -22,7 +22,6 @@ export function GridPattern() {
           <path
             d={`M.5 ${SIZE}V.5H${SIZE}`}
             fill="none"
-            strokeDasharray={"4 2"}
           />
         </pattern>
       </defs>
diff --git a/docs/src/app/components/Section.tsx b/docs/src/app/components/Section.tsx
deleted file mode 100644
index 95bfd64..0000000
--- a/docs/src/app/components/Section.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ReactNode } from "react";
-import { GradientText } from "./GradientText";
-
-export function Section({
-  title,
-  className,
-  children,
-}: {
-  title: string;
-  className: string;
-  children: ReactNode;
-}) {
-  return (
-    <div className="border-t border-t-neutral-300 bg-neutral-50 py-32 dark:border-t-neutral-600/30 dark:bg-neutral-950">
-      <div className="mx-auto w-full max-w-screen-xl">
-        <GradientText
-          text={title}
-          className="mx-auto mb-20 w-fit text-center text-4xl font-bold tracking-tighter"
-          innerClassName={className}
-          blur={12}
-        />
-        <div className="m-2 grid w-full auto-cols-fr gap-20 lg:grid-cols-3">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/docs/src/app/components/pages/home.tsx b/docs/src/app/components/pages/home.tsx
index 273b3d2..5e9992a 100644
--- a/docs/src/app/components/pages/home.tsx
+++ b/docs/src/app/components/pages/home.tsx
@@ -1,29 +1,28 @@
 import React from "react";
-import "./styles.css"
+import "./styles.css";
 
-import CopyableCode from "../CopyableCode";
 import { Browser } from "../Browser";
 import { Card } from "../Card";
 import {
   IconAdjustments,
   IconArrowRight,
+  IconBarrierBlockOff,
   IconBolt,
-  IconBraces,
-  IconDevices,
   IconFeather,
-  IconLockCheck,
+  IconGitMerge,
+  IconPuzzle,
+  IconServer,
+  IconTerminal,
 } from "@tabler/icons-react";
 import { GitHubIcon } from "nextra/icons";
 import { GridPattern } from "../GridPattern";
 import { GradientText } from "../GradientText";
-import { Section } from "../Section";
-import { Steps } from "nextra/components";
 import Link from "next/link";
 
 export default async function Home() {
   return (
     <>
-      <div className="relative home">
+      <div className="relative home bg-radial-[ellipse_at_center] from-transparent from-20% to-white dark:to-black">
         <GridPattern />
         <div className="px-4 pt-16 pb-8 sm:pt-24 lg:px-8">
           <div className="flex w-full flex-col items-center justify-between">
@@ -37,7 +36,7 @@ export default async function Home() {
                   blur={30}
                 />
               </h1>
-              <h3 className="mx-auto mt-6 max-w-3xl text-center text-xl leading-tight font-medium text-gray-400">
+              <h3 className="mx-auto mt-6 max-w-3xl text-center text-xl leading-tight font-medium text-neutral-500 dark:text-neutral-400">
                 Cup is a small utility with a big impact. Simplify your
                 container management workflow with fast and efficient update
                 checking, a full-featured CLI and web interface, and more.
@@ -54,7 +53,7 @@ export default async function Home() {
               <a
                 href="https://github.com/sergi0g/cup"
                 target="_blank"
-                className="hide-focus h-full text-nowrap border border-neutral-400 transition-colors duration-200 ease-in-out hover:border-neutral-600 focus:border-neutral-600 dark:border-neutral-600 hover:dark:border-neutral-400 hover:dark:shadow-sm hover:dark:shadow-neutral-600 focus:dark:border-neutral-400"
+                className="hide-focus h-full bg-white dark:bg-black text-nowrap border border-black/15 transition-colors duration-200 ease-in-out hover:border-black/40 dark:border-white/15 hover:dark:border-white/40 hover:dark:shadow-sm focus:dark:border-white/30"
               >
                 Star on GitHub
                 <GitHubIcon className="ml-auto size-4 md:size-5" />
@@ -66,68 +65,49 @@ export default async function Home() {
           <Browser />
         </div>
       </div>
-      <Section
-        title="Powerful at its core."
-        className="bg-gradient-to-r from-red-500 to-amber-500"
-      >
-        <Card
-          name="100% Safe Code"
-          icon={IconLockCheck}
-          description="Built with safe Rust and Typescript to ensure security and reliability."
-        />
-        <Card
-          name="Lightning Fast Performance"
-          icon={IconBolt}
-          description="Heavily optimized to squeeze out every last drop of performance. Each release is extensively benchmarked and profiled so that you'll never have to stare at a loading spinner for long."
-        />
-        <Card
-          name="Lightweight"
-          icon={IconFeather}
-          description="No runtimes or libraries are needed. All you need is the 5.1 MB static binary that works out of the box on any system."
-        />
-      </Section>
-      <Section
-        title="Efficient, yet flexible."
-        className="bg-gradient-to-r from-blue-500 to-indigo-500"
-      >
-        <Card
-          name="JSON output"
-          description="Connect Cup to your favorite intergrations with JSON output for the CLI and an API for the server. Now go make that cool dashboard you've been dreaming of!"
-          icon={IconBraces}
-        />
-        <Card
-          name="Both CLI and web interface"
-          description="Whether you prefer the command line or the web, Cup runs wherever you choose."
-          icon={IconDevices}
-        />
-        <Card
-          name="Configurable"
-          description="The simple configuration file provides you with all the tools you need to specify a custom Docker socket, manage registry connection options, choose a theme for the web interface and more."
-          icon={IconAdjustments}
-        />
-      </Section>
-      <div className="relative py-24 border-t border-t-neutral-300 dark:border-t-neutral-600/30 text-black dark:text-white">
-        <GridPattern />
-        <div className="mx-auto flex w-full max-w-screen-xl flex-col items-center">
-          <p className="mb-8 text-center text-3xl font-bold">
-            Still not convinced? Try it out now!
-          </p>
-          <div>
-            <Steps>
-              <h3 className="mb-2">Open a terminal and run</h3>
-              <CopyableCode>
-                docker run --rm -t -v /var/run/docker.sock:/var/run/docker.sock
-                -p 8000:8000 ghcr.io/sergi0g/cup serve
-              </CopyableCode>
-              <h3 className="mb-2">Open the dashboard in your browser</h3>
-              <p>
-                Visit{" "}
-                <a href="http://localhost:8000" className="underline">
-                  http://localhost:8000
-                </a>{" "}
-                in your browser to try it out!
-              </p>
-            </Steps>
+      <div className="bg-white dark:bg-black py-12 px-8 w-full">
+        <div className="flex h-full w-full items-center justify-center">
+          <div className="grid md:grid-cols-2 md:grid-rows-4 lg:grid-cols-4 lg:grid-rows-2 w-full max-w-7xl gap-px border border-transparent bg-black/10 dark:bg-white/10">
+            <Card
+              name="Built for speed."
+              icon={IconBolt}
+              description="Cup is written in Rust and every release goes through extensive profiling to squeeze out every last drop of performance."
+            />
+            <Card
+              name="Configurable."
+              icon={IconAdjustments}
+              description="Make Cup yours with the extensive configuration options available. Customize and tailor it to your needs."
+            />
+            <Card
+              name="Extend it."
+              icon={IconPuzzle}
+              description="JSON output enables you to connect Cup with your favorite integrations, build automations and more."
+            />
+            <Card
+              name="CLI available."
+              icon={IconTerminal}
+              description="Do you like terminals? Cup has a CLI. Check for updates quickly without spinning up a server."
+            />
+            <Card
+              name="Multiple servers."
+              icon={IconServer}
+              description="Run multiple Cup instances and effortlessly check on them through one web interface."
+            />
+            <Card
+              name="Unstoppable."
+              icon={IconBarrierBlockOff}
+              description="Cup is designed to check for updates without using up any rate limits. 10 images per hour won't be a problem, even with 100 images."
+            />
+            <Card
+              name="Lightweight."
+              icon={IconFeather}
+              description="No need for a powerful server and endless storage. The tiny 5.4 MB binary won't hog your CPU and memory."
+            />
+            <Card
+              name="Open source."
+              icon={IconGitMerge}
+              description="All source code is publicly available in our GitHub repository. We're looking for contributors!"
+            />
           </div>
         </div>
       </div>
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index daffcf4..778484a 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -20,7 +20,7 @@ const logo = (
 );
 
 const navbar = (
-  <Navbar logo={logo} projectLink="https://github.com/sergi0g/cup">
+  <Navbar logo={logo} projectLink="https://github.com/sergi0g/cup" chatLink="https://discord.gg/jmh5ctzwNG">
     <ThemeSwitch lite className="cursor-pointer" />
   </Navbar>
 );