Skip to content

devinigarcia/SolidTech-nextjs

Repository files navigation

# Solid Tech - Website Um website moderno e responsivo para a Solid Tech, empresa de soluções tecnológicas inovadoras. Desenvolvido com Next.js 14, TypeScript, Tailwind CSS e Framer Motion. ## 🚀 Tecnologias Utilizadas - **Next.js 14** - Framework React com App Router - **TypeScript** - Tipagem estática para JavaScript - **Tailwind CSS** - Framework CSS utilitário - **Framer Motion** - Biblioteca de animações - **Lucide React** - Ícones modernos - **Responsive Design** - Mobile-first approach ## 📁 Estrutura do Projeto ``` solidtech-nextjs/ ├── app/ │ ├── components/ │ │ ├── ui/ # Componentes reutilizáveis │ │ │ ├── Button.tsx │ │ │ ├── Card.tsx │ │ │ ├── SectionTitle.tsx │ │ │ ├── SectionWrapper.tsx │ │ │ └── AnimatedSection.tsx │ │ ├── Header.tsx # Cabeçalho com navegação │ │ ├── Footer.tsx # Rodapé completo │ │ ├── Hero.tsx # Seção hero da homepage │ │ ├── Features.tsx # Seção de funcionalidades │ │ ├── Cases.tsx # Cases de sucesso │ │ ├── Testimonials.tsx # Depoimentos de clientes │ │ ├── Pricing.tsx # Planos e preços │ │ └── ContactForm.tsx # Formulário de contato │ ├── sobre/ # Página Sobre │ ├── solucoes/ # Página Soluções │ ├── cases/ # Página Cases │ ├── blog/ # Página Blog │ ├── contato/ # Página Contato │ ├── layout.tsx # Layout principal │ └── page.tsx # Homepage ├── styles/ │ └── globals.css # Estilos globais e Tailwind ├── public/ │ └── images/ # Imagens e assets ├── tailwind.config.js # Configuração do Tailwind ├── postcss.config.js # Configuração do PostCSS ├── next.config.js # Configuração do Next.js ├── tsconfig.json # Configuração do TypeScript └── package.json # Dependências do projeto ``` ## 🎨 Design System ### Cores - **Primary**: Azul (#0ea5e9) - **Secondary**: Roxo (#a855f7) - **Dark**: Cinza escuro (#0f172a) - **Gradients**: Combinações de primary e secondary ### Tipografia - **Display**: Poppins (títulos) - **Body**: Inter (texto) ### Componentes - **Button**: Variações (primary, secondary, outline, ghost) - **Card**: Container com hover effects - **SectionTitle**: Títulos padronizados - **SectionWrapper**: Wrapper com backgrounds - **AnimatedSection**: Animações com Framer Motion ## 🚀 Como Executar ### Pré-requisitos - Node.js 18+ - npm ou yarn ### Instalação 1. **Clone o repositório** ```bash git clone cd solidtech-nextjs ``` 2. **Instale as dependências** ```bash npm install # ou yarn install ``` 3. **Execute o projeto em desenvolvimento** ```bash npm run dev # ou yarn dev ``` 4. **Acesse no navegador** ``` http://localhost:3000 ``` ### Scripts Disponíveis - `npm run dev` - Executa em modo desenvolvimento - `npm run build` - Gera build de produção - `npm run start` - Executa build de produção - `npm run lint` - Executa linter ## 📱 Responsividade O site é totalmente responsivo com breakpoints: - **Mobile**: < 768px - **Tablet**: 768px - 1024px - **Desktop**: > 1024px ## ✨ Funcionalidades ### Homepage - Hero section com animações - Seção de funcionalidades - Cases de sucesso - Depoimentos de clientes - Planos e preços - Formulário de contato ### Páginas Internas - **Sobre**: Missão, visão, valores e equipe - **Soluções**: Serviços oferecidos - **Cases**: Portfólio detalhado - **Blog**: Artigos e insights - **Contato**: Formulário e informações ### Componentes - Navegação responsiva com menu mobile - Animações suaves com Framer Motion - Formulários interativos - Cards com hover effects - Sistema de grid responsivo ## 🎯 SEO - Meta tags otimizadas - Open Graph para redes sociais - Estrutura semântica HTML5 - URLs amigáveis - Sitemap automático ## 🔧 Personalização ### Cores Edite o arquivo `tailwind.config.js` para alterar as cores do tema. ### Conteúdo - Textos: Edite os componentes em `app/components/` - Páginas: Modifique os arquivos em `app/[pagina]/page.tsx` - Imagens: Adicione em `public/images/` ### Animações Configure as animações em `app/components/ui/AnimatedSection.tsx` ## 📦 Deploy ### Vercel (Recomendado) 1. Conecte o repositório ao Vercel 2. Configure as variáveis de ambiente 3. Deploy automático ### Outras Plataformas - Netlify - AWS Amplify - DigitalOcean App Platform ## 🤝 Contribuição 1. Fork o projeto 2. Crie uma branch para sua feature 3. Commit suas mudanças 4. Push para a branch 5. Abra um Pull Request ## 📄 Licença Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes. ## 📞 Suporte Para dúvidas ou suporte, entre em contato: - Email: contato@solidtech.com - Telefone: (11) 99999-9999 --- Desenvolvido com ❤️ pela equipe Solid Tech # LP-SolidTech

About

Site institucional da Solid Tech

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published