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

Clone the repository:

git clone <repository-url>
cd "Socialbuddy Marketing"

Install dependencies:

npm install

Run the development server:

npm run dev

Open 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)

Push your code to GitHub
Import project in Vercel
Deploy automatically

Or use Vercel CLI:

npm install -g vercel
vercel

Netlify

Build the project:

npm run build

Deploy the .next folder to Netlify

Other Platforms

Build command:

npm run build

Output directory: .next

📝 Environment Variables

No environment variables required for the marketing site.

🔧 Customization

Update Brand Colors

Edit app/globals.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

Built with ❤️ by the SocialBuddy Team