Redesign homepage and improve code display components

apps/docs/next-env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/dev/types/routes.d.ts'
+import './.next/types/routes.d.ts'
+import './.next/types/root-params.d.ts'
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/docs/src/app/globals.css

@@ -4,8 +4,12 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@theme inline {
+  --font-mono: var(--font-source-code), ui-monospace, monospace;
+}
+
 @theme {
-  --font-mono: 'Source Code Pro', 'sans-serif';
+  --color-brand: hsl(var(--brand));
 
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
@@ -89,54 +93,58 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+    border-color: var(--color-border, currentColor);
   }
 }
 
 @layer utilities {
   body {
     font-family: var(--font-inter);
     font-size: 15px;
+    font-feature-settings: 'cv11', 'ss01';
+    text-rendering: optimizeLegibility;
   }
 }
 
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --brand: 183 100% 38%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 240 3.8% 46.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
     --sidebar-accent: 240 4.8% 95.9%;
     --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
+    --sidebar-border: 240 5.9% 90%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
+    --brand: 183 100% 40%;
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --card: 0 0% 3.9%;
@@ -179,6 +187,9 @@
   body {
     @apply bg-background text-foreground;
   }
+  ::selection {
+    background-color: hsl(var(--brand) / 0.2);
+  }
   hr {
     @apply my-5;
   }

apps/docs/src/app/installation/page.tsx

@@ -18,10 +18,14 @@ export default function Page() {
         Setting up <TypographyBold>@lglab/react-qr-code</TypographyBold> is quick and
         easy. Install it using your favourite package manager:
       </TypographyP>
-      <CodeBlock code='pnpm add @lglab/react-qr-code' title='pnpm' />
-      <CodeBlock code='npm i @lglab/react-qr-code' title='npm' />
-      <CodeBlock code='yarn add @lglab/react-qr-code' title='yarn' />
-      <CodeBlock code='bun add @lglab/react-qr-code' title='bun' />
+      <CodeBlock
+        commands={[
+          { title: 'pnpm', code: 'pnpm add @lglab/react-qr-code' },
+          { title: 'npm', code: 'npm i @lglab/react-qr-code' },
+          { title: 'yarn', code: 'yarn add @lglab/react-qr-code' },
+          { title: 'bun', code: 'bun add @lglab/react-qr-code' },
+        ]}
+      />
     </>
   )
 }

apps/docs/src/app/layout.tsx

@@ -14,7 +14,7 @@ const inter = Inter({
 })
 
 const mono = Source_Code_Pro({
-  variable: '--font-mono',
+  variable: '--font-source-code',
   subsets: ['latin'],
 })
 

apps/docs/src/app/page.tsx

