🚀 Modern Agency Website Template

A beautiful, fully responsive, and SEO-optimized website template built with Next.js 15, Tailwind CSS, and shadcn/ui. Perfect for agencies, startups, or any business looking for a professional web presence.

✨ Features

🎨 Modern Design

• Clean, professional design with smooth animations
• Fully responsive across all devices
• Dark/light theme support
• Custom color schemes and branding

⚡ Performance Optimized

• Built with Next.js 15 App Router
• Static site generation (SSG) for blazing fast loading
• Optimized images and assets
• SEO-friendly with proper meta tags and structured data

🎭 Smooth Animations

• GSAP-powered animations (no Framer Motion needed!)
• Scroll-triggered animations
• Staggered content reveals
• Smooth page transitions

📱 Responsive & Accessible

• Mobile-first responsive design
• WCAG 2.1 compliant accessibility
• Keyboard navigation support
• Screen reader friendly

🔍 SEO Ready

• Centralized metadata management
• Open Graph and Twitter Card support
• Structured data (JSON-LD)
• Canonical URLs and sitemap ready

📝 Content Management

• MDX support for blog posts
• Easy content updates
• Dynamic routing for blog posts
• Markdown with syntax highlighting

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Animations: GSAP
• Content: MDX
• Deployment: Vercel Ready

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, or bun

Installation

1. Clone the repository

   git clone https://github.com/pinak3748/modern-agency-template.git
   cd modern-agency-template

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   bun install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   bun dev

4. Open your browser Navigate to http://localhost:3000

📁 Project Structure

├── app/                    # Next.js App Router
│   ├── about/             # About page
│   ├── blog/              # Blog pages
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # Reusable components
│   ├── custom/            # Custom components
│   ├── landing/           # Landing page sections
│   ├── magicui/           # UI components
│   └── ui/                # shadcn/ui components
├── content/               # MDX blog posts
├── data/                  # Static data
├── hooks/                 # Custom React hooks
├── lib/                   # Utility functions
│   ├── metadata.ts        # SEO metadata config
│   ├── GSAPAnimations.ts  # Animation utilities
│   └── utils.ts           # Helper functions
└── public/                # Static assets

🎨 Customization

Branding

1. Update the logo in components/custom/Navbar.tsx
2. Change colors in tailwind.config.js
3. Update site info in lib/metadata.ts

Content

1. Homepage sections in components/landing/
2. About page in app/about/page.tsx
3. Blog posts in content/ directory

SEO

1. Site metadata in lib/metadata.ts
2. Page-specific metadata in individual page files
3. Structured data for better search visibility

📝 Adding Blog Posts

1. Create a new .mdx file in the content/ directory
2. Add frontmatter with required fields:

   ---
   title: "Your Post Title"
   publishedAt: "2024-01-01"
   summary: "Brief description of your post"
   image: "path/to/image.jpg"
   tag: ["Tag1", "Tag2"]
   ---
   
   Your post content here...

🎭 Animation System

This template uses GSAP for smooth, performant animations:

• Scroll-triggered animations for content reveals
• Staggered animations for lists and grids
• Smooth transitions between pages
• Custom animation effects in lib/GSAPAnimations.ts

Adding Custom Animations

// Use the built-in animation effects
gsap.effects.fadeUpOnScroll(element, {
  start: "top 90%",
  duration: 0.8,
  yOffset: 30
});

// Or create custom animations
gsap.fromTo(element, {
  opacity: 0,
  y: 50
}, {
  opacity: 1,
  y: 0,
  duration: 1,
  ease: "power2.out"
});

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with zero configuration

Other Platforms

• Netlify: Connect your GitHub repo
• Railway: Deploy with railway up
• Self-hosted: Build with npm run build

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Areas for Contribution

• 🎨 New page templates
• 🎭 Additional animation effects
• 📱 Mobile optimizations
• ♿ Accessibility improvements
• 📚 Documentation updates

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js for the amazing framework
• Tailwind CSS for the utility-first CSS
• shadcn/ui for beautiful components
• GSAP for smooth animations
• Lucide for beautiful icons

📞 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

🌟 Show Your Support

If you found this template helpful, please give it a ⭐ on GitHub!

---

Built with ❤️ by Pinak Faldu

This template is designed to be a starting point for your next project. Feel free to customize it to match your brand and requirements!