Lumina Dental
A modern, high-performance web application built with Next.js 16, React 19, and TypeScript. The site features optimized rendering with server-side generation, lazy-loaded components, and smooth animations.
Project Overview
Lumina is a single-page web application showcasing a dental practice. The project demonstrates modern web development practices including:
- Performance optimization: Dynamic imports, image optimization, and selective server-side rendering
- Type safety: Full TypeScript implementation with strict mode enabled
- Responsive design: Tailwind CSS-based responsive layouts
- Animation: Motion library for smooth page transitions and interactive elements
- Component architecture: Modular, reusable React components with clear separation of concerns
Tech Stack
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16.2.6 | Full-stack React framework with SSR/SSG |
| React | 19.2.4 | UI component library |
| TypeScript | ^5 | Static type checking |
| Tailwind CSS | ^4 | Utility-first CSS framework |
| Motion | 12.40.0 | Animation library |
| Lucide React | ^1.16.0 | Icon component library |
Project Structure
lumina-dental/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout with metadata and providers
│ ├── page.tsx # Home page with section composition
│ └── globals.css # Global styles
├── components/
│ ├── layout/ # Layout components (Navbar, Footer)
│ ├── sections/ # Page sections (Hero, Experience, etc.)
│ ├── FadeIn.tsx # Scroll-triggered fade-in animation
│ └── ScrollHintButton.tsx
├── data/ # Static data (navigation, footer)
├── public/ # Static assets (images)
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
└── tailwind.config.ts # Tailwind CSS configuration