Reverted to commit 41946a7e9c
This commit is contained in:
gpt-engineer-app[bot]
parent
8ade69c438
commit
52ba4b115a
@ -1,133 +0,0 @@
|
|||||||
|
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
|
|
||||||
function FloatingPaths({ position }: { position: number }) {
|
|
||||||
const paths = Array.from({ length: 36 }, (_, i) => ({
|
|
||||||
id: i,
|
|
||||||
d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${
|
|
||||||
380 - i * 5 * position
|
|
||||||
} -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${
|
|
||||||
152 - i * 5 * position
|
|
||||||
} ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${
|
|
||||||
684 - i * 5 * position
|
|
||||||
} ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,
|
|
||||||
color: `rgba(15,23,42,${0.1 + i * 0.03})`,
|
|
||||||
width: 0.5 + i * 0.03,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="absolute inset-0 pointer-events-none">
|
|
||||||
<svg
|
|
||||||
className="w-full h-full text-slate-950 dark:text-white"
|
|
||||||
viewBox="0 0 696 316"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<title>Background Paths</title>
|
|
||||||
{paths.map((path) => (
|
|
||||||
<motion.path
|
|
||||||
key={path.id}
|
|
||||||
d={path.d}
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={path.width}
|
|
||||||
strokeOpacity={0.1 + path.id * 0.03}
|
|
||||||
initial={{ pathLength: 0.3, opacity: 0.6 }}
|
|
||||||
animate={{
|
|
||||||
pathLength: 1,
|
|
||||||
opacity: [0.3, 0.6, 0.3],
|
|
||||||
pathOffset: [0, 1, 0],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 20 + Math.random() * 10,
|
|
||||||
repeat: Number.POSITIVE_INFINITY,
|
|
||||||
ease: "linear",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BackgroundPaths({
|
|
||||||
title = "Background Paths",
|
|
||||||
}: {
|
|
||||||
title?: string;
|
|
||||||
}) {
|
|
||||||
const words = title.split(" ");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-white dark:bg-neutral-950">
|
|
||||||
<div className="absolute inset-0">
|
|
||||||
<FloatingPaths position={1} />
|
|
||||||
<FloatingPaths position={-1} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative z-10 container mx-auto px-4 md:px-6 text-center">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ duration: 2 }}
|
|
||||||
className="max-w-4xl mx-auto"
|
|
||||||
>
|
|
||||||
<h1 className="text-5xl sm:text-7xl md:text-8xl font-bold mb-8 tracking-tighter">
|
|
||||||
{words.map((word, wordIndex) => (
|
|
||||||
<span
|
|
||||||
key={wordIndex}
|
|
||||||
className="inline-block mr-4 last:mr-0"
|
|
||||||
>
|
|
||||||
{word.split("").map((letter, letterIndex) => (
|
|
||||||
<motion.span
|
|
||||||
key={`${wordIndex}-${letterIndex}`}
|
|
||||||
initial={{ y: 100, opacity: 0 }}
|
|
||||||
animate={{ y: 0, opacity: 1 }}
|
|
||||||
transition={{
|
|
||||||
delay:
|
|
||||||
wordIndex * 0.1 +
|
|
||||||
letterIndex * 0.03,
|
|
||||||
type: "spring",
|
|
||||||
stiffness: 150,
|
|
||||||
damping: 25,
|
|
||||||
}}
|
|
||||||
className="inline-block text-transparent bg-clip-text
|
|
||||||
bg-gradient-to-r from-neutral-900 to-neutral-700/80
|
|
||||||
dark:from-white dark:to-white/80"
|
|
||||||
>
|
|
||||||
{letter}
|
|
||||||
</motion.span>
|
|
||||||
))}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="inline-block group relative bg-gradient-to-b from-black/10 to-white/10
|
|
||||||
dark:from-white/10 dark:to-black/10 p-px rounded-2xl backdrop-blur-lg
|
|
||||||
overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="rounded-[1.15rem] px-8 py-6 text-lg font-semibold backdrop-blur-md
|
|
||||||
bg-white/95 hover:bg-white/100 dark:bg-black/95 dark:hover:bg-black/100
|
|
||||||
text-black dark:text-white transition-all duration-300
|
|
||||||
group-hover:-translate-y-0.5 border border-black/10 dark:border-white/10
|
|
||||||
hover:shadow-md dark:hover:shadow-neutral-800/50"
|
|
||||||
>
|
|
||||||
<span className="opacity-90 group-hover:opacity-100 transition-opacity">
|
|
||||||
Discover Excellence
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className="ml-3 opacity-70 group-hover:opacity-100 group-hover:translate-x-1.5
|
|
||||||
transition-all duration-300"
|
|
||||||
>
|
|
||||||
→
|
|
||||||
</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -2,7 +2,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Boxes } from '@/components/ui/background-boxes';
|
|
||||||
import {
|
import {
|
||||||
MessageSquareText,
|
MessageSquareText,
|
||||||
Smartphone,
|
Smartphone,
|
||||||
@ -11,10 +10,7 @@ import {
|
|||||||
ArrowRight,
|
ArrowRight,
|
||||||
TrendingUp,
|
TrendingUp,
|
||||||
Shield,
|
Shield,
|
||||||
Clock,
|
Clock
|
||||||
Mic,
|
|
||||||
FileText,
|
|
||||||
Receipt
|
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
const Landing = () => {
|
const Landing = () => {
|
||||||
@ -50,34 +46,10 @@ const Landing = () => {
|
|||||||
"100% seguro e privado"
|
"100% seguro e privado"
|
||||||
];
|
];
|
||||||
|
|
||||||
const howItWorks = [
|
|
||||||
{
|
|
||||||
icon: <FileText className="h-8 w-8" />,
|
|
||||||
title: "Mensagem de Texto",
|
|
||||||
description: "Digite suas despesas diretamente no chat",
|
|
||||||
example: "Gastei 100 em compras no Atacadão",
|
|
||||||
image: "/whatsapp-text-message.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Mic className="h-8 w-8" />,
|
|
||||||
title: "Mensagem de Áudio",
|
|
||||||
description: "Grave um áudio com sua transação",
|
|
||||||
example: "Áudio: 'Gastei 150 em compras no Atacadão'",
|
|
||||||
image: "/whatsapp-audio-message.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Receipt className="h-8 w-8" />,
|
|
||||||
title: "Comprovante PIX",
|
|
||||||
description: "Envie o comprovante e deixe o resto conosco",
|
|
||||||
example: "Comprovante automático do PIX",
|
|
||||||
image: "/whatsapp-receipt-message.png"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
|
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<header className="container mx-auto px-4 py-6 relative z-10">
|
<header className="container mx-auto px-4 py-6">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<img
|
<img
|
||||||
@ -95,122 +67,53 @@ const Landing = () => {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Hero Section with Background */}
|
{/* Hero Section */}
|
||||||
<section className="relative">
|
<section className="container mx-auto px-4 py-20 text-center">
|
||||||
<Boxes />
|
<div className="max-w-4xl mx-auto">
|
||||||
<div className="container mx-auto px-4 py-20 text-center relative z-10">
|
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
|
||||||
<div className="max-w-4xl mx-auto">
|
Controle financeiro
|
||||||
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
|
<span className="block text-green-400">via WhatsApp</span>
|
||||||
Controle financeiro
|
</h1>
|
||||||
<span className="block text-green-400">via WhatsApp</span>
|
|
||||||
</h1>
|
<p className="text-xl text-slate-300 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
A única plataforma que permite organizar suas finanças pessoais 100% integrada com o WhatsApp.
|
||||||
|
Sem apps extras, sem complicação.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
||||||
|
<Link to="/auth">
|
||||||
|
<Button size="lg" className="bg-green-600 hover:bg-green-700 text-white px-8 py-4 text-lg font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-300">
|
||||||
|
Acessar Plataforma
|
||||||
|
<ArrowRight className="ml-2 h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
<p className="text-xl text-slate-300 mb-8 max-w-2xl mx-auto leading-relaxed">
|
<div className="flex items-center text-slate-300">
|
||||||
A única plataforma que permite organizar suas finanças pessoais 100% integrada com o WhatsApp.
|
<Clock className="h-4 w-4 mr-2" />
|
||||||
Sem apps extras, sem complicação.
|
<span className="text-sm">Configuração em 2 minutos</span>
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
|
||||||
<Link to="/auth">
|
|
||||||
<Button size="lg" className="bg-green-600 hover:bg-green-700 text-white px-8 py-4 text-lg font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-300">
|
|
||||||
Acessar Plataforma
|
|
||||||
<ArrowRight className="ml-2 h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="flex items-center text-slate-300">
|
|
||||||
<Clock className="h-4 w-4 mr-2" />
|
|
||||||
<span className="text-sm">Configuração em 2 minutos</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-2xl mx-auto">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-3xl font-bold text-green-400">100%</div>
|
|
||||||
<div className="text-slate-400">Via WhatsApp</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-3xl font-bold text-blue-400">0</div>
|
|
||||||
<div className="text-slate-400">Apps extras</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-3xl font-bold text-purple-400">24/7</div>
|
|
||||||
<div className="text-slate-400">Disponível</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* How It Works Section */}
|
{/* Stats */}
|
||||||
<section className="py-20 bg-slate-800/50">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-2xl mx-auto">
|
||||||
<div className="container mx-auto px-4">
|
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h2 className="text-4xl font-bold text-white mb-4">
|
|
||||||
Como funciona?
|
|
||||||
</h2>
|
|
||||||
<p className="text-xl text-slate-300 max-w-2xl mx-auto">
|
|
||||||
Três formas simples de registrar suas transações no WhatsApp
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
|
||||||
{howItWorks.map((method, index) => (
|
|
||||||
<div key={index} className="text-center">
|
|
||||||
<div className="bg-slate-700/50 p-8 rounded-xl border border-slate-600 hover:border-green-500 transition-all duration-300 hover:bg-slate-700/70">
|
|
||||||
<div className="bg-green-500/20 p-4 rounded-lg w-fit mx-auto mb-6 text-green-400">
|
|
||||||
{method.icon}
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-semibold text-white mb-3">{method.title}</h3>
|
|
||||||
<p className="text-slate-300 mb-4">{method.description}</p>
|
|
||||||
<div className="bg-green-500/10 p-3 rounded-lg">
|
|
||||||
<p className="text-green-300 text-sm font-medium">"{method.example}"</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-6">
|
|
||||||
<img
|
|
||||||
src={method.image}
|
|
||||||
alt={`Exemplo de ${method.title}`}
|
|
||||||
className="w-48 h-auto mx-auto rounded-lg shadow-lg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dashboard Preview */}
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<h3 className="text-3xl font-bold text-white mb-4">Visualize tudo no dashboard</h3>
|
|
||||||
<p className="text-lg text-slate-300 mb-8">
|
|
||||||
Acompanhe suas finanças com gráficos detalhados e relatórios completos
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h4 className="text-xl font-semibold text-white mb-4">Dashboard Financeiro</h4>
|
<div className="text-3xl font-bold text-green-400">100%</div>
|
||||||
<img
|
<div className="text-slate-400">Via WhatsApp</div>
|
||||||
src="/dashboard-screenshot.png"
|
|
||||||
alt="Dashboard Financeiro"
|
|
||||||
className="w-full h-auto rounded-lg shadow-xl border border-slate-600"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h4 className="text-xl font-semibold text-white mb-4">Calendário de Transações</h4>
|
<div className="text-3xl font-bold text-blue-400">0</div>
|
||||||
<img
|
<div className="text-slate-400">Apps extras</div>
|
||||||
src="/calendar-screenshot.png"
|
</div>
|
||||||
alt="Calendário de Transações"
|
<div className="text-center">
|
||||||
className="w-full h-auto rounded-lg shadow-xl border border-slate-600"
|
<div className="text-3xl font-bold text-purple-400">24/7</div>
|
||||||
/>
|
<div className="text-slate-400">Disponível</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Features Section */}
|
{/* Features Section */}
|
||||||
<section className="py-20 bg-slate-900/50">
|
<section className="py-20 bg-slate-800/50">
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
<div className="text-center mb-16">
|
<div className="text-center mb-16">
|
||||||
<h2 className="text-4xl font-bold text-white mb-4">
|
<h2 className="text-4xl font-bold text-white mb-4">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user