Update deps, improve perf/A11y/SEO and resolve errors (#54)

nakrovati · web-flow · commit 933a8ea5a99a · 2026-04-04T08:47:17.000+08:00
* chore: update deps

chore: remove unused @heroicons/react

* perf: lazy-load images below the fold

* refactor: improve SEO and a11y

* fix: resolve eslint and some tailwindcss errors

* fix: add rel="noopener noreferrer" to external links
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -23,6 +23,8 @@
 # misc
 .DS_Store
 *.pem
+.vscode/*
+.zed/*
 
 # debug
 npm-debug.log*
diff --git a/AGENTS.md b/AGENTS.md
@@ -5,7 +5,7 @@ This document provides development guidelines and rules for AI Agents to ensure
 ## 📋 Project Overview
 
 - **Project Name**: RustFS.com - Official Website
-- **Framework**: Next.js 16.1.6 (App Router, Static Export)
+- **Framework**: Next.js 16.2.2 (App Router, Static Export)
 - **Language**: TypeScript (ES2022+, Strict Mode)
 - **Package Manager**: pnpm
 - **Styling**: Tailwind CSS 4 + shadcn/ui
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ RustFS is a high-performance distributed object storage system developed in Rust
 
 ## 🛠️ Tech Stack
 
-- **Framework**: Next.js 16.1.6 (App Router)
+- **Framework**: Next.js 16.2.2 (App Router)
 - **Language**: TypeScript (ES2022+, Strict Mode)
 - **Styling**: Tailwind CSS 4 + shadcn/ui
 - **Icons**: Lucide React
diff --git a/app/download/components/platforms/docker-download-section.tsx b/app/download/components/platforms/docker-download-section.tsx
@@ -148,12 +148,12 @@ export default function DockerDownloadSection({ platform, release, className }:
           {'Default credentials: rustfsadmin / rustfsadmin'}
         </Note>
         <Note type="info">
-          <Link href="https://hub.docker.com/r/rustfs/rustfs/tags" target="_blank" className="hover:underline">
+          <Link href="https://hub.docker.com/r/rustfs/rustfs/tags" target="_blank" className="hover:underline" rel="noopener noreferrer">
             {'View all available versions on Docker Hub'}
           </Link>
         </Note>
         <Note type="success">
-          <Link href="https://docs.rustfs.com/installation/docker" target="_blank" className="hover:underline">
+          <Link href="https://docs.rustfs.com/installation/docker" target="_blank" className="hover:underline" rel="noopener noreferrer">
             {'View detailed Docker installation guide'}
           </Link>
         </Note>
diff --git a/app/download/components/platforms/macos-download-section.tsx b/app/download/components/platforms/macos-download-section.tsx
@@ -55,7 +55,7 @@ export default function MacOSDownloadSection({ platform, release, className }: M
         />
 
         <Note type="info">
-          <Link href="https://brew.sh/" target="_blank" className="hover:underline">
+          <Link href="https://brew.sh/" target="_blank" className="hover:underline" rel="noopener noreferrer">
             {'Homebrew is required for installation'}
           </Link>
         </Note>
diff --git a/components/business/app-header.tsx b/components/business/app-header.tsx
@@ -63,7 +63,7 @@ export default function AppHeader() {
       <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="/">
+            <Link href="/" aria-label="Go to homepage">
               <Logo className="h-5 w-auto" />
             </Link>
             <div className="hidden md:flex md:gap-x-6">
diff --git a/components/business/buttons/fixed-contact-button.tsx b/components/business/buttons/fixed-contact-button.tsx
@@ -3,7 +3,7 @@ import { MessageCircleIcon } from "lucide-react"
 export default function FixedContactButton() {
   return (
     <div className="fixed bottom-10 right-10 z-50 flex items-end justify-end">
-      <a href="https://rustfs.com/contact/" className="relative right-0 inline-flex items-center justify-center gap-2 rounded-full h-12 w-12 bg-brand text-brand-foreground hover:bg-brand/90" target="_blank">
+      <a href="https://rustfs.com/contact/" className="relative right-0 inline-flex items-center justify-center gap-2 rounded-full h-12 w-12 bg-brand text-brand-foreground hover:bg-brand/90" target="_blank" aria-label="Contact us">
         <MessageCircleIcon />
       </a>
     </div>
diff --git a/components/business/buttons/link-github.tsx b/components/business/buttons/link-github.tsx
@@ -71,8 +71,8 @@ export default function LinkGitHub({ className, showText = false }: { className?
     <Link
       href={`https://github.com/${REPO}`}
       target="_blank"
-      rel="noreferrer"
-      title="Stars on GitHub"
+      rel="noopener noreferrer"
+      aria-label={!showText ? "Stars on GitHub" : undefined}
       className={cn(
         "inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground shadow-none",
         className
diff --git a/components/business/buttons/link-twitter.tsx b/components/business/buttons/link-twitter.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function LinkTwitter({ className, size = 'size-4' }: { className?: string | string[], size?: string }) {
   return (
-    <Link className={cn('inline-block text-muted-foreground hover:text-primary', className)} href="https://x.com/rustfsofficial">
+    <Link className={cn('inline-block text-muted-foreground hover:text-primary', className)} href="https://x.com/rustfsofficial" aria-label="RustFS Twitter" target="_blank" rel="noopener noreferrer">
       <svg
         role="img"
         viewBox="0 0 24 24"
diff --git a/components/business/contact-form.tsx b/components/business/contact-form.tsx
@@ -158,7 +158,7 @@ export default function ContactForm() {
             <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
               <div>
                 <label htmlFor="firstName" className="mb-2 block text-sm font-medium text-foreground">
-                  First Name <span className="text-destructive">*</span>
+                  First Name <span className="text-destructive" aria-hidden="true">*</span>
                 </label>
                 <Input
                   id="firstName"
@@ -173,7 +173,7 @@ export default function ContactForm() {
               </div>
               <div>
                 <label htmlFor="lastName" className="mb-2 block text-sm font-medium text-foreground">
-                  Last Name <span className="text-destructive">*</span>
+                  Last Name <span className="text-destructive" aria-hidden="true">*</span>
                 </label>
                 <Input
                   id="lastName"
@@ -191,7 +191,7 @@ export default function ContactForm() {
             <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
               <div>
                 <label htmlFor="email" className="mb-2 block text-sm font-medium text-foreground">
-                  Business Email <span className="text-destructive">*</span>
+                  Business Email <span className="text-destructive" aria-hidden="true">*</span>
                 </label>
                 <Input
                   id="email"
@@ -223,7 +223,7 @@ export default function ContactForm() {
             <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
               <div>
                 <label htmlFor="country" className="mb-2 block text-sm font-medium text-foreground">
-                  Country <span className="text-destructive">*</span>
+                  Country <span className="text-destructive" aria-hidden="true">*</span>
                 </label>
                 <Select
                   name="country"
@@ -247,7 +247,7 @@ export default function ContactForm() {
               </div>
               <div>
                 <label htmlFor="company" className="mb-2 block text-sm font-medium text-foreground">
-                  Company <span className="text-destructive">*</span>
+                  Company <span className="text-destructive" aria-hidden="true">*</span>
                 </label>
                 <Input
                   id="company"
@@ -264,7 +264,7 @@ export default function ContactForm() {
 
             <div>
               <label htmlFor="message" className="mb-2 block text-sm font-medium text-foreground">
-                Message <span className="text-destructive">*</span>
+                Message <span className="text-destructive" aria-hidden="true">*</span>
               </label>
               <Textarea
                 id="message"
diff --git a/components/business/fixed-language-banner.tsx b/components/business/fixed-language-banner.tsx
@@ -9,7 +9,7 @@ const STORAGE_KEY = 'rustfs-language-banner-dismissed'
 export default function FixedLanguageBanner() {
   const [showBanner, setShowBanner] = useState(() => {
     if (typeof window === 'undefined') return false
-    
+
     const isDismissed = localStorage.getItem(STORAGE_KEY) === 'true'
     const isChinese = navigator.language.toLowerCase().startsWith('zh')
     return isChinese && !isDismissed
@@ -43,7 +43,7 @@ export default function FixedLanguageBanner() {
           </div>
           <button
             onClick={handleDismiss}
-            className="flex-shrink-0 rounded-md p-1 transition-colors hover:bg-primary-foreground/10 focus:outline-none focus:ring-2 focus:ring-primary-foreground focus:ring-offset-2 focus:ring-offset-primary active:bg-primary-foreground/20"
+            className="shrink-0 rounded-md p-1 transition-colors hover:bg-primary-foreground/10 focus:outline-none focus:ring-2 focus:ring-primary-foreground focus:ring-offset-2 focus:ring-offset-primary active:bg-primary-foreground/20"
             aria-label="关闭提示"
           >
             <X className="h-4 w-4" />
diff --git a/components/business/get-started-today.tsx b/components/business/get-started-today.tsx
@@ -1,13 +1,12 @@
 'use client'
 
-/* eslint-disable @next/next/no-img-element */
 import ContactUsButton from "./buttons/contact-us";
 
 const AVATAR_URLS = [
-  "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
-  "https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
-  "https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80",
-  "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80"
+  "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=112&h=112&q=80",
+  "https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=112&h=112&q=80",
+  "https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=112&h=112&q=80",
+  "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=112&h=112&q=80"
 ];
 
 export default function GetStartedToday() {return (
@@ -32,6 +31,7 @@ export default function GetStartedToday() {return (
                     className="inline-block size-8 rounded-full ring-2 ring-background"
                     src={url}
                     alt={`Avatar ${index + 1}`}
+                    loading="lazy"
                   />
                 ))}
                 <span className="inline-flex size-8 items-center justify-center rounded-full bg-primary ring-2 ring-background">
diff --git a/components/business/home-blog.tsx b/components/business/home-blog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 import type { BlogPost } from "@/lib/blog";
 import { getLatestBlogPosts } from "@/lib/blog";
 import { cn } from "@/lib/utils";
diff --git a/components/business/home-differents.tsx b/components/business/home-differents.tsx
@@ -50,7 +50,7 @@ export default function HomeDifferents() {return (
               </div>
             </div>
 
-            <div className="absolute bottom-0 start-0 hidden -translate-x-16 translate-y-16 md:block">
+            <div className="absolute bottom-0 inset-s-0 hidden -translate-x-16 translate-y-16 md:block">
               <svg
                 className="h-auto w-56 text-info"
                 width={347}
@@ -98,11 +98,11 @@ export default function HomeDifferents() {return (
               </div>
             </div>
 
-            <span className="absolute end-0 top-0 rounded-es-xl rounded-se-xl bg-success px-3 py-1.5 text-xs font-medium text-success-foreground">
+            <span className="absolute inset-e-0 top-0 rounded-es-xl rounded-se-xl bg-success px-3 py-1.5 text-xs font-medium text-success-foreground">
               {'Best choice'}
             </span>
 
-            <div className="absolute end-0 top-0 hidden translate-x-16 translate-y-16 md:block">
+            <div className="absolute inset-e-0 top-0 hidden translate-x-16 translate-y-16 md:block">
               <svg
                 className="h-auto w-16 text-warning"
                 width={121}
diff --git a/components/business/home-features.tsx b/components/business/home-features.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-/* eslint-disable @next/next/no-img-element */
 import features from '@/data/features';
 import { cn } from '@/lib/utils';
 import { CheckCircleIcon, QuoteIcon } from "lucide-react";
@@ -81,9 +80,9 @@ export default function HomeFeatures() {
                   <div className="flex items-center gap-6 mb-6">
                     <feature.icon className="hidden md:block size-12 md:size-16 text-brand" />
                     <div>
-                      <h4 className="text-2xl font-bold text-foreground mb-2">
+                      <h3 className="text-2xl font-bold text-foreground mb-2">
                         {feature.title}
-                      </h4>
+                      </h3>
                       <p className="text-muted-foreground">
                         {feature.featureDescription}
                       </p>
@@ -119,6 +118,7 @@ export default function HomeFeatures() {
                           width="48"
                           height="48"
                           alt=""
+                          loading="lazy"
                           src={feature.review.img}
                         />
                       </div>
diff --git a/components/business/home-stats.tsx b/components/business/home-stats.tsx
@@ -49,7 +49,7 @@ export default function HomeStats() {return (
           </div>
           {/* End Col */}
 
-          <div className="relative lg:col-span-8 lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-foreground/10 dark:lg:before:bg-foreground/20">
+          <div className="relative lg:col-span-8 lg:before:absolute lg:before:-inset-s-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-foreground/10 dark:lg:before:bg-foreground/20">
             <div className="grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3">
               {/* Stats */}
               <div>
diff --git a/components/business/reviews.tsx b/components/business/reviews.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-/* eslint-disable @next/next/no-img-element */
 import { Marquee } from "@/components/magicui/marquee";
 import reviews from "@/data/reviews.json";
 import clsx from "clsx";
@@ -41,7 +40,7 @@ const ReviewCard = ({ img, name, position, body }: SlideItem) => {
           </figcaption>
           <p className="text-muted-foreground text-xs  font-medium">{position}</p>
         </div>
-        <img className="rounded-full" width="36" height="36" alt="" src={img} />
+        <img className="rounded-full" width="36" height="36" alt="" src={img} loading="lazy"/>
       </div>
     </figure>
   );
@@ -87,8 +86,8 @@ export default function HomeReviews() {
               <ReviewCard key={`${review.name}${review.position}`} {...review} />
             ))}
           </Marquee>
-          <div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-background"></div>
-          <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-background"></div>
+          <div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-linear-to-b from-background"></div>
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-t from-background"></div>
         </div>
       </div>
     </section>
diff --git a/components/magicui/marquee.tsx b/components/magicui/marquee.tsx
@@ -45,7 +45,7 @@ export function Marquee({
     <div
       {...props}
       className={cn(
-        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
+        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)",
         {
           "flex-row": !vertical,
           "flex-col": vertical,
@@ -58,11 +58,11 @@ export function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+            className={cn("flex shrink-0 justify-around gap-(--gap)", {
               "animate-marquee flex-row": !vertical,
               "animate-marquee-vertical flex-col": vertical,
-              "group-hover:[animation-play-state:paused]": pauseOnHover,
-              "[animation-direction:reverse]": reverse,
+              "group-hover:paused": pauseOnHover,
+              "direction-reverse": reverse,
             })}
           >
             {children}
diff --git a/components/magicui/word-rotate.tsx b/components/magicui/word-rotate.tsx
@@ -37,13 +37,13 @@ export function WordRotate({
   return (
     <div className="overflow-hidden py-2">
       <AnimatePresence mode="wait">
-        <motion.h1
+        <motion.span
           key={words[index]}
           className={cn(className)}
           {...motionProps}
         >
           {words[index]}
-        </motion.h1>
+        </motion.span>
       </AnimatePresence>
     </div>
   );
diff --git a/components/ui/globe.tsx b/components/ui/globe.tsx
@@ -103,13 +103,13 @@ export function Globe({
   return (
     <div
       className={cn(
-        "absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]",
+        "absolute inset-0 mx-auto aspect-square w-full max-w-[600px]",
         className
       )}
     >
       <canvas
         className={cn(
-          "size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]"
+          "size-full opacity-0 transition-opacity duration-500 contain-[layout_paint_size]"
         )}
         ref={canvasRef}
         onPointerDown={(e) => {
diff --git a/eslint.config.js b/eslint.config.js
@@ -17,6 +17,12 @@ const eslintConfig = defineConfig([
     "next-env.d.ts",
     "components/ui/**", // shadcn/ui components
   ]),
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {
+      "@next/next/no-img-element": "off",
+    }
+  }
 ]);
 
 export default eslintConfig;
diff --git a/next.config.ts b/next.config.ts
@@ -3,13 +3,6 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   output: 'export',
   trailingSlash: true,
-  webpack: (config) => {
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ['@svgr/webpack'],
-    });
-    return config;
-  },
   turbopack: {
     rules: {
       '*.svg': {
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
