Landing page moderna e responsiva desenvolvida com as práticas mais recentes do Angular, inspirada no design da comunidade Figma da Nexcent.
O Nextcent é uma landing page voltada para plataformas de gerenciamento de comunidades, clubes e associações. O projeto foi construído para explorar recursos modernos do Angular, focando em componentização limpa, reatividade com Signals e estilização baseada em Design Tokens.
- Headerbar: Barra de navegação com logotipo da marca, links rápidos e botão de Call-to-Action (CTA).
- Hero Section: Apresentação principal de alto impacto visual com texto de destaque e botão de registro.
- Seção de Clientes: Vitrine de logotipos de empresas e clientes parceiros.
- Seção de Comunidade: Cards modulares (
app-community-frame) para apresentação de casos de uso (Clubes, Associações Nacionais, etc.). - Signal Inputs: Utilização da nova API
input.required()do Angular para passagem reativa e tipada de propriedades entre componentes. - Otimização de Imagens: Uso de
NgOptimizedImage(ngSrc/fill) para melhor desempenho de carregamento. - Design System com CSS Variables: Tokens centralizados de cores primárias, secundárias, tons (tints/shades) e tipografia Inter em
src/styles.css.
- Angular: Componentes Standalone, Signals e Signal Inputs.
- TypeScript: Tipagem estática e segurança no desenvolvimento.
- CSS3: Variáveis CSS (Design Tokens), Flexbox e layout responsivo.
- Vitest & jsdom: Execução rápida e moderna de testes unitários.
- Prettier: Padronização e formatação consistente de código.
nextcent/
├── public/ # Arquivos públicos e estáticos
│ ├── assets/ # Imagens da marca, hero, clientes e comunidade
│ └── favicon.ico
├── src/
│ ├── app.component.ts # Componente raiz da aplicação
│ ├── main.ts # Bootstrap da aplicação Angular
│ ├── styles.css # Estilos globais e tokens de cores CSS
│ ├── components/
│ │ ├── layout.component.ts # Estrutura geral de layout
│ │ ├── headerbar/ # Componente do cabeçalho de navegação
│ │ └── sections/
│ │ ├── hero/ # Hero Section com CTA
│ │ ├── clients/ # Seção de clientes parceiros
│ │ └── community/ # Seção e cards modulares de comunidade
│ └── services/
│ └── auth.service.ts # Exemplo de serviço com Angular Signals
├── angular.json # Configuração do Angular CLI
└── package.json # Dependências e scripts do projeto
-
Clone o repositório:
git clone git@github.com:tosuki/nextcent.git cd nextcent -
Instale as dependências:
npm install
-
Inicie o servidor de desenvolvimento:
npm start # ou: ng serve -
Acesse no navegador: Abra http://localhost:4200/ para visualizar a aplicação.
- Build de produção:
npm run build
- Executar testes unitários:
npm test - Modo de desenvolvimento com watch:
npm run watch
Nextcent is a landing page designed for community, club, and association management platforms. Built with modern Angular conventions, it highlights clean component architecture, reactivity with Signals, and a design token-driven style system inspired by the Nexcent Figma community template.
- Navigation Headerbar: Clean navbar with branding, navigational links, and a call-to-action button.
- Hero Section: High-converting section with value proposition and registration CTA.
- Clients Section: Partner logos showcase.
- Community Management Showcase: Reusable cards (
app-community-frame) displaying platform capabilities. - Signal Inputs: Powered by Angular's modern
input.required()API for type-safe reactive inputs. - Image Optimization: Utilizes
NgOptimizedImage(ngSrc/fill) for enhanced core web vitals and fast loading. - Design Tokens: Standardized color palette (primary green shades, tints, and neutrals) configured in
src/styles.css.
- Angular (Standalone Components, Signals & Signal Inputs)
- TypeScript
- CSS3 (Custom Properties & Flexbox)
- Vitest & jsdom (Unit testing)
- Prettier (Code formatting)
-
Clone the repository:
git clone git@github.com:tosuki/nextcent.git cd nextcent -
Install dependencies:
npm install
-
Run development server:
npm start
-
Open in browser: Navigate to http://localhost:4200/.
Desenvolvido por tosuki.