1. Item Name : Acjon - Digital Agency & Creative Portfolio NextJs Template
  2. Created: 02 February 2026
  3. Item Version : v 0.1.0
  4. Author : Aqlova
  5. Support Ticket: https://help.aqlova.com/login

Introduction

Acjon - Digital Agency & Creative Portfolio NextJs Template

For any support please don't hesitate to contact us at Support Center. We provide 13 hours real-time support for our customers.

We would like to thank you for choosing Acjon - Digital Agency & Creative Portfolio NextJs Template.

Getting started

The template is easy to customize, ensuring a unique and professional look for your business. Get ahead of the competition and stand out in the market with our NextJs template for businesses.

Template Features

  • React JS
  • Next JS
  • Typescript
  • Bootstrap v5.x
  • Gsap Animation Included.
  • Scroll Animation Included.
  • Hover Animation Included.
  • Split Text Animation Included.
  • Scroll Magic Animation Included.
  • Hover Effect Animation Included.
  • 15+ Awesome Homepage
  • Responsive Design
  • Pixel Perfect Design
  • Clean Code & Unique Design
  • Easy to Customize
  • Validation form react-hook-form

What's Included

After purchasing Acjon template on themeforest.net with your Envato account, go to your Download page. You can choose to download Acjon template package which contains the following files:

The contents of the template package downloaded from ThemeForest

  • Acjon NextJs - An Nextjs Template file. this file you can edit and use for your business.
  • Documentation - This folder contains what you are reading now :)

React Installation

Please follow the instructions.

  1. For local host: -
    1. Open you command prompt
    2. npm install or npm install --legacy-peer-deps
    3. npm run dev (will start the dev server at http://loaclhost:3000)

  1. To deploy a Next.js application on Vercel, you can follow these steps: -
    1. Sign up for an account on Vercel if you don't have one already.
    2. Connect your GitHub, GitLab, or Bitbucket repository where your Next.js application is hosted.
    3. Import your repository on Vercel and select the Next.js project to be deployed.
    4. Vercel will automatically detect your Next.js application and perform the necessary build and deployment steps.
    5. Once the deployment is complete, you'll be able to access your application using the URL provided by Vercel.

Template Site Setting

Change Site Title, Favicon & Logo

To change the website title, favicon, and logo in Acjon, open the project in your preferred code editor and navigate to the main layout and header configuration files. Acjon uses Next.js built-in metadata for managing the site title and favicon, allowing you to update them easily from a centralized location.

For updating the logo, simply replace the existing logo image in the assets folder or update the logo path in the header component. This approach ensures consistent branding across all pages. Follow the screenshots below to locate the relevant files and apply your custom title, favicon, and logo.

3.1.1
You can change Favicon here
3.1.1
You can change Title here

Customize Menu

To customize menu do the following:

  1. From the project folder go to src data header-menu-data menuData.tsOpen the menu you want to use
  2. Then customize the menu
3.1.1
Customize the menu

GSAP Animation

How I Used Hook and Component

I implemented a reusable React hook to handle all GSAP animation logic (such as fade-in, split text, and scroll-trigger effects) for a cleaner and more maintainable codebase. The AnimationWrapper component dynamically maps animations based on the current pathname using the centralized animationConfig.ts file. This ensures that only the animations relevant to the active route are executed. Additionally, the wrapper intelligently manages both SSR and CSR rendering contexts, preventing unnecessary client-side rendering and improving overall performance.

animation-hook
Example of creating animation with hook (fade animation, split text, scroll trigger setup)
animation-use
Example of using route-based animations inside a component with useGSAP and a custom hook.
animation-use
Example of using route-based animations inside a React component with useGSAP and a custom hook, combining global and page-specific effects.
animation-use
Example of using the animation wrapper that handles both global and page-specific GSAP animations using useGSAP and a custom hook

404

To change 404 and setting you can change by following this screenshot here.

  1. From the project folder go to src app not-found.tsx Open the page you want to use
  2. Then customize the 404 data
3.1.1
Customize the 404

Customize Project Data

To change Project data and setting you can change by following this screenshot here.

  1. From the project folder go to src data Project.ts Open the data you want to use
  2. Then customize the Project data
3.1.1
Customize the Project data

Customize blog Data

To change blog data and setting you can change by following this screenshot here.

  1. From the project folder go to src data blogData.ts Open the blog data you want to use
  2. Then customize the blog data
3.1.1
Customize the blog data

Customize product Data

To change product data and setting you can change by following this screenshot here.

  1. From the project folder go to src data productData.ts Open the product data you want to use
  2. Then customize the product data
3.1.1
Customize the product data

Changing template colors

  1. Open the colors.scss file from public > assets > scss > utils > _colors.scss folder with a text-editor.
  2. Change the right-side values of the variables to change any default colors of your site.
  3. Save your file.
4.1.1

Google Fonts

Acjon uses Google Fonts for clean, modern, and highly readable typography. You can easily change the default font family by updating the main layout configuration.

  1. Open the layout file from the src > app > layout directory using your preferred code editor.
  2. Locate the Google Font import and font configuration, then replace it with your desired font from Google Fonts.
  3. Save the file and restart the development server to apply the changes.
Google Font configuration

Support

If you face any issue please contact us at Support Ticket. We provide 15 hours real-time support for our customers.

Thank you for purchasing our Template.