# SocialBuddy Marketing Website

A fully responsive, SEO-optimized marketing website for SocialBuddy - a social media management platform.

## 🚀 Features

- **Modern Next.js 14** with App Router and TypeScript
- **Fully Responsive Design** - Mobile-first approach
- **SEO Optimized** - Complete meta tags, Open Graph, and Twitter Cards
- **Premium UI/UX** - Vibrant gradients, glassmorphism, smooth animations
- **Multiple Pages**:
  - Home (Hero, Features, Pricing)
  - Features (Detailed feature showcase)
  - Pricing (Free, Pro, Premium plans with FAQ)
  - Documentation (Comprehensive guides)
  - Blog (Latest news and tutorials)
- **Reusable Components** - Navbar, Footer, Hero, Features, Pricing
- **Performance Optimized** - Fast loading times
- **Deploy Ready** - Configured for Vercel, Netlify, or any hosting platform

## 📦 Tech Stack

- **Framework**: Next.js 14
- **Language**: TypeScript
- **Styling**: CSS Modules + Tailwind CSS
- **Fonts**: Inter & Outfit (Google Fonts)
- **Animations**: Custom CSS animations

## 🛠️ Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd "Socialbuddy Marketing"
```

2. Install dependencies:
```bash
npm install
```

3. Run the development server:
```bash
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

## 📁 Project Structure

```
├── app/
│   ├── layout.tsx          # Root layout with Navbar & Footer
│   ├── page.tsx            # Homepage
│   ├── globals.css         # Global styles & design system
│   ├── features/           # Features page
│   ├── pricing/            # Pricing page
│   ├── docs/               # Documentation page
│   └── blog/               # Blog page
├── components/
│   ├── Navbar.tsx          # Navigation component
│   ├── Footer.tsx          # Footer component
│   ├── Hero.tsx            # Hero section
│   ├── Features.tsx        # Features section
│   └── Pricing.tsx         # Pricing section
└── public/                 # Static assets
```

## 🎨 Design System

The site uses a comprehensive design system with:
- **Color Palette**: Primary (Indigo), Secondary (Pink), Accent (Teal)
- **Gradients**: Multiple vibrant gradients
- **Spacing**: Consistent spacing scale
- **Typography**: Responsive font sizes with clamp()
- **Shadows**: Multiple shadow levels
- **Animations**: Fade, slide, scale, float effects

## 🚀 Deployment

### Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Deploy automatically

Or use Vercel CLI:
```bash
npm install -g vercel
vercel
```

### Netlify

1. Build the project:
```bash
npm run build
```

2. Deploy the `.next` folder to Netlify

### Other Platforms

Build command:
```bash
npm run build
```

Output directory: `.next`

## 📝 Environment Variables

No environment variables required for the marketing site.

## 🔧 Customization

### Update Brand Colors

Edit `app/globals.css`:
```css
:root {
  --primary: #6366f1;
  --secondary: #ec4899;
  --accent: #14b8a6;
}
```

### Update Content

- **Homepage**: Edit `app/page.tsx`
- **Features**: Edit `components/Features.tsx`
- **Pricing**: Edit `components/Pricing.tsx`
- **Navigation**: Edit `components/Navbar.tsx`
- **Footer**: Edit `components/Footer.tsx`

## 📄 Pages

- `/` - Homepage with Hero, Features, and Pricing
- `/features` - Detailed features showcase
- `/pricing` - Pricing plans with FAQ
- `/docs` - Documentation hub
- `/blog` - Blog listing page

## 🎯 SEO Features

- Comprehensive meta tags
- Open Graph tags for social sharing
- Twitter Card support
- Semantic HTML structure
- Optimized heading hierarchy
- Fast page load times
- Mobile-friendly design

## 📱 Responsive Breakpoints

- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📧 Support

For support, email support@socialbuddy.com or visit our documentation.

## 📜 License

Copyright © 2025 SocialBuddy. All rights reserved.

---

Built with ❤️ by the SocialBuddy Team