Checkin More - Landing Page
A modern, responsive landing page for the Checkin More mobile app built with Next.js, TypeScript, and Tailwind CSS.
Features
- 🎨 Modern, responsive design
- 📱 Mobile-first approach
- 📊 Performance optimized
- 📝 Blog system with MDX support
- 🚀 GitHub Pages deployment ready
Blog System
The landing page includes a full-featured blog system that supports MDX (Markdown with React components):
Blog Features
- ✅ MDX support for rich content
- ✅ Static generation at build time (perfect for GitHub Pages)
- ✅ Blog post listing page (
/blog)
- ✅ Individual blog post pages (
/blog/[slug])
- ✅ Tag system with styled badges
- ✅ Author and date metadata
- ✅ Estimated read time calculation
- ✅ Related posts recommendations
- ✅ SEO-optimized metadata
Adding Blog Posts
- Create a new
.mdx file in src/markdown/blog/
- Add frontmatter with required fields:
---
title: "Your Post Title"
description: "A brief description of your post"
date: "2025-01-27"
author: "Author Name"
tags: ["tag1", "tag2", "tag3"]
image: "/images/your-image.jpg"
---
- Write your content in Markdown
- Run
npm run generate:mdx to regenerate the blog data
- The post will be automatically included in the build
Blog Structure
src/markdown/blog/ - MDX blog post filessrc/components/Blog/ - Blog-related React componentssrc/libs/mdx.ts - MDX processing utilitiessrc/libs/blogData.js - Auto-generated blog data (do not edit manually)scripts/generateMdxData.js - Build-time data generation script
Getting Started
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production (includes blog data generation)
npm run build
# Generate blog data manually
npm run generate:mdx
Deployment
This project is configured for GitHub Pages deployment with static generation. The blog posts are processed at build time, making the entire site static and suitable for GitHub Pages hosting.
Technologies Used
- Next.js 14+
- TypeScript
- Tailwind CSS
- Framer Motion
- MDX processing (gray-matter, remark-html, unified)
- Date formatting (date-fns)
