rodrigo/budget-view-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add subscription page to settings

Browse Source 
Adds a subscription page within the settings section, including a title, a card displaying plan details (name, price, benefits), and "Subscribe Now" and "View Details" buttons. Uses Tailwind CSS for styling.
This commit is contained in:
gpt-engineer-app[bot] 2025-06-15 20:01:20 +00:00
parent c059dea681
commit 17f2de2a73
1 changed files with 54 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/Configuracoes.tsx
View File

@ -3,8 +3,16 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import MeuCadastroForm from "@/components/settings/MeuCadastroForm";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import { ArrowLeft, Check } from "lucide-react";
import { Link } from "react-router-dom";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
const Configuracoes = () => {
const [tab, setTab] = useState("visao-geral");
@ -37,9 +45,51 @@ const Configuracoes = () => {
<MeuCadastroForm />
</TabsContent>
<TabsContent value="assinatura">
<div className="p-6 bg-muted rounded-lg border text-muted-foreground text-center">
<div className="text-lg font-semibold mb-2">Em breve!</div>
<div>Funcionalidades de assinatura serão lançadas em breve.</div>
<div className="w-full max-w-md mx-auto">
<h2 className="text-3xl font-bold text-center mb-6">
Assinatura Mensal
</h2>
<Card className="shadow-lg animate-fade-in">
<CardHeader className="items-center text-center p-6">
<CardTitle className="text-2xl">
Plano Mensal Finance Home
</CardTitle>
<CardDescription className="text-5xl font-extrabold pt-4">
R$14,99
<span className="text-lg font-medium text-muted-foreground">
/mês
</span>
</CardDescription>
</CardHeader>
<CardContent className="px-6 pb-6">
<ul className="space-y-4">
<li className="flex items-center gap-3">
<Check className="h-5 w-5 text-primary" />
<span className="text-muted-foreground">
Acesso total ao Finance Home
</span>
</li>
<li className="flex items-center gap-3">
<Check className="h-5 w-5 text-primary" />
<span className="text-muted-foreground">
Relatórios ilimitados
</span>
</li>
<li className="flex items-center gap-3">
<Check className="h-5 w-5 text-primary" />
<span className="text-muted-foreground">
Exportação de dados
</span>
</li>
</ul>
</CardContent>
<CardFooter className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 p-6 bg-muted/50 rounded-b-lg">
<Button variant="outline" className="w-full sm:w-auto">
Ver Detalhes
</Button>
<Button className="w-full sm:w-auto">Assinar Agora</Button>
</CardFooter>
</Card>
</div>
</TabsContent>
</Tabs>