Añade personalización SEO/Quiénes somos y testimonios gestionables por reformista
- Panel/empresa: title y meta description SEO personalizables; foto, texto y años de experiencia para el bloque "Quiénes somos" (toggle on/off). - Funnel por slug: metadata SEO desde el tenant, bloque "Quiénes somos" y testimonios servidos desde DB (sustituye los hardcodeados). - Flujo de opiniones: el reformista solicita la opinión desde la ficha de un lead ganado; el cliente la deja en un funnel dedicado /opinion/[id] con estrellas + texto + fotos; entra como pendiente y el reformista la modera (publicar/ocultar/eliminar) en /panel/opiniones antes de mostrarla. - Schema: columnas SEO/about en tenants, testimonioSolicitadoAt en leads, enum testimonio_estado, tablas testimonios + testimonio_fotos (migración 0006). - Seed: opiniones demo (2 publicadas, 1 pendiente) y contenido "Quiénes somos". Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Carlos Narro
169
mvp/b2c/src/components/funnel/OpinionForm.tsx
Normal file
169
mvp/b2c/src/components/funnel/OpinionForm.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
'use client';
|
||||
|
||||
import { useActionState, useState } from 'react';
|
||||
import { useFormStatus } from 'react-dom';
|
||||
import type { EnviarOpinionResult } from '@/app/opinion/actions';
|
||||
|
||||
const MAX_FOTOS = 4;
|
||||
|
||||
const inputClass =
|
||||
'w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] border-gray-200 rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)]';
|
||||
|
||||
function Estrella({ filled }: { filled: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className={`w-9 h-9 ${filled ? 'fill-yellow-400' : 'fill-gray-200'}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SubmitButton() {
|
||||
const { pending } = useFormStatus();
|
||||
return (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-lg w-full justify-center mt-1 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
disabled={pending}
|
||||
aria-busy={pending}
|
||||
>
|
||||
{pending ? 'Enviando...' : 'Enviar mi opinión'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default function OpinionForm({
|
||||
action,
|
||||
nombreCliente,
|
||||
}: {
|
||||
action: (prev: EnviarOpinionResult | null, formData: FormData) => Promise<EnviarOpinionResult>;
|
||||
nombreCliente: string;
|
||||
}) {
|
||||
const [state, formAction] = useActionState(action, null);
|
||||
const [rating, setRating] = useState(0);
|
||||
const [hover, setHover] = useState(0);
|
||||
const [previews, setPreviews] = useState<string[]>([]);
|
||||
|
||||
const handleFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files ?? []).slice(0, MAX_FOTOS);
|
||||
previews.forEach((url) => URL.revokeObjectURL(url));
|
||||
setPreviews(files.map((f) => URL.createObjectURL(f)));
|
||||
};
|
||||
|
||||
if (state?.ok) {
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-8 text-center flex flex-col gap-3">
|
||||
<span className="text-4xl" aria-hidden="true">
|
||||
🙌
|
||||
</span>
|
||||
<h2 className="text-xl font-black text-black">¡Gracias por tu opinión!</h2>
|
||||
<p className="text-sm text-gray-500">
|
||||
La hemos recibido correctamente. Aparecerá en la web del reformista una vez la revise.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form action={formAction} className="flex flex-col gap-5">
|
||||
<input type="hidden" name="rating" value={rating} />
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-semibold text-dark">Tu valoración</span>
|
||||
<div className="flex gap-1" role="radiogroup" aria-label="Valoración de 1 a 5 estrellas">
|
||||
{[1, 2, 3, 4, 5].map((n) => (
|
||||
<button
|
||||
key={n}
|
||||
type="button"
|
||||
onClick={() => setRating(n)}
|
||||
onMouseEnter={() => setHover(n)}
|
||||
onMouseLeave={() => setHover(0)}
|
||||
aria-label={`${n} estrella${n > 1 ? 's' : ''}`}
|
||||
aria-checked={rating === n}
|
||||
role="radio"
|
||||
className="p-0.5"
|
||||
>
|
||||
<Estrella filled={n <= (hover || rating)} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="texto" className="text-sm font-semibold text-dark">
|
||||
¿Cómo fue tu experiencia?
|
||||
</label>
|
||||
<textarea
|
||||
id="texto"
|
||||
name="texto"
|
||||
rows={5}
|
||||
placeholder="Cuéntanos cómo fue el trato, el resultado de la reforma, los plazos…"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="nombre" className="text-sm font-semibold text-dark">
|
||||
Tu nombre
|
||||
</label>
|
||||
<input
|
||||
id="nombre"
|
||||
name="nombre"
|
||||
type="text"
|
||||
defaultValue={nombreCliente}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="contexto" className="text-sm font-semibold text-dark">
|
||||
Reforma <span className="text-gray-400 font-normal">(opcional)</span>
|
||||
</label>
|
||||
<input
|
||||
id="contexto"
|
||||
name="contexto"
|
||||
type="text"
|
||||
placeholder="Reforma de cocina · Madrid"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="fotos" className="text-sm font-semibold text-dark">
|
||||
Sube fotos del resultado{' '}
|
||||
<span className="text-gray-400 font-normal">(opcional, hasta {MAX_FOTOS})</span>
|
||||
</label>
|
||||
<input
|
||||
id="fotos"
|
||||
name="fotos"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
onChange={handleFiles}
|
||||
className="block w-full text-sm text-gray-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-black file:text-white hover:file:bg-gray-800 file:cursor-pointer cursor-pointer"
|
||||
/>
|
||||
{previews.length > 0 && (
|
||||
<div className="flex flex-wrap gap-3 mt-2">
|
||||
{previews.map((url, i) => (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
key={i}
|
||||
src={url}
|
||||
alt=""
|
||||
className="w-20 h-20 object-cover rounded-lg border border-gray-200"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{state?.error && <p className="text-sm text-red-600">{state.error}</p>}
|
||||
|
||||
<SubmitButton />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
50
mvp/b2c/src/components/funnel/QuienesSomos.tsx
Normal file
50
mvp/b2c/src/components/funnel/QuienesSomos.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
type QuienesSomosProps = {
|
||||
nombreEmpresa: string;
|
||||
fotoUrl: string | null;
|
||||
texto: string;
|
||||
aniosExperiencia: number | null;
|
||||
};
|
||||
|
||||
export default function QuienesSomos({
|
||||
nombreEmpresa,
|
||||
fotoUrl,
|
||||
texto,
|
||||
aniosExperiencia,
|
||||
}: QuienesSomosProps) {
|
||||
return (
|
||||
<section className="section" id="quienes-somos" aria-labelledby="quienes-somos-heading">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 lg:gap-16 items-center">
|
||||
{fotoUrl && (
|
||||
<div className="order-1 md:order-none">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={fotoUrl}
|
||||
alt={nombreEmpresa}
|
||||
className="w-full aspect-[4/3] object-cover rounded-2xl border border-gray-200 shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-5">
|
||||
<span className="badge badge-dark self-start">Quiénes somos</span>
|
||||
<h2
|
||||
id="quienes-somos-heading"
|
||||
className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black"
|
||||
>
|
||||
{nombreEmpresa}
|
||||
</h2>
|
||||
{aniosExperiencia != null && aniosExperiencia > 0 && (
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-4xl font-black text-black">{aniosExperiencia}</span>
|
||||
<span className="text-lg text-gray-600">
|
||||
año{aniosExperiencia === 1 ? '' : 's'} de experiencia
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-lg text-gray-700 leading-relaxed whitespace-pre-line">{texto}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
113
mvp/b2c/src/components/funnel/TestimoniosCliente.tsx
Normal file
113
mvp/b2c/src/components/funnel/TestimoniosCliente.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { PublicTestimonio } from '@/lib/funnel/public-queries';
|
||||
|
||||
function iniciales(nombre: string): string {
|
||||
return nombre
|
||||
.split(/\s+/)
|
||||
.slice(0, 2)
|
||||
.map((p) => p[0]?.toUpperCase() ?? '')
|
||||
.join('');
|
||||
}
|
||||
|
||||
function Estrellas({ rating }: { rating: number }) {
|
||||
return (
|
||||
<div className="flex gap-0.5" aria-label={`${rating} de 5 estrellas`}>
|
||||
{[1, 2, 3, 4, 5].map((n) => (
|
||||
<svg
|
||||
key={n}
|
||||
viewBox="0 0 24 24"
|
||||
className={`w-4 h-4 ${n <= rating ? 'fill-yellow-400' : 'fill-gray-200'}`}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TestimoniosCliente({ testimonios }: { testimonios: PublicTestimonio[] }) {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('opacity-100', 'translate-y-0');
|
||||
entry.target.classList.remove('opacity-0', 'translate-y-6');
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
const elements = sectionRef.current?.querySelectorAll('.reveal');
|
||||
elements?.forEach((el) => observer.observe(el));
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
className="section"
|
||||
id="testimonios"
|
||||
ref={sectionRef}
|
||||
aria-labelledby="testimonios-heading"
|
||||
>
|
||||
<div className="container">
|
||||
<div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out flex flex-col items-center text-center gap-4 mb-16">
|
||||
<span className="badge badge-dark">Testimonios</span>
|
||||
<h2
|
||||
id="testimonios-heading"
|
||||
className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black max-w-3xl"
|
||||
>
|
||||
Lo que dicen
|
||||
<br />
|
||||
quienes ya reformaron.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
|
||||
{testimonios.map((t, i) => (
|
||||
<article
|
||||
key={t.id}
|
||||
className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out flex flex-col gap-5 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm hover:shadow-md"
|
||||
style={{ transitionDelay: `${i * 80}ms` }}
|
||||
>
|
||||
<Estrellas rating={t.rating} />
|
||||
|
||||
<blockquote className="text-lg leading-relaxed text-gray-800 italic">
|
||||
{t.texto}
|
||||
</blockquote>
|
||||
|
||||
{t.fotos.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{t.fotos.map((url, idx) => (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
key={idx}
|
||||
src={url}
|
||||
alt=""
|
||||
className="w-16 h-16 object-cover rounded-lg border border-gray-200"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<footer className="flex items-center gap-3 mt-auto pt-4 border-t border-gray-100">
|
||||
<div className="w-10 h-10 bg-black text-white rounded-full flex items-center justify-center text-xs font-bold tracking-wider shrink-0">
|
||||
{iniciales(t.nombre)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-black">{t.nombre}</div>
|
||||
{t.contexto && <div className="text-xs text-gray-500">{t.contexto}</div>}
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user