finstep-template-cli 1.0.1

package/template/src/components/global-loading.tsx

@@ -0,0 +1,143 @@
+// AI生成的代码 - 全局Loading组件
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { useStore } from "@/stores/store-context";
+import { motion, AnimatePresence } from "framer-motion";
+import logoSvg from "../assets/logo.svg";
+
+// AI生成的代码 - Logo动画变体
+const logoVariants = {
+  initial: {
+    scale: 1,
+    rotate: 0,
+  },
+  animate: {
+    scale: [1, 1.1, 1],
+    rotate: [0, 5, -5, 0],
+    transition: {
+      duration: 2,
+      repeat: Infinity,
+      ease: [0.4, 0, 0.6, 1] as const,
+    },
+  },
+};
+
+// AI生成的代码 - 粒子动画变体
+const particleVariants = {
+  initial: {
+    scale: 0,
+    opacity: 0,
+  },
+  animate: (i: number) => ({
+    scale: [0, 1, 0],
+    opacity: [0, 1, 0],
+    x: Math.cos((i * Math.PI * 2) / 6) * 40,
+    y: Math.sin((i * Math.PI * 2) / 6) * 40,
+    transition: {
+      duration: 2,
+      repeat: Infinity,
+      delay: i * 0.2,
+      ease: [0.4, 0, 0.6, 1] as const,
+    },
+  }),
+};
+
+const GlobalLoading: React.FC = observer(() => {
+  const { loadingStore } = useStore();
+
+  if (!loadingStore.isLoading) {
+    return null;
+  }
+
+  return (
+    <AnimatePresence>
+      {loadingStore.isLoading && (
+        <motion.div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <motion.div
+            className="p-8"
+            variants={logoVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+          >
+            <div className="flex flex-col items-center space-y-6">
+              {/* AI生成的代码 - 主要loading图标 */}
+              <div className="relative flex items-center justify-center">
+                {/* AI生成的代码 - 主Logo动画 */}
+                <motion.div
+                  className="relative z-10"
+                  variants={logoVariants}
+                  initial="initial"
+                  animate="animate"
+                >
+                  <img
+                    src={logoSvg}
+                    alt="Loading"
+                    className="w-16 h-16 object-contain"
+                  />
+                </motion.div>
+
+                {/* AI生成的代码 - 围绕Logo的粒子效果 */}
+                {Array.from({ length: 6 }).map((_, i) => (
+                  <motion.div
+                    key={i}
+                    className="absolute w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"
+                    variants={particleVariants}
+                    initial="initial"
+                    animate="animate"
+                    custom={i}
+                  />
+                ))}
+
+                {/* AI生成的代码 - 外圈光晕效果 */}
+                <motion.div
+                  className="absolute w-24 h-24 border-2 border-blue-500/30 rounded-full"
+                  animate={{
+                    scale: [1, 1.2, 1],
+                    opacity: [0.3, 0.6, 0.3],
+                    rotate: 360,
+                  }}
+                  transition={{
+                    duration: 3,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                  }}
+                />
+
+                {/* AI生成的代码 - 内圈光晕效果 */}
+                <motion.div
+                  className="absolute w-20 h-20 border border-purple-500/40 rounded-full"
+                  animate={{
+                    scale: [1.2, 1, 1.2],
+                    opacity: [0.2, 0.5, 0.2],
+                    rotate: -360,
+                  }}
+                  transition={{
+                    duration: 2.5,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                  }}
+                />
+              </div>
+
+              {/* AI生成的代码 - Loading文本 */}
+              <div className="text-center">
+                <h3 className="text-white text-lg font-semibold mb-2">
+                  {loadingStore.loadingText}
+                </h3>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+});
+
+export default GlobalLoading;

package/template/src/components/hero-section.tsx

@@ -0,0 +1,371 @@
+import { motion } from "framer-motion";
+import { useMemo, useEffect, useRef, useState } from "react";
+
+export default function HeroSection() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+  // Generate static particle data to avoid hydration mismatch
+  const particleData = useMemo(() => {
+    const particles = [];
+    const seed = 42; // Fixed seed for consistent results
+    let random = seed;
+
+    const seededRandom = () => {
+      random = (random * 9301 + 49297) % 233280;
+      return random / 233280;
+    };
+
+    for (let i = 0; i < 30; i++) {
+      particles.push({
+        id: i,
+        x: seededRandom() * 100,
+        y: seededRandom() * 100,
+        size: 1 + seededRandom() * 3,
+        speed: 0.5 + seededRandom() * 1.5,
+        direction: seededRandom() * Math.PI * 2,
+        opacity: 0.3 + seededRandom() * 0.7,
+        pulseSpeed: 2 + seededRandom() * 3,
+      });
+    }
+    return particles;
+  }, []);
+
+  const neuronsData = useMemo(() => {
+    const neurons = [];
+    const seed = 123;
+    let random = seed;
+
+    const seededRandom = () => {
+      random = (random * 9301 + 49297) % 233280;
+      return random / 233280;
+    };
+
+    for (let i = 0; i < 12; i++) {
+      neurons.push({
+        id: i,
+        x: 15 + seededRandom() * 70,
+        y: 15 + seededRandom() * 70,
+        size: 3 + seededRandom() * 4,
+        connections: Math.floor(seededRandom() * 3) + 1,
+      });
+    }
+    return neurons;
+  }, []);
+
+  // Mouse tracking for interactive effects
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePos({
+        x: (e.clientX / window.innerWidth) * 100,
+        y: (e.clientY / window.innerHeight) * 100,
+      });
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  // Canvas animation for dynamic effects
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const resizeCanvas = () => {
+      canvas.width = canvas.offsetWidth;
+      canvas.height = canvas.offsetHeight;
+    };
+
+    resizeCanvas();
+    window.addEventListener("resize", resizeCanvas);
+
+    let animationId: number;
+    let time = 0;
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Enhanced particle system
+      const drawParticles = () => {
+        particleData.forEach((particle, index) => {
+          const baseX = (particle.x / 100) * canvas.width;
+          const baseY = (particle.y / 100) * canvas.height;
+
+          // Complex movement pattern
+          const x =
+            baseX +
+            50 * Math.sin(time * 0.002 + particle.direction) * particle.speed +
+            20 * Math.cos(time * 0.001 + index) * particle.speed;
+          const y =
+            baseY +
+            40 * Math.cos(time * 0.0015 + particle.direction) * particle.speed +
+            15 * Math.sin(time * 0.003 + index) * particle.speed;
+
+          // Pulsing opacity
+          const opacity =
+            particle.opacity *
+            (0.5 + 0.5 * Math.sin(time * 0.004 * particle.pulseSpeed));
+
+          // Core particle
+          const gradient = ctx.createRadialGradient(
+            x,
+            y,
+            0,
+            x,
+            y,
+            particle.size * 3
+          );
+          gradient.addColorStop(0, `rgba(59, 130, 246, ${opacity})`);
+          gradient.addColorStop(0.5, `rgba(147, 51, 234, ${opacity * 0.6})`);
+          gradient.addColorStop(1, `rgba(6, 182, 212, 0)`);
+
+          ctx.fillStyle = gradient;
+          ctx.beginPath();
+          ctx.arc(x, y, particle.size * 2, 0, Math.PI * 2);
+          ctx.fill();
+
+          // Energy trails
+          if (index % 3 === 0) {
+            ctx.strokeStyle = `rgba(59, 130, 246, ${opacity * 0.3})`;
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            const trailLength = 30;
+            const prevX = x - Math.cos(particle.direction) * trailLength;
+            const prevY = y - Math.sin(particle.direction) * trailLength;
+            ctx.moveTo(prevX, prevY);
+            ctx.lineTo(x, y);
+            ctx.stroke();
+          }
+        });
+      };
+
+      // Neural network connections
+      const drawNeuralNetwork = () => {
+        neuronsData.forEach((neuron, i) => {
+          const neuronX = (neuron.x / 100) * canvas.width;
+          const neuronY = (neuron.y / 100) * canvas.height;
+
+          // Draw connections to nearby neurons
+          neuronsData.forEach((target, j) => {
+            if (i !== j) {
+              const targetX = (target.x / 100) * canvas.width;
+              const targetY = (target.y / 100) * canvas.height;
+              const distance = Math.sqrt(
+                Math.pow(targetX - neuronX, 2) + Math.pow(targetY - neuronY, 2)
+              );
+
+              if (distance < 200) {
+                const connectionOpacity = ((200 - distance) / 200) * 0.3;
+                const pulseEffect = 0.3 + 0.7 * Math.sin(time * 0.003 + i + j);
+
+                ctx.strokeStyle = `rgba(59, 130, 246, ${
+                  connectionOpacity * pulseEffect
+                })`;
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.moveTo(neuronX, neuronY);
+                ctx.lineTo(targetX, targetY);
+                ctx.stroke();
+              }
+            }
+          });
+
+          // Draw neuron nodes
+          const nodeOpacity = 0.7 + 0.3 * Math.sin(time * 0.004 + i);
+          const gradient = ctx.createRadialGradient(
+            neuronX,
+            neuronY,
+            0,
+            neuronX,
+            neuronY,
+            neuron.size * 2
+          );
+          gradient.addColorStop(0, `rgba(59, 130, 246, ${nodeOpacity})`);
+          gradient.addColorStop(1, `rgba(147, 51, 234, 0)`);
+
+          ctx.fillStyle = gradient;
+          ctx.beginPath();
+          ctx.arc(neuronX, neuronY, neuron.size, 0, Math.PI * 2);
+          ctx.fill();
+        });
+      };
+
+      drawParticles();
+      drawNeuralNetwork();
+
+      time += 16;
+      animationId = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      window.removeEventListener("resize", resizeCanvas);
+      cancelAnimationFrame(animationId);
+    };
+  }, [particleData, neuronsData]);
+
+  return (
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-slate-950 via-blue-950/20 to-slate-950">
+      {/* Enhanced Canvas Background */}
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 w-full h-full"
+        style={{ background: "transparent" }}
+      />
+
+      {/* Interactive Background Pattern */}
+      <div className="absolute inset-0">
+        <div
+          className="absolute inset-0 transition-all duration-1000 ease-out"
+          style={{
+            background: `
+              radial-gradient(circle at ${mousePos.x}% ${
+              mousePos.y
+            }%, rgba(59, 130, 246, 0.15) 0%, transparent 30%),
+              radial-gradient(circle at ${100 - mousePos.x}% ${
+              100 - mousePos.y
+            }%, rgba(147, 51, 234, 0.1) 0%, transparent 40%),
+              radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 60%)
+            `,
+          }}
+        />
+      </div>
+
+      {/* Enhanced Floating Elements */}
+      <div className="absolute inset-0 pointer-events-none">
+        {/* Large energy orbs */}
+        <div
+          className="absolute w-96 h-96 rounded-full blur-3xl opacity-30"
+          style={{
+            top: "20%",
+            left: "15%",
+            background:
+              "linear-gradient(45deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.3))",
+            animation: "energyOrb1 12s ease-in-out infinite",
+          }}
+        />
+        <div
+          className="absolute w-80 h-80 rounded-full blur-3xl opacity-25"
+          style={{
+            bottom: "20%",
+            right: "15%",
+            background:
+              "linear-gradient(135deg, rgba(147, 51, 234, 0.4), rgba(236, 72, 153, 0.3))",
+            animation: "energyOrb2 15s ease-in-out infinite reverse",
+          }}
+        />
+        <div
+          className="absolute w-64 h-64 rounded-full blur-2xl opacity-40"
+          style={{
+            top: "60%",
+            right: "25%",
+            background:
+              "linear-gradient(90deg, rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.3))",
+            animation: "energyOrb3 10s ease-in-out infinite",
+          }}
+        />
+
+        {/* Smaller floating elements */}
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div
+            key={i}
+            className="absolute w-4 h-4 bg-blue-400/30 rounded-full blur-sm"
+            style={{
+              left: `${20 + i * 10}%`,
+              top: `${30 + i * 5}%`,
+              animation: `floatSmall ${5 + i}s linear infinite`,
+              animationDelay: `${i * 0.5}s`,
+            }}
+          />
+        ))}
+      </div>
+
+      {/* Holographic UI Elements */}
+      <div className="absolute inset-0 pointer-events-none">
+        {/* Corner brackets */}
+        <div className="absolute top-8 left-8 w-16 h-16 border-l-2 border-t-2 border-cyan-400/40 animate-pulse"></div>
+        <div
+          className="absolute top-8 right-8 w-16 h-16 border-r-2 border-t-2 border-cyan-400/40 animate-pulse"
+          style={{ animationDelay: "0.5s" }}
+        ></div>
+        <div
+          className="absolute bottom-8 left-8 w-16 h-16 border-l-2 border-b-2 border-cyan-400/40 animate-pulse"
+          style={{ animationDelay: "1s" }}
+        ></div>
+        <div
+          className="absolute bottom-8 right-8 w-16 h-16 border-r-2 border-b-2 border-cyan-400/40 animate-pulse"
+          style={{ animationDelay: "1.5s" }}
+        ></div>
+      </div>
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
+        <div className="text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="mb-8"
+          >
+            <span className="inline-flex items-center bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-500/20 rounded-full px-6 py-3 text-blue-300 text-sm font-medium backdrop-blur-sm">
+              <div className="w-2 h-2 bg-blue-400 rounded-full mr-3 animate-pulse"></div>
+              智能金融科技解决方案
+            </span>
+          </motion.div>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="text-5xl md:text-7xl font-bold text-white mb-8 leading-tight"
+          >
+            构建智能金融
+            <br />
+            <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+              数字化未来
+            </span>
+          </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            className="text-xl text-slate-300 mb-16 max-w-3xl mx-auto leading-relaxed"
+          >
+            上海财跃星辰智能科技有限公司，是一家专注于金融领域的大模型科技公司，核心优势在于全面且深度的专业金融知识体系，强大的多模态处理能力和不断进化的金融推理能力。
+          </motion.p>
+
+          {/* Trust Indicators */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="flex flex-col sm:flex-row items-center justify-center gap-8 text-slate-400"
+          >
+            <div className="flex items-center">
+              <div className="w-6 h-6 flex items-center justify-center mr-2">
+                <i className="ri-shield-check-line text-green-400"></i>
+              </div>
+              <span>银行级安全认证</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-6 h-6 flex items-center justify-center mr-2">
+                <i className="ri-award-line text-blue-400"></i>
+              </div>
+              <span>500+ 企业信赖</span>
+            </div>
+            <div className="flex items-center">
+              <div className="w-6 h-6 flex items-center justify-center mr-2">
+                <i className="ri-time-line text-purple-400"></i>
+              </div>
+              <span>7×24小时支持</span>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/components/products-preview.tsx

@@ -0,0 +1,175 @@
+import { motion } from "framer-motion";
+
+export default function ProductsPreview() {
+  const productCategories = [
+    {
+      title: "智能风控",
+      description: "基于AI的全面风险管理解决方案",
+      icon: "ri-shield-check-line",
+      products: ["反欺诈检测", "信用评估", "风险预警", "合规监管"],
+      color: "from-blue-500 to-cyan-500",
+      bgColor: "bg-blue-500/10",
+      borderColor: "border-blue-500/20",
+    },
+    {
+      title: "量化交易",
+      description: "专业的量化投资与交易平台",
+      icon: "ri-line-chart-line",
+      products: ["策略开发", "回测分析", "自动交易", "风险控制"],
+      color: "from-purple-500 to-pink-500",
+      bgColor: "bg-purple-500/10",
+      borderColor: "border-purple-500/20",
+    },
+    {
+      title: "智能投顾",
+      description: "个性化投资建议与资产配置",
+      icon: "ri-lightbulb-line",
+      products: ["投资建议", "资产配置", "市场分析", "客户服务"],
+      color: "from-green-500 to-teal-500",
+      bgColor: "bg-green-500/10",
+      borderColor: "border-green-500/20",
+    },
+    {
+      title: "数据分析",
+      description: "深度挖掘金融数据价值",
+      icon: "ri-bar-chart-line",
+      products: ["数据建模", "预测分析", "可视化", "报告生成"],
+      color: "from-orange-500 to-red-500",
+      bgColor: "bg-orange-500/10",
+      borderColor: "border-orange-500/20",
+    },
+  ];
+
+  return (
+    <section className="bg-slate-950 py-24">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* AI生成的代码 - 优化后的Header动画 */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+          viewport={{ once: true, margin: "-50px" }}
+          className="text-center mb-20"
+        >
+          <div className="inline-flex items-center bg-blue-500/10 border border-blue-500/20 rounded-full px-6 py-2 text-blue-300 text-sm font-medium mb-6">
+            产品矩阵
+          </div>
+          <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+            全栈式AI金融产品
+          </h2>
+          <p className="text-xl text-slate-300 max-w-3xl mx-auto leading-relaxed">
+            覆盖金融业务全场景的AI产品体系，提供从数据采集到业务决策的完整解决方案
+          </p>
+        </motion.div>
+
+        {/* AI生成的代码 - 优化后的Product Categories Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
+          {productCategories.map((category, index) => (
+            <motion.div
+              key={category.title}
+              initial={{ opacity: 0, y: 15 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.4,
+                delay: index * 0.05,
+                ease: "easeOut",
+              }}
+              viewport={{ once: true, margin: "-30px" }}
+              className={`group relative ${category.bgColor} ${category.borderColor} border rounded-2xl p-8 hover:scale-[1.01] transition-transform duration-200 cursor-pointer`}
+            >
+              <div className="flex items-start justify-between mb-6">
+                <div
+                  className={`w-16 h-16 rounded-xl bg-gradient-to-r ${category.color} flex items-center justify-center`}
+                >
+                  <div className="w-8 h-8 flex items-center justify-center">
+                    <i className={`${category.icon} text-white text-2xl`}></i>
+                  </div>
+                </div>
+                <div className="w-6 h-6 flex items-center justify-center opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all">
+                  <i className="ri-arrow-right-up-line text-slate-400"></i>
+                </div>
+              </div>
+
+              <h3 className="text-2xl font-bold text-white mb-3">
+                {category.title}
+              </h3>
+              <p className="text-slate-300 mb-6 leading-relaxed">
+                {category.description}
+              </p>
+
+              <div className="flex flex-wrap gap-2">
+                {category.products.map((product) => (
+                  <span
+                    key={product}
+                    className="px-3 py-1 bg-slate-800/50 text-slate-300 text-sm rounded-full border border-slate-700"
+                  >
+                    {product}
+                  </span>
+                ))}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Core Features */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="bg-gradient-to-r from-slate-900/50 to-slate-800/30 border border-slate-700 rounded-2xl p-8 md:p-12 mb-16"
+        >
+          <div className="text-center mb-12">
+            <h3 className="text-3xl font-bold text-white mb-4">核心技术优势</h3>
+            <p className="text-slate-300 max-w-2xl mx-auto">
+              基于深度学习与大数据技术，为金融机构提供稳定可靠的AI服务
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="text-center">
+              <div className="w-20 h-20 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                <div className="w-10 h-10 flex items-center justify-center">
+                  <i className="ri-brain-line text-blue-400 text-3xl"></i>
+                </div>
+              </div>
+              <h4 className="text-xl font-semibold text-white mb-2">
+                阶跃模型
+              </h4>
+              <p className="text-slate-400">
+                先进的神经网络模型，持续优化预测准确率
+              </p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-20 h-20 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                <div className="w-10 h-10 flex items-center justify-center">
+                  <i className="ri-database-2-line text-purple-400 text-3xl"></i>
+                </div>
+              </div>
+              <h4 className="text-xl font-semibold text-white mb-2">
+                财联社数据
+              </h4>
+              <p className="text-slate-400">
+                高性能数据处理引擎，支持海量数据实时分析
+              </p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-20 h-20 bg-gradient-to-r from-green-500/20 to-teal-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                <div className="w-10 h-10 flex items-center justify-center">
+                  <i className="ri-shield-check-line text-green-400 text-3xl"></i>
+                </div>
+              </div>
+              <h4 className="text-xl font-semibold text-white mb-2">
+                安全可靠
+              </h4>
+              <p className="text-slate-400">
+                银行级安全标准，全方位保障数据安全
+              </p>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}