This commit is contained in:
Timo Knuth
@@ -264,8 +264,7 @@ function NoiseToSignalVisual() {
|
||||
<motion.div
|
||||
animate={{
|
||||
opacity: phase === 0 ? 1 : 0,
|
||||
scale: phase === 0 ? 1 : 0.98,
|
||||
filter: phase === 0 ? 'blur(0px)' : 'blur(8px)'
|
||||
scale: phase === 0 ? 1 : 0.98
|
||||
}}
|
||||
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="space-y-3"
|
||||
@@ -705,110 +704,6 @@ export function Differentiators() {
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 5. SOCIAL PROOF - Testimonials (Prepared for Beta)
|
||||
// ============================================
|
||||
export function SocialProof() {
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "The noise filtering alone saves me 2 hours per week. Finally, monitoring that actually works.",
|
||||
author: "[Beta User]",
|
||||
role: "SEO Manager",
|
||||
company: "[Company]",
|
||||
useCase: "SEO Monitoring"
|
||||
},
|
||||
{
|
||||
quote: "We catch competitor price changes within minutes. Game-changer for our pricing strategy.",
|
||||
author: "[Beta User]",
|
||||
role: "Growth Lead",
|
||||
company: "[Company]",
|
||||
useCase: "Competitor Intelligence"
|
||||
},
|
||||
{
|
||||
quote: "Audit-proof history saved us during compliance review. Worth every penny.",
|
||||
author: "[Beta User]",
|
||||
role: "Compliance Officer",
|
||||
company: "[Company]",
|
||||
useCase: "Policy Tracking"
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-[hsl(var(--section-bg-2))] relative overflow-hidden">
|
||||
{/* Background Pattern - Subtle dots for light theme */}
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{
|
||||
backgroundImage: `radial-gradient(hsl(var(--foreground)) 1px, transparent 1px)`,
|
||||
backgroundSize: '24px 24px'
|
||||
}} />
|
||||
|
||||
<div className="mx-auto max-w-7xl px-6 relative z-10">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<motion.h2 variants={fadeInUp} className="text-4xl lg:text-5xl font-display font-bold text-foreground mb-6">
|
||||
Built for teams who need results,{' '}
|
||||
<span className="text-[hsl(var(--primary))]">not demos.</span>
|
||||
</motion.h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Testimonial Cards - Light Theme */}
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
whileHover={{ y: -4 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1, duration: 0.5 }}
|
||||
className="relative group h-full"
|
||||
>
|
||||
{/* Card Container */}
|
||||
<div className="h-full flex flex-col rounded-3xl bg-white border border-zinc-200 shadow-sm p-8 hover:shadow-xl transition-all duration-300">
|
||||
|
||||
{/* Quote Mark */}
|
||||
<div className="text-5xl font-display text-zinc-300 leading-none mb-4">
|
||||
"
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
<p className="font-body text-base leading-relaxed mb-8 text-zinc-900 font-medium italic flex-grow">
|
||||
{testimonial.quote}
|
||||
</p>
|
||||
|
||||
{/* Attribution */}
|
||||
<div className="flex items-start justify-between mt-auto pt-6 border-t border-zinc-100">
|
||||
<div>
|
||||
<p className="font-bold text-zinc-900 text-sm">{testimonial.author}</p>
|
||||
<p className="text-xs text-zinc-500">{testimonial.role} at {testimonial.company}</p>
|
||||
</div>
|
||||
<div className="px-3 py-1 rounded-full bg-zinc-100 border border-zinc-200 text-[10px] font-bold uppercase tracking-wider text-zinc-600">
|
||||
{testimonial.useCase}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Note */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mt-12 text-sm text-white/60"
|
||||
>
|
||||
Join our waitlist to become a beta tester and get featured here.
|
||||
</motion.p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 6. FINAL CTA - Get Started
|
||||
// ============================================
|
||||
@@ -827,7 +722,7 @@ export function FinalCTA() {
|
||||
rotate: [0, 180, 360]
|
||||
}}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute top-1/4 -left-20 h-[500px] w-[500px] rounded-full bg-[hsl(var(--primary))] blur-[140px]"
|
||||
className="absolute top-1/4 -left-20 h-[500px] w-[500px] rounded-full bg-[hsl(var(--primary))] blur-[60px]"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{
|
||||
@@ -836,7 +731,7 @@ export function FinalCTA() {
|
||||
rotate: [360, 180, 0]
|
||||
}}
|
||||
transition={{ duration: 15, repeat: Infinity, ease: "linear", delay: 2 }}
|
||||
className="absolute bottom-1/4 -right-20 h-[500px] w-[500px] rounded-full bg-[hsl(var(--teal))] blur-[140px]"
|
||||
className="absolute bottom-1/4 -right-20 h-[500px] w-[500px] rounded-full bg-[hsl(var(--teal))] blur-[60px]"
|
||||
/>
|
||||
|
||||
<div className="mx-auto max-w-4xl px-6 text-center relative z-10">
|
||||
@@ -868,15 +763,6 @@ export function FinalCTA() {
|
||||
custom={3}
|
||||
className="flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="w-2 h-2 rounded-full bg-green-500"
|
||||
/>
|
||||
<span className="font-semibold text-foreground">500+ joined this week</span>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="h-4 w-4 fill-current text-[hsl(var(--primary))]" />
|
||||
<span>Early access: <span className="font-semibold text-foreground">50% off for 6 months</span></span>
|
||||
|
||||
Reference in New Issue
Block a user