Menu

Package Versions

NextJs
v15.1.1

NextJs

React
v19.0.0

React

Tailwind CSS
v4.1.4

Tailwind CSS

NextAuth
v4.24.11

NextAuth

TypeScript
v5.6.3

TypeScript

The Zentric Solutions Website is designed with Tailwind & Next.js for modern performance, flexibility, and scalability — built using the latest web development technologies.

This theme offers a fully responsive layout, clean code structure, and seamless integration with frameworks like React, NextAuth, and TypeScript, making it ideal for startups and enterprise applications.

You can easily customize every section to fit your brand’s identity. A basic understanding of Next.js, React.js, Tailwind CSS, and JSX will help you extend functionality and create unique user experiences.

Docs Menu

Pacakge Structure

Zentric Solutions Tailwind Nextjs Templates

  • |—

    package

        • |—

          public

        • |—

          src

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          • |—

            app

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            • |—

              (site) (Contains all the pages)

              |

              |

              |

              |

              |

              |

              |

              |

              |

              |

              • |—

                (auth)

                |

                |

                • |

                  |—

                  signin

                • |

                  |—

                  signup

              • |—

                contact

              • |—

                documentation

              • |—

                privacy-policy

              • |—

                terms-and-conditions

            • |—

              api

              |

              |

              • |

                |—

                auth

              • |

                |—

                page-data

            • |—

              globals.css

            • |—

              layout.tsx

            • |—

              not-found.tsx

            • |—

              page.tsx

          • |—

            components (All the Components of this template.)

          • |—

            styles

          • |—

            types

          • |—

            utils

        • |—

          next.config.mjs

        • |—

          postcss.config.mjs

        • |—

          package.json

        • |—

          postcss.config.mjs

        • |—

          tsconfig.json

Quick Start

1. Requirements

Before proceeding, you need to have the latest stable node.js

Recommended environment:
  • node js 20+
  • npm js 10+
2. Install

Open package folder and install its dependencies. We recommanded yarn or npm.

1) Install with npm:

cd project-folder

npm install

1) Install with yarn:

cd project-folder

yarn install

3. Start

Once npm install is done now you an run the app.

npm run dev or yarn run dev

This command will start a local webserver http://localhost:3000:

> awake_project@1.0.0 dev

> next dev

-Next.js 15.1.7

-Local: http://localhost:3000

4. Build / Deployment

After adding url run below command for build a app.

npm run build or yarn build

Finally, Your webiste is ready to be deployed.🥳

Project Configuration

Colors

1. Override Colors
For any change in colors : src/utils/extendedConfig.ts

dark_black: "#1B1D1E",purple_blue: "#4928FD",purple: "#BA81EE",blue: "#70B5FF",orange: "#FFAF68",green: "#79D45E",pink: "#F4889A",blue_gradient: "#D9F3FC",yellow_gradient: "#FDF1D3",paleYellow: "#F6E683",dark_yellow_gradient: "#443f32",dark_blue_gradient: "#303d42"

2. Override Theme Colors
For change , go to : src/utils/extendedConfig.ts

dark_black: "#1B1D1E",purple_blue: "#4928FD",

Typography

1. Change Font family over here : src/app/globals.css

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

html { font-family: "Inter Tight", sans-serif; }

Logo

1. Change Logo over here : src/components/layout/header/logo/index.tsx

<Link href="/">

<Image

src="/images/logo/logo.svg"

alt="logo"

width=160

height=50

quality=100

className='dark:hidden'

/>

<Image

src="/images/logo/DarkModeLogo.svg"

alt="logo"

width=160

height=50

quality=100

className='dark:block hidden'

/>

</Link>