AI WebGen - Sites Criados 100% por Inteligência Artificial

Uma plataforma revolucionária que showcases projetos web gerados inteiramente por IA, demonstrando o futuro da criação digital.

🤖 Sobre o Projeto

O AI WebGen é uma vitrine de projetos criados 100% por inteligência artificial, desde o design até o código. Nossa plataforma demonstra como a IA está revolucionando o desenvolvimento web, criando sites únicos e funcionais em minutos.

✨ Funcionalidades

🎯 Funcionalidades Interativas

• Filtro de projetos IA: Galeria com filtros por categoria (ecommerce, dashboard, portfolio, etc.)
• Animações futuristas: Efeitos visuais que remetem à tecnologia e IA
• Seção da equipe: Apresentação dos criadores com links de contato

🎨 Funcionalidades de Conteúdo

• Showcase de projetos IA: Galeria de sites gerados por diferentes modelos de IA
• Processo transparente: Explicação de como a IA cria os projetos
• Perfis da equipe: Informações detalhadas dos desenvolvedores

🚀 Adição Fácil de Conteúdo

➕ Adicionar Novos Projetos

Para adicionar um novo projeto, edite o array aiProjects em app/page.tsx:

```typescript const aiProjects = [ // ... projetos existentes { id: 7, // próximo ID title: "Seu Novo Projeto", description: "Descrição do projeto gerado por IA", image: "/placeholder.svg?height=300&width=400", // ou URL da imagem category: "categoria", // ecommerce, dashboard, portfolio, landing, mobile, blog aiModel: "Modelo de IA Usado", // ex: "GPT-4 + Midjourney" technologies: ["Tech1", "Tech2", "Tech3"], // tecnologias usadas featured: false, // true para destacar o projeto demoUrl: "https://link-demo.com", // link para ver o projeto codeUrl: "https://github.com/repo", // link para o código generationTime: "X minutos", // tempo que a IA levou }, ] ```

👥 Editar Informações da Equipe

Para atualizar as informações da equipe, edite o array teamMembers em app/page.tsx:

```typescript const teamMembers = [ { id: 1, name: "Seu Nome", // ← Substitua aqui role: "Seu Cargo", // ← Substitua aqui bio: "Sua biografia...", // ← Substitua aqui avatar: "/caminho/para/sua/foto.jpg", // ← Substitua pela sua foto links: { github: "https://github.com/seugithub", // ← Seus links linkedin: "https://linkedin.com/in/seulinkedin", twitter: "https://twitter.com/seutwitter", email: "seu@email.com", website: "https://seusite.com", }, }, { id: 2, name: "Nome do Parceiro", // ← Informações do segundo membro role: "Cargo do Parceiro", bio: "Biografia do parceiro...", avatar: "/caminho/para/foto/parceiro.jpg", links: { github: "https://github.com/parceiro", linkedin: "https://linkedin.com/in/parceiro", twitter: "https://twitter.com/parceiro", email: "parceiro@email.com", website: "https://siteparceiro.com", }, }, ] ```

🛠️ Tecnologias Utilizadas

• Next.js 14: Framework React para produção
• React 18: Biblioteca para interfaces de usuário
• TypeScript: Tipagem estática para JavaScript
• Tailwind CSS: Framework CSS utilitário com tema dark
• shadcn/ui: Componentes de UI modernos
• Lucide React: Ícones SVG otimizados

🎨 Design Dark & Futurista

• Paleta de cores: Tons escuros com acentos em cyan, purple e pink
• Gradientes: Efeitos visuais que remetem à tecnologia
• Animações: Efeitos de glow, float e pulse para tema AI
• Tipografia: Gradientes coloridos para títulos importantes

📦 Instalação e Configuração

Pré-requisitos

• Node.js 18+
• npm ou yarn
• Git

Passos para instalação

1. Clone o repositório ```bash git clone https://github.com/seu-usuario/ai-webgen.git cd ai-webgen ```

