Corporate Enterprise

# Corporate Enterprise Landing Page

Create a professional, trustworthy landing page with structured layouts, blue/gray color schemes, and credibility-building elements for enterprise software.

## Design Specifications

**Style**: Corporate / Enterprise B2B
**Typography**: Clean sans-serif, professional hierarchy
**Layout**: Structured grids, predictable spacing
**Colors**: Professional blues, neutral grays, white backgrounds

## Prompt for AI Code Generation

```
Build a corporate enterprise landing page with these characteristics:

LAYOUT:
- Maximum width 1280px, centered
- Consistent 24-32px gutters
- Structured grid layouts (12-column base)
- Clear section separation with backgrounds

TYPOGRAPHY:
- Headlines: 36-60px, font-weight 700
- Body: 16-18px, text-gray-600
- Labels: 14px, uppercase tracking
- Font stack: Inter, Arial, system-ui, sans-serif

COLORS:
- Primary: #0066cc (corporate blue)
- Primary hover: #0052a3
- Background: #ffffff, #f5f7fa (alternating sections)
- Text: #111827 (headlines), #374151 (body), #6b7280 (muted)
- Success indicators: #10b981

INTERACTIONS:
- Button hover with slight darken
- Cards with subtle shadow on hover
- Underlines on link hover
- No rounded corners (or minimal 4px)

SECTIONS TO INCLUDE:
1. Navigation with logo, links, sign-in, and CTA
2. Hero with headline, description, and two CTAs
3. Stats bar (4 key metrics)
4. Trust badges / company logos
5. Features grid (6 items with icons)
6. Testimonial with quote and attribution
7. Final CTA section
8. Footer with 4-column layout

TECHNICAL:
- No decorative elements - purely functional
- Square or minimal border-radius
- Professional icon set (outline style)
- Adequate contrast for accessibility
```

## Example React Component Structure

```tsx
export default function CorporateEnterprise() {
  return (
    <div className="min-h-screen w-full bg-white text-gray-900">
      {/* Navigation */}
      <nav className="border-b border-gray-100">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <div className="text-xl font-bold text-[#0066cc]">Enterprise</div>
          <button className="bg-[#0066cc] px-6 py-2 font-medium text-white hover:bg-[#0052a3]">
            Request Demo
          </button>
        </div>
      </nav>

      {/* Hero */}
      <section className="bg-gradient-to-b from-gray-50 to-white py-24">
        <div className="mx-auto max-w-7xl px-6 text-center">
          <h1 className="mb-6 text-5xl font-bold">Enterprise-grade solutions for modern teams</h1>
          <div className="flex justify-center gap-4">
            <button className="bg-[#0066cc] px-8 py-4 font-medium text-white">
              Start Free Trial
            </button>
            <button className="border border-gray-300 px-8 py-4 font-medium">Schedule Demo</button>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="border-y border-gray-100 py-12">
        <div className="mx-auto grid max-w-7xl grid-cols-4 gap-8 px-6 text-center">
          <div>
            <div className="text-4xl font-bold text-[#0066cc]">500+</div>
            <div className="text-gray-500">Enterprise Clients</div>
          </div>
        </div>
      </section>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --color-primary: #0066cc;
  --color-primary-hover: #0052a3;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fa;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --border-radius: 0;
  --font-family: 'Inter', Arial, sans-serif;
}

button {
  border-radius: var(--border-radius);
  transition: background-color 150ms ease;
}
```

## Key Principles

1. **Trust through structure**: Predictable layouts build confidence
2. **Professional restraint**: No flashy effects or animations
3. **Credibility signals**: Stats, logos, testimonials, certifications
4. **Clear hierarchy**: Obvious visual priority for scanning
5. **Accessibility first**: High contrast, readable fonts, clear focus states