91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Plus_Jakarta_Sans, Space_Grotesk } from "next/font/google";
|
|
import Wizard from "@/components/Wizard";
|
|
import { CATEGORIES } from "@/lib/categories";
|
|
import PromptPreview from "@/app/components/PromptPreview";
|
|
|
|
const bodyFont = Plus_Jakarta_Sans({ subsets: ["latin"], weight: ["400", "500", "600"] });
|
|
const titleFont = Space_Grotesk({ subsets: ["latin"], weight: ["500", "600", "700"] });
|
|
|
|
export default function PromptsPage() {
|
|
const [step, setStep] = useState(0);
|
|
const [answers, setAnswers] = useState<Record<string, string>>({});
|
|
const [isComplete, setIsComplete] = useState(false);
|
|
|
|
const handleNext = () => {
|
|
if (step < CATEGORIES.length - 1) {
|
|
setStep((prev) => prev + 1);
|
|
return;
|
|
}
|
|
setIsComplete(true);
|
|
};
|
|
|
|
const handlePrev = () => {
|
|
setStep((prev) => Math.max(0, prev - 1));
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setIsComplete(false);
|
|
setStep(0);
|
|
};
|
|
|
|
const handleAnswerChange = (id: string, value: string) => {
|
|
setAnswers((prev) => ({ ...prev, [id]: value }));
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`relative min-h-screen overflow-hidden bg-slate-50 ${bodyFont.className}`}
|
|
>
|
|
<div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,_#fff7ed_0%,_#f8fafc_45%,_#e2e8f0_100%)]" />
|
|
<div className="absolute -top-24 right-10 -z-10 h-72 w-72 rounded-full bg-amber-200/60 blur-3xl animate-[float-slow_12s_ease-in-out_infinite]" />
|
|
<div className="absolute bottom-0 left-0 -z-10 h-80 w-80 rounded-full bg-slate-200/70 blur-3xl animate-[float-slow_14s_ease-in-out_infinite]" />
|
|
<div className="absolute inset-0 -z-10 bg-[linear-gradient(90deg,_rgba(15,23,42,0.05)_1px,_transparent_1px),linear-gradient(180deg,_rgba(15,23,42,0.05)_1px,_transparent_1px)] bg-[size:120px_120px] opacity-30" />
|
|
|
|
<main className="mx-auto flex min-h-screen w-full max-w-6xl flex-col gap-10 px-6 py-12 md:px-10">
|
|
<header
|
|
className="flex flex-col gap-5 animate-[fade-up_0.7s_ease-out]"
|
|
style={{ animationDelay: "80ms" }}
|
|
>
|
|
<div className="flex flex-wrap items-center gap-3 text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
|
|
<span className="rounded-full border border-slate-300 bg-white/80 px-3 py-1">
|
|
Wizard 14 etapas
|
|
</span>
|
|
<span>Gerador de Prompts</span>
|
|
</div>
|
|
<div className="max-w-3xl">
|
|
<h1
|
|
className={`${titleFont.className} text-4xl font-semibold text-slate-900 md:text-5xl`}
|
|
>
|
|
Construa o briefing perfeito para hotelaria
|
|
</h1>
|
|
<p className="mt-4 text-lg text-slate-600">
|
|
Preencha as etapas com contexto claro para gerar prompts precisos,
|
|
consistentes e prontos para comunicação.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div
|
|
className="grid gap-8 animate-[fade-up_0.7s_ease-out]"
|
|
style={{ animationDelay: "160ms" }}
|
|
>
|
|
<Wizard
|
|
step={step}
|
|
categories={CATEGORIES}
|
|
answers={answers}
|
|
isComplete={isComplete}
|
|
onAnswerChange={handleAnswerChange}
|
|
onNext={handleNext}
|
|
onPrev={handlePrev}
|
|
onReset={handleReset}
|
|
/>
|
|
<PromptPreview answers={answers} />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|