2. Instale as dependências ```bash npm install

ou

yarn install ```

3. Execute em modo de desenvolvimento ```bash npm run dev

ou

yarn dev ```

4. Acesse o projeto Abra http://localhost:3000 no seu navegador.

🚀 Deploy no GitHub Pages

Configuração Automática

Este projeto está configurado para deploy automático no GitHub Pages usando GitHub Actions.

Passos para configurar:

1. Fork ou clone este repositório

2. Configure o repositório no GitHub

   • Vá para Settings > Pages
   • Source: GitHub Actions

3. Atualize o next.config.js

   • Substitua static-interactive-site pelo nome do seu repositório: ```javascript basePath: process.env.NODE_ENV === 'production' ? '/SEU-REPOSITORIO' : '', assetPrefix: process.env.NODE_ENV === 'production' ? '/SEU-REPOSITORIO/' : '', ```

4. Personalize o conteúdo

   • Edite as informações da equipe no array teamMembers
   • Adicione suas fotos na pasta public/
   • Atualize os links de contato

5. Faça push para a branch main ```bash git add . git commit -m "Deploy AI WebGen personalizado" git push origin main ```

6. Aguarde o deploy

   • Acesse seu site em: https://seu-usuario.github.io/seu-repositorio

📁 Estrutura do Projeto

``` ai-webgen/ ├── .github/ │ └── workflows/ │ └── deploy.yml # GitHub Actions workflow ├── app/ │ ├── globals.css # Estilos globais (tema dark) │ ├── layout.tsx # Layout principal │ └── page.tsx # Página inicial (EDITE AQUI!) ├── components/ │ └── ui/ # Componentes shadcn/ui ├── lib/ │ └── utils.ts # Utilitários ├── public/ # Arquivos estáticos (SUAS FOTOS AQUI!) ├── next.config.js # Configuração do Next.js ├── package.json ├── README.md ├── tailwind.config.ts # Configuração do Tailwind (tema dark) └── tsconfig.json ```

🎯 Categorias de Projetos IA

• E-commerce: Lojas online
• Dashboard: Painéis de controle
• Portfolio: Sites pessoais
• Landing: Páginas de conversão
• Mobile: Apps mobile
• Blog: Sites de conteúdo

📸 Adicionando Suas Fotos

1. Coloque suas fotos na pasta public/images/
2. Atualize os caminhos no array teamMembers: ```typescript avatar: "/images/sua-foto.jpg", // ← Caminho para sua foto ```

🔗 Links de Contato Suportados

• GitHub: Repositórios e código
• LinkedIn: Perfil profissional
• Twitter: Rede social
• Email: Contato direto
• Website: Site pessoal

📱 Responsividade

O site é totalmente responsivo e otimizado para:

• 📱 Mobile (320px+)
• 📱 Tablet (768px+)
• 💻 Desktop (1024px+)
• 🖥️ Large screens (1280px+)

⚡ Performance

• Exportação estática: Carregamento ultra-rápido
• Otimização de imagens: Next.js Image component
• Code splitting: Carregamento sob demanda
• CSS otimizado: Tailwind CSS com purge

🤝 Contribuição

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/NovoProjetoIA)
3. Commit suas mudanças (git commit -m 'Add novo projeto IA')
4. Push para a branch (git push origin feature/NovoProjetoIA)
5. Abra um Pull Request

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

🤖 Sobre a IA

Este projeto demonstra o poder da inteligência artificial na criação web. Cada projeto showcased foi gerado usando diferentes modelos de IA:

• GPT-4: Geração de código e estrutura
• DALL-E 3: Criação de designs e imagens
• Claude 3: Otimização e refinamento
• Midjourney: Elementos visuais únicos
• Stable Diffusion: Texturas e backgrounds

---

Desenvolvido com 🤖 pela AI WebGen - O Futuro da Criação Web