NextJs
React
Tailwindcss

NextAuth
Typescript
|—
packages|—
markdown|—
public|—
src|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
app|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
(site) (Contains all the pages)|
|
|
|
|
|
|
|
|
|
|—
(auth)|
|
|
|—
signin|
|—
signup|—
blog|—
contact|—
documentation|—
faqs|—
portfolio|—
pricing|—
api|
|
|
|—
auth|
|—
contex|—
Context|
|
|—
authDialogContext.tsx
|—
global.css|—
layout.tsx|—
not-found.tsx|—
page.tsx|—
components|—
styles|—
types|—
utils|—
next.config.mjs|—
postcss.config.mjs|—
package.json|—
tailwind.config.ts|—
tsconfig.jsonBefore proceeding, you need to have the latest stable node.js
Open package folder and install its dependencies. We recommanded yarn or npm.
cd project-folder
npm install
cd project-folder
yarn install
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:
> next dev
-Next.js 15.1.1
-Local: http://localhost:3000
After adding url run below command for build a app.
npm run build or yarn build
Finally, Your webiste is ready to be deployed.🥳
1. Override Colors
For any change in colors : src/utils/globals.css
--color-primary: #1358d8;--color-darkprimary: #054ac8;--color-lightPrimary: #3187f4;--color-secondary: #102c46;--color-SlateBlue: #547593;--color-AliceBlue: #f3f9fd;--color-LightApricot: #f9c78f;--color-border: #233d55;--color-BorderLine: #ccd7e1;--color-darkmode: #021526;--color-darklight: #061b2e;--color-darktext: #7f8487;--color-dark_border: #224767;--color-Cream: #eee8a9;--color-LavenderBlue: #dbe7ff;--color-LightSoftBlue: #dbe9f6;--color-gray: #acbcca;
2. Override Theme Colors
For change , go to : src/utils/globals.css
--color-primary: #1358d8;--color-secondary: #102c46;
1. Change Font family over here : src/app/layout.tsx
import { DM_Sans } from "next/font/google";
const dmsans = DM_Sans({ subsets: ["latin"] });
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/footer/footer-logo-white.svg"
alt="logo"
width=160
height=50
quality=100
className='dark:block hidden'
/>
</Link>