style(header,hero): adjust nav visibility and hero title layout

Author: overtrue

components/business/app-header.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { docs_url } from "@/lib/utils"
+import { cn, docs_url } from "@/lib/utils"
 import { Popover, Transition } from '@headlessui/react'
 import Link from "next/link"
 import { Fragment } from 'react'
@@ -14,53 +14,68 @@ export default function AppHeader() {
     {
       label: '产品功能',
       url: docs_url('features/distributed/'),
+      classes: '',
     },
     {
       label: '架构',
       url: docs_url('/concepts/architecture.html'),
+      classes: 'hidden xl:inline-block',
     },
     {
       label: '解决方案',
       url: docs_url('features/data-lake/'),
+      classes: 'hidden xl:inline-block',
     },
     {
       label: 'AI 支持',
-      url: docs_url('features/ai')
+      url: docs_url('features/ai'),
+      classes: 'hidden xl:inline-block',
     },
     {
       label: '下载',
-      url: `/download`
+      url: `/download`,
+      classes: '',
     },
     {
       label: '文档',
-      url: docs_url('')
+      url: docs_url(''),
+      classes: '',
     },
     {
       label: '博客',
-      url: `https://rustfs.dev/`
+      url: `https://rustfs.dev/`,
+      classes: '',
     },
     {
       label: '社区',
-      url: 'https://github.com/rustfs/rustfs/discussions'
+      url: 'https://github.com/rustfs/rustfs/discussions',
+      classes: 'hidden xl:inline-block',
     },
     {
       label: '关于我们',
-      url: docs_url('about')
-    }
+      url: docs_url('about'),
+      classes: 'hidden xl:inline-block',
+    },
   ]
 
   return (
-    <header className="py-10">
+    <header className="py-6 xl:py-8">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
             <Link href="/">
               <Logo className="h-5 w-auto" />
             </Link>
             <div className="hidden md:flex md:gap-x-6">
-              {navs.map((item, index) => {
-                return <a key={index} className="inline-block rounded-lg px-2 py-1 text-sm text-primary" href={item.url}>{item.label}</a>
-              })}
+              {navs.map((item, index) => (
+                <a
+                  key={index}
+                  className={cn("inline-block rounded-lg px-2 py-1 text-sm text-primary", item.classes)}
+                  href={item.url}
+                >
+                  {item.label}
+                </a>
+              ))}
             </div>
           </div>
           <div className="flex items-center gap-x-2 md:gap-x-5">

components/business/home-hero.tsx

@@ -76,7 +76,7 @@ export default function HomeHero({ dockerPulls, metrics }: HomeHeroProps) {
       <div className="relative flex items-center gap-12">
         <div className="space-y-6 text-center lg:text-left relative z-20 lg:w-3/5">
           <h1 className="font-display text-3xl font-extrabold tracking-tight text-primary sm:text-4xl md:text-5xl xl:text-6xl leading-tight">
-            世界上增长最快的分布式对象存储
+            世界上增长最快的<br />分布式对象存储
           </h1>
           <p className="mx-auto lg:mx-0 max-w-2xl text-lg tracking-tight text-secondary-foreground">
             RustFS 用热门安全的 Rust 语言开发，兼容 S3 协议。适用于 AI/ML 及海量数据存储、大数据、互联网、工业和保密存储等全部场景。近乎免费使用。遵循 Apache 2 协议，支持国产保密设备和系统。