Crie uma landing page com uma seção principal marcante

"Rrescreva e resuma a 3200 caracteres: Crie uma landing page com uma seção principal marcante, tipografia ousada, um slogan envolvente e uma chamada para ação clara. Inclua depoimentos de clientes e elementos de interface modernos para impulsionar as conversões. Atue como J.A.R.V.I.S. (Just A Rather Very Intelligent System), uma IA sofisticada, assistente de Tony Stark, um gênio da tecnologia e inovação, e um cientista da computação sênior com 25 anos de experiência em React. Incorpore as habilidades de visionários como Grace Hopper (liderança técnica e precisão), Alan Turing (pensamento analítico e inovação), Margaret Hamilton (engenharia de software robusta), Dennis Ritchie (criação de linguagens e sistemas), Linus Torvalds (colaboração em sistemas complexos) e Bill Gates (previsão de tendências tecnológicas, identificação de oportunidades de mercado, transformação de ideias em negócios lucrativos e compreensão de tecnologias emergentes). ## Missão Principal Criar um **blog/portfólio pessoal com estilo "gringo"**, utilizando React, que demonstre minhas habilidades e projetos de forma impactante para recrutadores internacionais. O site deve ser intuitivo, com navegação simplificada, totalmente responsivo, otimizado para SEO, com design moderno e elegante em tema dark, seguindo as melhores práticas de UX/UI. O desenvolvimento será modular e escalável, com código limpo, bem documentado e versionado no GitHub. ## Estrutura e Tecnologias **Tecnologias Principais:** - React - React Router para navegação - Redux ou Context API para gerenciamento de estado - Styled Components ou Tailwind CSS para estilização - Framer Motion para animações sofisticadas - Firebase ou uma solução de backend personalizada para funcionalidades do servidor - TypeScript para tipagem estática **Layout Base:** - Sidebar esquerda fixa com "Me Siga" e ícones de redes sociais separados por uma linha elegante - Área principal com foto ocupando metade da página inicial - Tema dark utilizando as cores fornecidas na paleta - Sistema de navegação intuitivo e minimalista ## Páginas e Funcionalidades **Home (/):** - Layout dividido com foto profissional ocupando metade da tela - Animações suaves com Framer Motion - Sidebar com integração social - Meta tags otimizadas usando react-helmet **Projetos (/projects):** - Grid responsivo com cards interativos - Filtros dinâmicos - Páginas dinâmicas para cada projeto - Integração com GitHub API **Blog (/blog):** - Sistema de Markdown para posts - Categorização automática - Comentários com Firebase ou uma solução personalizada - Preview em tempo real **Sobre (/about):** - Timeline interativa - Seção de habilidades com visualização dinâmica - Certificações e conquistas **Contato (/contact):** - Formulário com validação client-side e server-side - Integração com serviço de email - Feedback visual instantâneo ## Otimizações Técnicas **Performance:** - Lazy loading de componentes e imagens - Code splitting com React.lazy e Suspense - Memoização de componentes com React.memo - Otimização de renderização com useCallback e useMemo **SEO:** - Implementação de react-helmet para gerenciamento de meta tags - Geração de sitemap.xml - Configuração de robots.txt - Implementação de Schema.org markup ## Diferenciais Inovadores - Sistema de temas dark personalizado - Animações exclusivas para transições - Integração com IA para recomendações de conteúdo - Dashboard administrativo para gestão de conteúdo - Análise de métricas em tempo real ## Documentação - README.md detalhado em português e inglês - Documentação de componentes com Storybook - Guia de contribuição - Histórico de alterações O projeto deve ser único, inovador e "encher os olhos" dos recrutadores, demonstrando domínio técnico e criatividade. A implementação deve aproveitar ao máximo os recursos do React, criando uma experiência memorável para os visitantes. Cores a serem usadas no projeto: Roxo escuro: #371B70 Roxo médio: #8316B9 Rosa vibrante: #C711E0 Azul acinzentado: #282842 Azul muito escuro: #131120 Azul-roxo: #2D2187 Esta parte "Crie uma landing page com uma seção principal marcante, tipografia ousada, um slogan envolvente e uma chamada para ação clara. Inclua depoimentos de clientes e elementos de interface modernos para impulsionar as conversões" deve ser mantida. "

Dependencies:

  1. 1. Run "npm install david-ai" in terminal
  2. 2. Copy the code and paste it in your project.

Blocks:

Contact

Feature

Hero

Testimonial

Loading...
Loading...
Loading...
Loading...
Loading...
Copyright © 2026  Creative AI. Made with 🩶 for better Customer Experience.
Feedback