新增 首页tab,支持获取配置

api/serversetting.ts

@@ -1,4 +1,5 @@
 import { BASE_URL } from "./constants";
+import { post } from './request';
 
 // 获取路演配置数据
 export const fetchRoadshowConfigs = async () => {
@@ -64,3 +65,54 @@ export const fetchRoadshowConfigs = async () => {
     throw error;
   }
 };
+
+/**
+ * 根据服务端配置 code 拉取配置
+ * 约定返回结构：{ code, message, successful, data: { value: string(JSON) } }
+ */
+export interface ServerSettingVideoItem {
+  id: string;
+  title: string;
+  url: string;
+  cover?: string;
+  duration?: number;
+  sortOrder?: number;
+}
+
+export interface ServerSettingTabItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  status: number;
+  sortOrder?: number;
+  videos: ServerSettingVideoItem[];
+}
+
+export interface HomeTabItem {
+  subtitle: string;
+  title: string;
+  videos: string[];
+}
+
+export const fetchTabsByCode = async (code: string): Promise<HomeTabItem[]> => {
+  const res = await post<any>(`/api/server-setting/find_by_code`, { code });
+  if (!res || res.code !== 0 || !res.successful || !res.data) return [];
+  const raw = res.data.value;
+  if (typeof raw !== 'string' || raw.length === 0) return [];
+  try {
+    const parsed: ServerSettingTabItem[] = JSON.parse(raw);
+    return parsed
+      .filter((t) => t && t.status === 1)
+      .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+      .map((t) => ({
+        title: t.title,
+        subtitle: t.subtitle || '',
+        videos: (t.videos || [])
+          .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+          .map((v) => v.url)
+          .filter(Boolean),
+      }));
+  } catch {
+    return [];
+  }
+};

