Evandro Fonseca Junior
9a4e4c762e
- Redesigned Footer.tsx with comprehensive layout including brand section, navigation links, social media icons, and contact info to improve user engagement and brand visibility - Updated DATABASE_URL in .env to correct Prisma database path for proper configuration and connectivity - Updated dependencies to support new UI components and ensure compatibility with enhanced features
258 lines
9.7 KiB
TypeScript
258 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Header } from "@/app/components/header";
|
|
import { Footer } from "@/app/components/Footer";
|
|
import { PricingHero } from "@/app/components/pricing/PricingHero";
|
|
import { BillingToggle } from "@/app/components/pricing/BillingToggle";
|
|
import { PricingCard } from "@/app/components/pricing/PricingCard";
|
|
import { PricingFAQ } from "@/app/components/pricing/PricingFAQ";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowRight, CheckCircle2 } from "lucide-react";
|
|
|
|
export default function PricingPage() {
|
|
const [isAnnual, setIsAnnual] = useState(false);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white dark:bg-gray-900">
|
|
<Header />
|
|
|
|
<main>
|
|
{/* Hero Section */}
|
|
<section className="py-16 md:py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<PricingHero />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Billing Toggle */}
|
|
<section className="pb-12">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<BillingToggle
|
|
isAnnual={isAnnual}
|
|
onToggle={setIsAnnual}
|
|
className="mb-8"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing Cards */}
|
|
<section className="pb-16 md:pb-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
|
<PricingCard
|
|
plan="basic"
|
|
isAnnual={isAnnual}
|
|
className="md:order-1"
|
|
/>
|
|
<PricingCard
|
|
plan="premium"
|
|
isAnnual={isAnnual}
|
|
className="md:order-2"
|
|
/>
|
|
<PricingCard
|
|
plan="free"
|
|
isAnnual={isAnnual}
|
|
className="md:order-3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Comparison */}
|
|
<section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Compare os Planos
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400">
|
|
Veja todas as funcionalidades disponíveis em cada plano
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 dark:bg-gray-800">
|
|
<tr>
|
|
<th className="px-6 py-4 text-left text-sm font-medium text-gray-900 dark:text-white">
|
|
Funcionalidades
|
|
</th>
|
|
<th className="px-6 py-4 text-center text-sm font-medium text-gray-900 dark:text-white">
|
|
Básico
|
|
</th>
|
|
<th className="px-6 py-4 text-center text-sm font-medium text-gray-900 dark:text-white">
|
|
Premium
|
|
</th>
|
|
<th className="px-6 py-4 text-center text-sm font-medium text-gray-900 dark:text-white">
|
|
Free Beta
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{[
|
|
{
|
|
feature: "Consultas por mês",
|
|
basic: "100",
|
|
premium: "500",
|
|
free: "Ilimitadas",
|
|
},
|
|
{
|
|
feature: "Busca por código de barras",
|
|
basic: true,
|
|
premium: true,
|
|
free: true,
|
|
},
|
|
{
|
|
feature: "Busca por nome",
|
|
basic: true,
|
|
premium: true,
|
|
free: true,
|
|
},
|
|
{
|
|
feature: "Informações nutricionais",
|
|
basic: true,
|
|
premium: true,
|
|
free: true,
|
|
},
|
|
{
|
|
feature: "Filtros avançados",
|
|
basic: false,
|
|
premium: true,
|
|
free: true,
|
|
},
|
|
{
|
|
feature: "Listas de compras",
|
|
basic: false,
|
|
premium: true,
|
|
free: true,
|
|
},
|
|
{
|
|
feature: "Comparação de produtos",
|
|
basic: false,
|
|
premium: "Até 5",
|
|
free: "Ilimitada",
|
|
},
|
|
{
|
|
feature: "Exportação de dados",
|
|
basic: false,
|
|
premium: true,
|
|
free: true,
|
|
},
|
|
{
|
|
feature: "API de acesso",
|
|
basic: false,
|
|
premium: "1000 req/mês",
|
|
free: "Ilimitada",
|
|
},
|
|
{
|
|
feature: "Suporte prioritário",
|
|
basic: false,
|
|
premium: true,
|
|
free: false,
|
|
},
|
|
{
|
|
feature: "Histórico de consultas",
|
|
basic: "Últimas 10",
|
|
premium: "Ilimitado",
|
|
free: "Ilimitado",
|
|
},
|
|
].map((row, index) => (
|
|
<tr
|
|
key={index}
|
|
className="hover:bg-gray-50 dark:hover:bg-gray-800"
|
|
>
|
|
<td className="px-6 py-4 text-sm text-gray-900 dark:text-white">
|
|
{row.feature}
|
|
</td>
|
|
<td className="px-6 py-4 text-center">
|
|
{typeof row.basic === "boolean" ? (
|
|
<CheckCircle2
|
|
className={`w-5 h-5 mx-auto ${
|
|
row.basic ? "text-green-500" : "text-gray-400"
|
|
}`}
|
|
/>
|
|
) : (
|
|
<span className="text-sm text-gray-900 dark:text-white">
|
|
{row.basic}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 text-center">
|
|
{typeof row.premium === "boolean" ? (
|
|
<CheckCircle2
|
|
className={`w-5 h-5 mx-auto ${
|
|
row.premium ? "text-green-500" : "text-gray-400"
|
|
}`}
|
|
/>
|
|
) : (
|
|
<span className="text-sm text-gray-900 dark:text-white">
|
|
{row.premium}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 text-center">
|
|
{typeof row.free === "boolean" ? (
|
|
<CheckCircle2
|
|
className={`w-5 h-5 mx-auto ${
|
|
row.free ? "text-green-500" : "text-gray-400"
|
|
}`}
|
|
/>
|
|
) : (
|
|
<span className="text-sm text-gray-900 dark:text-white">
|
|
{row.free}
|
|
</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="py-16 md:py-24">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<PricingFAQ />
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-16 md:py-24 bg-gradient-to-r from-blue-600 to-blue-700">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
|
Pronto para começar?
|
|
</h2>
|
|
<p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
|
|
Junte-se a milhares de usuários que já confiam no NutriScan para
|
|
suas consultas nutricionais.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
size="lg"
|
|
className="bg-white text-blue-600 hover:bg-gray-100"
|
|
>
|
|
Começar Grátis Agora
|
|
<ArrowRight className="ml-2 w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-white text-white hover:bg-white hover:text-blue-600"
|
|
>
|
|
Falar com Vendas
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|