Landing Page - Copy this React, Tailwind Component to your project
Crie uma landing page moderna e funcional para uma plataforma chamada "Plat Tramites", especializada em serviços de imigração e automação. A página deve seguir as diretrizes de design fornecidas e ser otimizada para conversão, garantindo uma excelente experiência de usuário e acessibilidade. Detalhes da Página: 1. Estrutura Geral: Tamanho da Página: A página terá uma largura de 1440px e altura de 5128px. Cor de Fundo: #FFFFFF (branco). 2. Seções Principais: 2.1. Seção "Why" (Por quê): Tamanho: 1440px de largura, 786px de altura. Posição: Topo a 1024px. Cor de Fundo: #F2F7FF (azul claro). Inclua três "Features" principais: Feature 1: Posição: 925px de esquerda e 1429px do topo. Tamanho: 259px de largura e 255px de altura. Cor de Fundo: #FCFCFC com bordas arredondadas (8px) e sombra leve. Ícone (Rocket): Tamanho 37x37px, cores primárias #027794 e #C3E8F1. Título: "A primeira" em Playfair Display, 22px, cor #363940. Descrição: "Descrição do recurso" com a fonte Plus Jakarta Sans, 13px, cor #8B8C8C. Feature 2: Posição: 641px de esquerda e 1431px do topo. Tamanho: 252px de largura e 253px de altura. Estilos idênticos à Feature 1, com variações de conteúdo. Feature 3: Posição: 925px de esquerda e 1150px do topo. Tamanho: 255px de largura e 253px de altura. Estilos idênticos à Feature 1, com variações de conteúdo. 2.2. Seção "Hero": Tamanho: 1501px de largura, 924px de altura. Cor de Fundo: #FFFFFF. Imagem Hero: Posição de 621px de esquerda e 100px do topo. Tamanho de 880px de largura e 852px de altura. Título Hero: "Sua solução na imigração", em Playfair Display, 90px, cor #094B72. Descrição: "Estamos aqui para ajudar você a cuidar da sua legalidade..." com fonte Plus Jakarta Sans, 24px, cor #4F4F4F. Botões CTA: "QUERO CONHECER" com fundo #094B72, 245px x 80px, bordas arredondadas. Texto em Plus Jakarta Sans, 16px, cor #F9F8F9. "SOU ADVOGADO", com texto azul #094B72, 16px. 2.3. Seção "Testemunhos": Tamanho: 1440px de largura, 1259px de altura. Cor de Fundo: #F2F7FF. Inclua três cartões de testemunho: Cartão 1: Posição 168px da esquerda, 3332px do topo. Cor de fundo: #FFFFFF com sombra. Use fonte "Poppins" para títulos (18px) e texto (14px). Destaque citações com um marcador de citação estilizado com opacidade de 0.2. 2.4. Seção "CTA" (Call to Action): Tamanho: 1440px de largura, 374px de altura. Cor de Fundo: #FFFFFF. Título CTA: "Não se preocupe..." em Playfair Display, 48px, cor #094B72. Texto: Descrição em Poppins, 24px, cor #4F4F4F. Imagem ao lado direito: Posição 1017px da esquerda e 4389px do topo, com bordas arredondadas à esquerda. 2.5. Seção "Footer": Tamanho: 1440px de largura, 402px de altura. Cor de Fundo: #094B72. Links Importantes: Quatro colunas de links, como "Preciso de um Advogado", "Sobre", "Avaliações", e "Termos". Logo: Posicione no canto esquerdo inferior, use cor #FFFFFF para ícones. Utilize as propriedades CSS e estilos descritos para estruturar e estilizar cada componente da página, garantindo uma experiência visual consistente e profissional, conforme o design proposto no Figma.
