From 34e5eea684f66b2f893fc4835e7a934885657f39 Mon Sep 17 00:00:00 2001
From: moux1024 <403053463@qq.com>
Date: Wed, 22 Oct 2025 18:13:25 +0800
Subject: [PATCH] fix banner

---
 app/create/page.tsx                           |   4 +-
 app/page.tsx                                  |  14 +-
 components/FamousTemplate.tsx                 |  11 +-
 components/HomeBanner.tsx                     | 259 +-----------------
 .../CreateInput/VideoCreationForm.tsx         |  39 +--
 5 files changed, 36 insertions(+), 291 deletions(-)

diff --git a/app/create/page.tsx b/app/create/page.tsx
index b332b09..d893bb9 100644
--- a/app/create/page.tsx
+++ b/app/create/page.tsx
@@ -4,7 +4,9 @@ import { DashboardLayout } from '@/components/layout/dashboard-layout';
 export default function CreatePage() {
   return (
     <DashboardLayout>
-      <CreateVideo />
+      <div className='w-full h-full overflow-y-auto pb-4'>
+        <CreateVideo />
+      </div>
     </DashboardLayout>
   );
 }
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index e4d85f5..a52fea1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 
 "use client";
 
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { TopBar } from "@/components/layout/top-bar";
 import { HomePage2 } from "@/components/pages/home-page2";
