feat: favicon and hero component for home page

src/hooks/useSize.ts

@@ -57,18 +57,32 @@ export const useRefSize = <T extends HTMLElement = HTMLDivElement>(ref: React.Re
     return size;
 };
 
-const MOBILE_BREAKPOINT = 768;
-const PHONE_BREAKPOINT = 640;
-
 /**
- * 响应式检测：基于 useScreenSize 的 body 宽度判断设备类型。
- * - isMobile: 宽度 ≤ 768px（手机 + 平板）
- * - isPhone: 宽度 < 640px（仅手机，对应 Tailwind sm 断点以下）
+ * 响应式断点检测，与 Tailwind CSS 断点完全对齐（mobile-first / min-width）。
+ *
+ * 语义别名（推荐日常使用）：
+ * - isPhone:   宽度 < 640px  — 仅手机竖屏
+ * - isMobile:  宽度 < 1024px — 手机 + 平板（对应 Tailwind lg: 以下）
+ * - isDesktop: 宽度 >= 1024px — 桌面端（对应 Tailwind lg: 及以上）
+ *
+ * 原始断点（需要精细控制时使用）：
+ * - sm / md / lg / xl — 分别对应 Tailwind 同名断点的 min-width 是否满足
  */
 export function useResponsive() {
     const { width } = useScreenSize();
+
+    const sm = width >= 640;
+    const md = width >= 768;
+    const lg = width >= 1024;
+    const xl = width >= 1280;
+
     return {
-        isMobile: width <= MOBILE_BREAKPOINT,
-        isPhone: width > 0 && width < PHONE_BREAKPOINT,
+        sm,
+        md,
+        lg,
+        xl,
+        isPhone: width > 0 && !sm,
+        isMobile: width > 0 && !lg,
+        isDesktop: lg,
     };
 }

src/pages/home/components/Hero.tsx

@@ -45,7 +45,7 @@ export function Hero() {
                 <div className="absolute inset-x-0 top-[650px] h-[70px] bg-[linear-gradient(0deg,#00040A_8.57%,#00040A00_100%)]" />
             </div>
             <div className="relative z-10 flex flex-col items-center max-w-[1440px] mx-auto">
-                <div className="flex flex-col items-center gap-6 px-5 sm:px-12 lg:px-20 pt-[140px] sm:pt-[200px] lg:pt-[265px] w-full">
+                <div className="flex flex-col items-center gap-6 px-5 sm:px-12 lg:px-20 pt-[140px] sm:pt-[200px] lg:pt-[265px] w-full h-[450px]">
                     <h1 className="text-4xl lg:text-5xl font-black italic text-white text-center uppercase font-[REM] leading-[1.5] tracking-[0.007em]">
                         {t('pages.home.slogan.title')}
                     </h1>
@@ -53,41 +53,43 @@ export function Hero() {
                         {t('pages.home.slogan.description')}
                     </p>
                 </div>
-                <div className="flex flex-col lg:flex-row items-stretch pt-[230px] sm:pt-[140px] lg:pt-[170px] px-5 sm:px-12 lg:px-20 pb-6 w-full">
-                    {HERO_FEATURES.map(({ titleKey, descKey, icon }, index) => (
-                        <div key={index} className="flex flex-col lg:flex-row flex-1 min-w-0">
-                            {index > 0 && (
-                                <div className="hidden lg:block w-px shrink-0 self-stretch bg-[rgba(190,219,255,0.1)]" />
-                            )}
-                            {index > 0 && (
-                                <div className="lg:hidden h-px w-full bg-[rgba(190,219,255,0.1)]" />
-                            )}
+                <div className="pt-[230px] sm:pt-[140px] lg:pt-[170px] px-5 sm:px-12 lg:px-20 pb-6 w-full">
+                    <div className="overflow-hidden">
+                        <div className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))]">
+                            {HERO_FEATURES.map(({ titleKey, descKey, icon }, index) => (
+                                <div
+                                    key={index}
+                                    className="shadow-[-1px_0_0_0_rgba(190,219,255,0.1),0_-1px_0_0_rgba(190,219,255,0.1)]"
+                                >
+                                    {/* 手机端：图标+标题横排，描述在下方 */}
+                                    <div className="sm:hidden flex flex-col gap-[30px] p-10">
+                                        <div className="flex flex-row items-start gap-4">
+                                            <Icon icon={icon} className="w-[72px] h-[72px] shrink-0" />
+                                            <h3 className="text-2xl font-bold italic text-white leading-[1.5] whitespace-pre-line font-[REM]">
+                                                {t(titleKey)}
+                                            </h3>
+                                        </div>
+                                        <p className="text-base font-normal text-[#E6E6E6] leading-[1.5] font-[Barlow]">
+                                            {t(descKey)}
+                                        </p>
+                                    </div>
 
-                            <div className="lg:hidden flex flex-col gap-[30px] p-10">
-                                <div className="flex flex-row items-center gap-4">
-                                    <Icon icon={icon} className="w-[72px] h-[72px] shrink-0" />
-                                    <h3 className="text-2xl font-bold italic text-white leading-[1.5] whitespace-pre-line font-[REM]">
-                                        {t(titleKey)}
-                                    </h3>
+                                    {/* 桌面端：图标在上，标题+描述纵排在下 */}
+                                    <div className="hidden sm:flex flex-col gap-[30px] p-10 h-full">
+                                        <Icon icon={icon} className="w-[72px] h-[72px] shrink-0" />
+                                        <div className="flex flex-col gap-[14px]">
+                                            <h3 className="text-2xl font-bold italic text-white leading-[1.5] whitespace-pre-line font-[REM]">
+                                                {t(titleKey)}
+                                            </h3>
+                                            <p className="text-base font-normal text-[#E6E6E6] leading-[1.5] font-[Barlow]">
+                                                {t(descKey)}
+                                            </p>
+                                        </div>
+                                    </div>
                                 </div>
-                                <p className="text-base font-normal text-[#E6E6E6] leading-[1.5] font-[Barlow]">
-                                    {t(descKey)}
-                                </p>
-                            </div>
-
-                            <div className="hidden lg:flex flex-1 flex-col gap-[30px] p-10">
-                                <Icon icon={icon} className="w-[72px] h-[72px] shrink-0" />
-                                <div className="flex flex-col gap-[14px]">
-                                    <h3 className="text-2xl font-bold italic text-white leading-[1.5] whitespace-pre-line font-[REM]">
-                                        {t(titleKey)}
-                                    </h3>
-                                    <p className="text-base font-normal text-[#E6E6E6] leading-[1.5] font-[Barlow]">
-                                        {t(descKey)}
-                                    </p>
-                                </div>
-                            </div>
+                            ))}
                         </div>
-                    ))}
+                    </div>
                 </div>
             </div>
         </section>