Pacakge Versions
v15.0.3
NextJs
v18.3.1
React
v4+
Tailwindcss
v4.24.7
NextAuth
v5.6.3
Typescript
The DoSurely landing page is built with Tailwindcss and Nextjs.
You can customize colors, content, and layout to match new product updates.
Familiarity with Nextjs, React, Tailwind, and JSX will help you tailor the layout.
Docs Menu
Pacakge Structure
DoSurely landing page
|—
packages|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
markdown|—
public|—
src|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
app|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
(site) (Contains all the pages)|
|
|
|
|
|—
(auth)|
|
|
|—
signin|
|—
signup
|—
documentation
|—
api|
|
|
|—
auth|
|—
contex
|—
Context|
|
|—
authDialogContext.tsx
|—
global.css|—
layout.tsx|—
not-found.tsx|—
page.tsx
|—
components (All the components of this site.)|—
styles|—
types|—
utils
|—
next.config.mjs|—
postcss.config.mjs|—
package.json|—
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:
> paidin_project@2.0.0 dev
> next dev
-Next.js 14.2.4
-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 : tailwind.config.ts
--color-primary: #0057ff;--color-midnight_text: #001b50;--color-Lightsuccess: #e7f8f2;--color-deepSlate: #6493ea;
2. Update brand colors
For changes, update tailwind.config.ts
--color-primary: #0057ff;
Typography
1. Change Font family over here : src/app/layout.tsx
import { Poppins } from "next/font/google";
const font = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700"], });
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
style={width: "auto", height: "auto"}
/>