@@ -13,11 +13,17 @@ export default function Home() {
   const router = useRouter();
   const { deviceType, isMobile, isTablet, isDesktop } = useDeviceType();
 
-  useEffect(() => {
-    if (isAuthenticated()) {
+  const authed = isAuthenticated();
+
+  useLayoutEffect(() => {
+    if (authed) {
       router.replace('/home');
     }
-  }, [router]);
+  }, [authed, router]);
+  
+  if (authed) {
+    return null;
+  }
   return (
     <>
       {isMobile || isTablet ? (
diff --git a/components/FamousTemplate.tsx b/components/FamousTemplate.tsx
index 1387091..7abd552 100644
--- a/components/FamousTemplate.tsx
+++ b/components/FamousTemplate.tsx
@@ -48,7 +48,7 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
     <section data-alt="famous-template" className="w-full">
       <div data-alt="famous-template-header" className={`mb-4 items-center ${isDesktop ? 'flex' : 'block'}`}>
         <h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
-          Hot Templates
+          Inspiration Lab
         </h2>
         {showTabs && (
           <div data-alt="template-tabs" className={`flex flex-wrap items-center gap-2 ${isDesktop ? 'ml-4' : 'ml-0'}`}>
@@ -86,15 +86,12 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
                 className="relative h-40 group"
                 onMouseEnter={(e) => {
                   const v = e.currentTarget.querySelector('video') as HTMLVideoElement | null
-                  // @ts-ignore
                   v?.play?.()
                 }}
                 onMouseLeave={(e) => {
                   const v = e.currentTarget.querySelector('video') as HTMLVideoElement | null
-                  // @ts-ignore
                   v?.pause?.()
                   if (v) {
-                    // @ts-ignore
                     v.currentTime = 0
                   }
                 }}
@@ -117,13 +114,13 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
                       <div data-alt="template-name" className="text-base font-bold text-white truncate">{t.name}</div>
                     </div>
                     <div data-alt="template-video" className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out">
-                      <video
+                      {t.show_url && <video
                         src={t.show_url}
                         className="w-full h-full object-cover object-center"
                         playsInline
                         muted
                         preload="none"
-                      />
+                      />}
                     </div>
                     <div
                       data-alt="template-hover-overlay"
@@ -153,7 +150,7 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
                     <button
                       type="button"
                       data-alt="try-this-button"
-                      className="absolute top-2 left-1/2 -translate-x-1/2 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out bg-white/40 text-white hover:bg-white hover:text-black text-slate-900 text-xs font-medium px-2 py-1 rounded-full border-white/60 shadow-sm"
+                      className="absolute top-4 left-1/2 -translate-x-1/2 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out bg-white/40 text-white hover:bg-white hover:text-black text-slate-900 text-xs font-medium px-4 py-2 rounded-full border-white/60 shadow-sm"
                       onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
                         e.stopPropagation()
                         const id = t.id || t.template_id
diff --git a/components/HomeBanner.tsx b/components/HomeBanner.tsx
index ab088fc..cbf895d 100644
--- a/components/HomeBanner.tsx
+++ b/components/HomeBanner.tsx
@@ -1,266 +1,15 @@
 "use client";
 
-import { useEffect, useState, useRef } from "react";
-import { fetchSettingByCode } from "@/api/serversetting";
-import { X, ChevronUp, ChevronsDown } from "lucide-react";
-import { ChatInputBox } from "@/components/ChatInputBox/ChatInputBox";
 import { VideoCreationForm } from '@/components/pages/create-video/CreateInput';
 import { useDeviceType } from '@/hooks/useDeviceType';
-import { useAppSelector } from '@/lib/store/hooks';
-
-export const HOME_BANNER_CODE = "homeBanner";
-const HOME_BANNER_COLLAPSE_KEY = "homeBannerCollapsedDate";
-
-/** CTA config for banner */
-export interface HomeBannerCTAConfig {
-  label?: string;
-  href?: string;
-  [key: string]: unknown;
-}
-
-/** Configuration payload for `HomeBanner` */
-export interface HomeBannerConfig {
-  eyebrow?: string;
-  title?: string;
-  subtitle?: string;
-  description?: string;
-  backgroundImage?: string;
-  cta?: HomeBannerCTAConfig;
-  ctaText?: string;
-  ctaLink?: string;
-  [key: string]: unknown;
-}
-
-/**
- * Renders the home banner with optional background image and CTA.
- * Pulls configuration from server settings keyed by `HOME_BANNER_CODE`.
- * @returns React.ReactElement | null
- */
 export default function HomeBanner() {
-  const [config, setConfig] = useState<HomeBannerConfig | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isFlying, setIsFlying] = useState<boolean>(false);
-  const autoCollapseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const skipAutoCollapseRef = useRef<boolean>(false);
-
-  const { isMobile, isDesktop } = useDeviceType();
-  const selectedTemplateId = useAppSelector((state) => state.creationTemplate.selectedTemplateId);
-
-  /** Returns YYYY-MM-DD for user's local timezone */
-  const getLocalDateKey = () => {
-    const now = new Date();
-    const y = now.getFullYear();
-    const m = String(now.getMonth() + 1).padStart(2, '0');
-    const d = String(now.getDate()).padStart(2, '0');
-    return `${y}-${m}-${d}`;
-  };
-
-  const handleDismiss = () => {
-    setIsFlying(true);
-    try {
-      localStorage.setItem(HOME_BANNER_COLLAPSE_KEY, getLocalDateKey());
-    } catch {}
-  };
-
-  const handleBannerClick = () => {
-    if (isFlying) {
-      setIsFlying(false);
-    }
-  };
-
-  // Initialize from persisted state: keep collapsed for the rest of the day
-  useEffect(() => {
-    try {
-      const saved = localStorage.getItem(HOME_BANNER_COLLAPSE_KEY);
-      if (saved && saved === getLocalDateKey()) {
-        setIsFlying(true);
-        skipAutoCollapseRef.current = true;
-      }
-    } catch {}
-  }, []);
-
-  // Auto collapse after mount (2s) unless already collapsed today
-  useEffect(() => {
-    if (skipAutoCollapseRef.current) return;
-    if (autoCollapseTimerRef.current) return;
-    autoCollapseTimerRef.current = setTimeout(() => {
-      setIsFlying(true);
-      try {
-        localStorage.setItem(HOME_BANNER_COLLAPSE_KEY, getLocalDateKey());
-      } catch {}
-    }, 2000);
-    return () => {
-      if (autoCollapseTimerRef.current) {
-        clearTimeout(autoCollapseTimerRef.current);
-        autoCollapseTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  // Collapse banner when a template is selected/changed
-  useEffect(() => {
-    if (!selectedTemplateId) return;
-    setIsFlying(true);
-    try {
-      localStorage.setItem(HOME_BANNER_COLLAPSE_KEY, getLocalDateKey());
-    } catch {}
-    if (autoCollapseTimerRef.current) {
-      clearTimeout(autoCollapseTimerRef.current);
-      autoCollapseTimerRef.current = null;
-    }
-  }, [selectedTemplateId]);
-
-  useEffect(() => {
-    let active = true;
-
-    async function load() {
-      setLoading(true);
-      setError(null);
-      try {
-        const value = await fetchSettingByCode<HomeBannerConfig>(HOME_BANNER_CODE);
-        if (!active) return;
-        setConfig(value ?? null);
-      } catch (err) {
-        if (!active) return;
-        const message = err instanceof Error ? err.message : "Failed to load home banner";
-        setError(message);
-        setConfig(null);
-      } finally {
-        if (active) {
-          setLoading(false);
-        }
-      }
-    }
-
-    load();
-
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  if (loading || error || !config) {
-    // Render nothing until configuration schema is finalized.
-    return null;
-  }
-
-  const title = typeof config.title === "string" ? config.title : undefined;
-  const subtitle = typeof config.subtitle === "string" ? config.subtitle : undefined;
-  const description = typeof config.description === "string" ? config.description : undefined;
-  const eyebrow = typeof config.eyebrow === "string" ? config.eyebrow : undefined;
-  const backgroundImage = typeof config.backgroundImage === "string" ? config.backgroundImage : undefined;
-
-  let ctaLabel: string | undefined;
-  let ctaHref: string | undefined;
-
-  if (config.cta && typeof config.cta === "object") {
-    const { label, href } = config.cta as Record<string, unknown>;
-    if (typeof label === "string") ctaLabel = label;
-    if (typeof href === "string") ctaHref = href;
-  }
-
-  // Support legacy field names until the API contract is confirmed.
-  if (!ctaLabel && typeof config.ctaText === "string") {
-    ctaLabel = config.ctaText;
-  }
-  if (!ctaHref && typeof config.ctaLink === "string") {
-    ctaHref = config.ctaLink;
-  }
-
-  const hasContent = Boolean(title || subtitle || description || ctaLabel || backgroundImage);
-  if (!hasContent) {
-    return null;
-  }
-
+  const { isDesktop } = useDeviceType();
   return (
     <div data-alt="home-banner-wrapper" className="sticky top-0 z-50 w-full mx-auto p-0 overflow-hidden bg-gradient-to-b from-black/80 to-black/10">
-      {/* Banner overlay - stacked above */}
-      <section
-        data-alt="home-banner"
-        className={`absolute inset-0 z-10 isolate overflow-hidden rounded-3xl px-6 py-6 text-white border-2 border-transparent transition-all duration-400 ease-in-out ${
-          isFlying ? 'ring-2 ring-custom-blue ring-offset-0 [--tw-ring-color:theme(colors.custom-blue)] animate-ring-breath' : 'hover:border-custom-blue/50'
-        } ${
-          isFlying
-            ? isDesktop ? "translate-x-[90%] -translate-y-[70%] scale-[0.85] opacity-95 rotate-3" : "translate-x-[80%] -translate-y-[70%] scale-[0.85] opacity-95 rotate-3"
-            : "translate-x-0 translate-y-0 scale-100 opacity-100 rotate-0"
-        }`}
-        aria-label="Home banner"
-      >
-        {/* 背景图层 - 完全铺满 */}
-        {backgroundImage ? (
-          <div data-alt="background-wrapper" className="absolute inset-0">
-            <img
-              data-alt="background-image"
-              src={backgroundImage}
-              className="h-full w-full object-cover block"
-            />
-            <div data-alt="background-overlay" className="absolute inset-0 bg-black/40" />
-          </div>
-        ) : null}
-        {/* Dismiss button */}
-        <div className={`absolute z-10 ${isDesktop ? 'right-4 top-4' : 'right-0 top-0'}`}>
-          <button
-            data-alt="banner-dismiss"
-            type="button"
-            onClick={handleDismiss}
-            className="text-white hover:bg-white/20 rounded-full p-2"
-            aria-label="Dismiss banner"
-          >
-            <ChevronUp className="h-5 w-5" />
-          </button>
-        </div>
-
-        <div
-          data-alt="banner-content"
-          className="relative flex flex-col items-center gap-4 text-center md:items-start md:text-left"
-        >
-          {eyebrow ? (
-            <span data-alt="banner-eyebrow" className="text-xs font-semibold uppercase tracking-[0.3em] text-white/70">
-              {eyebrow}
-            </span>
-          ) : null}
-          {title ? (
-            <h1 data-alt="banner-title" className="text-3xl font-semibold leading-tight md:text-5xl">
-              {title}
-            </h1>
-          ) : null}
-          {(subtitle && isDesktop) ? (
-            <p data-alt="banner-subtitle" className="text-lg text-white/80 md:text-xl">{subtitle}</p>
-          ) : null}
-          {(description && isDesktop) ? (
-            <p data-alt="banner-description" className="max-w-2xl text-base text-white/70">{description}</p>
-          ) : null}
-          {ctaLabel ? (
-            ctaHref ? (
-              <a
-                data-alt="cta-link"
-                href={ctaHref}
-                className="inline-flex items-center justify-center rounded-full border border-white/30 bg-white/10 px-6 py-2 text-sm font-medium text-white transition hover:border-white hover:bg-white hover:text-slate-900"
-              >
-                {ctaLabel}
-              </a>
-            ) : (
-              <button
-                data-alt="cta-button"
-                type="button"
-                className="inline-flex items-center justify-center rounded-full border border-white/30 bg-white/10 px-6 py-2 text-sm font-medium text-white transition hover:border-white hover:bg-white hover:text-slate-900"
-              >
-                {ctaLabel}
-              </button>
-            )
-          ) : null}
-        </div>
-
-        {isFlying ? (
-          <button type="button" onClick={handleBannerClick} className="bg-white/50 rounded-full absolute left-4 bottom-3 h-5 w-5 animate-bounce">
-            <ChevronsDown className="inset-0 h-5 w-5" />
-          </button>
-        ) : null}
-      </section>
-
       {/* Base content - always present under the banner */}
-      <div data-alt="home-banner-base" className={`relative p-6 px-12 flex items-center justify-center bg-[radial-gradient(ellipse_at_center,rgba(106,244,249,0.28)_0%,rgba(106,244,249,0.14)_35%,transparent_70%)] ${isDesktop ? 'min-h-[300px]' : 'min-h-[200px] !p-0'}`}>
+      <div className='p-1 text-center text-2xl font-bold tracking-tight sm:text-3xl'>Your idea. A movie. In minutes.</div>
+      <div className='mx-auto w-full max-w-[600px] px-3 py-2 text-center text-xs text-gray-400 sm:px-16 sm:text-sm'>Our AI turns sparks into full-blown stories — fast & free.</div>
+      <div data-alt="home-banner-base" className={`space-y-4 mx-auto w-full max-w-[900px] px-3 sm:px-16 relative py-2 px-12 flex items-center justify-center bg-[radial-gradient(ellipse_at_center,rgba(106,244,249,0.28)_0%,rgba(106,244,249,0.14)_35%,transparent_70%)] ${isDesktop ? 'px-24' : 'px-3'}`}>
         <VideoCreationForm />
       </div>
     </div>
diff --git a/components/pages/create-video/CreateInput/VideoCreationForm.tsx b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
index 1d146f1..272fd6c 100644
--- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx
+++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
@@ -3,12 +3,8 @@
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { PhotoPreviewSection } from '../PhotoPreview';
 import type { PhotoItem, PhotoType } from '../PhotoPreview/types';
+import { ActionButton } from '@/components/common/ActionButton';
 import {
-    PlusOutlined,
-    UserOutlined,
-    CameraOutlined,
-    BulbOutlined,
-    ArrowRightOutlined,
     SettingOutlined,
 } from '@ant-design/icons';
 import { Dropdown, Popover } from 'antd';
@@ -17,7 +13,7 @@ import { MobileConfigModal } from './MobileConfigModal';
 import { AddItemModal } from './AddItemModal';
 import { defaultConfig } from './config-options';
 import type { ConfigOptions } from './config-options';
-import { CircleArrowRight, X } from 'lucide-react';
+import { CircleArrowRight, X, Clapperboard } from 'lucide-react';
 import TemplatePreviewModal from '@/components/common/TemplatePreviewModal';
 import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
 import { useDeviceType } from '@/hooks/useDeviceType';
@@ -48,7 +44,7 @@ export default function VideoCreationForm() {
     const [isRoleGenerating, setIsRoleGenerating] = useState<{ [key: string]: boolean }>({});
     const [isItemGenerating, setIsItemGenerating] = useState<{ [key: string]: boolean }>({});
     const [currentTemplate, setCurrentTemplate] = useState<StoryTemplateEntity | null>(null);
-    const [inputPlaceholder, setInputPlaceholder] = useState<string>('');
+    const [generateText, setGenerateText] = useState<string>('');
     const [templateTitle, setTemplateTitle] = useState<string>('');
     const [isMentionOpen, setIsMentionOpen] = useState(false);
 
@@ -95,7 +91,7 @@ export default function VideoCreationForm() {
     /** Clear current template related states */
     const clearTemplateSelection = () => {
         handleConfigChange('pcode', '');
-        setInputPlaceholder('');
+        setGenerateText('');
         setTemplateTitle('');
         setPhotos([]);
     };
@@ -111,7 +107,7 @@ export default function VideoCreationForm() {
         })).filter(p => p.url);
 
         setPhotos(prev => [...prev, ...characterPhotos]);
-        setInputPlaceholder(template.generateText || template.name);
+        setGenerateText(template.generateText || template.name);
         setTemplateTitle(template.name);
         handleConfigChange('pcode', template.pcode || '');
         setTimeout(() => {
@@ -396,9 +392,9 @@ export default function VideoCreationForm() {
                     </div>
                 )}
                 {/* Template Description */}
-                {inputPlaceholder && (
+                {generateText && (
                     <div data-alt="template-description-wrapper" className="px-4 pt-1">
-                        <div data-alt="template-description-text" className="text-white/25 text-sm">{inputPlaceholder}</div>
+                        <div data-alt="template-description-text" className="text-white/25 text-sm">{generateText}</div>
                     </div>
                 )}
                 {/* Text Input Area - Middle */}
@@ -416,7 +412,7 @@ export default function VideoCreationForm() {
                 )}
 
                 {/* Control Panel - Bottom */}
-                <div data-alt="control-panel" className="px-4 py-4 flex items-center justify-between gap-2">
+                <div data-alt="control-panel" className="pl-4 pr-2 py-2 flex items-center justify-between gap-2">
                     {/* Left Side - Upload and Options */}
                     <div data-alt="left-controls" className="flex items-center gap-2">
                         {/* Upload Button with Dropdown */}
@@ -599,18 +595,13 @@ export default function VideoCreationForm() {
                     </div>
 
                     {/* Right Side - Create Button */}
-                    <button
-                        data-alt="create-button"
-                        className="w-8 h-8 rounded-full bg-black hover:bg-gray-900 border border-white/20 hover:border-cyan-400/60 transition-all duration-200 flex items-center justify-center text-white shadow-lg hover:shadow-cyan-400/20 disabled:opacity-50 disabled:cursor-not-allowed"
-                        onClick={handleCreate}
-                        disabled={isCreating}
-                    >
-                        {isCreating ? (
-                            <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
-                        ) : (
-                            <ArrowRightOutlined className="text-base font-bold" />
-                        )}
-                    </button>
+                    <ActionButton
+                        isCreating={isCreating}
+                        handleCreateVideo={handleCreate}
+                        icon={<Clapperboard className="text-base font-bold w-5 h-5" />}
+                        width="w-10"
+                        height="h-10"
+                    />
                 </div>
             </div>