A dynamic landing page built using Next.js (App Router) with GSAP animations and a simple Admin Panel that allows content editing through a JSON-based CMS.
Admin can update landing page content without redeploying the application.
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- GSAP
- Next.js API Routes
- JSON file as database
- Pixel-perfect landing page based on Figma design
- Smooth GSAP animations and transitions
- Admin authentication using environment variables
- Admin dashboard to edit landing page content
- Content stored in a local JSON file
- No redeploy required for content updates
- Fully responsive (desktop & mobile)
Follow the steps below to run the project locally.
git clone https://github.com/MohammedAnsal/nextjs-landing-cms.git
2. Navigate to the project directory
cd nextjs-landing-cms
3. Install dependencies
npm install
4. Setup environment variables
Create a .env.local file using the example:
cp .env.example .env.local
5. Start the development server
npm run dev
6. Open in browser
http://localhost:3000
🔐 Demo Admin Credentials
Use the following demo credentials to access the admin panel:
Admin Login URL: http://localhost:3000/admin/login
Email: admin@gmail.com
Password: admin123
Admin credentials are configurable via environment variables.
🧾 Environment Variables
The project uses environment variables for admin authentication.
Example configuration file: .env.example
# Admin authentication credentials
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=admin123
# Token used after successful admin login
ADMIN_TOKEN=your-secret-token-here
.env.local is ignored from GitHub and should not be committed.
🗂️ Content Management
Landing page content is stored in a local JSON file.
Admin panel updates this JSON file using Next.js API routes.
Changes appear on the landing page immediately after refresh.
No rebuild or redeploy is required.
📝 Notes
Images are handled using image URLs.
Admin UI is custom-designed (no Figma provided).
GSAP animations are minimal and optimized for smooth performance.
This project is created as part of a technical assessment.
✅ Submission Checklist
Public GitHub repository
README with local setup instructions
.env.example file included
Demo admin credentials provided
Project builds successfully