# 📢 Marketing Directory

This directory contains all marketing-specific code for the VIBN landing pages and promotional content.

## 📁 Structure

```
marketing/
├── components/          # Marketing-specific React components
│   ├── hero.tsx        # Hero section with main CTA
│   ├── features.tsx    # Features grid with cards
│   ├── cta.tsx         # Call-to-action sections
│   └── index.ts        # Component exports
├── content/            # Marketing copy and content
│   └── homepage.ts     # Homepage content/copy
└── styles/             # Marketing-specific styles (future)
```

## 🎯 Purpose

This directory keeps marketing code separate from application code, making it easier to:
- Update messaging and copy
- Redesign marketing pages without affecting the app
- Collaborate with designers/copywriters
- Maintain consistent branding

## 🔗 Usage

Marketing components are used in the `app/(marketing)/` routes:

```tsx
import { Hero, Features, CTA } from "@/marketing/components";

export default function Page() {
  return (
    <>
      <Hero />
      <Features />
      <CTA />
    </>
  );
}
```

## 📝 Content Management

All marketing copy is centralized in `content/homepage.ts` for easy updates:

```typescript
import { homepage } from "@/marketing/content/homepage";

// Use in components
<h1>{homepage.hero.title}</h1>
```

## 🚀 Adding New Sections

1. Create component in `components/`
2. Add content to `content/homepage.ts`
3. Export from `components/index.ts`
4. Use in `app/(marketing)/page.tsx`

## 📖 Design Guidelines

Follow the guidelines in `/PROJECT_INSTRUCTIONS.md` for:
- Voice & tone
- Design principles
- SEO requirements
- Accessibility standards