vibn-frontend/marketing

📢 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:

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:

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