Spaces:

xlorfx
/

teste-app

Running

App Files Files Community

xlorfx commited on 8 days ago

Commit

242229c

verified ·

1 Parent(s): 3a39481

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +725 -19
prompts.txt +3 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Teste App
-emoji: 🏃
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: teste-app
+emoji: 🐳
+colorFrom: green
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,725 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NeonVision - Revolução em Marketing Digital</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&family=Poppins:wght@400;600;700&display=swap');
+        :root {
+            --neon-green: #0ff0b3;
+            --neon-green-light: #4df8d6;
+            --neon-green-dark: #00c58e;
+            --neon-purple: #8a2be2;
+            --neon-blue: #00b4d8;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #0a0a0a;
+            color: white;
+            overflow-x: hidden;
+        }
+        .neon-text {
+            background: linear-gradient(90deg, var(--neon-green), var(--neon-green-light), var(--neon-blue));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-shadow: 0 0 5px rgba(79, 255, 210, 0.3);
+        }
+        .neon-border {
+            border: 2px solid transparent;
+            border-image: linear-gradient(90deg, var(--neon-green), var(--neon-blue)) 1;
+            box-shadow: 0 0 15px rgba(79, 255, 210, 0.5);
+        }
+        .neon-glow {
+            box-shadow: 0 0 15px rgba(79, 255, 210, 0.7);
+        }
+        .neon-button {
+            background: linear-gradient(90deg, var(--neon-green), var(--neon-blue));
+            color: black;
+            font-weight: bold;
+            border: none;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .neon-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 0 25px rgba(79, 255, 210, 0.8);
+        }
+        .neon-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: all 0.5s ease;
+        }
+        .neon-button:hover::before {
+            left: 100%;
+        }
+        .secondary-button {
+            background: transparent;
+            color: var(--neon-green);
+            border: 2px solid var(--neon-green);
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        .secondary-button:hover {
+            background: rgba(15, 240, 179, 0.1);
+            box-shadow: 0 0 15px rgba(79, 255, 210, 0.3);
+        }
+        .feature-card {
+            background: rgba(10, 20, 30, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(79, 255, 210, 0.2);
+            transition: all 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 25px rgba(79, 255, 210, 0.3);
+            border-color: var(--neon-green);
+        }
+        .pricing-card {
+            background: rgba(10, 20, 30, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(79, 255, 210, 0.2);
+            transition: all 0.3s ease;
+        }
+        .pricing-card:hover {
+            transform: translateY(-10px);
+            border-color: var(--neon-green);
+        }
+        .popular-plan {
+            border: 2px solid var(--neon-green);
+            box-shadow: 0 0 30px rgba(79, 255, 210, 0.4);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.8; }
+            50% { opacity: 1; }
+            100% { opacity: 0.8; }
+        }
+        .floating {
+            animation: floating 6s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
+        }
+        .bg-grid {
+            background-image:
+                linear-gradient(rgba(79, 255, 210, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(79, 255, 210, 0.1) 1px, transparent 1px);
+            background-size: 40px 40px;
+        }
+        .gradient-overlay {
+            background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, #0a0a0a 100%);
+        }
+    </style>
+</head>
+<body class="bg-grid">
+    <!-- Navigation -->
+    <nav class="container mx-auto px-6 py-4">
+        <div class="flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-bolt text-2xl neon-text"></i>
+                <span class="text-2xl font-extrabold neon-text">NEONVISION</span>
+            </div>
+            <div class="hidden md:flex space-x-8 items-center">
+                <a href="#features" class="text-white hover:text-neon-green transition">Recursos</a>
+                <a href="#pricing" class="text-white hover:text-neon-green transition">Planos</a>
+                <a href="#testimonials" class="text-white hover:text-neon-green transition">Depoimentos</a>
+                <a href="#" class="text-white hover:text-neon-green transition">FAQ</a>
+            </div>
+            <div class="hidden md:flex space-x-4">
+                <a href="#login" class="secondary-button px-6 py-2 rounded-full">Login</a>
+                <a href="#test" class="neon-button px-6 py-2 rounded-full">Teste Grátis</a>
+            </div>
+            <button class="md:hidden text-white focus:outline-none">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="container mx-auto px-6 py-20 md:py-32">
+        <div class="flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-16 md:mb-0">
+                <h1 class="text-4xl md:text-6xl font-extrabold mb-6 neon-text">
+                    REVOLUCIONE SEU <span class="text-white">MARKETING</span>
+                </h1>
+                <p class="text-lg text-gray-300 mb-8 max-w-lg">
+                    A plataforma de inteligência artificial que transforma sua estratégia digital com análises preditivas e automação avançada.
+                </p>
+                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <a href="#test" class="neon-button px-8 py-4 rounded-full text-center font-bold">TESTE GRÁTIS AGORA</a>
+                    <a href="#demo" class="secondary-button px-8 py-4 rounded-full text-center font-bold">VER DEMONSTRAÇÃO</a>
+                </div>
+                <div class="mt-8 flex items-center space-x-4">
+                    <div class="flex -space-x-2">
+                        <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
+                        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
+                        <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-gray-800">
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">+5.000 profissionais confiam na NeonVision</p>
+                        <div class="flex items-center">
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <span class="text-sm text-gray-300 ml-1">4.9/5</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="md:w-1/2 relative">
+                <div class="relative floating">
+                    <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-500 rounded-full mix-blend-screen opacity-20 animate-pulse"></div>
+                    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-500 rounded-full mix-blend-screen opacity-20 animate-pulse delay-300"></div>
+                    <div class="relative neon-border p-1 rounded-2xl bg-gray-900/50 backdrop-blur-md">
+                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                             class="rounded-2xl w-full h-auto"
+                             alt="Dashboard NeonVision">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Clients Section -->
+    <section class="container mx-auto px-6 py-12">
+        <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-80">
+            <img src="https://logo.clearbit.com/google.com?size=80" class="h-8 filter brightness-0 invert" alt="Google">
+            <img src="https://logo.clearbit.com/amazon.com?size=80" class="h-8 filter brightness-0 invert" alt="Amazon">
+            <img src="https://logo.clearbit.com/microsoft.com?size=80" class="h-8 filter brightness-0 invert" alt="Microsoft">
+            <img src="https://logo.clearbit.com/spotify.com?size=80" class="h-8 filter brightness-0 invert" alt="Spotify">
+            <img src="https://logo.clearbit.com/uber.com?size=80" class="h-8 filter brightness-0 invert" alt="Uber">
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="container mx-auto px-6 py-20">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-extrabold mb-4 neon-text">PODEROSOS RECURSOS</h2>
+            <p class="text-lg text-gray-400 max-w-2xl mx-auto">
+                Descubra como nossa plataforma pode impulsionar seus resultados com tecnologia de ponta
+            </p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Feature 1 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
+                    <i class="fas fa-brain text-2xl neon-text"></i>
+                </div>
+                <h3 class="text-xl font-bold text-white mb-3">Análise Preditiva</h3>
+                <p class="text-gray-400">
+                    Nossa IA analisa padrões e prevê tendências de mercado antes que aconteçam, dando a você vantagem competitiva.
+                </p>
+            </div>
+            <!-- Feature 2 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
+                    <i class="fas fa-robot text-2xl neon-text"></i>
+                </div>
+                <h3 class="text-xl font-bold text-white mb-3">Automação Inteligente</h3>
+                <p class="text-gray-400">
+                    Automatize campanhas complexas com regras personalizadas e gatilhos baseados em comportamento do usuário.
+                </p>
+            </div>
+            <!-- Feature 3 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
+                    <i class="fas fa-chart-line text-2xl neon-text"></i>
+                </div>
+                <h3 class="text-xl font-bold text-white mb-3">Otimização em Tempo Real</h3>
+                <p class="text-gray-400">
+                    Algoritmos ajustam automaticamente suas campanhas para maximizar ROI com base em desempenho em tempo real.
+                </p>
+            </div>
+            <!-- Feature 4 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
+                    <i class="fas fa-users text-2xl neon-text"></i>
+                </div>
+                <h3 class="text-xl font-bold text-white mb-3">Segmentação Avançada</h3>
+                <p class="text-gray-400">
+                    Identifique e segmente seu público com precisão cirúrgica usando dados demográficos, comportamentais e psicográficos.
+                </p>
+            </div>
+            <!-- Feature 5 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
+                    <i class="fas fa-ad text-2xl neon-text"></i>
+                </div>
+                <h3 class="text-xl font-bold text-white mb-3">Geração de Criativos</h3>
+                <p class="text-gray-400">
+                    IA que cria anúncios impactantes baseados em dados de desempenho e tendências de design.
+                </p>
+            </div>
+            <!-- Feature 6 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="w-14 h-14 rounded-full bg-gray-800 flex items-center justify-center mb-6 neon-glow">
+                    <i class="fas fa-shield-alt text-2xl neon-text"></i>
+                </div>
+                <h3 class="text-xl font-bold text-white mb-3">Proteção de Dados</h3>
+                <p class="text-gray-400">
+                    Segurança de nível bancário com criptografia de ponta a ponta e conformidade com todas as regulamentações.
+                </p>
+            </div>
+        </div>
+    </section>
+    <!-- Demo Section -->
+    <section class="relative overflow-hidden py-20">
+        <div class="absolute inset-0">
+            <div class="absolute inset-0 bg-gradient-to-r from-green-900/20 to-blue-900/20"></div>
+            <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
+        </div>
+        <div class="container mx-auto px-6 relative">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-12 lg:mb-0">
+                    <div class="neon-border p-1 rounded-2xl bg-gray-900/50 backdrop-blur-md">
+                        <video autoplay loop muted playsinline class="rounded-2xl w-full h-auto">
+                            <source src="https://assets.mixkit.co/videos/preview/mixkit-digital-animation-of-a-network-connection-41503-large.mp4" type="video/mp4">
+                        </video>
+                    </div>
+                </div>
+                <div class="lg:w-1/2 lg:pl-16">
+                    <h2 class="text-3xl md:text-4xl font-extrabold mb-6 neon-text">VEJA A NEONVISION EM AÇÃO</h2>
+                    <p class="text-lg text-gray-300 mb-8">
+                        Nossa plataforma transforma dados complexos em insights acionáveis com visualizações intuitivas e relatórios personalizados.
+                    </p>
+                    <ul class="space-y-4 mb-8">
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-neon-green mt-1 mr-3"></i>
+                            <span class="text-gray-300">Dashboard personalizável com KPIs em tempo real</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-neon-green mt-1 mr-3"></i>
+                            <span class="text-gray-300">Integração com todas as principais plataformas de anúncios</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-neon-green mt-1 mr-3"></i>
+                            <span class="text-gray-300">Alertas inteligentes para oportunidades e ameaças</span>
+                        </li>
+                    </ul>
+                    <a href="#demo" class="neon-button px-8 py-4 rounded-full inline-block font-bold">AGENDAR DEMONSTRAÇÃO</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Pricing Section -->
+    <section id="pricing" class="container mx-auto px-6 py-20">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-extrabold mb-4 neon-text">PLANOS QUE SE ADAPTAM A VOCÊ</h2>
+            <p class="text-lg text-gray-400 max-w-2xl mx-auto">
+                Escolha o plano perfeito para suas necessidades e comece a transformar seus resultados hoje
+            </p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
+            <!-- Free Plan -->
+            <div class="pricing-card rounded-xl p-6">
+                <h3 class="text-xl font-bold text-white mb-2">Starter</h3>
+                <p class="text-gray-400 mb-4">Ideal para quem está começando</p>
+                <div class="mb-6">
+                    <span class="text-4xl font-extrabold neon-text">R$0</span>
+                    <span class="text-gray-400">/mês</span>
+                </div>
+                <ul class="space-y-3 mb-8">
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">1 projeto ativo</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Relatórios básicos</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Suporte por e-mail</span>
+                    </li>
+                    <li class="flex items-start text-gray-500">
+                        <i class="fas fa-times mr-2 mt-1"></i>
+                        <span>Automação limitada</span>
+                    </li>
+                </ul>
+                <a href="#test" class="secondary-button w-full py-3 rounded-lg text-center font-bold">TESTE GRÁTIS</a>
+            </div>
+            <!-- Pro Plan -->
+            <div class="pricing-card rounded-xl p-6 popular-plan">
+                <div class="flex justify-between items-start mb-2">
+                    <div>
+                        <h3 class="text-xl font-bold text-white">Pro</h3>
+                        <p class="text-gray-400">Para profissionais e agências</p>
+                    </div>
+                    <span class="bg-neon-green text-black text-xs font-bold px-2 py-1 rounded">POPULAR</span>
+                </div>
+                <div class="mb-6">
+                    <span class="text-4xl font-extrabold neon-text">R$97</span>
+                    <span class="text-gray-400">/mês</span>
+                </div>
+                <ul class="space-y-3 mb-8">
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">5 projetos ativos</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Relatórios avançados</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Suporte prioritário</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Automação completa</span>
+                    </li>
+                </ul>
+                <a href="#signup" class="neon-button w-full py-3 rounded-lg text-center font-bold">ASSINAR AGORA</a>
+            </div>
+            <!-- Business Plan -->
+            <div class="pricing-card rounded-xl p-6">
+                <h3 class="text-xl font-bold text-white mb-2">Business</h3>
+                <p class="text-gray-400 mb-4">Para equipes e empresas</p>
+                <div class="mb-6">
+                    <span class="text-4xl font-extrabold neon-text">R$297</span>
+                    <span class="text-gray-400">/mês</span>
+                </div>
+                <ul class="space-y-3 mb-8">
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Projetos ilimitados</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Relatórios personalizados</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Suporte dedicado</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Integrações premium</span>
+                    </li>
+                </ul>
+                <a href="#signup" class="secondary-button w-full py-3 rounded-lg text-center font-bold">ASSINAR AGORA</a>
+            </div>
+            <!-- Enterprise Plan -->
+            <div class="pricing-card rounded-xl p-6">
+                <h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
+                <p class="text-gray-400 mb-4">Soluções personalizadas</p>
+                <div class="mb-6">
+                    <span class="text-4xl font-extrabold neon-text">Sob consulta</span>
+                </div>
+                <ul class="space-y-3 mb-8">
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Solução sob medida</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Treinamento dedicado</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Contrato personalizado</span>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-check text-neon-green mr-2 mt-1"></i>
+                        <span class="text-gray-300">Suporte 24/7</span>
+                    </li>
+                </ul>
+                <a href="#contact" class="secondary-button w-full py-3 rounded-lg text-center font-bold">FALE CONOSCO</a>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials Section -->
+    <section id="testimonials" class="container mx-auto px-6 py-20">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-extrabold mb-4 neon-text">O QUE NOSSOS CLIENTES DIZEM</h2>
+            <p class="text-lg text-gray-400 max-w-2xl mx-auto">
+                Veja como a NeonVision está transformando negócios como o seu
+            </p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            <!-- Testimonial 1 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="flex items-center mb-6">
+                    <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4">
+                    <div>
+                        <h4 class="font-bold text-white">Ana Carolina</h4>
+                        <p class="text-sm text-gray-400">Diretora de Marketing</p>
+                    </div>
+                </div>
+                <p class="text-gray-300 mb-4">
+                    "A NeonVision revolucionou nossa estratégia digital. Em 3 meses, reduzimos nosso CPA em 40% enquanto aumentávamos o volume de leads."
+                </p>
+                <div class="flex">
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                </div>
+            </div>
+            <!-- Testimonial 2 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="flex items-center mb-6">
+                    <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4">
+                    <div>
+                        <h4 class="font-bold text-white">Ricardo Almeida</h4>
+                        <p class="text-sm text-gray-400">CEO - E-commerce</p>
+                    </div>
+                </div>
+                <p class="text-gray-300 mb-4">
+                    "A automação inteligente nos poupou centenas de horas mensais. Agora nossa equipe pode focar em estratégias criativas em vez de tarefas repetitivas."
+                </p>
+                <div class="flex">
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                </div>
+            </div>
+            <!-- Testimonial 3 -->
+            <div class="feature-card rounded-2xl p-8">
+                <div class="flex items-center mb-6">
+                    <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4">
+                    <div>
+                        <h4 class="font-bold text-white">Fernanda Gomes</h4>
+                        <p class="text-sm text-gray-400">Gerente de Tráfego</p>
+                    </div>
+                </div>
+                <p class="text-gray-300 mb-4">
+                    "Os insights preditivos são incríveis. Antecipamos tendências sazonais e ajustamos nossos orçamentos antes da concorrência, garantindo melhores resultados."
+                </p>
+                <div class="flex">
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="relative overflow-hidden py-20">
+        <div class="absolute inset-0">
+            <div class="absolute inset-0 bg-gradient-to-r from-green-900/30 to-blue-900/30"></div>
+            <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
+        </div>
+        <div class="container mx-auto px-6 relative text-center">
+            <h2 class="text-3xl md:text-5xl font-extrabold mb-6 neon-text">PRONTO PARA TRANSFORMAR SEU MARKETING?</h2>
+            <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
+                Comece hoje mesmo com nossa avaliação gratuita de 14 dias. Sem cartão de crédito necessário.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <a href="#test" class="neon-button px-8 py-4 rounded-full font-bold">TESTE GRÁTIS AGORA</a>
+                <a href="#contact" class="secondary-button px-8 py-4 rounded-full font-bold">FALE COM UM ESPECIALISTA</a>
+            </div>
+        </div>
+    </section>
+    <!-- Login Modal -->
+    <div id="login-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md z-50 flex items-center justify-center hidden">
+        <div class="bg-gray-900/90 backdrop-blur-md rounded-2xl shadow-2xl p-8 max-w-md w-full neon-border">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-2xl font-extrabold neon-text">ACESSAR CONTA</h3>
+                <button id="close-login-modal" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <form>
+                <div class="mb-4">
+                    <label class="block text-gray-300 mb-2">E-mail</label>
+                    <input type="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-green text-white" placeholder="[email protected]">
+                </div>
+                <div class="mb-6">
+                    <label class="block text-gray-300 mb-2">Senha</label>
+                    <input type="password" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-neon-green text-white" placeholder="••••••••">
+                    <a href="#forgot" class="text-sm text-neon-green hover:underline mt-2 inline-block">Esqueceu a senha?</a>
+                </div>
+                <button type="submit" class="neon-button w-full py-3 rounded-lg font-bold mb-4">ENTRAR</button>
+                <div class="text-center text-gray-400">
+                    Não tem uma conta? <a href="#signup" class="text-neon-green hover:underline">Cadastre-se</a>
+                </div>
+            </form>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="bg-gray-900/50 backdrop-blur-md border-t border-gray-800">
+        <div class="container mx-auto px-6 py-12">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <i class="fas fa-bolt text-2xl neon-text"></i>
+                        <span class="text-2xl font-extrabold neon-text">NEONVISION</span>
+                    </div>
+                    <p class="text-gray-400 mb-4">
+                        A plataforma de inteligência artificial para marketing digital que transforma dados em resultados.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-neon-green transition"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-neon-green transition"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-neon-green transition"><i class="fab fa-linkedin-in"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-neon-green transition"><i class="fab fa-instagram"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold text-white mb-4">Produto</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Recursos</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Planos</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Integrações</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Atualizações</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold text-white mb-4">Suporte</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Documentação</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Tutoriais</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">FAQ</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Contato</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold text-white mb-4">Legal</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Termos de Uso</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Política de Privacidade</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Cookies</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-neon-green transition">Segurança</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 NeonVision. Todos os direitos reservados.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-neon-green transition text-sm">Termos</a>
+                    <a href="#" class="text-gray-500 hover:text-neon-green transition text-sm">Privacidade</a>
+                    <a href="#" class="text-gray-500 hover:text-neon-green transition text-sm">Cookies</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Toggle login modal
+        document.querySelectorAll('[href="#login"]').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault();
+                document.getElementById('login-modal').classList.remove('hidden');
+            });
+        });
+        document.getElementById('close-login-modal').addEventListener('click', () => {
+            document.getElementById('login-modal').classList.add('hidden');
+        });
+        // Close modal when clicking outside
+        document.getElementById('login-modal').addEventListener('click', (e) => {
+            if (e.target === document.getElementById('login-modal')) {
+                document.getElementById('login-modal').classList.add('hidden');
+            }
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+        // Animation on scroll
+        const observerOptions = {
+            threshold: 0.1
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fadeIn');
+                }
+            });
+        }, observerOptions);
+        document.querySelectorAll('.feature-card, .pricing-card').forEach(card => {
+            observer.observe(card);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=xlorfx/teste-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+🎯 Prompt para Deepsite Crie um frontend moderno e responsivo para uma plataforma SaaS que gera criativos (imagens e vídeos) com IA, analisa concorrentes da biblioteca de anúncios do Facebook e cria anúncios semelhantes ou melhores. O frontend deve ser simples, direto e focado em iniciantes.  🧱 Funcionalidades e Telas: Página de Login/Cadastro:  Inputs: email e senha  Após login, salvar token no localStorage  Redirecionar para o painel  Painel do Usuário:  Mostrar plano atual, créditos disponíveis  Botão para Upgrade de Plano  Botão para usar plano gratuito de teste (1 crédito)  Tela de Criação de Criativo:  Seletor de tipo: imagem ou vídeo  Campo de prompt  Botão “Gerar Criativo”  Exibir imagem/vídeo gerado  Tela de Geração de Copy:  Campo para inserir produto ou objetivo  Botão “Gerar Copy com IA”  Mostrar texto gerado (copiável)  Tela de Planos:  Mostrar planos: Free, Starter, Pro, Plus, Unlimited  Cada plano mostra quantos créditos inclui  Botão para assinar (chamar rota de upgrade + pagamento via Pagar.me)  Histórico de Gerações (opcional inicialmente)  🔗 Integrações e Rotas que já existem no backend:  Ação	Rota HTTP	Descrição Login	POST /api/login	Retorna token Cadastro	POST /api/register	Cria usuário Dados do usuário	GET /api/user	Retorna plano, créditos Planos disponíveis	GET /api/plans	Retorna todos os planos Upgrade de plano	POST /api/upgrade?plan_name=pro	Muda plano (mock de pagamento) Gerar criativo	POST /api/generate	Envia `{ type: "image" Gerar copy IA	POST /api/generate-copy	Envia { prompt } Webhook pagamento	POST /api/payment/callback	Para ativar plano após pagamento Histórico	GET /api/history	(opcional, mockado por enquanto) 🧠 Observações Técnicas: Usar React com TailwindCSS ou outro framework leve  LocalStorage para armazenar token  Criar funções utilitárias para chamadas à API  Modularizar componentes para reuso: Input, Card, Modal  Mostrar mensagens de sucesso/erro  Criar botão de logout (limpar localStorage)  Se quiser, posso gerar agora esse frontend em React para você já integrar com o backend. Deseja?       Você disse: pode gerar   O ChatGPT disse: Frontend Criativos Saas  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import React, { useState, useEffect } from "react"; import axios from "axios";  const API = "http://localhost:3000/api"; // Altere para sua URL em produção  function App() {   const [token, setToken] = useState(localStorage.getItem("token"));   const [view, setView] = useState(token ? "dashboard" : "login");   const [email, setEmail] = useState("");   const [password, setPassword] = useState("");   const [prompt, setPrompt] = useState("");   const [type, setType] = useState("image");   const [result, setResult] = useState(null);   const [userData, setUserData] = useState(null);   const [copyPrompt, setCopyPrompt] = useState("");   const [copyResult, setCopyResult] = useState("");    const login = async () => {     const res = await axios.post(`${API}/login`, { email, password });     localStorage.setItem("token", res.data.token);     setToken(res.data.token);     setView("dashboard");   };    const register = async () => {     await axios.post(`${API}/register`, { email, password });     login();   };    const loadUser = async () => {     const res = await axios.get(`${API}/user`, {       headers: { Authorization: `Bearer ${token}` },     });     setUserData(res.data);   };  ✅ Frontend gerado com base nas suas integrações e preferências.  Rotas esperadas pelo backend:  POST /api/register — Cadastro do usuário.  POST /api/login — Login e geração de token.  GET /api/user — Informações do usuário autenticado (plano, créditos).  POST /api/generate — Geração de criativo (imagem ou vídeo via Replicate).  POST /api/generate-copy — Geração de copy e descrição com IA (ex: OpenAI).  Integração com a Pagar.me — será feita no backend, redirecionando ou notificando após o pagamento bem-sucedido.  Esse frontend é leve, intuitivo e fácil de conectar com seu backend. Posso agora te ajudar a montar o backend com Node.js + Express + Prisma ou em Python (FastAPI ou Flask). Qual linguagem prefere usar?       Você disse: crie um prompt para integrar a api do facebook e google para analisar os criativos   O ChatGPT disse: Claro! Abaixo está um prompt técnico e direto que você pode usar no DeepSite ou com um desenvolvedor para integrar a API do Facebook Ads Library e da API do Google Ads (Ad Library ou Search Ads 360), com foco em analisar criativos de concorrentes e sugerir melhorias:  🧠 Prompt para DeepSite (Integração APIs Facebook e Google Ads) Crie o frontend para uma aplicação SaaS que analisa criativos (imagens e vídeos) de concorrentes a partir das APIs:  Facebook Ad Library API  Google Ads API (ou Search Ads 360 Reports API)  A aplicação deve permitir:  O usuário inserir palavras-chave, nomes de concorrentes ou links de páginas.  Buscar os anúncios ativos públicos dessas fontes.  Exibir os criativos (imagem/v��deo), headline, copy e URL de destino.  Salvar os dados relevantes no backend para posterior comparação.  Mostrar sugestões de melhoria e variações com base nos dados encontrados.  Também incluir:  Botão de análise rápida com IA: Sugestão de novo criativo baseado no melhor da concorrência.  Rotas frontend esperadas:  /api/fb-search – Recebe keyword ou page_id e retorna criativos do Facebook.  /api/google-search – Recebe keyword e retorna anúncios do Google.  /api/save-competitor – Salva criativo analisado no banco para histórico.  /api/generate-improvement – Chama IA (Replicate/OpenAI) para sugerir versão melhorada.  Deixe os componentes prontos para integração com o backend usando Axios. Adicione também loading e exibição de status (como “Analisando…” ou “Criativo carregado com sucesso”).
+Prompt completo para gerar frontend (DeepSite) Crie um frontend moderno e responsivo para uma aplicação SaaS que:  Analisa criativos de concorrentes (Facebook Ads Library e Google Ads).  Gera novos criativos (imagem ou vídeo) com base nos concorrentes usando a API da Replicate.  Cria descrição e copy automaticamente com IA (ex: OpenAI).  Integra sistema de planos pagos com a API da Pagar.me.  Inclui um plano gratuito de teste com 1 geração de criativo (imagem ou vídeo).  Funcionalidades principais: Campo para buscar anúncios de concorrentes por palavra-chave, nome da empresa ou link da página (Facebook / Google).  Visualização de anúncios encontrados com headline, imagem/vídeo, descrição e link.  Botão para “Gerar Criativo com IA” (imagem ou vídeo).  Botão para “Gerar Copy com IA” com base no anúncio analisado.  Dashboard do usuário com:  Créditos restantes (baseado no plano)  Histórico de criativos gerados  Opção para upgrade de plano (integração com a Pagar.me)  Design visual: Fundo com vídeo em loop suave (tema tech/futurista, escuro)  Texto com efeito neon em botões e títulos  Interface amigável e simples para quem está começando  Rotas frontend para integrar com o backend: POST /api/register — Cadastro de usuário  POST /api/login — Login e token  GET /api/user — Dados do usuário + créditos  POST /api/fb-search — Buscar criativos no Facebook  POST /api/google-search — Buscar criativos no Google  POST /api/generate — Gerar criativo via Replicate  POST /api/generate-copy — Criar copy/descritivo com IA  POST /api/payment/checkout — Iniciar pagamento com Pagar.me  POST /api/payment/webhook — Webhook para confirmação de pagamento  Extras: Utilizar Axios para requisições  Mostrar mensagens de carregamento (“Analisando...”, “Gerando Criativo...”, etc)  Utilizar TailwindCSS ou styled-components com animações suaves
+crie uma home page no estilo pagina de vendas utilizando cores neon e escritas em degradê de verde e palhetas proximas. Teste gratis e fazer login