问题修复

Author: 1ssqq1lxr

src/App.tsx

@@ -2,24 +2,53 @@ import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useEffect } from "react";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { HashDownloadRedirect } from "@/components/HashDownloadRedirect";
 import Index from "./pages/Index";
+import Architecture from "./pages/Architecture";
+import Contact from "./pages/Contact";
+import Demos from "./pages/Demos";
+import Products from "./pages/Products";
+import Solutions from "./pages/Solutions";
 import Test from "./pages/Test";
 import DownloadRedirect from "./pages/DownloadRedirect";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
 
+const ScrollToHash = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!location.hash) {
+      window.scrollTo({ top: 0, behavior: "auto" });
+      return;
+    }
+
+    window.setTimeout(() => {
+      document.querySelector(location.hash)?.scrollIntoView({ behavior: "smooth" });
+    }, 80);
+  }, [location.pathname, location.hash]);
+
+  return null;
+};
+
 const App = () => (
   <QueryClientProvider client={queryClient}>
     <TooltipProvider>
       <Toaster />
       <Sonner />
       <BrowserRouter>
         <HashDownloadRedirect />
+        <ScrollToHash />
         <Routes>
           <Route path="/" element={<Index />} />
+          <Route path="/products" element={<Products />} />
+          <Route path="/solutions" element={<Solutions />} />
+          <Route path="/architecture" element={<Architecture />} />
+          <Route path="/demos" element={<Demos />} />
+          <Route path="/contact" element={<Contact />} />
           <Route path="/download" element={<DownloadRedirect />} />
           <Route path="/test" element={<Test />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}

src/components/DemoVideos.tsx

@@ -10,17 +10,17 @@ const DemoVideos = () => {
 
   return (
     <section id="demos" className="py-24 bg-background">
-      <div className="container mx-auto px-6">
+      <div className="container mx-auto px-4 sm:px-6">
         <div className="text-center mb-14">
           <div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/40 px-4 py-1.5 text-sm text-muted-foreground mb-4">
             <Play className="h-4 w-4 text-primary" />
             <span>{t("demos.badge")}</span>
           </div>
-          <h2 className="text-4xl md:text-5xl font-bold mb-4">
+          <h2 className="mb-4 text-3xl font-bold leading-tight [overflow-wrap:anywhere] md:text-5xl">
             {t("demos.title")}
             <span className="text-gradient block">{t("demos.titleHighlight")}</span>
           </h2>
-          <p className="text-xl text-muted-foreground max-w-3xl mx-auto mb-8">
+          <p className="mx-auto mb-8 max-w-3xl text-base leading-8 text-muted-foreground md:text-xl">
             {t("demos.subtitle")}
           </p>
           <Button variant="outline" size="lg" asChild>

src/components/Footer.tsx

@@ -2,7 +2,6 @@ import { Button } from "@/components/ui/button";
 import { ExternalLink, Github, Mail, Phone } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { getHomepageLocale, homepageContent } from "@/lib/homepageContent";
-import { FLUXMQ_DOC_DEMOS_URL } from "@/lib/constants";
 
 const Footer = () => {
   const { i18n } = useTranslation();
@@ -12,7 +11,7 @@ const Footer = () => {
     {
       title: content.footer.products,
       links: [
-        { name: "Halia", href: "#products" },
+        { name: "Halia", href: "/products#halia" },
         { name: "FluxMQ", href: "https://doc.fluxmq.com", external: true },
         { name: "FCP", href: "https://fcp.doc.fluxmq.com", external: true },
       ],
@@ -22,14 +21,14 @@ const Footer = () => {
       links: [
         { name: "FluxMQ Docs", href: "https://doc.fluxmq.com", external: true },
         { name: "FCP Docs", href: "https://fcp.doc.fluxmq.com", external: true },
-        { name: "Demo Videos", href: FLUXMQ_DOC_DEMOS_URL, external: true },
+        { name: "Demo Videos", href: "/demos" },
         { name: "GitHub", href: "https://github.com/quickmsg/fluxmq", external: true },
       ],
     },
     {
       title: content.footer.company,
       links: [
-        { name: content.nav.contact, href: "#contact" },
+        { name: content.nav.contact, href: "/contact" },
         { name: "xurong.lu@fluxmq.com", href: "mailto:xurong.lu@fluxmq.com" },
         { name: "13218040662", href: "tel:13218040662" },
       ],
@@ -120,7 +119,7 @@ const Footer = () => {
         <div className="mt-10 flex flex-col justify-between gap-4 border-t border-border/50 pt-8 text-sm text-muted-foreground md:flex-row md:items-center">
           <div>Copyright © 2021-{new Date().getFullYear()} 非迅科技 版权所有 | 苏ICP备2023015068号-1</div>
           <div className="flex gap-5">
-            <a href="#products" className="hover:text-primary">
+            <a href="/products#halia" className="hover:text-primary">
               Halia
             </a>
             <a href="https://doc.fluxmq.com" target="_blank" rel="noopener noreferrer" className="hover:text-primary">

src/components/Header.tsx

@@ -38,34 +38,42 @@ const Header = () => {
   const languageLabel = getHomepageLocale(currentLanguage) === "zh" ? "中文" : "English";
 
   const navItems = [
-    { label: content.nav.products, href: "#products" },
-    { label: content.nav.solutions, href: "#solutions" },
-    { label: content.nav.architecture, href: "#architecture" },
-    { label: content.nav.performance, href: "#performance" },
+    { label: content.nav.products, href: "/products" },
+    { label: content.nav.solutions, href: "/solutions" },
+    { label: content.nav.architecture, href: "/architecture" },
+    { label: content.nav.performance, href: "/architecture#performance" },
   ];
 
   const docItems = [
     { label: "FluxMQ Docs", href: "https://doc.fluxmq.com" },
     { label: "FCP Docs", href: "https://fcp.doc.fluxmq.com" },
-    { label: "Halia", href: "#contact" },
+    { label: "Demo Videos", href: "/demos" },
+    { label: "Halia", href: "/products#halia" },
   ];
 
   const openLink = (href: string) => {
-    if (href.startsWith("#")) {
+    if (href.startsWith("#") && document.querySelector(href)) {
       document.querySelector(href)?.scrollIntoView({ behavior: "smooth" });
       setIsMenuOpen(false);
       return;
     }
+    if (href.startsWith("/")) {
+      window.location.assign(href);
+      setIsMenuOpen(false);
+      return;
+    }
     window.open(href, "_blank");
   };
 
   return (
     <header className="fixed left-0 right-0 top-0 z-50 border-b border-border/50 bg-background/82 backdrop-blur-md">
-      <div className="container mx-auto px-6 py-4">
-        <nav className="flex items-center justify-between">
-          <a href="/" className="flex items-center gap-3">
-            <img src="/feixun.svg" alt="Feixun Tech" className="h-8 w-8 object-contain" />
-            <span className="text-xl font-bold md:text-2xl">{content.nav.brand}</span>
+      <div className="container mx-auto px-4 py-4 sm:px-6">
+        <nav className="flex min-w-0 items-center justify-between">
+          <a href="/" className="flex min-w-0 items-center gap-3">
+            <img src="/feixun.svg" alt="Feixun Tech" className="h-8 w-8 shrink-0 object-contain" />
+            <span className="truncate text-lg font-bold sm:text-xl md:text-2xl">
+              {content.nav.brand}
+            </span>
           </a>
 
           <div className="hidden items-center gap-7 lg:flex">
@@ -121,15 +129,16 @@ const Header = () => {
             <Button variant="ghost" onClick={() => window.open("https://github.com/quickmsg/fluxmq", "_blank")}>
               {content.nav.github}
             </Button>
-            <Button variant="hero" onClick={() => openLink("#contact")}>
+            <Button variant="hero" onClick={() => openLink("/contact")}>
               {content.nav.contact}
             </Button>
           </div>
 
           <Button
             variant="ghost"
             size="icon"
-            className="lg:hidden"
+            className="shrink-0 bg-primary text-primary-foreground shadow-primary hover:bg-primary/90 lg:hidden"
+            aria-label={isMenuOpen ? "Close navigation" : "Open navigation"}
             onClick={() => setIsMenuOpen((open) => !open)}
           >
             {isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
@@ -179,7 +188,7 @@ const Header = () => {
                     中文
                   </Button>
                 </div>
-                <Button className="mt-3 justify-start" variant="hero" onClick={() => openLink("#contact")}>
+                <Button className="mt-3 justify-start" variant="hero" onClick={() => openLink("/contact")}>
                   {content.nav.contact}
                 </Button>
               </div>

src/components/Hero.tsx

@@ -1,65 +1,69 @@
 import { Button } from "@/components/ui/button";
 import { ArrowRight, Github, Network } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import heroImage from "@/assets/fluxmq-hero.jpg";
 import { getHomepageLocale, homepageContent } from "@/lib/homepageContent";
 
 const Hero = () => {
   const { i18n } = useTranslation();
   const content = homepageContent[getHomepageLocale(i18n.language)];
+  const titleParts = content.hero.title.split("·").map((part) => part.trim());
 
   return (
     <section className="relative min-h-[92vh] overflow-hidden border-b border-border/50 pt-28 pb-16">
       <div className="absolute inset-0 z-0">
         <img
-          src={heroImage}
+          src="/site-assets/suite-hero.webp"
           alt="Industrial IoT message infrastructure"
-          className="h-full w-full object-cover opacity-30"
+          className="h-full w-full object-cover opacity-58"
         />
-        <div className="absolute inset-0 bg-[linear-gradient(180deg,hsl(var(--background)/0.72)_0%,hsl(var(--background)/0.9)_62%,hsl(var(--background))_100%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(90deg,hsl(var(--background)/0.94)_0%,hsl(var(--background)/0.73)_46%,hsl(var(--background)/0.5)_100%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(180deg,hsl(var(--background)/0.44)_0%,hsl(var(--background)/0.84)_62%,hsl(var(--background))_100%)]" />
       </div>
 
-      <div className="container relative z-10 mx-auto px-6">
-        <div className="mx-auto max-w-5xl text-center">
+      <div className="container relative z-10 mx-auto px-4 sm:px-6">
+        <div className="mx-auto max-w-5xl min-w-0 text-center">
           <div className="mb-7 inline-flex items-center gap-2 border border-primary/30 bg-background/55 px-4 py-2 text-sm text-muted-foreground backdrop-blur">
             <Network className="h-4 w-4 text-primary" />
             {content.hero.eyebrow}
           </div>
 
-          <h1 className="mx-auto max-w-4xl text-5xl font-bold leading-tight md:text-7xl">
-            {content.hero.title}
+          <h1 className="mx-auto flex w-full max-w-64 flex-wrap items-center justify-center gap-x-2 gap-y-1 text-3xl font-bold leading-tight sm:max-w-4xl sm:text-5xl md:text-7xl">
+            {titleParts.map((part, index) => (
+              <span key={part} className="inline-flex items-center gap-x-2 whitespace-nowrap">
+                {index > 0 && (
+                  <span className="text-muted-foreground">·</span>
+                )}
+                <span>{part}</span>
+              </span>
+            ))}
           </h1>
 
-          <p className="mx-auto mt-7 max-w-3xl text-lg leading-8 text-muted-foreground md:text-xl">
+          <p className="mx-auto mt-7 max-w-[28ch] text-base leading-8 text-muted-foreground [overflow-wrap:anywhere] sm:max-w-3xl md:text-xl">
             {content.hero.subtitle}
           </p>
 
           <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
             <Button
               variant="hero"
               size="lg"
-              className="group min-w-44"
-              onClick={() =>
-                document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" })
-              }
+              className="group w-full max-w-xs min-w-0 sm:w-auto sm:min-w-44"
+              onClick={() => window.location.assign("/contact")}
             >
               {content.hero.primaryCta}
               <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
             </Button>
             <Button
               variant="glass"
               size="lg"
-              className="min-w-44"
-              onClick={() =>
-                document.getElementById("products")?.scrollIntoView({ behavior: "smooth" })
-              }
+              className="w-full max-w-xs min-w-0 sm:w-auto sm:min-w-44"
+              onClick={() => window.location.assign("/products")}
             >
               {content.hero.secondaryCta}
             </Button>
             <Button
               variant="outline"
               size="lg"
-              className="min-w-44 border-primary/30 bg-background/40"
+              className="w-full max-w-xs min-w-0 border-primary/30 bg-background/40 sm:w-auto sm:min-w-44"
               onClick={() => window.open("https://github.com/quickmsg/fluxmq", "_blank")}
             >
               <Github className="h-5 w-5" />

src/components/IndustrySolutions.tsx

@@ -8,15 +8,15 @@ const IndustrySolutions = () => {
 
   return (
     <section id="solutions" className="bg-secondary/25 py-24">
-      <div className="container mx-auto px-6">
+      <div className="container mx-auto px-4 sm:px-6">
         <div className="mx-auto mb-14 max-w-3xl text-center">
           <p className="mb-3 text-sm font-semibold uppercase tracking-normal text-primary">
             {content.solutions.eyebrow}
           </p>
-          <h2 className="text-4xl font-bold leading-tight md:text-5xl">
+          <h2 className="text-3xl font-bold leading-tight [overflow-wrap:anywhere] md:text-5xl">
             {content.solutions.title}
           </h2>
-          <p className="mt-5 text-lg leading-8 text-muted-foreground">
+          <p className="mx-auto mt-5 max-w-[29ch] text-base leading-8 text-muted-foreground [overflow-wrap:anywhere] sm:max-w-none md:text-lg">
             {content.solutions.subtitle}
           </p>
         </div>

src/components/Performance.tsx

@@ -38,13 +38,13 @@ const Performance = () => {
 
   return (
     <section id="performance" className="py-24">
-      <div className="container mx-auto px-6">
+      <div className="container mx-auto px-4 sm:px-6">
         <div className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <h2 className="mb-6 text-3xl font-bold leading-tight [overflow-wrap:anywhere] md:text-5xl">
             {t('performance.title')}
             <span className="text-gradient block">{t('performance.titleHighlight')}</span>
           </h2>
-          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+          <p className="mx-auto max-w-3xl text-base leading-8 text-muted-foreground md:text-xl">
             {t('performance.subtitle')}
           </p>
         </div>

src/components/PlatformArchitecture.tsx

@@ -9,16 +9,16 @@ const PlatformArchitecture = () => {
 
   return (
     <section id="architecture" className="border-y border-border/50 bg-secondary/25 py-24">
-      <div className="container mx-auto px-6">
+      <div className="container mx-auto px-4 sm:px-6">
         <div className="grid grid-cols-1 gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
           <div>
             <p className="mb-3 text-sm font-semibold uppercase tracking-normal text-primary">
               {content.architecture.eyebrow}
             </p>
-            <h2 className="text-4xl font-bold leading-tight md:text-5xl">
+            <h2 className="text-3xl font-bold leading-tight [overflow-wrap:anywhere] md:text-5xl">
               {content.architecture.title}
             </h2>
-            <p className="mt-5 text-lg leading-8 text-muted-foreground">
+            <p className="mt-5 max-w-[29ch] text-base leading-8 text-muted-foreground [overflow-wrap:anywhere] sm:max-w-none md:text-lg">
               {content.architecture.subtitle}
             </p>
 
@@ -34,7 +34,9 @@ const PlatformArchitecture = () => {
                     <SignalIcon className="mt-1 h-5 w-5 shrink-0 text-primary" />
                     <div>
                       <div className="font-semibold">{signal.label}</div>
-                      <div className="mt-1 text-sm text-muted-foreground">{signal.value}</div>
+                      <div className="mt-1 text-sm text-muted-foreground [overflow-wrap:anywhere]">
+                        {signal.value}
+                      </div>
                     </div>
                   </div>
                 );

src/components/ProductShowcase.tsx

@@ -10,15 +10,15 @@ const ProductShowcase = () => {
 
   return (
     <section id="products" className="bg-background py-24">
-      <div className="container mx-auto px-6">
-        <div className="mb-14 max-w-3xl">
+      <div className="container mx-auto px-4 sm:px-6">
+        <div className="mb-14 max-w-3xl min-w-0">
           <p className="mb-3 text-sm font-semibold uppercase tracking-normal text-primary">
             {content.products.eyebrow}
           </p>
-          <h2 className="text-4xl font-bold leading-tight md:text-5xl">
+          <h2 className="text-3xl font-bold leading-tight [overflow-wrap:anywhere] md:text-5xl">
             {content.products.title}
           </h2>
-          <p className="mt-5 text-lg leading-8 text-muted-foreground">
+          <p className="mt-5 max-w-[29ch] text-base leading-8 text-muted-foreground [overflow-wrap:anywhere] sm:max-w-none md:text-lg">
             {content.products.subtitle}
           </p>
         </div>
@@ -30,6 +30,7 @@ const ProductShowcase = () => {
             return (
               <Card
                 key={product.id}
+                id={product.id}
                 className="group flex h-full flex-col overflow-hidden border-border/70 bg-card/80 shadow-card transition-colors hover:border-primary/60"
               >
                 <CardHeader className="pb-5">
@@ -85,6 +86,10 @@ const ProductShowcase = () => {
                             ?.scrollIntoView({ behavior: "smooth" });
                           return;
                         }
+                        if (product.href.startsWith("/")) {
+                          window.location.assign(product.href);
+                          return;
+                        }
                         window.open(product.href, "_blank");
                       }}
                     >