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 { Link } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Boxes } from '@/components/ui/background-boxes';
|
||||
import {
|
||||
MessageSquareText,
|
||||
Smartphone,
|
||||
@ -11,10 +10,7 @@ import {
|
||||
ArrowRight,
|
||||
TrendingUp,
|
||||
Shield,
|
||||
Clock,
|
||||
Mic,
|
||||
FileText,
|
||||
Receipt
|
||||
Clock
|
||||
} from 'lucide-react';
|
||||
|
||||
const Landing = () => {
|
||||
@ -50,34 +46,10 @@ const Landing = () => {
|
||||
"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 (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
|
||||
{/* 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 space-x-2">
|
||||
<img
|
||||
@ -95,122 +67,53 @@ const Landing = () => {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section with Background */}
|
||||
<section className="relative">
|
||||
<Boxes />
|
||||
<div className="container mx-auto px-4 py-20 text-center relative z-10">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
Controle financeiro
|
||||
<span className="block text-green-400">via WhatsApp</span>
|
||||
</h1>
|
||||
{/* Hero Section */}
|
||||
<section className="container mx-auto px-4 py-20 text-center">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
Controle financeiro
|
||||
<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">
|
||||
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>
|
||||
|
||||
<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 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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<section className="py-20 bg-slate-800/50">
|
||||
<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">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-2xl mx-auto">
|
||||
<div className="text-center">
|
||||
<h4 className="text-xl font-semibold text-white mb-4">Dashboard Financeiro</h4>
|
||||
<img
|
||||
src="/dashboard-screenshot.png"
|
||||
alt="Dashboard Financeiro"
|
||||
className="w-full h-auto rounded-lg shadow-xl border border-slate-600"
|
||||
/>
|
||||
<div className="text-3xl font-bold text-green-400">100%</div>
|
||||
<div className="text-slate-400">Via WhatsApp</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h4 className="text-xl font-semibold text-white mb-4">Calendário de Transações</h4>
|
||||
<img
|
||||
src="/calendar-screenshot.png"
|
||||
alt="Calendário de Transações"
|
||||
className="w-full h-auto rounded-lg shadow-xl border border-slate-600"
|
||||
/>
|
||||
<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>
|
||||
</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="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user