UI Landing Page Components

Biblioteca de componentes reutilizáveis e layouts para landing pages da NV.

Instalação

npm install @nv/ui-landing-page

Uso Básico

import { Button, Card, ThemeProvider } from '@nv/ui-landing-page';

function App() {
  return (
    <ThemeProvider>
      <Card>
        <Button>Clique aqui</Button>
      </Card>
    </ThemeProvider>
  );
}

Layouts Reutilizáveis

import { DynamicSectionRenderer, type DynamicSection } from '@nv/ui-landing-page';

const sections: DynamicSection[] = [
  {
    id: 'hero',
    layout_type: 'layout1',
    order: 1,
    title: 'Bem-vindo',
    description: 'Sua descrição aqui',
    cards: []
  }
];

function MyLandingPage() {
  return <DynamicSectionRenderer sections={sections} />;
}

Layouts Disponíveis

Layouts Reutilizáveis

• Layout1 - Seção Hero/História com grid de cards
• Layout2 - Grid responsivo de cards com hover effects
• Layout3 - Carousel horizontal de cards
• Layout4 - Timeline vertical com alternância de cards
• Layout5 - Cards horizontais com imagem e conteúdo
• Layout6 - Cards centrados com design minimalista
• DynamicSectionRenderer - Renderizador dinâmico de seções

Tipos

• DynamicSection - Interface para seções dinâmicas
• LayoutCard - Interface para cards dos layouts
• LayoutProps - Props para componentes de layout
• CompanyData - Interface para dados da empresa

Componentes Disponíveis

UI Components

• Accordion
• AlertDialog
• Alert
• AspectRatio
• Avatar
• Badge
• Breadcrumb
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Collapsible
• Command
• ContextMenu
• Dialog
• Drawer
• DropdownMenu
• Form
• HoverCard
• InputOTP
• Input
• Label
• Menubar
• NavigationMenu
• Pagination
• Popover
• Progress
• RadioGroup
• Resizable
• ScrollArea
• Select
• Separator
• Sheet
• Sidebar
• Skeleton
• Slider
• Sonner
• Switch
• Table
• Tabs
• Textarea
• Toast
• Toaster
• ToggleGroup
• Toggle
• Tooltip

Hooks

• useMobile
• useSearch
• useToast
• useCompanyData

Utils

• cn (class name utility)

Desenvolvimento

# Instalar dependências
npm install

# Build
npm run build

# Desenvolvimento com watch
npm run dev

Estrutura

src/
├── components/
│   ├── ui/           # Componentes UI base
│   └── index.ts      # Exports dos componentes
├── hooks/            # Hooks customizados
├── lib/              # Utilitários
└── index.ts          # Export principal