Windstream Business Components

React component library containing Windstream's business components for header and footer, matching the official Windstream Business website design.

Components

Header Component

• Main navigation header with responsive design
• Desktop and mobile layouts
• Features:
  • Customer service number display
  • Contact number
  • My Account button
  • Navigation menu with dropdowns
  • Offers section with notification dot
  • Gradient call-to-action button
  • Mobile burger menu

Footer Component

• Comprehensive footer with responsive design
• Three main sections:
  1. Main Links Section
     • 6-column grid layout on desktop
     • Collapsible sections on mobile
     • Categories: Services, Industries, Resources, Company, Contact Us, Other Links
     • Interactive hover states
  2. Legal Links Section
     • Horizontal layout with separators on desktop
     • Row format with pipe separators on mobile
     • Social media icons (LinkedIn, Facebook, YouTube)
     • Copyright text
  3. Disclaimer Section
     • Legal text with proper typography
     • Responsive padding and spacing

Installation

npm install @windstream/business-components

Usage

import { Header, Footer } from '@windstream/business-components'

// Header Component
<Header 
  customerServiceNumber="1-833-241-0100"
  callNowNumber="1-855-439-2889"
  onPhoneClick={() => {}}
  onMyAccountClick={() => {}}
/>

// Footer Component
<Footer />

Development

# Install dependencies
npm install

# Start the development server
npm run dev

# Build the library
npm run build

File Structure

packages/
├── business/
│   ├── src/
│   │   ├── components/
│   │   │   ├── footer/
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main-links/
│   │   │   │   ├── legal-links/
│   │   │   │   └── disclaimer/
│   │   │   └── header/
│   │   │       ├── index.tsx
│   │   │       └── burger-menu/
│   │   └── utils/
│   │       └── class-names.ts
│   ├── package.json
│   └── tsconfig.json
└── core/
    └── ... (core components)

Design Specifications

Colors

• Primary Blue: #00B9E6
• Text Gray: #2D2926
• Button Gradient:
  • From: #40AFC9
  • To: #007c83

Typography

• Font sizes: 13px (mobile) to 15px (desktop)
• Font weights: Regular (400), Medium (500), Semibold (600)

Breakpoints

• Mobile: < 768px
• Desktop: ≥ 768px

Best Practices

1. Component Organization

   • Modular component structure
   • Separate mobile and desktop implementations
   • Reusable utility functions

2. Styling

   • Tailwind CSS for styling
   • Responsive design patterns
   • Consistent color usage
   • Proper spacing and alignment

3. Accessibility

   • ARIA labels for interactive elements
   • Keyboard navigation support
   • Proper heading hierarchy

4. Performance

   • Optimized SVG icons
   • Conditional rendering
   • Efficient state management

Contributing

Please refer to our contributing guidelines for details on our code of conduct and the process for submitting pull requests.