app/share/page.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import React from 'react';
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+
+/**
+ * Share (Invite) Page - Static UI with mocked data.
+ * Sections: Invite Flow, My Invitation Code, Invite Records (with pagination)
+ */
+
+type InviteRecord = {
+    id: string;
+    invitedUsername: string;
+    registeredAt: number; // epoch ms
+    rewardA: string; // reward item 1 (content TBD)
+    rewardB: string; // reward item 2 (content TBD)
+};
+
+const PAGE_SIZE = 10;
+
+/**
+ * Format epoch ms using browser preferred language.
+ * @param {number} epochMs - timestamp in milliseconds
+ * @returns {string} - localized date time string
+ */
+function formatLocalTime(epochMs: number): string {
+    try {
+        const locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US';
+        const dtf = new Intl.DateTimeFormat(locale, {
+            dateStyle: 'medium',
+            timeStyle: 'medium',
+        });
+        return dtf.format(new Date(epochMs));
+    } catch {
+        return new Date(epochMs).toLocaleString();
+    }
+}
+
+/**
+ * Generate mocked invite records for demo purpose only.
+ * @param {number} count - number of items
+ * @returns {InviteRecord[]} - mocked records
+ */
+function generateMockRecords(count: number): InviteRecord[] {
+    const now = Date.now();
+    return Array.from({ length: count }).map((_, index) => ({
+        id: String(index + 1),
+        invitedUsername: `user_${index + 1}`,
+        registeredAt: now - index * 36_000, // different times
+        rewardA: index % 3 === 0 ? '+100 points' : '—',
+        rewardB: index % 5 === 0 ? '3-day membership' : '—',
+    }));
+}
+
+export default function SharePage(): JSX.Element {
+    // Mocked data (to be replaced by real API integration later)
+    const [inviteCode] = React.useState<string>('VF-ABCD-1234');
+    const [invitedCount] = React.useState<number>(37);
+    const [copyState, setCopyState] = React.useState<'idle' | 'copied' | 'error'>('idle');
+
+    const [records] = React.useState<InviteRecord[]>(() => generateMockRecords(47));
+    const [pageIndex, setPageIndex] = React.useState<number>(0);
+
+    const totalPages = Math.max(1, Math.ceil(records.length / PAGE_SIZE));
+    const pagedRecords = React.useMemo(() => {
+        const start = pageIndex * PAGE_SIZE;
+        return records.slice(start, start + PAGE_SIZE);
+    }, [records, pageIndex]);
+
+    const handleCopy = React.useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(inviteCode);
+            setCopyState('copied');
+            window.setTimeout(() => setCopyState('idle'), 1600);
+        } catch {
+            setCopyState('error');
+            window.setTimeout(() => setCopyState('idle'), 1600);
+        }
+    }, [inviteCode]);
+
+    const canPrev = pageIndex > 0;
+    const canNext = pageIndex < totalPages - 1;
+
+    return (
+        <DashboardLayout>
+            <div data-alt="share-page" className="w-full h-full overflow-y-auto bg-black text-white">
+                <div
+                    data-alt="container"
+                    className="w-full max-w-[95%] mx-auto px-4 py-10 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20"
+                >
+                    <header data-alt="page-header" className="mb-8 flex items-end justify-between">
+                        <div data-alt="title-box">
+                            <h1 data-alt="title" className="text-2xl font-semibold text-white">Invite Friends</h1>
+                            <p data-alt="subtitle" className="mt-1 text-sm text-white/60">Invite friends to join and earn rewards.</p>
+                        </div>
+                    </header>
+
+                {/* Section 1: Invite Flow */}
+                <section data-alt="invite-flow" className="mb-8 rounded-lg border border-white/20 bg-black p-6 shadow-sm">
+                    <h2 data-alt="section-title" className="text-lg font-medium text-white">Invitation Flow</h2>
+                    <ol data-alt="steps" className="mt-4 grid gap-4 sm:grid-cols-3">
+                        <li data-alt="step" className="rounded-md border border-white/20 p-4">
+                            <div data-alt="step-header" className="flex items-center justify-between">
+                                <span className="text-sm font-medium text-white/80">Step 1</span>
+                                <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white">Share</span>
+                            </div>
+                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Copy your invitation code and share it with friends.</p>
+                        </li>
+                        <li data-alt="step" className="rounded-md border border-white/20 p-4">
+                            <div data-alt="step-header" className="flex items-center justify-between">
+                                <span className="text-sm font-medium text-white/80">Step 2</span>
+                                <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white">Register</span>
+                            </div>
+                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Friends register and enter your invitation code.</p>
+                        </li>
+                        <li data-alt="step" className="rounded-md border border-white/20 p-4">
+                            <div data-alt="step-header" className="flex items-center justify-between">
+                                <span className="text-sm font-medium text-white/80">Step 3</span>
+                                <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white">Reward</span>
+                            </div>
+                            <p data-alt="step-desc" className="mt-2 text-sm text-white/70">You both receive rewards after successful registration.</p>
+                        </li>
+                    </ol>
+                </section>
+
+                {/* Section 2: My Invitation Code */}
+                <section data-alt="my-invite-code" className="mb-8 rounded-lg border border-white/20 bg-black p-6 shadow-sm">
+                    <div data-alt="code-panel" className="mt-4 grid gap-6 sm:grid-cols-3">
+                        <div data-alt="code-box" className="sm:col-span-2">
+                            <h2 data-alt="section-title" className="text-lg font-medium text-white">My Invitation Code</h2>
+                            <div className="flex items-center gap-3">
+                                <div data-alt="code" className="rounded-md border border-white/20 bg-white/10 px-4 py-2 text-lg font-semibold tracking-wider text-white">
+                                    {inviteCode}
+                                </div>
+                                <button
+                                    data-alt="copy-button"
+                                    className="inline-flex h-9 items-center justify-center rounded-full bg-gradient-to-r from-custom-blue to-custom-purple px-3 text-sm font-medium text-black/90 hover:opacity-90 active:translate-y-px"
+                                    onClick={handleCopy}
+                                    type="button"
+                                    aria-label="Copy invitation code"
+                                >
+                                    {copyState === 'copied' ? 'Copied' : copyState === 'error' ? 'Failed' : 'Copy'}
+                                </button>
+                            </div>
+                            <p data-alt="hint" className="mt-2 text-xs text-white/60">Share this code. Your friends can enter it during registration.</p>
+                        </div>
+                        <div data-alt="invited-count" className="flex flex-col items-start justify-center rounded-md border border-white/20 bg-white/5 p-4">
+                            <span className="text-sm text-white/70">Invited Friends</span>
+                            <span className="mt-1 text-2xl font-semibold text-white">{invitedCount}</span>
+                            <span className="mt-2 text-xs text-white/60">Points detail will be available soon.</span>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Section 3: Invite Records */}
+                <section data-alt="invite-records" className="rounded-lg border border-white/20 bg-black p-6 shadow-sm">
+                    <div data-alt="section-header" className="mb-4 flex items-center justify-between">
+                        <h2 data-alt="section-title" className="text-lg font-medium text-white">Invite Records</h2>
+                        <div data-alt="pagination" className="flex items-center gap-2">
+                            <button
+                                data-alt="prev-page"
+                                className="inline-flex h-8 items-center justify-center rounded border border-gray-300 bg-white px-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                type="button"
+                                onClick={() => setPageIndex((p) => Math.max(0, p - 1))}
+                                disabled={!canPrev}
+                                aria-label="Previous page"
+                            >
+                                Prev
+                            </button>
+                            <span data-alt="page-info" className="text-sm text-white/70">
+                                {pageIndex + 1} / {totalPages}
+                            </span>
+                            <button
+                                data-alt="next-page"
+                                className="inline-flex h-8 items-center justify-center rounded border border-gray-300 bg-white px-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+                                type="button"
+                                onClick={() => setPageIndex((p) => Math.min(totalPages - 1, p + 1))}
+                                disabled={!canNext}
+                                aria-label="Next page"
+                            >
+                                Next
+                            </button>
+                        </div>
+                    </div>
+
+                    <div data-alt="table-wrapper" className="overflow-x-auto">
+                        <table data-alt="records-table" className="min-w-full divide-y divide-white/10">
+                            <thead data-alt="table-head" className="bg-black">
+                                <tr data-alt="table-head-row">
+                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60">Invited Username</th>
+                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60">Registered At</th>
+                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60">Registration Reward</th>
+                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60">First Payment Reward</th>
+                                </tr>
+                            </thead>
+                            <tbody data-alt="table-body" className="divide-y divide-white/10 bg-black">
+                                {pagedRecords.map((r) => (
+                                    <tr key={r.id} data-alt="table-row" className="hover:bg-white/5">
+                                        <td className="px-4 py-3 text-sm text-white">{r.invitedUsername}</td>
+                                        <td className="px-4 py-3 text-sm text-white/80">{formatLocalTime(r.registeredAt)}</td>
+                                        <td className="px-4 py-3 text-sm text-white/90">{r.rewardA}</td>
+                                        <td className="px-4 py-3 text-sm text-white/90">{r.rewardB}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </section>
+                </div>
+            </div>
+        </DashboardLayout>
+    );
+}
+
+

components/pages/home-page2.tsx

@@ -18,6 +18,8 @@ import LazyLoad from "react-lazyload";
 
 
 import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe";
+import VideoCoverflow from "@/components/ui/VideoCoverflow";
+import { fetchTabsByCode, HomeTabItem } from "@/api/serversetting";
 import { useCallbackModal } from "@/app/layout";
 
 /** 视频预加载系统 - 后台静默运行 */
@@ -151,13 +153,121 @@ function useVideoPreloader() {
 export function HomePage2() {
   // 后台静默预加载视频，不显示任何加载界面
   useVideoPreloader();
+
+  /** 导航滚动容器与各锚点 */
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({
+    home: null,
+    core: null,
+    cases: null,
+    showreel: null,
+    process: null,
+    pricing: null,
+    footer: null,
+  });
+
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [homeTabs, setHomeTabs] = useState<HomeTabItem[]>([]);
+
+  // 旧锚点兼容已移除，完全使用接口 homeTab 渲染
+
+  useEffect(() => {
+    let isMounted = true;
+
+    /**
+     * 示例：从后端拉取视频分类数据并更新到对应状态。
+     * 将下面的伪代码替换为真实请求逻辑。
+     */
+    async function loadCategoryVideos() {
+      try {
+        const tabs = await fetchTabsByCode('homeTab');
+        if (isMounted && Array.isArray(tabs) && tabs.length > 0) {
+          console.log(tabs);
+          setHomeTabs(tabs);
+        }
+      } catch {
+        // 忽略错误，保持空态
+      }
+    }
+
+    loadCategoryVideos();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  /** 在容器内平滑滚动到锚点，兼容有固定导航时的微调 */
+  const scrollToSection = (key: keyof typeof sectionRefs.current) => {
+    try {
+      const container = containerRef.current;
+      const target = sectionRefs.current[key];
+      if (!container || !target) return;
+      const containerTop = container.getBoundingClientRect().top;
+      const targetTop = target.getBoundingClientRect().top;
+      const currentScrollTop = container.scrollTop;
+      const NAV_OFFSET = 64; // 顶部导航高度微调
+      const delta = targetTop - containerTop + currentScrollTop - NAV_OFFSET;
+      container.scrollTo({ top: Math.max(delta, 0), behavior: 'smooth' });
+      setMenuOpen(false);
+    } catch {
+      // 忽略滚动异常
+    }
+  };
+
+  const NavBar = () => {
+    if (homeTabs.length === 0) return null;
     return (
-    //
-    <div
-      className="w-full h-screen overflow-y-auto"
-      id="home-page"
-      style={{ paddingBottom: `2rem` }}
+      <div data-alt="home-navbar" className="fixed h-16 top-0 left-0 right-0 z-50">
+        <div className="mx-auto h-full">
+          <div className="flex h-full items-center justify-center px-4 sm:px-6 py-3 bg-black/60 backdrop-blur-md border-b border-white/10">
+            {/* 桌面端菜单（居中，仅三个项） */}
+            <div data-alt="desktop-menu" className="hidden md:flex items-center gap-6 text-white/90 text-sm h-full">
+              {homeTabs.map((tab) => (
+                <button
+                  key={tab.title}
+                  data-alt={`nav-${tab.title.toLowerCase()}`}
+                  className="hover:text-white"
+                  onClick={() => scrollToSection(tab.title.toLowerCase() as any)}
                 >
+                  {tab.title}
+                </button>
+              ))}
+            </div>
+            {/* 移动端开关 */}
+            <button
+              data-alt="mobile-menu-toggle"
+              className="md:hidden text-white/90 px-3 py-1 border border-white/20 rounded"
+              onClick={() => setMenuOpen((v) => !v)}
+            >
+              ☰
+            </button>
+          </div>
+          {/* 移动端下拉（仅三个项） */}
+          {menuOpen && (
+            <div data-alt="mobile-menu" className="md:hidden bg-black/80 backdrop-blur-md border-b border-white/10 px-4 py-2 text-white/90 text-sm">
+              <div className="grid grid-cols-1 gap-1">
+                {homeTabs.map((tab) => (
+                  <button
+                    key={tab.title}
+                    data-alt={`m-nav-${tab.title.toLowerCase()}`}
+                    className="text-center py-2"
+                    onClick={() => scrollToSection(tab.title.toLowerCase() as any)}
+                  >
+                    {tab.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="w-full h-screen overflow-y-auto" id="home-page" ref={containerRef} style={{ paddingBottom: `2rem` }}>
+      <NavBar />
       <HomeModule1 />
       <LazyLoad once>
         <HomeModule2 />
@@ -165,6 +275,12 @@ export function HomePage2() {
       <LazyLoad once>
         <HomeModule3 />
       </LazyLoad>
+      {/* 动态锚点：来源于服务端 homeTab 配置，title 作为锚点与标题 */}
+      {homeTabs.map((tab) => (
+        <div key={tab.title} data-test={JSON.stringify(tab)} data-alt={`anchor-${tab.title.toLowerCase()}`} ref={(el) => (sectionRefs.current as any)[tab.title.toLowerCase()] = el}>
+          <VideoCoverflow title={tab.title} subtitle={tab.subtitle} videos={tab.videos} />
+        </div>
+      ))}
       <LazyLoad once>
         <HomeModule4 />
       </LazyLoad>

components/ui/VideoCoverflow.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, EffectCoverflow } from 'swiper/modules';
+import type { Swiper as SwiperType } from 'swiper/types';
+
+import 'swiper/css';
+import 'swiper/css/effect-coverflow';
+
+/** 默认视频列表（来自 home-page2.tsx 中的数组） */
+const DEFAULT_VIDEOS: string[] = [
+    'https://cdn.qikongjian.com/1756474023656_60twk5.mp4',
+    'https://cdn.qikongjian.com/1756474023644_14n7is.mp4',
+    'https://cdn.qikongjian.com/1756474023648_kocq6z.mp4',
+    'https://cdn.qikongjian.com/1756474023657_w10boo.mp4',
+    'https://cdn.qikongjian.com/1756474023657_nf8799.mp4',
+    'https://cdn.qikongjian.com/1756474230992_vw0ubf.mp4',
+];
+
+export interface VideoCoverflowProps {
+    title?: string;
+    subtitle?: string;
+    /** 视频地址数组 */
+    videos?: string[];
+    /** 自动播放间隔（毫秒） */
+    autoplayDelay?: number;
+}
+
+/**
+ * 使用 Swiper 的 Coverflow 效果展示视频，自动滚动并仅播放当前居中的视频。
+ * @param {VideoCoverflowProps} props - 组件属性
+ * @returns {JSX.Element} - 组件节点
+ */
+const VideoCoverflow: React.FC<VideoCoverflowProps> = ({
+    title = '',
+    subtitle = '',
+    videos = DEFAULT_VIDEOS,
+    autoplayDelay = 4500,
+}) => {
+    const swiperRef = React.useRef<SwiperType | null>(null);
+    const videoRefs = React.useRef<Record<number, HTMLVideoElement | null>>({});
+    const [isMobile, setIsMobile] = React.useState<boolean>(false);
+    const [activeIndex, setActiveIndex] = React.useState<number>(0);
+
+    const playActive = React.useCallback((activeIndex: number) => {
+        Object.entries(videoRefs.current).forEach(([key, el]) => {
+            if (!el) return;
+            const index = Number(key);
+            if (index === activeIndex) {
+                // 尝试播放当前居中视频
+                el.play().catch(() => {});
+            } else {
+                // 暂停其他视频，重置到起点以减少解码负担
+                el.pause();
+                try {
+                    el.currentTime = 0;
+                } catch {}
+            }
+        });
+    }, []);
+
+    const handleAfterInit = React.useCallback((sw: SwiperType) => {
+        swiperRef.current = sw;
+        const idx = sw.realIndex ?? sw.activeIndex ?? 0;
+        setActiveIndex(idx);
+        playActive(idx);
+    }, [playActive]);
+
+    const handleSlideChange = React.useCallback((sw: SwiperType) => {
+        const idx = sw.realIndex ?? sw.activeIndex ?? 0;
+        setActiveIndex(idx);
+        playActive(idx);
+    }, [playActive]);
+
+    return (
+        <div
+            data-alt="video-coverflow-container"
+            className="center h-[calc(100svh-4rem)] z-10 flex flex-col items-center justify-center lg:px-20 xl:px-30 2xl:px-40"
+        >
+            <h2
+                className="text-white font-normal text-center
+                    -mt-4
+                    /* 移动端字体 */
+                    text-[2rem] leading-[110%] mb-4
+                    /* 平板字体 */
+                    sm:-mt-6 sm:text-[2.5rem] sm:leading-[110%] sm:mb-6
+                    /* 小屏笔记本字体 */
+                    md:-mt-8 md:text-[3rem] md:leading-[110%] md:mb-8
+                    /* 大屏笔记本字体 */
+                    lg:-mt-10 lg:text-[3.25rem] lg:leading-[110%] lg:mb-10
+                    /* 桌面端字体 */
+                    xl:-mt-12 xl:text-[3.375rem] xl:leading-[110%] xl:mb-12
+                    /* 大屏显示器字体 */
+                    2xl:-mt-16 2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-16"
+            >
+                {title}
+            </h2>
+            <p className="text-white font-normal text-center
+                    -mt-2
+                    /* 移动端字体 */
+                    text-[1rem] leading-[140%]
+                    /* 平板字体 */
+                    sm:-mt-3 sm:text-[1.25rem] sm:leading-[140%]
+                    /* 小屏笔记本字体 */
+                    md:-mt-4 md:text-[1.5rem] md:leading-[140%]
+                    /* 大屏笔记本字体 */
+                    lg:-mt-5 lg:text-[1.6rem] lg:leading-[140%]
+                    /* 桌面端字体 */
+                    xl:-mt-6 xl:text-[1.7rem] xl:leading-[140%]
+                    /* 大屏显示器字体 */
+                    2xl:-mt-8 2xl:text-[1.8rem] 2xl:leading-[140%]"
+            >
+                {subtitle}
+            </p>
+            <div data-alt="video-coverflow" className="w-screen sm:w-full mx-auto overflow-hidden">
+                <Swiper
+                    modules={[Autoplay, EffectCoverflow]}
+                    effect="coverflow"
+                    centeredSlides
+                    slidesPerView={isMobile ? 1 : 2}
+                    loop
+                    autoplay={{ delay: autoplayDelay, disableOnInteraction: false }}
+                    speed={1000}
+                    coverflowEffect={{
+                        rotate: -56,
+                        stretch: 10,
+                        depth: 80,
+                        scale: 0.6,
+                        modifier: 1,
+                        slideShadows: true,
+                    }}
+                    onAfterInit={handleAfterInit}
+                    onSlideChange={handleSlideChange}
+                    className="w-full py-8"
+                >
+                    {videos.map((src, index) => (
+                        <SwiperSlide key={src} className="select-none">
+                            <div data-alt="video-card" className={`${isMobile ? (activeIndex === index ? 'w-screen' : 'w-[80vw]') : 'w-[48vw]'} mx-auto aspect-video overflow-hidden rounded-xl shadow-lg`}>
+                                <video
+                                    data-alt="video"
+                                    ref={(el) => { videoRefs.current[index] = el; }}
+                                    src={src}
+                                    className="h-full w-full object-cover"
+                                    muted
+                                    playsInline
+                                    loop
+                                    preload="metadata"
+                                    onLoadedData={() => {
+                                        // 进入视口/初始化后，确保当前是激活项就播放
+                                        const sw = swiperRef.current;
+                                        if (!sw) return;
+                                        const isActive = (sw.realIndex ?? sw.activeIndex ?? 0) === index;
+                                        if (isActive) {
+                                            videoRefs.current[index]?.play().catch(() => {});
+                                        }
+                                    }}
+                                />
+                            </div>
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+            </div>
+        </div>
+    );
+};
+
+export default React.memo(VideoCoverflow);
+
+