init

components/BuiltWithButton.tsx

@@ -0,0 +1,44 @@
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+// Nexty.dev Affiliate Link: https://affiliates.nexty.dev/
+// sign up and use your affiliate link on BuiltWithButton to earn money
+
+export default function BuiltWithButton() {
+  return (
+    <Link
+      href="https://nexty.dev"
+      title="Built with Nexty.dev"
+      prefetch={false}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "px-4 rounded-md bg-transparent border-gray-500 hover:bg-gray-950 text-white hover:text-gray-100"
+      )}
+    >
+      <span>Built with</span>
+      <span>
+        <LogoNexty className="size-4 rounded-full" />
+      </span>
+      <span className="font-bold text-base-content flex gap-0.5 items-center tracking-tight">
+        Nexty.dev
+      </span>
+    </Link>
+  );
+}
+
+function LogoNexty({ className }: { className?: string }) {
+  return (
+    <img
+      src="/logo_nexty.png"
+      alt="Logo"
+      title="Logo"
+      loading="lazy"
+      width={96}
+      height={96}
+      className={cn("size-8 rounded-md", className)}
+    />
+  );
+}

components/LanguageDetectionAlert.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Link as I18nLink, LOCALE_NAMES, routing } from "@/i18n/routing";
+import { cn } from "@/lib/utils";
+import { useLocaleStore } from "@/stores/localeStore";
+import { ArrowRight, Globe, X } from "lucide-react";
+import { useLocale } from "next-intl";
+import { useCallback, useEffect, useState } from "react";
+
+export function LanguageDetectionAlert() {
+  const [countdown, setCountdown] = useState(10); // countdown 10s and dismiss
+  const [isVisible, setIsVisible] = useState(false);
+  const locale = useLocale();
+  const [detectedLocale, setDetectedLocale] = useState<string | null>(null);
+  const {
+    showLanguageAlert,
+    setShowLanguageAlert,
+    dismissLanguageAlert,
+    getLangAlertDismissed,
+  } = useLocaleStore();
+
+  const handleDismiss = useCallback(() => {
+    setIsVisible(false);
+    setTimeout(() => {
+      dismissLanguageAlert();
+    }, 300);
+  }, [dismissLanguageAlert]);
+
+  const handleSwitchLanguage = useCallback(() => {
+    dismissLanguageAlert();
+  }, [dismissLanguageAlert]);
+
+  useEffect(() => {
+    const detectedLang = navigator.language; // Get full language code, e.g., zh_HK
+    const storedDismiss = getLangAlertDismissed();
+
+    if (!storedDismiss) {
+      let supportedLang = routing.locales.find((l) => l === detectedLang);
+
+      if (!supportedLang) {
+        const mainLang = detectedLang.split("-")[0];
+        supportedLang = routing.locales.find((l) => l.startsWith(mainLang));
+      }
+
+      if (supportedLang && supportedLang !== locale) {
+        setDetectedLocale(supportedLang);
+        setShowLanguageAlert(true);
+        setTimeout(() => setIsVisible(true), 100);
+      }
+    }
+  }, [locale, getLangAlertDismissed, setShowLanguageAlert]);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (showLanguageAlert && countdown > 0) {
+      timer = setInterval(() => {
+        setCountdown((prev) => prev - 1);
+      }, 1000);
+    }
+
+    return () => {
+      if (timer) clearInterval(timer);
+    };
+  }, [showLanguageAlert, countdown]);
+
+  useEffect(() => {
+    if (countdown === 0 && showLanguageAlert) {
+      handleDismiss();
+    }
+  }, [countdown, showLanguageAlert, handleDismiss]);
+
+  if (!showLanguageAlert || !detectedLocale) return null;
+
+  const messages = require(`@/i18n/messages/${detectedLocale}.json`);
+  const alertMessages = messages.LanguageDetection;
+
+  return (
+    <div
+      className={cn(
+        "fixed top-16 right-4 z-50 max-w-sm w-full mx-4 sm:mx-0 sm:w-96",
+        "transform transition-all duration-300 ease-in-out",
+        isVisible
+          ? "translate-x-0 translate-y-0 opacity-100"
+          : "translate-x-full opacity-0"
+      )}
+      role="banner"
+      aria-live="polite"
+      aria-label="Language detection alert"
+    >
+      <div className="bg-background/95 backdrop-blur-md border border-border rounded-xl shadow-lg p-4 relative">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute right-2 top-2 h-6 w-6 opacity-50 hover:opacity-100"
+          onClick={handleDismiss}
+          aria-label="Dismiss language suggestion"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+
+        <div className="pr-8">
+          <div className="flex items-center gap-2 mb-3">
+            <Globe className="h-4 w-4 text-primary" />
+            <h3 className="font-medium text-sm text-foreground">
+              {alertMessages.title}
+            </h3>
+          </div>
+
+          <p className="text-xs text-muted-foreground mb-4 leading-relaxed">
+            {alertMessages.description}
+          </p>
+
+          <div className="flex items-center justify-between">
+            <Button asChild onClick={handleSwitchLanguage}>
+              <I18nLink
+                href="/"
+                title={`${alertMessages.switchTo} ${LOCALE_NAMES[detectedLocale]}`}
+                locale={detectedLocale as any}
+                className={cn(
+                  "flex items-center gap-2 px-3 py-2 rounded-lg",
+                  "bg-primary text-primary-foreground hover:bg-primary/90",
+                  "text-sm font-medium transition-colors",
+                  "group focus:outline-none focus:ring-2 focus:ring-primary/50"
+                )}
+                aria-label={`${alertMessages.switchTo} ${LOCALE_NAMES[detectedLocale]}`}
+              >
+                <span>
+                  {alertMessages.switchTo} {LOCALE_NAMES[detectedLocale]}
+                </span>
+                <ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
+              </I18nLink>
+            </Button>
+
+            <span className="text-xs text-muted-foreground">{countdown}s</span>
+          </div>
+        </div>
+
+        <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-primary/10 to-transparent pointer-events-none opacity-50" />
+      </div>
+    </div>
+  );
+}

