84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
|
|
const stars = Array.from({ length: 5 }, (_, i) => i);
|
|
|
|
export function SignupTestimonialPanel() {
|
|
const [imgError, setImgError] = useState(false);
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
|
className="flex flex-col gap-8"
|
|
>
|
|
{/* Testimonial card */}
|
|
<div className="rounded-2xl border border-border/60 bg-white/90 p-6 shadow-lg shadow-black/5 backdrop-blur-sm">
|
|
<div className="flex gap-1 mb-4">
|
|
{stars.map((i) => (
|
|
<svg
|
|
key={i}
|
|
className="h-5 w-5 text-amber-400"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
aria-hidden
|
|
>
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
</svg>
|
|
))}
|
|
</div>
|
|
<blockquote className="text-foreground text-base leading-relaxed">
|
|
“LedgerOne helped us understand cash flow before problems surfaced. The experience feels fast, clear, and built for modern finance teams.”
|
|
</blockquote>
|
|
<footer className="mt-4">
|
|
<p className="text-sm font-semibold text-foreground">Sarah Chen</p>
|
|
<p className="text-xs text-muted-foreground">Head of Finance, Northwind</p>
|
|
</footer>
|
|
</div>
|
|
|
|
{/* Dashboard preview */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.15, ease: [0.16, 1, 0.3, 1] }}
|
|
className="relative overflow-hidden rounded-2xl border border-border/60 bg-slate-900/95 shadow-2xl shadow-black/10"
|
|
>
|
|
<div className="aspect-[4/3] relative bg-slate-900">
|
|
{!imgError ? (
|
|
<Image
|
|
src="/images/dashboard-hero.png"
|
|
alt="LedgerOne dashboard preview"
|
|
fill
|
|
className="object-cover opacity-90"
|
|
sizes="(max-width: 768px) 100vw, 480px"
|
|
priority
|
|
onError={() => setImgError(true)}
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-800 via-slate-900 to-primary/20 flex items-center justify-center">
|
|
<div className="text-center text-white/80 text-sm px-6">
|
|
<p className="font-medium">Your dashboard</p>
|
|
<p className="mt-1 opacity-80">Cash flow, insights, and AI predictions in one place.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent pointer-events-none" />
|
|
</div>
|
|
{/* Floating insight card */}
|
|
<div className="absolute bottom-4 left-4 right-4 rounded-xl border border-emerald-400/30 bg-white/95 px-4 py-3 shadow-lg backdrop-blur-sm">
|
|
<p className="text-xs text-slate-700 leading-relaxed">
|
|
<span className="font-semibold text-emerald-600">AI insight:</span> Your runway is healthy. Safe to spend up to $2,400 this week.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<p className="text-center text-xs text-muted-foreground">
|
|
Join 50,000+ teams who trust LedgerOne for financial clarity.
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
}
|