@@ -1,15 +1,8 @@
-import { Code, Layers, Sparkles, Zap } from 'lucide-react'
+import { ArrowRight, Bot, Code, Layers, Sparkles, Zap } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { Hero } from '@/components/hero'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
 import { TypographyBold } from '@/components/ui/typography'
 
 export const metadata: Metadata = {
@@ -20,77 +13,78 @@ export const metadata: Metadata = {
     'React QR Code is a highly customizable and lightweight QR code generator for React applications. Easily style QR codes with unique finder patterns, rounded corners, and customizable colors.',
 }
 
-export default function Page() {
-  const features = [
-    {
-      title: 'Highly Customizable',
-      description:
-        'Style finder patterns, modules, and colors exactly how you want with advanced configuration.',
-      icon: <Sparkles className='h-4 w-4 text-primary' />,
-    },
-    {
-      title: 'Performance Optimized',
-      description:
-        'Generates QR codes efficiently without sacrificing quality or bundle size.',
-      icon: <Zap className='h-4 w-4 text-primary' />,
-    },
-    {
-      title: 'SVG-Based Rendering',
-      description: 'Crisp and scalable output for web and print, powered by SVG.',
-      icon: <Layers className='h-4 w-4 text-primary' />,
-    },
-    {
-      title: 'Developer-Friendly',
-      description:
-        'Built with TypeScript, easy to use, and focused on a great developer experience.',
-      icon: <Code className='h-4 w-4 text-primary' />,
-    },
-  ]
+const features = [
+  {
+    title: 'Highly Customizable',
+    description:
+      'Style finder patterns, modules, and colors exactly how you want with advanced configuration.',
+    icon: Sparkles,
+  },
+  {
+    title: 'Performance Optimized',
+    description:
+      'Generates QR codes efficiently without sacrificing quality or bundle size.',
+    icon: Zap,
+  },
+  {
+    title: 'SVG-Based Rendering',
+    description: 'Crisp and scalable output for web and print, powered by SVG.',
+    icon: Layers,
+  },
+  {
+    title: 'Developer-Friendly',
+    description:
+      'Built with TypeScript, easy to use, and focused on a great developer experience.',
+    icon: Code,
+  },
+]
+
+const FeatureIcon = ({ icon: Icon }: { icon: typeof Sparkles }) => (
+  <div className='inline-flex size-9 shrink-0 items-center justify-center rounded-lg border bg-background shadow-xs'>
+    <Icon className='size-4 text-brand' />
+  </div>
+)
 
+export default function Page() {
   return (
     <>
       <Hero />
-      <div className='mb-4 grid grid-cols-1 gap-4 lg:grid-cols-2 max-w-full md:max-w-4xl mx-auto'>
-        {features.map((feature) => (
-          <Card key={feature.title} className='shadow-xs'>
-            <CardHeader className='flex-row items-start gap-4 space-y-0'>
-              <div className='mb-2 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-background shadow-sm'>
-                {feature.icon}
-              </div>
-              <div className='space-y-1'>
-                <CardTitle className='text-lg'>{feature.title}</CardTitle>
-                <CardDescription className='text-sm leading-relaxed'>
+      <div className='mx-auto w-full max-w-4xl'>
+        <div className='grid grid-cols-1 overflow-hidden rounded-xl border bg-border gap-px sm:grid-cols-2'>
+          {features.map((feature) => (
+            <div key={feature.title} className='flex flex-col gap-4 bg-background p-6'>
+              <FeatureIcon icon={feature.icon} />
+              <div className='space-y-1.5'>
+                <h3 className='font-semibold tracking-tight'>{feature.title}</h3>
+                <p className='text-sm leading-relaxed text-muted-foreground'>
                   {feature.description}
-                </CardDescription>
+                </p>
               </div>
-            </CardHeader>
-          </Card>
-        ))}
-      </div>
+            </div>
+          ))}
+        </div>
 
-      <Card className='max-w-full md:max-w-4xl mx-auto shadow-xs'>
-        <CardHeader className='flex-row items-start gap-4 space-y-0'>
-          <div className='mt-1 shrink-0 rounded-lg bg-background p-2 shadow-sm'>
-            <Sparkles className='h-4 w-4 text-primary' />
+        <Link
+          href='/llms-txt'
+          className='group mt-4 flex flex-col gap-4 rounded-xl border bg-muted/40 p-6 transition-colors hover:bg-muted/70 sm:flex-row sm:items-center'
+        >
+          <FeatureIcon icon={Bot} />
+          <div className='flex-1 space-y-1.5'>
+            <h3 className='font-semibold tracking-tight'>Optimized for AI</h3>
+            <p className='text-sm leading-relaxed text-muted-foreground'>
+              We provide{' '}
+              <TypographyBold className='text-foreground'>llms.txt</TypographyBold> and{' '}
+              <TypographyBold className='text-foreground'>llms-full.txt</TypographyBold>{' '}
+              files to help tools like Cursor and Windsurf understand the library
+              documentation instantly.
+            </p>
           </div>
-          <div>
-            <CardTitle className='mb-1 text-xl'>Optimized for AI</CardTitle>
-            <CardDescription className='text-base text-foreground/80'>
-              We provide <TypographyBold>llms.txt</TypographyBold> and{' '}
-              <TypographyBold>llms-full.txt</TypographyBold> files to help tools like
-              Cursor and Windsurf understand the library documentation instantly.
-            </CardDescription>
-          </div>
-        </CardHeader>
-        <CardContent className='pt-0'>
-          <Link
-            href='/llms-txt'
-            className='ml-14 inline-flex items-center gap-1 font-medium text-primary hover:underline'
-          >
-            Learn how to use with AI tools →
-          </Link>
-        </CardContent>
-      </Card>
+          <span className='inline-flex items-center gap-1 text-sm font-medium whitespace-nowrap'>
+            Learn more
+            <ArrowRight className='size-4 transition-transform group-hover:translate-x-0.5' />
+          </span>
+        </Link>
+      </div>
     </>
   )
 }

apps/docs/src/components/api-table.tsx

@@ -21,7 +21,7 @@ export const APITable = ({ props }: { props: Prop[] }) => (
     <TableBody>
       {props.map((prop) => (
         <TableRow key={prop.name}>
-          <TableCell className='font-medium'>{prop.name}</TableCell>
+          <TableCell className='font-mono text-[13px] font-medium'>{prop.name}</TableCell>
           <TableCell>
             <PropTypeTag type={prop.type} />
           </TableCell>

apps/docs/src/components/code-block.tsx

@@ -1,46 +1,47 @@
 'use client'
 
-import { Check, Copy } from 'lucide-react'
 import { useState } from 'react'
 
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
+
+import { CopyButton } from './copy-button'
 
 interface CodeBlockProps {
-  code: string
-  title?: string
+  commands: { title: string; code: string }[]
 }
 
-export const CodeBlock = ({ code, title = '' }: CodeBlockProps) => {
-  const [isCopied, setIsCopied] = useState(false)
-
-  const copyToClipboard = async () => {
-    await navigator.clipboard.writeText(code)
-    setIsCopied(true)
-    setTimeout(() => setIsCopied(false), 2000)
-  }
+export const CodeBlock = ({ commands }: CodeBlockProps) => {
+  const [active, setActive] = useState(0)
+  const { code } = commands[active]
 
   return (
-    <Card className='mb-4'>
-      <CardContent className='p-0'>
-        <div className='flex items-center justify-between bg-muted px-4 py-2'>
-          <span className='text-sm font-medium text-muted-foreground'>{title}</span>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={copyToClipboard}
-            className='h-8 w-8 p-0 cursor-pointer'
-          >
-            {isCopied ? <Check className='h-4 w-4' /> : <Copy className='h-4 w-4' />}
-            <span className='sr-only'>
-              {isCopied ? 'Copied' : 'Copy code to clipboard'}
-            </span>
-          </Button>
+    <div className='mb-4 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950 shadow-sm'>
+      <div className='flex h-10 items-center justify-between border-b border-zinc-800 pl-2 pr-2'>
+        <div className='flex items-center gap-1' role='tablist'>
+          {commands.map(({ title }, i) => (
+            <button
+              key={title}
+              type='button'
+              role='tab'
+              aria-selected={i === active}
+              onClick={() => setActive(i)}
+              className={cn(
+                'h-7 cursor-pointer rounded-md px-2.5 font-mono text-xs text-zinc-400 transition-colors hover:text-zinc-100',
+                i === active && 'bg-white/10 text-zinc-50',
+              )}
+            >
+              {title}
+            </button>
+          ))}
         </div>
-        <pre className='overflow-x-auto p-4'>
-          <code className='text-sm'>{code}</code>
-        </pre>
-      </CardContent>
-    </Card>
+        <CopyButton value={code} />
+      </div>
+      <pre className='overflow-x-auto p-4'>
+        <code className='font-mono text-sm text-zinc-100'>
+          <span className='select-none text-zinc-500'>$ </span>
+          {code}
+        </code>
+      </pre>
+    </div>
   )
 }