gistfile1.txt

// The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work.

import React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Container } from "@/components/ui/container";

const App: React.FC = () => {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section */}
      <section className="py-12 md:py-20 bg-gradient-to-br from-white to-purple-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row items-center gap-12">
            <div className="flex-1 space-y-8">
              <div className="space-y-4">
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900">
                  Reative suas vendas com clientes antigos
                </h1>
                <h2 className="text-xl md:text-2xl text-gray-600 max-w-2xl">
                  Um CRM simples para quem vende pelo WhatsApp e busca mais
                  renda extra.
                </h2>
              </div>

              <div className="bg-white p-6 rounded-2xl shadow-lg max-w-md space-y-4">
                <h3 className="text-lg font-medium text-gray-900">
                  Seja o primeiro a saber!
                </h3>
                <div className="space-y-3">
                  <div className="relative">
                    <i className="fas fa-user absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <Input
                      type="text"
                      placeholder="Seu nome"
                      className="pl-10 h-12 rounded-2xl shadow-md border-none focus:ring-2 focus:ring-purple-600"
                    />
                  </div>
                  <div className="relative">
                    <i className="fas fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <Input
                      type="email"
                      placeholder="Seu melhor e-mail"
                      className="pl-10 h-12 rounded-2xl shadow-md border-none focus:ring-2 focus:ring-purple-600"
                    />
                  </div>
                  <Button className="w-full h-12 bg-[#7c3aed] hover:bg-purple-700 text-white font-medium !rounded-button whitespace-nowrap cursor-pointer">
                    Quero ser avisado!
                  </Button>
                </div>
              </div>
            </div>

            <div className="flex-1 mt-8 lg:mt-0">
              <div className="relative w-full h-[400px] rounded-2xl overflow-hidden shadow-xl">
                <img
                  src="https://readdy.ai/api/search-image?query=A%20professional%20young%20woman%20with%20curly%20hair%20using%20a%20smartphone%20to%20manage%20her%20business%2C%20sending%20messages%20to%20customers%20on%20WhatsApp.%20She%20is%20smiling%20and%20looks%20successful.%20The%20background%20is%20simple%20and%20clean%20with%20soft%20purple%20gradient%2C%20modern%20and%20minimalist%20style%2C%20high%20quality%20photorealistic%20image&width=600&height=800&seq=hero1&orientation=portrait"
                  alt="Pessoa usando celular para vender pelo WhatsApp"
                  className="w-full h-full object-cover object-top"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Benefícios Section */}
      <section className="py-16 bg-gray-50">
        <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">
              Benefícios exclusivos
            </h2>
            <p className="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
              Ferramentas simples que transformam seu negócio
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 border-none">
              <CardContent className="p-8">
                <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6 mx-auto">
                  <i className="fas fa-users text-2xl text-[#7c3aed]"></i>
                </div>
                <CardTitle className="text-xl font-bold text-center mb-4">
                  Controle todos os seus clientes em segundos
                </CardTitle>
                <CardDescription className="text-gray-600 text-center">
                  Organize seus contatos de forma intuitiva e tenha acesso
                  rápido ao histórico de cada cliente.
                </CardDescription>
              </CardContent>
            </Card>

            <Card className="rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 border-none">
              <CardContent className="p-8">
                <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6 mx-auto">
                  <i className="fas fa-chart-line text-2xl text-[#7c3aed]"></i>
                </div>
                <CardTitle className="text-xl font-bold text-center mb-4">
                  Descubra quem parou de comprar
                </CardTitle>
                <CardDescription className="text-gray-600 text-center">
                  Identifique clientes inativos e crie campanhas direcionadas
                  para reconquistá-los.
                </CardDescription>
              </CardContent>
            </Card>

            <Card className="rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 border-none">
              <CardContent className="p-8">
                <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6 mx-auto">
                  <i className="fas fa-credit-card text-2xl text-[#7c3aed]"></i>
                </div>
                <CardTitle className="text-xl font-bold text-center mb-4">
                  Venda com links de pagamento parcelado
                </CardTitle>
                <CardDescription className="text-gray-600 text-center">
                  Facilite a compra para seus clientes com opções de pagamento
                  flexíveis e seguras.
                </CardDescription>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Testemunhos Section */}
      <section className="py-16 bg-white">
        <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">
              O que nossos clientes dizem
            </h2>
            <p className="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
              Histórias reais de vendedores que transformaram seus negócios
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <Card className="rounded-2xl shadow-md border-none overflow-hidden">
              <CardContent className="p-8 relative">
                <div className="absolute top-4 left-4 text-6xl text-purple-100 opacity-50">
                  <i className="fas fa-quote-left"></i>
                </div>
                <div className="relative z-10">
                  <p className="text-lg text-gray-700 italic mb-6">
                    "Voltei a vender para 5 clientes esquecidas usando o
                    Reativou! O sistema me mostrou quem não comprava há meses e
                    consegui reconquistar essas vendas."
                  </p>
                  <div className="flex items-center">
                    <div className="w-12 h-12 rounded-full overflow-hidden mr-4">
                      <img
                        src="https://readdy.ai/api/search-image?query=Professional%20headshot%20of%20a%20Brazilian%20woman%20in%20her%2030s%20with%20light%20brown%20hair%2C%20smiling%20confidently%20at%20the%20camera.%20She%20has%20a%20warm%20expression%20and%20is%20wearing%20professional%20business%20attire.%20The%20background%20is%20simple%20and%20neutral%20with%20soft%20lighting%2C%20creating%20a%20clean%20and%20professional%20portrait&width=100&height=100&seq=test1&orientation=squarish"
                        alt="Ana"
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p className="font-medium text-gray-900">Ana</p>
                      <p className="text-sm text-gray-600">
                        Vendedora de semi joias
                      </p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="rounded-2xl shadow-md border-none overflow-hidden">
              <CardContent className="p-8 relative">
                <div className="absolute top-4 left-4 text-6xl text-purple-100 opacity-50">
                  <i className="fas fa-quote-left"></i>
                </div>
                <div className="relative z-10">
                  <p className="text-lg text-gray-700 italic mb-6">
                    "Agora cobro fácil no cartão! Nunca foi tão prático. Meus
                    clientes adoram a facilidade de pagar em parcelas e minhas
                    vendas aumentaram significativamente."
                  </p>
                  <div className="flex items-center">
                    <div className="w-12 h-12 rounded-full overflow-hidden mr-4">
                      <img
                        src="https://readdy.ai/api/search-image?query=Professional%20headshot%20of%20a%20Brazilian%20man%20in%20his%2040s%20with%20short%20dark%20hair%20and%20a%20friendly%20smile.%20He%20is%20wearing%20a%20casual%20business%20shirt%20and%20has%20a%20confident%20expression.%20The%20background%20is%20simple%20and%20neutral%20with%20soft%20lighting%2C%20creating%20a%20clean%20and%20professional%20portrait&width=100&height=100&seq=test2&orientation=squarish"
                        alt="Carlos"
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p className="font-medium text-gray-900">Carlos</p>
                      <p className="text-sm text-gray-600">
                        Revendedor de perfumes
                      </p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-gradient-to-br from-purple-600 to-purple-800 text-white">
        <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 mb-6">
            Pronto para reativar suas vendas?
          </h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Não perca mais tempo com planilhas complicadas. Simplifique seu
            negócio hoje mesmo.
          </p>
          <Button className="h-12 px-8 bg-white text-[#7c3aed] hover:bg-gray-100 font-medium !rounded-button whitespace-nowrap cursor-pointer">
            Quero ser avisado!
          </Button>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-8 md:mb-0">
              <div className="text-2xl font-bold text-white flex items-center">
                <i className="fas fa-sync-alt mr-2 text-purple-400"></i>
                Reativou
              </div>
              <p className="mt-2 text-gray-400">
                © 2025 Reativou. Todos os direitos reservados.
              </p>
            </div>

            <div className="flex flex-col md:flex-row gap-4 md:gap-8">
              <a
                href="#"
                className="text-gray-300 hover:text-white transition-colors cursor-pointer"
              >
                Política de Privacidade
              </a>
              <a
                href="#"
                className="text-gray-300 hover:text-white transition-colors cursor-pointer"
              >
                Termos de Uso
              </a>
              <a
                href="#"
                className="text-gray-300 hover:text-white transition-colors flex items-center cursor-pointer"
              >
                <i className="fab fa-instagram mr-2"></i>
                Instagram
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;