refactor: remove service detail modal component

2026-02-26 21:24:59 +08:00
parent 686a02b233
commit 1e1c68670b
11 changed files with 611 additions and 601 deletions
@@ -0,0 +1,75 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { InkBackground } from '@/components/ui/ink-decoration';
+import { DataParticleFlow } from '@/components/effects/data-particle-flow';
+import { SubtleDots } from '@/components/effects/subtle-dots';
+
+interface PageHeaderProps {
+  badge?: string;
+  title: string;
+  description?: string;
+  className?: string;
+}
+
+export function PageHeader({ badge, title, description, className = '' }: PageHeaderProps) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: '-100px' });
+
+  return (
+    <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
+      <InkBackground />
+      <DataParticleFlow
+        particleCount={40}
+        color="#C41E3A"
+        intensity="subtle"
+        shape="square"
+        effect="pulse"
+      />
+      <SubtleDots color="#C41E3A" count={6} />
+      
+      <div className="container-wide relative z-10 pt-32 pb-20" ref={ref}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className={`max-w-4xl mx-auto text-center ${className}`}
+        >
+          {badge && (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className="mb-6"
+            >
+              <Badge variant="outline">{badge}</Badge>
+            </motion.div>
+          )}
+          
+          <motion.h1
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-4xl sm:text-5xl font-bold text-[#1C1C1C] mb-6"
+          >
+            {title}
+          </motion.h1>
+          
+          {description && (
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.6, delay: 0.3 }}
+              className="text-lg text-[#5C5C5C] max-w-2xl mx-auto leading-relaxed"
+            >
+              {description}
+            </motion.p>
+          )}
+        </motion.div>
+      </div>
+    </div>
+  );
+}