新增 模板快捷入口和定位

app/service/Interaction/templateStoryService.ts

@@ -94,7 +94,6 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
 
       setTemplateStoryList(templates);
       setSelectedTemplate(templates[0]);
-      console.log(selectedTemplate);
     } catch (err) {
       console.error("获取模板列表失败:", err);
     } finally {

components/ChatInputBox/ChatInputBox.tsx

@@ -34,7 +34,6 @@ import { StoryTemplateEntity } from "@/app/service/domain/Entities";
 import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStoryService";
 import TemplateCard from "./templateCard";
 import { AudioRecorder } from "./AudioRecorder";
-import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
 import { useRouter } from "next/navigation";
 import { createMovieProjectV1 } from "@/api/video_flow";
 import {
@@ -51,6 +50,7 @@ import { H5TemplateDrawer } from "./H5TemplateDrawer";
 import { PcPhotoStoryModal } from "./PcPhotoStoryModal";
 import { H5PhotoStoryDrawer } from "./H5PhotoStoryDrawer";
 import { AspectRatioSelector, AspectRatioValue } from "./AspectRatioSelector";
+import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
 
 const LauguageOptions =  [
   { value: "english", label: "English", isVip: false, code:'EN' },
@@ -86,7 +86,7 @@ const VideoDurationOptions = [
  * @returns {Function} - 防抖后的函数
  */
 const debounce = (func: Function, wait: number) => {
-  let timeout: NodeJS.Timeout;
+  let timeout: ReturnType<typeof setTimeout>;
   return function executedFunction(...args: any[]) {
     const later = () => {
       clearTimeout(timeout);
@@ -108,6 +108,14 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
 
   // 模板故事弹窗状态
   const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);
+  // 模板快捷入口：记录初始模板ID与是否自动聚焦
+  const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined);
+  // 复用模板服务：获取模板列表
+  const {
+    templateStoryList,
+    isLoading: isTemplateLoading,
+    getTemplateStoryList,
+  } = useTemplateStoryServiceHook();
 
   // 图片故事弹窗状态
   const [isPhotoStoryModalOpen, setIsPhotoStoryModalOpen] = useState(false);
@@ -164,19 +172,19 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
   }, []);
 
   const onConfigChange = <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K]) => {
-    setConfigOptions((prev) => ({
+    setConfigOptions((prev: ConfigOptions) => ({
       ...prev,
       [key]: value,
     }));
     if (key === 'videoDuration') {
       // 当选择 8s 时，强制关闭剧本扩展并禁用开关
       if (value === '8s') {
-        setConfigOptions((prev) => ({
+        setConfigOptions((prev: ConfigOptions) => ({
           ...prev,
           expansion_mode: false,
         }));
       } else {
-        setConfigOptions((prev) => ({
+        setConfigOptions((prev: ConfigOptions) => ({
           ...prev,
           expansion_mode: true,
         }));
@@ -184,6 +192,12 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
     }
   };
 
+  useEffect(() => {
+    if (!templateStoryList || templateStoryList.length === 0) {
+      getTemplateStoryList();
+    }
+  }, []);
+
   const handleCreateVideo = async () => {
     if (isCreating) return; // 如果正在创建中，直接返回
     
@@ -279,7 +293,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
 
           {/* 输入框和Action按钮 - 只在展开状态显示 */}
           {!isExpanded && (
-            <div className="flex flex-col gap-3 w-full">
+            <div data-alt="chat-input-box" className="flex flex-col gap-3 w-full">
               {/* 第一行：输入框 */}
               <div className="video-prompt-editor relative flex flex-col gap-3 flex-1 pr-10">
                 {/* 文本输入框 - 改为textarea */}
@@ -335,7 +349,10 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                     <button
                       data-alt="template-story-button"
                       className="flex items-center gap-1.5 px-2 py-2 text-white/[0.70] hover:text-white transition-colors"
-                      onClick={() => setIsTemplateModalOpen(true)}
+                      onClick={() => {
+                        setInitialTemplateId(undefined);
+                        setIsTemplateModalOpen(true);
+                      }}
                     >
                       <LayoutTemplate className="w-4 h-4" />
                     </button>
@@ -400,7 +417,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                           </div>
                         ),
                       })),
-                      onClick: ({ key }) => onConfigChange('language', key),
+                      onClick: ({ key }: { key: string }) => onConfigChange('language', key),
                     }}
                     trigger={["click"]}
                     placement="top"
@@ -426,7 +443,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                           size="small"
                           checked={configOptions.expansion_mode}
                           disabled={configOptions.videoDuration === '8s'}
-                          onChange={(checked) => onConfigChange('expansion_mode', checked)}
+                      onChange={(checked: boolean) => onConfigChange('expansion_mode', checked)}
                         />
                       </div>
                       <span className={`text-xs text-white hidden sm:inline`}>
@@ -454,7 +471,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                           </div>
                         ),
                       })),
-                      onClick: ({ key }) => onConfigChange('videoDuration', key as string),
+                      onClick: ({ key }: { key: string }) => onConfigChange('videoDuration', key as string),
                     }}
                     trigger={["click"]}
                     placement="top"
@@ -490,6 +507,41 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                   height={isMobile ? "h-10" : "h-12"}
                 />
               </div>
+
+              {/* 第三行：模板快捷入口水平滚动，超出渐隐遮挡（懒加载+骨架屏） */}
+              <div data-alt="template-quick-entries" className="relative pl-2">
+                <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide pr-6 py-1">
+                  {isTemplateLoading && (!templateStoryList || templateStoryList.length === 0) ? (
+                    // 骨架屏：若正在加载且没有数据
+                    Array.from({ length: 6 }).map((_, idx) => (
+                      <div
+                        key={`skeleton-${idx}`}
+                        data-alt={`template-chip-skeleton-${idx}`}
+                        className="flex-shrink-0 w-20 h-7 rounded-full bg-white/10 animate-pulse"
+                      />
+                    ))
+                  ) : (
+                    (templateStoryList || []).map((tpl) => (
+                      <button
+                        key={tpl.id}
+                        data-alt={`template-chip-${tpl.id}`}
+                        className="flex-shrink-0 px-3 py-1.5 rounded-full bg-white/10 hover:bg-white/20 text-white/80 hover:text-white text-xs transition-colors"
+                        onClick={() => {
+                          // id 映射：优先使用模板的 id；若需要兼容 template_id，则传两者之一
+                          setInitialTemplateId(tpl.id || (tpl as any).template_id);
+                          setIsTemplateModalOpen(true);
+                          setTimeout(() => {
+                            const textarea = document.querySelector('textarea');
+                            if (textarea) (textarea as HTMLTextAreaElement).focus();
+                          }, 0);
+                        }}
+                      >
+                        {tpl.name}
+                      </button>
+                    ))
+                  )}
+                </div>
+              </div>
             </div>
           )}
         </div>
