gitea

frontend/components/landing/CompetitorDemoVisual.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState, useEffect } from 'react'
+import { Bell, ArrowDown } from 'lucide-react'
+
+export function CompetitorDemoVisual() {
+  const [phase, setPhase] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPhase(p => (p + 1) % 2)
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="relative h-full min-h-[200px] bg-gradient-to-br from-background via-background to-[hsl(var(--primary))]/5 rounded-xl p-4 overflow-hidden">
+      {/* Browser Header */}
+      <div className="mb-3 flex items-center gap-2 px-2 py-1.5 rounded-md bg-secondary/50 border border-border">
+        <div className="flex gap-1">
+          <div className="w-1.5 h-1.5 rounded-full bg-red-400" />
+          <div className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
+          <div className="w-1.5 h-1.5 rounded-full bg-green-400" />
+        </div>
+        <div className="text-[9px] text-muted-foreground font-mono">
+          competitor.com/pricing
+        </div>
+      </div>
+
+      {/* Pricing Table */}
+      <div className="space-y-3">
+        <h4 className="text-xs font-bold text-foreground">Professional Plan</h4>
+
+        {/* Price Card */}
+        <motion.div
+          className="p-4 rounded-xl border-2 bg-white relative overflow-hidden"
+          animate={{
+            borderColor: phase === 1 ? 'hsl(var(--teal))' : 'hsl(var(--border))',
+            boxShadow: phase === 1
+              ? '0 0 20px hsl(var(--teal) / 0.3)'
+              : '0 1px 3px rgba(0,0,0,0.1)'
+          }}
+          transition={{ duration: 0.5 }}
+        >
+          {/* Shine effect on change */}
+          {phase === 1 && (
+            <motion.div
+              initial={{ x: '-100%' }}
+              animate={{ x: '200%' }}
+              transition={{ duration: 0.8, ease: 'easeInOut' }}
+              className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent"
+              style={{ transform: 'skewX(-20deg)' }}
+            />
+          )}
+
+          <div className="relative z-10 space-y-2">
+            {/* Old Price */}
+            <motion.div
+              animate={{
+                opacity: phase === 1 ? 0.4 : 1,
+                scale: phase === 1 ? 0.95 : 1
+              }}
+              transition={{ duration: 0.3 }}
+            >
+              <div className="flex items-baseline gap-2">
+                <motion.span
+                  className="text-3xl font-bold"
+                  animate={{
+                    textDecoration: phase === 1 ? 'line-through' : 'none',
+                    color: phase === 1 ? 'hsl(var(--muted-foreground))' : 'hsl(var(--foreground))'
+                  }}
+                >
+                  $99
+                </motion.span>
+                <span className="text-sm text-muted-foreground">/month</span>
+              </div>
+            </motion.div>
+
+            {/* New Price with animated arrow */}
+            {phase === 1 && (
+              <motion.div
+                initial={{ opacity: 0, x: -10, scale: 0.9 }}
+                animate={{ opacity: 1, x: 0, scale: 1 }}
+                transition={{ delay: 0.2, type: 'spring', stiffness: 300, damping: 20 }}
+                className="flex items-center gap-2"
+              >
+                <ArrowDown className="h-4 w-4 text-[hsl(var(--teal))]" />
+                <div className="flex items-baseline gap-2">
+                  <span className="text-4xl font-bold text-[hsl(var(--teal))]">
+                    $79
+                  </span>
+                  <span className="text-sm text-muted-foreground">/month</span>
+                </div>
+              </motion.div>
+            )}
+
+            {/* Savings Badge */}
+            {phase === 1 && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.8, rotate: -5 }}
+                animate={{ opacity: 1, scale: 1, rotate: 0 }}
+                transition={{ delay: 0.4, type: 'spring' }}
+                className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-[hsl(var(--teal))]/10 border border-[hsl(var(--teal))]/30"
+              >
+                <span className="text-[9px] font-bold text-[hsl(var(--teal))] uppercase tracking-wider">
+                  Save $240/year
+                </span>
+              </motion.div>
+            )}
+          </div>
+        </motion.div>
+
+        {/* Alert Notification */}
+        {phase === 1 && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            transition={{ delay: 0.6 }}
+            className="flex items-center gap-2 p-2 rounded-lg bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/30"
+          >
+            <div className="relative flex-shrink-0">
+              <Bell className="h-3 w-3 text-[hsl(var(--burgundy))]" />
+              <motion.span
+                animate={{ scale: [1, 1.3, 1] }}
+                transition={{ duration: 1, repeat: Infinity }}
+                className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-[hsl(var(--burgundy))]"
+              />
+            </div>
+            <span className="text-[9px] font-semibold text-[hsl(var(--burgundy))]">
+              Alert sent to your team
+            </span>
+          </motion.div>
+        )}
+      </div>
+    </div>
+  )
+}