From 5eed018991ab1981bd1ab0891dc52b15fa4edf5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Wed, 22 Oct 2025 20:05:36 +0800
Subject: [PATCH 1/4] =?UTF-8?q?@=E6=8C=89=E9=92=AE=E5=8A=A0tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CreateInput/VideoCreationForm.tsx             | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/pages/create-video/CreateInput/VideoCreationForm.tsx b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
index 272fd6c..bbaba89 100644
--- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx
+++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
@@ -26,6 +26,7 @@ import { StoryTemplateEntity } from '@/app/service/domain/Entities';
 import { useUploadFile } from '@/app/service/domain/service';
 import { useAppDispatch, useAppSelector } from '@/lib/store/hooks';
 import { clearSelection } from '@/lib/store/creationTemplateSlice';
+import { Tooltip } from "antd";
 
 export default function VideoCreationForm() {
     const [photos, setPhotos] = useState<PhotoItem[]>([]);
@@ -566,12 +567,14 @@ export default function VideoCreationForm() {
                                 </div>
                             }
                         >
-                            <button
-                                data-alt="mention-button"
-                                className={`w-8 h-8 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center justify-center text-gray-300 hover:text-cyan-400 ${isTemplateSelected ? 'text-yellow-500' : ''}`}
-                            >
-                                <span className="text-base font-bold">@</span>
-                            </button>
+                            <Tooltip placement="top" title="Inspiration Lab">
+                                <button
+                                    data-alt="mention-button"
+                                    className={`w-8 h-8 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center justify-center text-gray-300 hover:text-cyan-400 ${isTemplateSelected ? 'text-yellow-500' : ''}`}
+                                >
+                                    <span className="text-base font-bold">@</span>
+                                </button>
+                            </Tooltip>
                         </Popover>
 
                         {/* Configuration - Desktop: Full Panel, Mobile: Setting Icon */}

From f1c041491549e57a58495e577f717480d1659ea9 Mon Sep 17 00:00:00 2001
From: moux1024 <403053463@qq.com>
Date: Wed, 22 Oct 2025 20:24:01 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8Cinput=E9=80=90=E5=AD=97=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FamousTemplate.tsx                 |  8 +--
 components/MyMovies.tsx                       |  2 +-
 .../CreateInput/VideoCreationForm.tsx         | 19 +++++-
 hooks/useTypewriterText.ts                    | 62 +++++++++++++++++++
 4 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 hooks/useTypewriterText.ts

diff --git a/components/FamousTemplate.tsx b/components/FamousTemplate.tsx
index 7abd552..320fc6a 100644
--- a/components/FamousTemplate.tsx
+++ b/components/FamousTemplate.tsx
@@ -46,7 +46,7 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
 
   return (
     <section data-alt="famous-template" className="w-full">
-      <div data-alt="famous-template-header" className={`mb-4 items-center ${isDesktop ? 'flex' : 'block'}`}>
+      <div data-alt="famous-template-header" className={`items-center ${isDesktop ? 'flex' : 'block'}`}>
         <h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
           Inspiration Lab
         </h2>
@@ -58,7 +58,7 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
                 type="button"
                 data-alt={`template-tab-${tab}`}
                 onClick={() => setActiveTab(tab)}
-                className={`px-3 py-1 rounded-none text-sm transition-colors border ${
+                className={`px-3 py-0.5 rounded-none text-sm transition-colors border ${
                   activeTab === tab
                     ? "border-white/60 bg-white/80 text-slate-900"
                     : "border-white/20 text-white/80 hover:border-white/40 hover:bg-white/10"
@@ -83,7 +83,7 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
               <div
                 data-alt="template-item"
                 key={t.id}
-                className="relative h-40 group"
+                className="relative h-40 group [container-type:inline-size]"
                 onMouseEnter={(e) => {
                   const v = e.currentTarget.querySelector('video') as HTMLVideoElement | null
                   v?.play?.()
@@ -150,7 +150,7 @@ const FamousTemplate: React.FC<FamousTemplateProps> = ({ showTabs = true }) => {
                     <button
                       type="button"
                       data-alt="try-this-button"
-                      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"
+                      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-[clamp(0.5rem,3cqw,0.75rem)] py-[clamp(0.25rem,1cqh,0.5rem)] 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/MyMovies.tsx b/components/MyMovies.tsx
index 813d96b..c7cf473 100644
--- a/components/MyMovies.tsx
+++ b/components/MyMovies.tsx
@@ -61,7 +61,7 @@ const MyMovies: React.FC = () => {
 
   return (
     <section data-alt="my-movies" className="w-full">
-      <div data-alt="my-movies-header" className="mb-4 flex items-center justify-between">
+      <div data-alt="my-movies-header" className="flex items-center justify-between">
         <h2 data-alt="my-movies-title" className="text-xl py-4 font-semibold text-white">My Projects</h2>
         <Link data-alt="all-movies-link" href="/movies" className="text-sm px-2 border rounded-full text-blue-400 hover:text-blue-300">All movies →</Link>
       </div>
diff --git a/components/pages/create-video/CreateInput/VideoCreationForm.tsx b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
index bbaba89..6dc1e6e 100644
--- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx
+++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
@@ -27,6 +27,7 @@ import { useUploadFile } from '@/app/service/domain/service';
 import { useAppDispatch, useAppSelector } from '@/lib/store/hooks';
 import { clearSelection } from '@/lib/store/creationTemplateSlice';
 import { Tooltip } from "antd";
+import { useTypewriterText } from '@/hooks/useTypewriterText';
 
 export default function VideoCreationForm() {
     const [photos, setPhotos] = useState<PhotoItem[]>([]);
@@ -76,6 +77,22 @@ export default function VideoCreationForm() {
         return isTemplateSelected.freeInput && isTemplateSelected.freeInput.length > 0;
     }, [isTemplateSelected]);
 
+    /** Dynamic placeholder typing from template freeInput tips */
+    const placeholderList = useMemo(() => {
+        if (isTemplateSelected?.freeInput?.length) {
+            return (isTemplateSelected.freeInput
+                .map((i) => i.user_tips)
+                .filter(Boolean) as string[]);
+        }
+        return ['Describe the story you want to make...'];
+    }, [isTemplateSelected]);
+
+    const dynamicPlaceholder = useTypewriterText(placeholderList, {
+        typingMs: 36,
+        pauseMs: 2200,
+        resetMs: 300,
+    });
+
     const characterInputRef = useRef<HTMLInputElement>(null);
     const sceneInputRef = useRef<HTMLInputElement>(null);
     const propInputRef = useRef<HTMLInputElement>(null);
@@ -405,7 +422,7 @@ export default function VideoCreationForm() {
                             data-alt="main-text-input"
                             ref={mainTextInputRef}
                             className="w-full h-full bg-transparent text-gray-300 text-base placeholder:italic placeholder-gray-400 resize-none outline-none border-none"
-                            placeholder={isTemplateSelected?.freeInput[0].user_tips || "Describe the story you want to make..."}
+                            placeholder={dynamicPlaceholder}
                             value={inputText}
                             onChange={(e) => setInputText(e.target.value)}
                         />
diff --git a/hooks/useTypewriterText.ts b/hooks/useTypewriterText.ts
new file mode 100644
index 0000000..39c76c3
--- /dev/null
+++ b/hooks/useTypewriterText.ts
@@ -0,0 +1,62 @@
+import { useEffect, useMemo, useState } from 'react';
+
+/**
+ * Renders a typewriter-style text that cycles through a list of strings.
+ * It types each string character-by-character, pauses, clears, then proceeds to the next.
+ * @param {string[]} strings - The list of sentences to cycle through.
+ * @param {{ typingMs?: number; pauseMs?: number; resetMs?: number }} [options] - Timing options.
+ * @returns {string} - The current text to display.
+ */
+export function useTypewriterText(
+    strings: string[],
+    options?: { typingMs?: number; pauseMs?: number; resetMs?: number }
+): string {
+    const typingMs = options?.typingMs ?? 40;
+    const pauseMs = options?.pauseMs ?? 1200;
+    const resetMs = options?.resetMs ?? 300;
+
+    const [text, setText] = useState('');
+    const [listIndex, setListIndex] = useState(0);
+    const [charIndex, setCharIndex] = useState(0);
+    const [phase, setPhase] = useState<'typing' | 'pausing' | 'clearing'>('typing');
+    const key = useMemo(() => (strings && strings.length ? strings.join('|') : ''), [strings]);
+
+    useEffect(() => {
+        setText('');
+        setListIndex(0);
+        setCharIndex(0);
+        setPhase('typing');
+    }, [key]);
+
+    useEffect(() => {
+        const list = strings && strings.length ? strings : ['Describe the story you want to make...'];
+        const full = list[listIndex % list.length] ?? '';
+        let timer: number | undefined;
+
+        if (phase === 'typing') {
+            if (charIndex <= full.length) {
+                setText(full.slice(0, charIndex));
+                timer = window.setTimeout(() => setCharIndex(charIndex + 1), typingMs);
+            } else {
+                setPhase('pausing');
+            }
+        } else if (phase === 'pausing') {
+            timer = window.setTimeout(() => setPhase('clearing'), pauseMs);
+        } else {
+            setText('');
+            timer = window.setTimeout(() => {
+                setListIndex((listIndex + 1) % list.length);
+                setCharIndex(0);
+                setPhase('typing');
+            }, resetMs);
+        }
+
+        return () => {
+            if (timer) window.clearTimeout(timer);
+        };
+    }, [strings, listIndex, charIndex, phase, typingMs, pauseMs, resetMs]);
+
+    return text;
+}
+
+

From f2a9de646edddd28b22196b970bb9eb8834a2ece Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Wed, 22 Oct 2025 20:35:15 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E9=AB=98=E5=BA=A6=20=E4=BB=A5=E5=8F=8A=20=E5=86=85?=
 =?UTF-8?q?=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/HomeBanner.tsx                                      | 2 +-
 .../pages/create-video/CreateInput/VideoCreationForm.tsx       | 3 +++
 components/pages/create-video/CreateVideo.tsx                  | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/HomeBanner.tsx b/components/HomeBanner.tsx
index cbf895d..6b8bb2d 100644
--- a/components/HomeBanner.tsx
+++ b/components/HomeBanner.tsx
@@ -5,7 +5,7 @@ import { useDeviceType } from '@/hooks/useDeviceType';
 export default function HomeBanner() {
   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">
+    <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 pt-20">
       {/* Base content - always present under the banner */}
       <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>
diff --git a/components/pages/create-video/CreateInput/VideoCreationForm.tsx b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
index 6dc1e6e..68df3d0 100644
--- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx
+++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
@@ -422,6 +422,9 @@ export default function VideoCreationForm() {
                             data-alt="main-text-input"
                             ref={mainTextInputRef}
                             className="w-full h-full bg-transparent text-gray-300 text-base placeholder:italic placeholder-gray-400 resize-none outline-none border-none"
+                            style={{
+                                minHeight: '4.25rem'
+                            }}
                             placeholder={dynamicPlaceholder}
                             value={inputText}
                             onChange={(e) => setInputText(e.target.value)}
diff --git a/components/pages/create-video/CreateVideo.tsx b/components/pages/create-video/CreateVideo.tsx
index 4346693..a13a306 100644
--- a/components/pages/create-video/CreateVideo.tsx
+++ b/components/pages/create-video/CreateVideo.tsx
@@ -5,7 +5,7 @@ import FamousTemplate from '@/components/FamousTemplate';
 
 export default function CreateVideo() {
     return (
-        <div data-alt="create-video-page" className="w-full">
+        <div data-alt="create-video-page" className="w-full pt-20">
             <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 className='py-2'>

From c5ae05740529f85b4cd57d57a7c46a2e9b735fde Mon Sep 17 00:00:00 2001
From: moux1024 <403053463@qq.com>
Date: Wed, 22 Oct 2025 20:51:35 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20input=E8=BE=B9?=
 =?UTF-8?q?=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/HomeBanner.tsx                                   | 6 +++---
 .../pages/create-video/CreateInput/VideoCreationForm.tsx    | 2 +-
 components/pages/create-video/CreateVideo.tsx               | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/HomeBanner.tsx b/components/HomeBanner.tsx
index 6b8bb2d..f7d5d56 100644
--- a/components/HomeBanner.tsx
+++ b/components/HomeBanner.tsx
@@ -5,11 +5,11 @@ import { useDeviceType } from '@/hooks/useDeviceType';
 export default function HomeBanner() {
   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 pt-20">
+    <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 pt-14">
       {/* Base content - always present under the banner */}
       <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'}`}>
+      <div className='mx-auto w-full max-w-[600px] px-3 py-4 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] sm:px-16 relative pt-2 pb-12 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 68df3d0..61fd1c0 100644
--- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx
+++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
@@ -423,7 +423,7 @@ export default function VideoCreationForm() {
                             ref={mainTextInputRef}
                             className="w-full h-full bg-transparent text-gray-300 text-base placeholder:italic placeholder-gray-400 resize-none outline-none border-none"
                             style={{
-                                minHeight: '4.25rem'
+                                minHeight: '6.25rem'
                             }}
                             placeholder={dynamicPlaceholder}
                             value={inputText}
diff --git a/components/pages/create-video/CreateVideo.tsx b/components/pages/create-video/CreateVideo.tsx
index a13a306..e6ee688 100644
--- a/components/pages/create-video/CreateVideo.tsx
+++ b/components/pages/create-video/CreateVideo.tsx
@@ -5,10 +5,10 @@ import FamousTemplate from '@/components/FamousTemplate';
 
 export default function CreateVideo() {
     return (
-        <div data-alt="create-video-page" className="w-full pt-20">
+        <div data-alt="create-video-page" className="w-full pt-14">
             <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 className='py-2'>
+            <div className='mx-auto w-full max-w-[600px] px-3 py-4 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 className='pt-2 pb-12'>
               <div className='space-y-4 mx-auto w-full max-w-[900px] px-3 sm:px-16 bg-[radial-gradient(ellipse_at_center,rgba(106,244,249,0.28)_0%,rgba(106,244,249,0.14)_35%,transparent_70%)]'>
                 <VideoCreationForm />
               </div>