Criando uma Homepage com React

Homepage moderna e responsiva construída com React, TypeScript e Vite, desenvolvida como projeto de portfólio.

O projeto simula a página inicial do DevFlow, um produto fictício que reúne sessões de foco, tarefas e snippets de código para quem programa — usado aqui como pretexto para aplicar, na prática, componentização, props, estado, eventos e layout responsivo em React.

Preview

Tecnologias

• React 18
• TypeScript
• Vite
• CSS (Flexbox, Grid, media queries, clamp())
• lucide-react para ícones
• ESLint

Funcionalidades

• Header fixo com navegação por âncoras e menu mobile funcional
• Hero com mockup de terminal animado via CSS
• Seção de recursos com cards renderizados a partir de uma lista (componente reutilizável)
• Seção sobre o projeto
• Formulário de contato com validação básica no frontend (sem backend)
• Footer com links de navegação e link para o desafio original
• Layout 100% responsivo, do mobile ao desktop

Estrutura

src/
├── assets/
├── components/
│   ├── Header/
│   ├── Hero/
│   ├── Features/
│   ├── About/
│   ├── Contact/
│   └── Footer/
├── App.tsx
├── main.tsx
├── App.css
└── index.css

Instalação

npm install

Executar em desenvolvimento

npm run dev

Build

npm run build

Preview do build

npm run preview

Desafio DIO

Este projeto foi desenvolvido como parte do desafio Criando uma Homepage com React, da Digital Innovation One (DIO).

Repositório oficial de referência: digitalinnovationone/desafio02-ts

Autor

Filipe Oliveira Cardoso