@@ -501,6 +553,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
           configOptions={configOptions}
           isOpen={isTemplateModalOpen}
           onClose={() => setIsTemplateModalOpen(false)}
+          initialTemplateId={initialTemplateId}
           isTemplateCreating={isTemplateCreating}
           setIsTemplateCreating={setIsTemplateCreating}
           isRoleGenerating={isRoleGenerating}
@@ -514,6 +567,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
           configOptions={configOptions}
           isOpen={isTemplateModalOpen}
           onClose={() => setIsTemplateModalOpen(false)}
+          initialTemplateId={initialTemplateId}
           isTemplateCreating={isTemplateCreating}
           setIsTemplateCreating={setIsTemplateCreating}
           isRoleGenerating={isRoleGenerating}

components/ChatInputBox/H5TemplateDrawer.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Drawer, Tooltip, Upload, Image } from "antd";
+import type { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
 import { UploadOutlined } from "@ant-design/icons";
 import { Clapperboard, Sparkles, LayoutTemplate, ChevronDown, ChevronUp, CheckCircle2 } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -32,6 +33,8 @@ interface H5TemplateDrawerProps {
   ) => void;
   isOpen: boolean;
   onClose: () => void;
+  /** 指定初始选中的模板ID，用于从外部快速定位 */
+  initialTemplateId?: string;
   configOptions: {
     mode: "auto" | "manual";
     resolution: "720p" | "1080p" | "4k";
@@ -50,6 +53,7 @@ export const H5TemplateDrawer = ({
   setIsItemGenerating,
   isOpen,
   onClose,
+  initialTemplateId,
   configOptions,
 }: H5TemplateDrawerProps) => {
   const router = useRouter();
@@ -76,6 +80,8 @@ export const H5TemplateDrawer = ({
   // 自由输入框布局
   const [freeInputLayout, setFreeInputLayout] = useState('bottom');
   const [aspectUI, setAspectUI] = useState<AspectRatioValue>("VIDEO_ASPECT_RATIO_LANDSCAPE");
+  // 顶部列表所在的实际滚动容器（外层 top-section 才是滚动容器）
+  const topSectionRef = useRef<HTMLDivElement | null>(null);
 
   // 自由输入框布局
   useEffect(() => {
@@ -94,6 +100,56 @@ export const H5TemplateDrawer = ({
     }
   }, [isOpen, getTemplateStoryList]);
 
+  // 当列表加载后，根据 initialTemplateId 自动选中
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!initialTemplateId) return;
+    if (!templateStoryList || templateStoryList.length === 0) return;
+    const target = templateStoryList.find(t => t.id === initialTemplateId || t.template_id === initialTemplateId);
+    if (target) {
+      setSelectedTemplate(target);
+    }
+  }, [isOpen, initialTemplateId, templateStoryList, setSelectedTemplate]);
+
+  // 自动聚焦可编辑输入框
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!selectedTemplate) return;
+    const timer = setTimeout(() => {
+      const topTextArea = document.querySelector('textarea[data-alt="h5-template-free-input-top"]') as HTMLTextAreaElement | null;
+      const bottomInput = document.querySelector('input[data-alt="h5-template-free-input-bottom"]') as HTMLInputElement | null;
+      if (freeInputLayout === 'top' && topTextArea) {
+        topTextArea.focus();
+      } else if (freeInputLayout === 'bottom' && bottomInput) {
+        bottomInput.focus();
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [isOpen, selectedTemplate, freeInputLayout]);
+
+  // 当存在默认选中模板时，将其滚动到顶部（以外层 top-section 为滚动容器）
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!selectedTemplate) return;
+    const container = topSectionRef.current;
+    if (!container) return;
+    // 延迟一帧确保子节点渲染
+    const tid = setTimeout(() => {
+      const targetId = (selectedTemplate as any).id || (selectedTemplate as any).template_id;
+      const el = container.querySelector(`[data-template-id="${targetId}"]`) as HTMLElement | null;
+      if (el) {
+        // 计算相对容器的 offsetTop
+        const containerTop = container.getBoundingClientRect().top;
+        const elTop = el.getBoundingClientRect().top;
+        const offset = elTop - containerTop + container.scrollTop;
+        const adjust = 16; // 向下偏移一些，让目标项不贴顶
+        const targetTop = Math.max(0, offset - adjust);
+        container.scrollTo({ top: targetTop, behavior: 'smooth' });
+      }
+    }, 0);
+    return () => clearTimeout(tid);
+  }, [isOpen, selectedTemplate]);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const target = event.target as Element;
@@ -108,7 +164,7 @@ export const H5TemplateDrawer = ({
   const handleConfirm = async () => {
     if (!selectedTemplate || isTemplateCreating) return;
     setIsTemplateCreating(true);
-    let timer: NodeJS.Timeout | null = null;
+    let timer: ReturnType<typeof setInterval> | null = null;
     try {
       const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
       if (!User.id) return;
@@ -155,6 +211,7 @@ export const H5TemplateDrawer = ({
               <button
                 key={template.id}
                 data-alt={`template-row-${index}`}
+                data-template-id={(template as any).id || (template as any).template_id}
                 onClick={() => {
                   if (!isBottomExpanded) setIsBottomExpanded(true);
                   setSelectedTemplate(template);
@@ -287,7 +344,7 @@ export const H5TemplateDrawer = ({
                       if (!isLt5M) return false;
                       return true;
                     }}
-                    customRequest={async ({ file, onSuccess, onError }) => {
+                    customRequest={async ({ file, onSuccess, onError }: RcCustomRequestOptions) => {
                       try {
                         const fileObj = file as File;
                         const uploadedUrl = await uploadFile(fileObj, () => {});
@@ -414,7 +471,7 @@ export const H5TemplateDrawer = ({
                       if (!isLt5M) return false;
                       return true;
                     }}
-                    customRequest={async ({ file, onSuccess, onError }) => {
+                    customRequest={async ({ file, onSuccess, onError }: RcCustomRequestOptions) => {
                       try {
                         const fileObj = file as File;
                         const uploadedUrl = await uploadFile(fileObj, () => {});
@@ -516,6 +573,7 @@ export const H5TemplateDrawer = ({
               input Configuration
             </h3>
             <textarea
+              data-alt="h5-template-free-input-top"
               value={selectedTemplate?.freeInput[0].free_input_text || ""}
               placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
               className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
@@ -540,6 +598,7 @@ export const H5TemplateDrawer = ({
             <div data-alt="free-input" className="flex-1">
               <input
                 type="text"
+                data-alt="h5-template-free-input-bottom"
                 value={selectedTemplate.freeInput[0].free_input_text || ""}
                 placeholder={selectedTemplate.freeInput[0].user_tips}
                 className="w-full px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
@@ -559,7 +618,7 @@ export const H5TemplateDrawer = ({
           {/* 横/竖屏选择 */}
           <AspectRatioSelector
             value={aspectUI}
-            onChange={setAspectUI}
+            onChange={(v: AspectRatioValue) => setAspectUI(v)}
             placement="top"
           />
           <ActionButton
@@ -604,7 +663,7 @@ export const H5TemplateDrawer = ({
           </div>
 
           <div data-alt="drawer-body" className="flex-1 overflow-y-auto">
-            <div data-alt="top-section" className="h-full overflow-y-auto">
+          <div data-alt="top-section" className="h-full overflow-y-auto" ref={topSectionRef}>
               {renderTopTemplateList()}
             </div>
             <motion.div

components/ChatInputBox/PcTemplateModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import {
   Clapperboard,
   Sparkles,
@@ -13,6 +13,7 @@ import {
   Image,
   Dropdown,
 } from "antd";
+import type { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
 import { UploadOutlined } from "@ant-design/icons";
 import { StoryTemplateEntity } from "@/app/service/domain/Entities";
 import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
@@ -30,7 +31,7 @@ import { AspectRatioSelector, AspectRatioValue } from "./AspectRatioSelector";
  * @returns {Function} - 防抖后的函数
  */
 const debounce = (func: Function, wait: number) => {
-  let timeout: NodeJS.Timeout;
+  let timeout: ReturnType<typeof setTimeout>;
   return function executedFunction(...args: any[]) {
     const later = () => {
       clearTimeout(timeout);
@@ -50,6 +51,8 @@ interface PcTemplateModalProps {
   setIsItemGenerating: (value: { [key: string]: boolean } | ((prev: { [key: string]: boolean }) => { [key: string]: boolean })) => void;
   isOpen: boolean;
   onClose: () => void;
+  /** 指定初始选中的模板ID，用于从外部快速定位 */
+  initialTemplateId?: string;
   configOptions: {
     mode: "auto" | "manual";
     resolution: "720p" | "1080p" | "4k";
@@ -70,6 +73,7 @@ export const PcTemplateModal = ({
   setIsItemGenerating,
   isOpen,
   onClose,
+  initialTemplateId,
   configOptions = {
     mode: "auto" as "auto" | "manual",
     resolution: "720p" as "720p" | "1080p" | "4k",
@@ -105,7 +109,7 @@ export const PcTemplateModal = ({
   const [freeInputLayout, setFreeInputLayout] = useState('bottom');
   const router = useRouter();
   const [aspectUI, setAspectUI] = useState<AspectRatioValue>("VIDEO_ASPECT_RATIO_LANDSCAPE");
-  
+  const leftListRef = useRef<HTMLDivElement | null>(null);
   // 组件挂载时获取模板列表
   useEffect(() => {
     if (isOpen) {
@@ -113,6 +117,17 @@ export const PcTemplateModal = ({
     }
   }, [isOpen, getTemplateStoryList]);
 
+  // 当列表加载后，根据 initialTemplateId 自动选中
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!initialTemplateId) return;
+    if (!templateStoryList || templateStoryList.length === 0) return;
+    const target = templateStoryList.find(t => t.id === initialTemplateId || t.template_id === initialTemplateId);
+    if (target) {
+      setSelectedTemplate(target);
+    }
+  }, [isOpen, initialTemplateId, templateStoryList, setSelectedTemplate]);
+
   // 自由输入框布局
   useEffect(() => {
     if (selectedTemplate?.storyRole && selectedTemplate.storyRole.length > 0 || 
@@ -124,6 +139,36 @@ export const PcTemplateModal = ({
     }
   }, [selectedTemplate])
 
+  // 自动聚焦可编辑输入框
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!selectedTemplate) return;
+    // 略微延迟确保 DOM 更新
+    const timer = setTimeout(() => {
+      const topTextArea = document.querySelector('textarea[data-alt="pc-template-free-input-top"]') as HTMLTextAreaElement | null;
+      const bottomInput = document.querySelector('input[data-alt="pc-template-free-input-bottom"]') as HTMLInputElement | null;
+      if (freeInputLayout === 'top' && topTextArea) {
+        topTextArea.focus();
+      } else if (freeInputLayout === 'bottom' && bottomInput) {
+        bottomInput.focus();
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [isOpen, selectedTemplate, freeInputLayout]);
+
+  // 当存在默认选中模板时，将其滚动到顶部
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!selectedTemplate) return;
+    const container = leftListRef.current;
+    if (!container) return;
+    const targetId = (selectedTemplate as any).id || (selectedTemplate as any).template_id;
+    const el = container.querySelector(`[data-template-id="${targetId}"]`) as HTMLElement | null;
+    if (el) {
+      container.scrollTo({ top: el.offsetTop - 90, behavior: 'smooth' });
+    }
+  }, [isOpen, selectedTemplate]);
+
   // 监听点击外部区域关闭输入框
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -155,7 +200,7 @@ export const PcTemplateModal = ({
     if (isTemplateCreating) return;
 
     setIsTemplateCreating(true);
-    let timer: NodeJS.Timeout | null = null;
+    let timer: ReturnType<typeof setInterval> | null = null;
     
     try {
       // 获取当前用户信息
@@ -167,8 +212,8 @@ export const PcTemplateModal = ({
       }
 
       // 启动进度条动画
-      timer = setInterval(() => {
+      timer = setInterval((): void => {
-        setLocalLoading((prev) => {
+        setLocalLoading((prev: number) => {
           if (prev >= 95) {
             return 95;
           }
@@ -210,12 +255,13 @@ export const PcTemplateModal = ({
   // 模板列表渲染
   const templateListRender = () => {
     return (
-      <div className="w-1/3 p-4 border-r border-white/[0.1]  overflow-y-auto">
+      <div className="w-1/3 p-4 border-r border-white/[0.1]  overflow-y-auto" ref={leftListRef}>
         <div className="space-y-4 overflow-y-auto  template-list-scroll">
           {templateStoryList.map((template, index) => (
             <div
               key={template.id}
               data-alt={`template-card-${index}`}
+              data-template-id={(template as any).id || (template as any).template_id}
               className="flex justify-center"
               onClick={() => handleTemplateSelect(template)}
             >
@@ -429,12 +475,12 @@ export const PcTemplateModal = ({
                             file,
                             onSuccess,
                             onError,
-                          }) => {
+                          }: RcCustomRequestOptions) => {
                             try {
                               const fileObj = file as File;
                               const uploadedUrl = await uploadFile(
                                 fileObj,
-                                (progress) => {
+                                (progress: number) => {
                                   console.log(`上传进度: ${progress}%`);
                                 }
                               );
@@ -620,12 +666,12 @@ export const PcTemplateModal = ({
                             file,
                             onSuccess,
                             onError,
-                          }) => {
+                          }: RcCustomRequestOptions) => {
                             try {
                               const fileObj = file as File;
                               const uploadedUrl = await uploadFile(
                                 fileObj,
-                                (progress) => {
+                                (progress: number) => {
                                   console.log(`上传进度: ${progress}%`);
                                 }
                               );
@@ -666,6 +712,7 @@ export const PcTemplateModal = ({
               input Configuration
             </h3>
             <textarea
+              data-alt="pc-template-free-input-top"
               value={selectedTemplate?.freeInput[0].free_input_text || ""}
               placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
               className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
@@ -690,6 +737,7 @@ export const PcTemplateModal = ({
             <div className="py-2 flex-1">
               <input
                 type="text"
+                data-alt="pc-template-free-input-bottom"
                 value={selectedTemplate?.freeInput[0].free_input_text || ""}
                 placeholder={selectedTemplate?.freeInput[0].user_tips}
                 className="w-full px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"

components/pages/create-to-video2.tsx

@@ -191,7 +191,7 @@ export default function CreateToVideo2() {
   const renderProjectCard = (project: any) => {
 
     return (
-      <LazyLoad once>
+      <LazyLoad key={project.project_id} once>
         <div
           key={project.project_id}
           className="group flex flex-col bg-black/20 rounded-lg overflow-hidden cursor-pointer hover:bg-white/5 transition-all duration-300"