tknuth/website-monitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gitea +

Browse Source
This commit is contained in:
knuthtimo-lab
2026-01-21 08:21:19 +01:00
parent 4733e1a1cc
commit fd6e7c44e1
46 changed files with 3165 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/components/landing/CompetitorDemoVisual.tsx
View File

@@ -36,9 +36,9 @@ export function CompetitorDemoVisual() {
<motion.div
className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative overflow-hidden shadow-xl"
animate={{
borderColor: phase === 1 ? '#ef4444' : '#27272a',
borderColor: phase === 1 ? 'hsl(var(--burgundy))' : '#27272a',
boxShadow: phase === 1
? '0 0 20px rgba(239, 68, 68, 0.2)'
? '0 0 20px hsl(var(--burgundy) / 0.2)'
: '0 1px 3px rgba(0,0,0,0.5)'
}}
transition={{ duration: 0.5 }}
@@ -49,7 +49,7 @@ export function CompetitorDemoVisual() {
initial={{ x: '-100%', skewX: -20 }}
animate={{ x: '200%' }}
transition={{ duration: 0.8, ease: 'easeInOut' }}
className="absolute inset-0 bg-gradient-to-r from-transparent via-red-500/10 to-transparent"
className="absolute inset-0 bg-gradient-to-r from-transparent via-[hsl(var(--burgundy))]/10 to-transparent"
/>
)}
@@ -67,7 +67,7 @@ export function CompetitorDemoVisual() {
className="text-3xl font-bold"
animate={{
textDecoration: phase === 1 ? 'line-through' : 'none',
color: phase === 1 ? '#ef4444' : '#f4f4f5'
color: phase === 1 ? 'hsl(var(--burgundy))' : '#f4f4f5'
}}
>
$99
@@ -84,14 +84,14 @@ export function CompetitorDemoVisual() {
transition={{ delay: 0.1, type: 'spring', stiffness: 300, damping: 20 }}
className="flex items-center gap-3 mt-1"
>
<div className="flex items-center justify-center h-6 w-6 rounded-full bg-red-500/10">
<ArrowDown className="h-4 w-4 text-red-500" strokeWidth={3} />
<div className="flex items-center justify-center h-6 w-6 rounded-full bg-[hsl(var(--burgundy))]/10">
<ArrowDown className="h-4 w-4 text-[hsl(var(--burgundy))]" strokeWidth={3} />
</div>
<div className="flex items-baseline gap-2">
<span className="text-5xl font-extrabold text-[#ff0000] tracking-tight">
<span className="text-5xl font-extrabold text-[hsl(var(--burgundy))] tracking-tight">
$79
</span>
<span className="text-sm font-medium text-red-500">/month</span>
<span className="text-sm font-medium text-[hsl(var(--burgundy))]">/month</span>
</div>
</motion.div>
)}
@@ -102,9 +102,9 @@ export function CompetitorDemoVisual() {
initial={{ opacity: 0, scale: 0.8, rotate: -3 }}
animate={{ opacity: 1, scale: 1, rotate: 0 }}
transition={{ delay: 0.3, type: 'spring' }}
className="mt-2 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-500/10 border border-red-500/20"
className="mt-2 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/20"
>
<span className="text-[10px] font-extrabold text-red-500 uppercase tracking-wider">
<span className="text-[10px] font-extrabold text-[hsl(var(--burgundy))] uppercase tracking-wider">
Save $240/year
</span>
</motion.div>
@@ -119,17 +119,17 @@ export function CompetitorDemoVisual() {
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-red-500/10 border border-red-500/30"
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-red-500" />
<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-red-500"
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-red-500">
<span className="text-[9px] font-semibold text-[hsl(var(--burgundy))]">
Alert sent to your team
</span>
</motion.div>