components/LocaleSwitcher.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Locale,
+  LOCALE_NAMES,
+  routing,
+  usePathname,
+  useRouter,
+} from "@/i18n/routing";
+import { useLocaleStore } from "@/stores/localeStore";
+import { Globe } from "lucide-react";
+import { useLocale } from "next-intl";
+import { useParams } from "next/navigation";
+import { useEffect, useState, useTransition } from "react";
+
+export default function LocaleSwitcher() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const locale = useLocale();
+  const { dismissLanguageAlert } = useLocaleStore();
+  const [, startTransition] = useTransition();
+  const [currentLocale, setCurrentLocale] = useState("locale");
+
+  useEffect(() => {
+    setCurrentLocale(locale);
+  }, [locale, setCurrentLocale]);
+
+  function onSelectChange(nextLocale: Locale) {
+    setCurrentLocale(nextLocale);
+    dismissLanguageAlert();
+
+    startTransition(() => {
+      router.replace(
+        // @ts-expect-error -- TypeScript will validate that only known `params`
+        // are used in combination with a given `pathname`. Since the two will
+        // always match for the current route, we can skip runtime checks.
+        // { pathname: "/", params: params || {} }, // if your want to redirect to the home page
+        { pathname, params: params || {} }, // if your want to redirect to the current page
+        { locale: nextLocale }
+      );
+    });
+  }
+
+  return (
+    <Select
+      defaultValue={locale}
+      value={currentLocale}
+      onValueChange={onSelectChange}
+    >
+      <SelectTrigger className="w-fit">
+        <Globe className="w-4 h-4 mr-1" />
+        <SelectValue placeholder="Language" />
+      </SelectTrigger>
+      <SelectContent>
+        {routing.locales.map((cur) => (
+          <SelectItem key={cur} value={cur}>
+            {LOCALE_NAMES[cur]}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

components/ProductTabsClient.tsx

@@ -0,0 +1,57 @@
+// @/components/ProductTabsClient.tsx (客户端组件)
+'use client';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+type ProductTabsClientProps = {
+  detail: string;
+  spec: string[];
+  packaging: string;
+  locale: string;
+};
+
+// 纯客户端交互组件（仅处理标签页切换）
+export default function ProductTabsClient({ detail, spec, packaging, locale }: ProductTabsClientProps) {
+  const [activeTab, setActiveTab] = useState('spec'); // 仅客户端使用状态
+  const t = useTranslations("Product");
+
+  return (
+    <div className="border rounded">
+      {/* 标签栏 */}
+      <div className="flex border-b">
+        <button
+          className={`px-4 py-2 border-r transition-colors ${activeTab === 'detail' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
+          onClick={() => setActiveTab('detail')}
+        >
+          {t('productDetail')}
+        </button>
+        <button
+          className={`px-4 py-2 border-r transition-colors ${activeTab === 'spec' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
+          onClick={() => setActiveTab('spec')}
+        >
+          {t('productSpec')}
+        </button>
+        <button
+          className={`px-4 py-2 transition-colors ${activeTab === 'packaging' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
+          onClick={() => setActiveTab('packaging')}
+        >
+          {t('productPacking')}
+        </button>
+      </div>
+      {/* 内容区 */}
+      <div className="p-4">
+        {activeTab === 'detail' && <div className="text-gray-800">{detail || t('productNoDetail')}</div>}
+        {activeTab === 'spec' && (
+          spec.length > 0 ? (
+            <div className="space-y-1 text-gray-800">
+              {spec.map((item, idx) => <div key={idx}>{item}</div>)}
+            </div>
+          ) : (
+            <p className="text-gray-500">{t('productNoSpec')}</p>
+          )
+        )}
+        {activeTab === 'packaging' && <div className="text-gray-800">{packaging || t('productNoPacking')}</div>}
+      </div>
+    </div>
+  );
+}

components/TailwindIndicator.tsx

@@ -0,0 +1,14 @@
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === "production") return null
+
+  return (
+    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+      <div className="sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  )
+}

components/ThemeToggle.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

components/WebsiteLogo.tsx

@@ -0,0 +1,107 @@
+"use client";
+import { getDomain } from "@/lib/utils";
+import { useEffect, useState } from "react";
+
+interface IProps {
+  url: string;
+  size?: number;
+  className?: string;
+  timeout?: number;
+}
+
+const WebsiteLogo = ({
+  url,
+  size = 32,
+  className = "",
+  timeout = 1000, // 1 second
+}: IProps) => {
+  const domain = getDomain(url);
+  const [imgSrc, setImgSrc] = useState(`https://${domain}/logo.png`);
+  const [fallbackIndex, setFallbackIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const fallbackSources = [
+    `https://${domain}/logo.png`,
+    `https://${domain}/logo.png`,
+    `https://${domain}/apple-touch-icon.png`,
+    `https://${domain}/apple-touch-icon-precomposed.png`,
+    `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
+    `https://icons.duckduckgo.com/ip3/${domain}.ico`,
+    `https://${domain}/favicon.png`,
+  ];
+
+  useEffect(() => {
+    let timeoutId: any;
+
+    if (isLoading) {
+      timeoutId = setTimeout(() => {
+        handleError();
+      }, timeout);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [imgSrc, isLoading]);
+
+  const handleError = () => {
+    const nextIndex = fallbackIndex + 1;
+    if (nextIndex < fallbackSources.length) {
+      setFallbackIndex(nextIndex);
+      setImgSrc(fallbackSources[nextIndex]);
+      setIsLoading(true);
+    } else {
+      setHasError(true);
+      setIsLoading(false);
+    }
+  };
+
+  const handleLoad = () => {
+    setIsLoading(false);
+    setHasError(false);
+  };
+
+  return (
+    <div
+      className={`relative inline-block ${className}`}
+      style={{ width: size, height: size }}
+    >
+      {/* placeholder */}
+      {isLoading && (
+        <div className="absolute inset-0 animate-pulse">
+          <div className="w-full h-full rounded-md bg-gray-200/60" />
+        </div>
+      )}
+
+      <img
+        src={imgSrc}
+        alt={`${domain} logo`}
+        width={size}
+        height={size}
+        onError={handleError}
+        onLoad={handleLoad}
+        className={`inline-block transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"
+          }`}
+        style={{
+          objectFit: "contain",
+          display: hasError ? "none" : "inline-block",
+        }}
+      />
+
+      {/* Fallback: Display first letter of domain when all image sources fail */}
+      {hasError && (
+        <div
+          className="w-full h-full flex items-center justify-center bg-gray-100 rounded-md"
+          style={{ fontSize: `${size * 0.5}px` }}
+        >
+          {domain.charAt(0).toUpperCase()}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WebsiteLogo;

components/footer/Badges.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+export default function Badges() {
+  return (
+    <div className="py-6 flex justify-center w-full flex-wrap gap-2">
+      <a
+        href="https://dofollow.tools"
+        title="Featured on Dofollow.Tools"
+        target="_blank"
+      >
+        <img
+          src="https://dofollow.tools/badge/badge_light.svg"
+          alt="Featured on Dofollow.Tools"
+          width="200"
+          height="54"
+        />
+      </a>
+    </div>
+  );
+}

components/footer/Footer.tsx

@@ -0,0 +1,188 @@
+import BuiltWithButton from "@/components/BuiltWithButton";
+import { TwitterX } from "@/components/social-icons/icons";
+import { siteConfig } from "@/config/site";
+import { Link as I18nLink } from "@/i18n/routing";
+import { FooterLink } from "@/types/common";
+import { GithubIcon, MailIcon } from "lucide-react";
+import { getMessages, getTranslations } from "next-intl/server";
+import Link from "next/link";
+import { SiBluesky, SiDiscord } from "react-icons/si";
+
+export default async function Footer() {
+  const messages = await getMessages();
+
+  const t = await getTranslations("Home");
+  const tFooter = await getTranslations("Footer");
+
+  const footerLinks: FooterLink[] = tFooter.raw("Links.groups");
+  footerLinks.forEach((group) => {
+    const pricingLink = group.links.find((link) => link.id === "pricing");
+    if (pricingLink) {
+      pricingLink.href = process.env.NEXT_PUBLIC_PRICING_PATH!;
+    }
+  });
+
+  return (
+    <div className="bg-gray-900 text-gray-300">
+      <footer className="py-2 border-t border-gray-700">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 py-12 lg:grid-cols-6">
+            <div className="w-full flex flex-col sm:flex-row lg:flex-col gap-4 col-span-full md:col-span-2">
+              <div className="space-y-4 flex-1">
+                <div className="items-center space-x-2 flex">
+                  <h2 className="highlight-text text-2xl font-bold">
+                    {t("title")}
+                  </h2>
+                </div>
+
+                <p className="text-sm p4-4 md:pr-12">{t("tagLine")}</p>
+
+                <div className="flex items-center gap-2">
+                  {siteConfig.socialLinks?.github && (
+                    <Link
+                      href={siteConfig.socialLinks.github}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="GitHub"
+                      title="View on GitHub"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <GithubIcon className="size-4" aria-hidden="true" />
+                    </Link>
+                  )}
+                  {siteConfig.socialLinks?.discord && (
+                    <Link
+                      href={siteConfig.socialLinks.discord}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="Discord"
+                      title="Join Discord"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <SiDiscord className="w-4 h-4" aria-hidden="true" />
+                    </Link>
+                  )}
+                  {siteConfig.socialLinks?.twitter && (
+                    <Link
+                      href={siteConfig.socialLinks.twitter}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="Twitter"
+                      title="View on Twitter"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <TwitterX className="w-4 h-4" aria-hidden="true" />
+                    </Link>
+                  )}
+                  {siteConfig.socialLinks?.bluesky && (
+                    <Link
+                      href={siteConfig.socialLinks.bluesky}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="Blue Sky"
+                      title="View on Bluesky"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <SiBluesky className="w-4 h-4" aria-hidden="true" />
+                    </Link>
+                  )}
+                  {siteConfig.socialLinks?.email && (
+                    <Link
+                      href={`mailto:${siteConfig.socialLinks.email}`}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="Email"
+                      title="Email"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <MailIcon className="w-4 h-4" />
+                    </Link>
+                  )}
+                </div>
+
+                <BuiltWithButton />
+              </div>
+            </div>
+
+            {footerLinks.map((section) => (
+              <div key={section.title} className="flex-1">
+                <h3 className="text-white text-lg font-semibold mb-4">
+                  {section.title}
+                </h3>
+                <ul className="space-y-2 text-sm">
+                  {section.links.map((link) => (
+                    <li key={link.href}>
+                      {link.href.startsWith("/") && !link.useA ? (
+                        <I18nLink
+                          href={link.href}
+                          title={link.name}
+                          prefetch={false}
+                          className="hover:text-white transition-colors"
+                          target={link.target || ""}
+                          rel={link.rel || ""}
+                        >
+                          {link.name}
+                        </I18nLink>
+                      ) : (
+                        <Link
+                          href={link.href}
+                          title={link.name}
+                          prefetch={false}
+                          className="hover:text-white transition-colors"
+                          target={link.target || ""}
+                          rel={link.rel || ""}
+                        >
+                          {link.name}
+                        </Link>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+
+            {/* {messages.Footer.Newsletter && (
+              <div className="w-full flex-1">
+                <Newsletter />
+              </div>
+            )} */}
+          </div>
+
+          <div className="border-t border-gray-800 py-6 flex flex-col md:flex-row justify-between items-center">
+            <p className="text-gray-400 text-sm">
+              {tFooter("Copyright", {
+                year: new Date().getFullYear(),
+                name: siteConfig.name,
+              })}
+            </p>
+            <div className="flex space-x-6 mt-4 md:mt-0">
+              <I18nLink
+                href="/privacy-policy"
+                title={tFooter("PrivacyPolicy")}
+                prefetch={false}
+                className="text-gray-400 hover:text-white text-sm"
+              >
+                {tFooter("PrivacyPolicy")}
+              </I18nLink>
+              <I18nLink
+                href="/terms-of-service"
+                title={tFooter("TermsOfService")}
+                prefetch={false}
+                className="text-gray-400 hover:text-white text-sm"
+              >
+                {tFooter("TermsOfService")}
+              </I18nLink>
+            </div>
+          </div>
+        </div>
+
+        {/* <Badges /> */}
+      </footer>
+    </div>
+  );
+}

components/footer/Newsletter.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { normalizeEmail, validateEmail } from "@/lib/email";
+import { Send } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+export function Newsletter() {
+  const [email, setEmail] = useState("");
+  const [subscribeStatus, setSubscribeStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const t = useTranslations("Footer.Newsletter");
+
+  const handleSubscribe = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+
+    const normalizedEmailAddress = normalizeEmail(email);
+    const { isValid, error } = validateEmail(normalizedEmailAddress);
+
+    if (!isValid) {
+      setSubscribeStatus("error");
+      setErrorMessage(error || t("defaultErrorMessage"));
+      setTimeout(() => setSubscribeStatus("idle"), 5000);
+      return;
+    }
+
+    try {
+      setSubscribeStatus("loading");
+
+      const response = await fetch("/api/newsletter", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: normalizedEmailAddress }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || t("errorMessage"));
+      }
+
+      setSubscribeStatus("success");
+      setEmail("");
+      setErrorMessage("");
+      setTimeout(() => setSubscribeStatus("idle"), 5000);
+    } catch (error) {
+      setSubscribeStatus("error");
+      setErrorMessage(
+        error instanceof Error ? error.message : t("errorMessage2")
+      );
+      setTimeout(() => setSubscribeStatus("idle"), 5000);
+    }
+  };
+  return (
+    <div className="">
+      <h4 className="mb-3 font-semibold">{t("title")}</h4>
+      <p className="text-sm mb-3">{t("description")}</p>
+      <form onSubmit={handleSubscribe} className="flex flex-col gap-2 max-w-64">
+        <div className="relative">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="your@email.com"
+            required
+            className="w-full px-3 py-2 bg-gray-200 text-black text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+            disabled={subscribeStatus === "loading"}
+          />
+        </div>
+        <Button type="submit" disabled={subscribeStatus === "loading"}>
+          {subscribeStatus === "loading" ? (
+            t("subscribing")
+          ) : (
+            <>
+              {t("subscribe")} <Send className="w-3.5 h-3.5" />
+            </>
+          )}
+        </Button>
+        {subscribeStatus === "success" && (
+          <p className="text-xs text-green-600 mt-1">{t("subscribed")}</p>
+        )}
+        {subscribeStatus === "error" && (
+          <p className="text-xs text-red-600 mt-1">{errorMessage}</p>
+        )}
+      </form>
+    </div>
+  );
+}

components/header/Header.tsx

@@ -0,0 +1,49 @@
+import HeaderLinks from "@/components/header/HeaderLinks";
+import MobileMenu from "@/components/header/MobileMenu";
+import LocaleSwitcher from "@/components/LocaleSwitcher";
+import { siteConfig } from "@/config/site";
+import { Link as I18nLink } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+
+const Header = () => {
+  const t = useTranslations("Home");
+
+  return (
+    <header className="py-2 px-6 backdrop-blur-md sticky top-0 z-50">
+      <nav className="flex justify-between items-center w-full mx-auto">
+        <div className="flex items-center space-x-6 md:space-x-12">
+          <I18nLink
+            href="/"
+            prefetch={false}
+            className="flex items-center space-x-1 font-bold"
+          >
+            <img
+              alt={siteConfig.name}
+              src="/logo.png"
+              className="w-6 h-6"
+              width={32}
+              height={32}
+            />
+            <span className="text-gray-800 dark:text-gray-200">
+              {t("title")}
+            </span>
+          </I18nLink>
+          <HeaderLinks />
+        </div>
+
+        <div className="flex items-center gap-x-2 md:gap-x-4 lg:gap-x-6 flex-1 justify-end">
+          {/* PC */}
+          <div className="hidden md:flex items-center gap-x-4">
+            <LocaleSwitcher />
+            {/* <ThemeToggle /> */}
+          </div>
+
+          {/* Mobile */}
+          <MobileMenu />
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

components/header/HeaderLinks.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Link as I18nLink, usePathname, useRouter } from "@/i18n/routing";
+import { cn } from "@/lib/utils";
+import { HeaderLink } from "@/types/common";
+import { useTranslations } from "next-intl";
+
+const HeaderLinks = () => {
+  const tHeader = useTranslations("Header");
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const headerLinks: HeaderLink[] = tHeader.raw("links");
+  const localePrefix = `/${(pathname || "/zh").split("/")[1] || "zh"}`;
+
+  return (
+    <div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
+      {headerLinks.map((link) => {
+
+        return (
+          <div key={link.name} className="relative group">
+            <I18nLink
+              href={link.href}
+              title={link.name}
+              prefetch={true}
+              className={cn(
+                "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
+                pathname === link.href && "font-semibold text-accent-foreground"
+              )}
+            >
+              {link.name}
+            </I18nLink>
+            {
+              link?.children && (
+                <div className="absolute left-0 top-full hidden group-hover:block z-50 pt-2">
+                  <div className="w-56 rounded-md border bg-white shadow-md overflow-hidden">
+                    {link.children.map((child) => (
+                      <I18nLink key={child.name} prefetch={false} href={child.href} className="block px-4 py-2 hover:bg-red-600 hover:text-white">
+                        {child.name}
+                      </I18nLink>
+                    ))}
+                  </div>
+                </div>
+              )
+            }
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default HeaderLinks;

components/header/MobileMenu.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import LocaleSwitcher from "@/components/LocaleSwitcher";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Link as I18nLink } from "@/i18n/routing";
+import { HeaderLink } from "@/types/common";
+import { Menu } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+
+export default function MobileMenu() {
+  const t = useTranslations("Home");
+  const tHeader = useTranslations("Header");
+
+  const headerLinks: HeaderLink[] = tHeader.raw("links");
+
+  return (
+    <div className="flex items-center gap-1 md:hidden">
+      <LocaleSwitcher />
+      <ThemeToggle />
+      <DropdownMenu>
+        <DropdownMenuTrigger className="p-2">
+          <Menu className="h-5 w-5" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-64">
+          <DropdownMenuLabel>
+            <I18nLink
+              href="/"
+              title={t("title")}
+              prefetch={true}
+              className="flex items-center space-x-1 font-bold"
+            >
+              <Image
+                alt={t("title")}
+                src="/logo.svg"
+                className="w-6 h-6"
+                width={32}
+                height={32}
+              />
+              <span className="highlight-text">{t("title")}</span>
+            </I18nLink>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {headerLinks.map((link) => (
+              <DropdownMenuItem key={link.name}>
+                <I18nLink
+                  href={link.href}
+                  title={link.name}
+                  prefetch={
+                    link.target && link.target === "_blank" ? false : true
+                  }
+                  target={link.target || "_self"}
+                  rel={link.rel || undefined}
+                >
+                  {link.name}
+                </I18nLink>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

components/header/SectionDropdown.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useSectionStore } from "@/stores/sectionStore";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export default function SectionDropdown() {
+  const { sections } = useSectionStore();
+  if (!sections || sections.length === 0) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="px-3 py-2 rounded-md text-sm hover:bg-accent hover:text-accent-foreground">
+        页面目录
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuGroup>
+          {sections.map((s) => (
+            <DropdownMenuItem key={s.id}
+              onClick={() => {
+                const el = document.getElementById(s.id);
+                if (!el) return;
+                const rect = el.getBoundingClientRect();
+                const top = rect.top + window.scrollY - 80;
+                window.scrollTo({ top, behavior: "smooth" });
+                history.replaceState(null, "", `#${s.id}`);
+              }}
+            >
+              {s.name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

components/home/index.tsx

@@ -0,0 +1,484 @@
+'use client'
+import { Link as I18nLink } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+
+export default function HomeComponent() {
+  const t = useTranslations("Home");
+
+  // 客户端组件中直接使用翻译键，next-intl 会自动处理
+  // 注意：在客户端组件中，我们不能使用 raw() 函数，需要直接访问翻译键
+
+  return (
+    <>
+      <section className="mx-auto text-center">
+        {/* 轮播图区域, 先用一张图片占位， 宽度100%， 盖度100vh */}
+        <img src="/images/home.png" alt={t("carousel")} className="w-screen h-[80vh] object-cover rounded-lg" />
+        {/* 公司介绍 - 左右布局 */}
+        <div className="flex flex-col lg:flex-row w-full my-16 px-8">
+          {/* 左边视频（图片占位） */}
+          <div className="w-full lg:w-1/2 h-[50vh] lg:h-[60vh] relative overflow-hidden">
+            <img
+              src="http://kelunpuzhonggong.com/upload/img/20210508103620.jpg"
+              alt={t("company_video")}
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          {/* 右边内容 - 分三部分 */}
+          <div className="w-full lg:w-1/2 flex flex-col justify-center p-8 lg:p-16">
+            {/* 第一部分：标题 */}
+            <div className="mb-6">
+              <h2 className="text-3xl font-bold text-gray-900">{t("company.title")}</h2>
+            </div>
+
+            {/* 第二部分：介绍 */}
+            <div className="mb-8">
+              {/* 左对齐首行缩进2字符 */}
+              <p className="text-left text-lg text-gray-700 leading-relaxed indent-8">
+                {t("company.description")}
+              </p>
+            </div>
+
+            {/* 第三部分：按钮 */}
+            <div>
+              <I18nLink href="/about">
+                <button className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded transition-colors">
+                  {t("company.button")}
+                </button>
+              </I18nLink>
+            </div>
+          </div>
+        </div>
+
+
+        {/* 隐式轮播图，没有控件，每张四个卡片 */}
+        <div className="relative overflow-hidden py-16">
+          <div className="flex w-full flex-nowrap animate-carousel">
+            {/* 第一组卡片 */}
+            <div className="min-w-full flex justify-center px-4 gap-6">
+              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
+                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card1.number")}</div>
+                <div className="text-gray-700">{t("stats.card1.title")}</div>
+              </div>
+              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
+                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card2.number")}</div>
+                <div className="text-gray-700">{t("stats.card2.title")}</div>
+              </div>
+              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
+                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card3.number")}</div>
+                <div className="text-gray-700">{t("stats.card3.title")}</div>
+              </div>
+              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
+                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card4.number")}</div>
+                <div className="text-gray-700">{t("stats.card4.title")}</div>
+              </div>
+            </div>
+            {/* 第二组卡片 - 用于无缝轮播 */}
+            <div className="min-w-full flex justify-center px-4 gap-6">
+              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
+                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card1.number")}</div>
+                <div className="text-gray-700">{t("stats.card1.title")}</div>
+              </div>
+              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
+                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card2.number")}</div>
+                <div className="text-gray-700">{t("stats.card2.title")}</div>
+              </div>
+              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
+                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card3.number")}</div>
+                <div className="text-gray-700">{t("stats.card3.title")}</div>
+              </div>
+              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
+                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card4.number")}</div>
+                <div className="text-gray-700">{t("stats.card4.title")}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <style jsx>{`
+          @keyframes carousel {
+            0% { transform: translateX(0); }
+            90% { transform: translateX(0); }
+            100% { transform: translateX(-100%); }
+            100% { transform: translateX(-100%); }
+          }
+          .animate-carousel {
+            animation: carousel 5s infinite linear;
+            animation-timing-function: linear;
+            transition: transform 1.5s;
+          }
+        `}</style>
+
+
+        {/* 最新资讯 */}
+        <div className="py-16 px-4 bg-white relative overflow-hidden">
+          {/* 标题 */}
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-gray-900 inline-block relative">
+              {t("news.title")}
+              <span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
+            </h2>
+          </div>
+
+          {/* 资讯卡片列表 */}
+          <div className="flex flex-wrap justify-center gap-6 max-w-7xl mx-auto">
+            {/* 第一张卡片 */}
+            <I18nLink href={t("news.items.news1.link")}>
+              <div className="w-full md:w-[28vw] lg:w-[28vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
+                <div className="p-4">
+                  <div className="text-red-600 mb-2 font-medium text-left">{t("news.items.news1.date")}</div>
+                  <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news1.title")}</div>
+                </div>
+                <div className="p-4 h-48 overflow-hidden">
+                  <img src="/images/blogs/1.jpg" alt={t("news.items.news1.title")} className="w-full h-full object-cover rounded" />
+                </div>
+              </div>
+            </I18nLink>
+
+            {/* 第二张卡片 */}
+            <I18nLink href={t("news.items.news2.link")}>
+              <div className="w-full md:w-[28vw] lg:w-[28vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative -mt-2 z-10">
+                <div className="p-4">
+                  <div className="text-red-600 mb-2 font-medium text-left">{t("news.items.news2.date")}</div>
+                  <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news2.title")}</div>
+                </div>
+                <div className="p-4 h-48 overflow-hidden">
+                  <img src="/images/blogs/2.png" alt={t("news.items.news2.title")} className="w-full h-full object-cover rounded" />
+                </div>
+              </div>
+            </I18nLink>
+
+            {/* 第三张卡片 */}
+            <I18nLink href={t("news.items.news3.link")}>
+              <div className="w-full md:w-[26vw] lg:w-[26vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
+                <div className="p-4">
+                  <div className="text-red-600 mb-2 font-medium text-left">{t("news.items.news3.date")}</div>
+                  <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news3.title")}</div>
+                </div>
+                <div className="p-4 h-48 overflow-hidden">
+                  <img src="/images/blogs/3.jpg" alt={t("news.items.news3.title")} className="w-full h-full object-cover rounded" />
+                </div>
+              </div>
+            </I18nLink>
+
+          </div>
+
+          {/* 了解更多按钮 */}
+          <div className="text-center mt-12">
+            <I18nLink href="/blog">
+              <button className="px-6 py-2 bg-white border border-red-600 text-red-600 hover:bg-red-600 hover:text-white transition-all duration-300 rounded-sm">
+                {t("news.button")}
+              </button>
+            </I18nLink>
+          </div>
+        </div>
+        {/* 产品中心 */}
+        <div className="py-16 px-4 bg-white">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-gray-900 inline-block relative">
+              {t("products.title")}
+              <span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
+            </h2>
+          </div>
+
+          {/* 左右布局，左3右2 */}
+          <div className="flex flex-col lg:flex-row w-full max-w-7xl mx-auto">
+            {/* 左侧产品图 - 占3份 */}
+            <div className="w-full lg:w-3/5 h-[50vh] lg:h-[70vh] relative overflow-hidden bg-gray-100 rounded-lg mb-8 lg:mb-0">
+              {/* 默认显示第一张产品图 */}
+              <img
+                id="productImage"
+                src={t("products.list.product1.image")}
+                alt={t("products.list.product1.alt")}
+                className="w-full h-full object-contain p-8 transition-opacity duration-300"
+              />
+
+              {/* 产品标题覆盖层 */}
+              <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/70 to-transparent">
+                <h3 id="productTitle" className="text-white text-2xl font-bold">{t("products.list.product1.name")}</h3>
+              </div>
+            </div>
+
+            {/* 右侧产品列表 - 占2份，两列布局 */}
+            <div className="w-full lg:w-2/5 grid grid-cols-2 gap-4 lg:gap-6 p-4 lg:pl-8">
+              {/* 产品1 */}
+              <div
+                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
+                onMouseEnter={() => {
+                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product1.image"));
+                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product1.alt"));
+                  document.getElementById('productTitle')!.textContent = t("products.list.product1.name");
+                }}
+              >
+                <span>{t("products.list.product1.name")}</span>
+              </div>
+
+              {/* 产品2 */}
+              <div
+                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
+                onMouseEnter={() => {
+                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product2.image"));
+                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product2.alt"));
+                  document.getElementById('productTitle')!.textContent = t("products.list.product2.name");
+                }}
+              >
+                <span>{t("products.list.product2.name")}</span>
+              </div>
+
+              {/* 产品3 */}
+              <div
+                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
+                onMouseEnter={() => {
+                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product3.image"));
+                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product3.alt"));
+                  document.getElementById('productTitle')!.textContent = t("products.list.product3.name");
+                }}
+              >
+                <span>{t("products.list.product3.name")}</span>
+              </div>
+
+              {/* 产品4 */}
+              <div
+                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
+                onMouseEnter={() => {
+                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product4.image"));
+                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product4.alt"));
+                  document.getElementById('productTitle')!.textContent = t("products.list.product4.name");
+                }}
+              >
+                <span>{t("products.list.product4.name")}</span>
+              </div>
+
+              {/* 产品5 */}
+              <div
+                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
+                onMouseEnter={() => {
+                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product5.image"));
+                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product5.alt"));
+                  document.getElementById('productTitle')!.textContent = t("products.list.product5.name");
+                }}
+              >
+                <span>{t("products.list.product5.name")}</span>
+              </div>
+
+              {/* 产品6 */}
+              <div
+                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
+                onMouseEnter={() => {
+                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product6.image"));
+                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product6.alt"));
+                  document.getElementById('productTitle')!.textContent = t("products.list.product6.name");
+                }}
+              >
+                <span>{t("products.list.product6.name")}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 应用领域 */}
+        <div className="py-16 px-4 bg-gray-50 relative overflow-hidden">
+          {/* 标题 */}
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-gray-900 inline-block relative">
+              {t("applications.title")}
+              <span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
+            </h2>
+          </div>
+
+          {/* 轮播容器 */}
+          <div className="relative max-w-7xl mx-auto">
+            {/* 左切换按钮 */}
+            <button
+              id="prevSlide"
+              className="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white transition-colors z-20"
+            >
+              &lt;
+            </button>
+
+            {/* 右切换按钮 */}
+            <button
+              id="nextSlide"
+              className="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white transition-colors z-20"
+            >
+              &gt;
+            </button>
+
+            {/* 轮播内容 */}
+            <div className="overflow-hidden">
+              <div
+                id="carouselTrack"
+                className="flex transition-transform duration-500 ease-in-out"
+                style={{ transform: 'translateX(0)' }}
+              >
+                {/* 第一组卡片拼图 */}
+                <div className="min-w-full flex flex-wrap gap-4 p-4">
+                  {/* 第一行 */}
+                  <div className="w-full flex gap-4 mb-4">
+                    {/* 电梯井道 */}
+                    <div className="w-1/4 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group1.items.app1.image")}
+                        alt={t("applications.groups.group1.items.app1.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group1.items.app1.name")}
+                      </div>
+                    </div>
+
+                    {/* 塔机制造 - 宽度为其他卡片的两倍 */}
+                    <div className="w-1/2 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group1.items.app2.image")}
+                        alt={t("applications.groups.group1.items.app2.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group1.items.app2.name")}
+                      </div>
+                    </div>
+
+                    {/* 工程机械 */}
+                    <div className="w-1/4 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group1.items.app3.image")}
+                        alt={t("applications.groups.group1.items.app3.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group1.items.app3.name")}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 第二行 */}
+                  <div className="w-full flex gap-4">
+                    {/* 高速护栏 - 宽度为其他卡片的两倍 */}
+                    <div className="w-1/2 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group1.items.app4.image")}
+                        alt={t("applications.groups.group1.items.app4.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group1.items.app4.name")}
+                      </div>
+                    </div>
+
+                    {/* 桥梁 */}
+                    <div className="w-1/4 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group1.items.app5.image")}
+                        alt={t("applications.groups.group1.items.app5.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group1.items.app5.name")}
+                      </div>
+                    </div>
+
+                    {/* 钢结构 */}
+                    <div className="w-1/4 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group1.items.app6.image")}
+                        alt={t("applications.groups.group1.items.app6.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group1.items.app6.name")}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 第二组卡片拼图（可扩展更多组） */}
+                <div className="min-w-full flex flex-wrap gap-4 p-4">
+                  {/* 第一行 */}
+                  <div className="w-full flex gap-4 mb-4">
+                    {/* 建筑工程 */}
+                    <div className="w-1/3 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group2.items.app7.image")}
+                        alt={t("applications.groups.group2.items.app7.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group2.items.app7.name")}
+                      </div>
+                    </div>
+
+                    {/* 水利水电 */}
+                    <div className="w-1/3 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group2.items.app8.image")}
+                        alt={t("applications.groups.group2.items.app8.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group2.items.app8.name")}
+                      </div>
+                    </div>
+
+                    {/* 轨道交通 */}
+                    <div className="w-1/3 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group2.items.app9.image")}
+                        alt={t("applications.groups.group2.items.app9.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group2.items.app9.name")}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 第二行 */}
+                  <div className="w-full flex gap-4">
+                    {/* 市政工程 */}
+                    <div className="w-1/3 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group2.items.app10.image")}
+                        alt={t("applications.groups.group2.items.app10.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group2.items.app10.name")}
+                      </div>
+                    </div>
+
+                    {/* 农业设施 */}
+                    <div className="w-1/3 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group2.items.app11.image")}
+                        alt={t("applications.groups.group2.items.app11.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group2.items.app11.name")}
+                      </div>
+                    </div>
+
+                    {/* 能源化工 */}
+                    <div className="w-1/3 relative overflow-hidden rounded-lg">
+                      <img
+                        src={t("applications.groups.group2.items.app12.image")}
+                        alt={t("applications.groups.group2.items.app12.alt")}
+                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
+                        {t("applications.groups.group2.items.app12.name")}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 生产案例 */}
+      </section>
+    </>
+  );
+}

components/icons/expanding-arrow.tsx

@@ -0,0 +1,36 @@
+export default function ExpandingArrow({ className }: { className?: string }) {
+  return (
+    <div className="group relative flex items-center">
+      <svg
+        className={`${
+          className ? className : "h-4 w-4"
+        } absolute transition-all group-hover:translate-x-1 group-hover:opacity-0`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
+        ></path>
+      </svg>
+      <svg
+        className={`${
+          className ? className : "h-4 w-4"
+        } absolute opacity-0 transition-all group-hover:translate-x-1 group-hover:opacity-100`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
+        ></path>
+      </svg>
+    </div>
+  );
+}

components/icons/eye.tsx

@@ -0,0 +1,24 @@
+export default function TablerEyeFilled(props: any) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      >
+        <path d="M0 0h24v24H0z"></path>
+        <path
+          fill="#000000"
+          d="M12 4c4.29 0 7.863 2.429 10.665 7.154l.22.379l.045.1l.03.083l.014.055l.014.082l.011.1v.11l-.014.111a.992.992 0 0 1-.026.11l-.039.108l-.036.075l-.016.03c-2.764 4.836-6.3 7.38-10.555 7.499L12 20c-4.396 0-8.037-2.549-10.868-7.504a1 1 0 0 1 0-.992C3.963 6.549 7.604 4 12 4zm0 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6z"
+        ></path>
+      </g>
+    </svg>
+  );
+}

components/icons/index.tsx

@@ -0,0 +1,4 @@
+export { default as LoadingDots } from "./loading-dots";
+export { default as LoadingCircle } from "./loading-circle";
+export { default as LoadingSpinner } from "./loading-spinner";
+export { default as ExpandingArrow } from "./expanding-arrow";

components/icons/loading-circle.tsx

@@ -0,0 +1,20 @@
+export default function LoadingCircle() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-4 w-4 animate-spin fill-gray-600 text-gray-200"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+  );
+}

components/icons/loading-dots.module.css

@@ -0,0 +1,40 @@
+.loading {
+  display: inline-flex;
+  align-items: center;
+}
+
+.loading .spacer {
+  margin-right: 2px;
+}
+
+.loading span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+
+.loading span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+
+.loading span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}

components/icons/loading-dots.tsx

@@ -0,0 +1,13 @@
+import styles from "./loading-dots.module.css";
+
+const LoadingDots = ({ color = "#000" }: { color?: string }) => {
+  return (
+    <span className={styles.loading}>
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+    </span>
+  );
+};
+
+export default LoadingDots;

components/icons/loading-spinner.module.css

@@ -0,0 +1,79 @@
+.spinner {
+  color: gray;
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  transform: scale(0.3) translateX(-95px);
+}
+.spinner div {
+  transform-origin: 40px 40px;
+  animation: spinner 1.2s linear infinite;
+}
+.spinner div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 37px;
+  width: 6px;
+  height: 20px;
+  border-radius: 20%;
+  background: black;
+}
+.spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

components/icons/loading-spinner.tsx

@@ -0,0 +1,20 @@
+import styles from "./loading-spinner.module.css";
+
+export default function LoadingSpinner() {
+  return (
+    <div className={styles.spinner}>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+}

components/icons/moon.tsx

@@ -0,0 +1,16 @@
+export default function PhMoonFill(props: any) {
+  return (
+    <svg
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 0 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill="#000000"
+        d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.09 103.09 0 0 1 20.88-62.52a104.84 104.84 0 0 1 52.91-37a8 8 0 0 1 10 10a88.08 88.08 0 0 0 109.8 109.8a8 8 0 0 1 10 10Z"
+      ></path>
+    </svg>
+  );
+}

components/icons/sun.tsx

@@ -0,0 +1,16 @@
+export default function PhSunBold(props: any) {
+  return (
+    <svg
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 0 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill="#ffffff"
+        d="M116 32V16a12 12 0 0 1 24 0v16a12 12 0 0 1-24 0Zm80 96a68 68 0 1 1-68-68a68.07 68.07 0 0 1 68 68Zm-24 0a44 44 0 1 0-44 44a44.05 44.05 0 0 0 44-44ZM51.51 68.49a12 12 0 1 0 17-17l-12-12a12 12 0 0 0-17 17Zm0 119l-12 12a12 12 0 0 0 17 17l12-12a12 12 0 1 0-17-17ZM196 72a12 12 0 0 0 8.49-3.51l12-12a12 12 0 0 0-17-17l-12 12A12 12 0 0 0 196 72Zm8.49 115.51a12 12 0 0 0-17 17l12 12a12 12 0 0 0 17-17ZM44 128a12 12 0 0 0-12-12H16a12 12 0 0 0 0 24h16a12 12 0 0 0 12-12Zm84 84a12 12 0 0 0-12 12v16a12 12 0 0 0 24 0v-16a12 12 0 0 0-12-12Zm112-96h-16a12 12 0 0 0 0 24h16a12 12 0 0 0 0-24Z"
+      ></path>
+    </svg>
+  );
+}

components/mdx/Aside.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+interface AsideProps {
+  icon?: string;
+  children?: React.ReactNode;
+  type?: "default" | "warning" | "danger";
+}
+
+export function Aside({
+  children,
+  icon,
+  type = "default",
+  ...props
+}: AsideProps) {
+  return (
+    <div
+      className={cn(
+        "flex border-5 py-3 px-4 ms-2 ms-md-0 my-10 rounded rounded-1 shadow",
+        "bg-[#6edff633] border-[#6edff633] border-l-[#f6ef6e]"
+      )}
+      {...props}
+    >
+      <div className="rounded rounded-1 text-center h-8 w-8 bg-[#6edff6] text-2xl relative top-[-30px] left-[-30px]">
+        {icon || "💡"}
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+}

components/mdx/Callout.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+
+interface CalloutProps {
+  icon?: string;
+  children?: React.ReactNode;
+  type?: "default" | "warning" | "danger";
+}
+
+export function Callout({
+  children,
+  icon,
+  type = "default",
+  ...props
+}: CalloutProps) {
+  return (
+    <div
+      className={cn("my-6 flex items-start rounded-md border border-l-4 p-4", {
+        "border-red-900 bg-red-50": type === "danger",
+        "border-yellow-900 bg-yellow-50": type === "warning",
+      })}
+      {...props}
+    >
+      {icon && <span className="mr-4 text-2xl">{icon}</span>}
+      <div>{children}</div>
+    </div>
+  );
+}

components/mdx/MDXComponents.tsx

@@ -0,0 +1,125 @@
+import { Aside } from "@/components/mdx/Aside";
+import { Callout } from "@/components/mdx/Callout";
+import { MdxCard } from "@/components/mdx/MdxCard";
+import React, { ReactNode } from "react";
+
+interface HeadingProps {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  className: string;
+  children: ReactNode;
+}
+
+const Heading: React.FC<HeadingProps> = ({ level, className, children }) => {
+  const HeadingTag = `h${level}` as keyof React.ElementType;
+  const headingId = children?.toString() ?? "";
+
+  return React.createElement(
+    HeadingTag,
+    { id: headingId, className },
+    children
+  );
+};
+
+interface MDXComponentsProps {
+  [key: string]: React.FC<any>;
+}
+
+const MDXComponents: MDXComponentsProps = {
+  h1: (props) => (
+    <Heading level={1} className="text-4xl font-bold mt-8 mb-6" {...props} />
+  ),
+  h2: (props) => (
+    <Heading
+      level={2}
+      className="text-3xl font-semibold mt-8 mb-6 border-b-2 border-gray-200 pb-2"
+      {...props}
+    />
+  ),
+  h3: (props) => (
+    <Heading
+      level={3}
+      className="text-2xl font-semibold mt-6 mb-4"
+      {...props}
+    />
+  ),
+  h4: (props) => (
+    <Heading level={4} className="text-xl font-semibold mt-6 mb-4" {...props} />
+  ),
+  h5: (props) => (
+    <Heading level={5} className="text-lg font-semibold mt-6 mb-4" {...props} />
+  ),
+  h6: (props) => (
+    <Heading
+      level={6}
+      className="text-base font-semibold mt-6 mb-4"
+      {...props}
+    />
+  ),
+  hr: (props) => <hr className="border-t border-gray-200 my-8" {...props} />,
+  p: (props) => (
+    <p
+      className="mt-6 mb-6 leading-relaxed text-gray-700 dark:text-gray-300"
+      {...props}
+    />
+  ),
+  a: (props) => (
+    <a
+      className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors underline underline-offset-4"
+      target="_blank"
+      {...props}
+    />
+  ),
+  ul: (props) => <ul className="list-disc pl-6 mt-0 mb-6" {...props} />,
+  ol: (props) => <ol className="list-decimal pl-6 mt-0 mb-6" {...props} />,
+  li: (props) => (
+    <li className="mb-3 text-gray-700 dark:text-gray-300" {...props} />
+  ),
+  code: (props) => (
+    <code
+      className="bg-gray-100 dark:bg-gray-700 rounded px-2 py-1 font-mono text-sm"
+      {...props}
+    />
+  ),
+  pre: (props) => (
+    <pre
+      className="rounded-lg p-4 overflow-x-auto my-4 bg-gray-100 dark:bg-gray-800"
+      {...props}
+    />
+  ),
+  blockquote: (props) => (
+    <blockquote
+      className="pl-6 border-l-4 my-6 text-gray-600 dark:text-gray-400 italic"
+      {...props}
+    />
+  ),
+  img: (props) => (
+    <img className="rounded-lg border-2 border-gray-200 my-6" {...props} />
+  ),
+  strong: (props) => <strong className="font-bold" {...props} />,
+  table: (props) => (
+    <div className="my-8 w-full overflow-x-auto">
+      <table
+        className="w-full shadow-sm rounded-lg overflow-hidden"
+        {...props}
+      />
+    </div>
+  ),
+  tr: (props) => <tr className="border-t border-gray-200" {...props} />,
+  th: (props) => (
+    <th
+      className="px-6 py-3 font-bold text-left bg-gray-100 dark:bg-gray-700 [&[align=center]]:text-center [&[align=right]]:text-right"
+      {...props}
+    />
+  ),
+  td: (props) => (
+    <td
+      className="px-6 py-4 text-left border-t border-gray-100 dark:border-gray-700 [&[align=center]]:text-center [&[align=right]]:text-right"
+      {...props}
+    />
+  ),
+  Aside,
+  Callout,
+  Card: MdxCard,
+};
+
+export default MDXComponents;

components/mdx/MdxCard.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+
+import { cn } from "@/lib/utils";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  href?: string;
+  disabled?: boolean;
+}
+
+export function MdxCard({
+  href,
+  className,
+  children,
+  disabled,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={cn(
+        "group relative rounded-lg border p-6 shadow-md transition-shadow hover:shadow-lg",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-col justify-between space-y-4">
+        <div className="space-y-2 [&>h3]:!mt-0 [&>h4]:!mt-0 [&>p]:text-muted-foreground">
+          {children}
+        </div>
+      </div>
+      {href && (
+        <Link
+          href={disabled ? "#" : href}
+          className="absolute inset-0"
+          prefetch={false}
+        >
+          <span className="sr-only">View</span>
+        </Link>
+      )}
+    </div>
+  );
+}

components/mdx/TableOfContents.client.tsx

@@ -0,0 +1,104 @@
+// components/mdx/TableOfContents.client.tsx
+"use client";
+
+import { useEffect, useState } from 'react';
+
+interface TableOfContentsItem {
+  id: string;
+  text: string;
+  level: number;
+}
+
+interface TableOfContentsProps {
+  items: TableOfContentsItem[];
+  title?: string;
+}
+
+export default function TableOfContents({
+  items = [],
+  title = "目录"
+}: TableOfContentsProps) {
+  const [activeId, setActiveId] = useState<string>("");
+
+  useEffect(() => {
+    if (items.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      { rootMargin: "0% 0% -80% 0%" }
+    );
+
+    // 观察所有标题元素
+    items.forEach((item) => {
+      const element = document.getElementById(item.id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+
+    return () => {
+      items.forEach((item) => {
+        const element = document.getElementById(item.id);
+        if (element) {
+          observer.unobserve(element);
+        }
+      });
+    };
+  }, [items]);
+
+  const handleClick = (e: React.MouseEvent, id: string) => {
+    e.preventDefault();
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+      window.history.pushState(null, "", `#${id}`);
+      setActiveId(id);
+    }
+  };
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <aside className="fixed left-0 top-0 w-64 h-screen border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 z-10 overflow-y-auto">
+      <div className="p-6">
+        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">
+          {title}
+        </h3>
+        <nav>
+          <ul className="space-y-2 border-l-2 border-gray-200 dark:border-gray-700">
+            {items.map((item) => {
+              const isActive = activeId === item.id;
+              return (
+                <li
+                  key={item.id}
+                  style={{ marginLeft: `${(item.level - 2) * 0.75}rem` }}
+                  className={`text-sm border-l-2 -ml-0.5 pl-4 transition-colors duration-200 ${isActive
+                    ? "border-blue-500 text-blue-600 dark:text-blue-400 font-medium"
+                    : "border-transparent hover:border-blue-400"
+                    } hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer`}
+                >
+                  <a
+                    href={`#${item.id}`}
+                    className={`block py-1 transition-all duration-200 ${isActive ? "translate-x-1" : "hover:translate-x-1"
+                      }`}
+                    onClick={(e) => handleClick(e, item.id)}
+                  >
+                    {item.text}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </div>
+    </aside>
+  );
+}

components/social-icons/icons.tsx

@@ -0,0 +1,114 @@
+import { SVGProps } from 'react'
+
+// Icons taken from: https://simpleicons.org/
+// To add a new icon, add a new function here and add it to components in social-icons/index.tsx
+
+export function Facebook(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
+    </svg>
+  )
+}
+
+export function Github(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
+    </svg>
+  )
+}
+
+export function Linkedin(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
+    </svg>
+  )
+}
+
+export function Mail(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" {...svgProps}>
+      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
+      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
+    </svg>
+  )
+}
+
+export function Twitter(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
+    </svg>
+  )
+}
+
+export function TwitterX(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path
+        fill="currentColor"
+        d="M8 2H1l8.26 11.015L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886zm9 18L5 4h2l12 16z"
+      />
+    </svg>
+  )
+}
+
+export function Youtube(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"></path>
+    </svg>
+  )
+}
+
+export function Mastodon(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" />
+    </svg>
+  )
+}
+
+export function Threads(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z" />
+    </svg>
+  )
+}
+
+export function Instagram(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
+    </svg>
+  )
+}
+
+export function WeChat(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path
+        fill="currentColor"
+        d="M15.85 8.14c.39 0 .77.03 1.14.08C16.31 5.25 13.19 3 9.44 3c-4.25 0-7.7 2.88-7.7 6.43c0 2.05 1.15 3.86 2.94 5.04L3.67 16.5l2.76-1.19c.59.21 1.21.38 1.87.47c-.09-.39-.14-.79-.14-1.21c-.01-3.54 3.44-6.43 7.69-6.43M12 5.89a.96.96 0 1 1 0 1.92a.96.96 0 0 1 0-1.92M6.87 7.82a.96.96 0 1 1 0-1.92a.96.96 0 0 1 0 1.92"
+      />
+      <path
+        fill="currentColor"
+        d="M22.26 14.57c0-2.84-2.87-5.14-6.41-5.14s-6.41 2.3-6.41 5.14s2.87 5.14 6.41 5.14c.58 0 1.14-.08 1.67-.2L20.98 21l-1.2-2.4c1.5-.94 2.48-2.38 2.48-4.03m-8.34-.32a.96.96 0 1 1 .96-.96c.01.53-.43.96-.96.96m3.85 0a.96.96 0 1 1 0-1.92a.96.96 0 0 1 0 1.92"
+      />
+    </svg>
+  )
+}
+
+export function JueJin(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path
+        fill="currentColor"
+        d="m12 14.316l7.454-5.88l-2.022-1.625L12 11.1l-.004.003l-5.432-4.288l-2.02 1.624l7.452 5.88Zm0-7.247l2.89-2.298L12 2.453l-.004-.005l-2.884 2.318l2.884 2.3Zm0 11.266l-.005.002l-9.975-7.87L0 12.088l.194.156l11.803 9.308l7.463-5.885L24 12.085l-2.023-1.624Z"
+      />
+    </svg>
+  )
+}

components/social-icons/index.tsx

@@ -0,0 +1,62 @@
+import {
+  Facebook,
+  Github,
+  Instagram,
+  JueJin,
+  Linkedin,
+  Mail,
+  Mastodon,
+  Threads,
+  Twitter,
+  TwitterX,
+  WeChat,
+  Youtube
+} from './icons'
+
+const components = {
+  mail: Mail,
+  github: Github,
+  facebook: Facebook,
+  youtube: Youtube,
+  linkedin: Linkedin,
+  twitter: Twitter,
+  twitterX: TwitterX,
+  weChat: WeChat,
+  jueJin: JueJin,
+  mastodon: Mastodon,
+  threads: Threads,
+  instagram: Instagram
+}
+
+type SocialIconProps = {
+  kind: keyof typeof components
+  href: string | undefined
+  size?: number
+}
+
+const SocialIcon = ({ kind, href, size = 8 }: SocialIconProps) => {
+  if (
+    !href ||
+    (kind === 'mail' &&
+      !/^mailto:\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/.test(href))
+  )
+    return null
+
+  const SocialSvg = components[kind]
+
+  return (
+    <a
+      className="text-sm text-gray-500 transition hover:text-gray-600"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+    >
+      <span className="sr-only">{kind}</span>
+      <SocialSvg
+        className={`fill-current text-gray-400 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-${size} w-${size}`}
+      />
+    </a>
+  )
+}
+
+export default SocialIcon

components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

components/ui/dropdown-menu.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

components/ui/select.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

components/ui/toast.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}