175 lines
4.1 KiB
Markdown
175 lines
4.1 KiB
Markdown
# 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
|