SEO-Optimized Next.js Template for Agency and Startup Websites

This is a modern, responsive, SEO-friendly agency website template built with Next.js, Tailwind CSS, and shadcn/ui.

This template uses the Next.js App Router, which provides a file-based routing system and supports React Server Components by default for improved performance .

This allows for nested layouts that preserve state during navigation and reduces unnecessary re-renders.

The template integrates shadcn/ui for accessible and customizable components, and opts for GSAP over more React animation libraries to handle complex, scroll-triggered animations .

Features & Effects

Use Cases

• Digital agencies can use it to build a professional website to showcase their portfolio and services.
• Startups can create a polished marketing site to attract investors and customers.
• Freelance developers and designers can establish a personal brand and display their work.
• Businesses can quickly launch a landing page for a new product or service.
• Creative studios can present their projects in a visually appealing format.

How to Use It

1. Clone the repository from GitHub.

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

2. Install all project dependencies using your preferred package manager:

npm install
# or use yarn install
# or use bun install

3. Start the development server to preview the template at http://localhost:3000

npm run dev

4. Update your brand identity by modifying the logo in components/custom/Navbar.tsx. Replace the existing logo component with your own logo file or SVG markup.

5. Configure your site’s color scheme by editing the tailwind.config.js file. Modify the color variables in the theme section to match your brand colors:

theme: {
  extend: {
    colors: {
      primary: '#your-primary-color',
      secondary: '#your-secondary-color'
    }
  }
}

6. Edit site metadata and SEO settings in lib/metadata.ts. Update the site title, description, social media links, and other metadata that affect search engine optimization:

export const siteConfig = {
  name: "Website",
  description: "Website Description",
  url: "https://next.jqueryscript.net",
  ogImage: "https://next.jqueryscript.net/og.png",
  logo: "https://next.jqueryscript.netlogo.png",
  keywords: [
    "next.js",
    "shadcn",
    "tailwind",
  ],
  // ...
]

7. Customize homepage sections by editing files in the components/landing/ directory. Each section (hero, services, about, testimonials) has its own component file that you can modify to match your content needs.

8. Update the about page content by editing app/about/page.tsx. This file contains the main content structure and can be customized with your company story, team information, and values.

9. Create blog posts by adding new MDX files to the content/ directory.

---
title: "Your Blog Post Title"
publishedAt: "2024-01-01"
summary: "Brief description of your post for SEO"
image: "/images/blog/your-post-image.jpg"
tag: ["Web Development", "Next.js"]
---
Your blog content goes here with full Markdown support.

Related Resources

• Next.js Documentation provides guides for understanding App Router, server components, and advanced Next.js features.
• Tailwind CSS Documentation offers information about utility classes, customization options, and responsive design patterns.
• shadcn/ui Components features a library of copy-paste components.
• GSAP Documentation contains tutorials and examples for creating advanced animations and interactive experiences.

FAQs

Q: Can I customize the color scheme and branding?
A: Yes, you can modify colors in tailwind.config.js and update branding elements like logos in the component files.

Q: Can I remove the blog functionality if I don’t need it?
A: Yes, you can remove blog-related components and routes by deleting the app/blog/ directory and removing blog-related imports from other components.

Q: Can I use a different animation library instead of GSAP?
A: Yes, you can replace GSAP with another library like Framer Motion. This would involve removing the existing GSAP implementation from lib/GSAPAnimations.ts and integrating your chosen library into the components.

Q: How do I deploy the website?
A: The template is ready for deployment on Vercel. You can connect your GitHub repository to a Vercel account, which will enable automatic deployments whenever you push changes.