{"id":51245995,"url":"https://github.com/zidvsd/lumina-dental","last_synced_at":"2026-06-29T04:32:10.442Z","repository":{"id":359537011,"uuid":"1246406828","full_name":"zidvsd/lumina-dental","owner":"zidvsd","description":"A modern, high-performance dental clinic website built with Next.js 16, React 19, and TypeScript, featuring optimized SSR/SSG rendering, lazy-loaded sections, and smooth motion-based scroll animations. Focused on performance, clean UI architecture, and responsive design using Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2026-05-22T09:53:51.000Z","size":191,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-22T16:21:44.653Z","etag":null,"topics":["frontend","landing-page","lucide-react","motion","nextjs","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://lumina-dental-pi.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zidvsd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-22T06:58:25.000Z","updated_at":"2026-05-22T09:53:54.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/zidvsd/lumina-dental","commit_stats":null,"previous_names":["zidvsd/lumina-dental"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/zidvsd/lumina-dental","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Flumina-dental","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Flumina-dental/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Flumina-dental/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Flumina-dental/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zidvsd","download_url":"https://codeload.github.com/zidvsd/lumina-dental/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Flumina-dental/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34913586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-29T02:00:05.398Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","landing-page","lucide-react","motion","nextjs","react","tailwindcss"],"created_at":"2026-06-29T04:32:09.353Z","updated_at":"2026-06-29T04:32:10.437Z","avatar_url":"https://github.com/zidvsd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lumina Dental\n\nA 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.\n\n**[View Live Demo](https://lumina-dental-pi.vercel.app/)**\n\n## Project Overview\n\nLumina is a single-page web application showcasing a dental practice. The project demonstrates modern web development practices including:\n\n- **Performance optimization**: Dynamic imports, image optimization, and selective server-side rendering\n- **Type safety**: Full TypeScript implementation with strict mode enabled\n- **Responsive design**: Tailwind CSS-based responsive layouts\n- **Animation**: Motion library for smooth page transitions and interactive elements\n- **Component architecture**: Modular, reusable React components with clear separation of concerns\n\n## Tech Stack\n\n| Technology   | Version | Purpose                                 |\n| ------------ | ------- | --------------------------------------- |\n| Next.js      | 16.2.6  | Full-stack React framework with SSR/SSG |\n| React        | 19.2.4  | UI component library                    |\n| TypeScript   | ^5      | Static type checking                    |\n| Tailwind CSS | ^4      | Utility-first CSS framework             |\n| Motion       | 12.40.0 | Animation library                       |\n| Lucide React | ^1.16.0 | Icon component library                  |\n\n## Project Structure\n\n```\nlumina-dental/\n├── app/                    # Next.js App Router\n│   ├── layout.tsx         # Root layout with metadata and providers\n│   ├── page.tsx           # Home page with section composition\n│   └── globals.css        # Global styles\n├── components/\n│   ├── layout/            # Layout components (Navbar, Footer)\n│   ├── sections/          # Page sections (Hero, Experience, etc.)\n│   ├── FadeIn.tsx        # Scroll-triggered fade-in animation\n│   └── ScrollHintButton.tsx\n├── data/                  # Static data (navigation, footer)\n├── public/                # Static assets (images)\n├── next.config.ts         # Next.js configuration\n├── tsconfig.json          # TypeScript configuration\n└── tailwind.config.ts     # Tailwind CSS configuration\n```\n\n## Key Features\n\n### Performance Optimization\n\n- **Lazy-loaded sections**: Below-fold content loads dynamically to improve initial page load\n- **Image optimization**: Next.js Image component with remote image support from Google and Unsplash\n- **Above-the-fold rendering**: Hero section renders without fade animation to optimize Largest Contentful Paint (LCP)\n\n### Component System\n\n- **Section-based architecture**: Each page section is a self-contained component\n- **FadeIn wrapper**: Custom animation component that triggers on scroll\n- **Modular layout**: Navbar and Footer as reusable layout components\n\n### Styling\n\n- **Tailwind CSS**: All styling uses utility classes for consistency and minimal CSS bundle\n- **Responsive design**: Mobile-first approach with breakpoints for tablet and desktop\n- **Custom font**: Plus Jakarta Sans loaded via Next.js font optimization\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+ (compatible with Next.js 16)\n- npm (or yarn/pnpm/bun)\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone \u003crepository-url\u003e\ncd lumina-dental\n\n# Install dependencies\nnpm install\n```\n\n### Development\n\nRun the development server with hot-reload enabled:\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### Building for Production\n\n```bash\nnpm run build\nnpm start\n```\n\nThe build step optimizes the application for production (SSR compilation, code splitting, minification).\n\n### Linting\n\n```bash\nnpm run lint\n```\n\nRuns ESLint to check code quality and adherence to project conventions.\n\n## Code Examples\n\n### Adding a New Section Component\n\nCreate a new component in `components/sections/`:\n\n```tsx\n// components/sections/NewSection.tsx\nexport default function NewSection() {\n  return (\n    \u003csection id=\"new-section\" className=\"py-32 bg-surface\"\u003e\n      \u003cdiv className=\"container\"\u003e\n        \u003ch2 className=\"text-headline-lg text-on-surface\"\u003eSection Title\u003c/h2\u003e\n        {/* Content */}\n      \u003c/div\u003e\n    \u003c/section\u003e\n  );\n}\n```\n\nImport and add to `app/page.tsx` with fade-in wrapper if below the fold:\n\n```tsx\nimport NewSection from \"@/components/sections/NewSection\";\n\nexport default function Home() {\n  return (\n    \u003cdiv className=\"flex flex-col\"\u003e\n      {/* ... existing sections ... */}\n      \u003cFadeIn\u003e\n        \u003cNewSection /\u003e\n      \u003c/FadeIn\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Using the FadeIn Animation\n\nThe `FadeIn` component triggers when the wrapped content enters the viewport:\n\n```tsx\nimport { FadeIn } from \"@/components/FadeIn\";\n\n\u003cFadeIn\u003e\n  \u003cYourComponent /\u003e\n\u003c/FadeIn\u003e;\n```\n\n### Adding External Images\n\nThe Next.js config allows images from specific domains:\n\n```tsx\nimport Image from \"next/image\";\n\n\u003cImage\n  src=\"https://lh3.googleusercontent.com/your-image-id\"\n  alt=\"Description\"\n  fill\n  className=\"object-cover\"\n/\u003e;\n```\n\nTo add a new image domain, update [next.config.ts](next.config.ts):\n\n```ts\nremotePatterns: [\n  {\n    protocol: \"https\",\n    hostname: \"new-domain.com\",\n  },\n];\n```\n\n## Available Scripts\n\n| Script          | Purpose                                  |\n| --------------- | ---------------------------------------- |\n| `npm run dev`   | Start development server with hot-reload |\n| `npm run build` | Compile for production                   |\n| `npm start`     | Start production server                  |\n| `npm run lint`  | Run ESLint checks                        |\n\n## Browser Support\n\n- Modern browsers (Chrome, Firefox, Safari, Edge)\n- ES2017+ JavaScript support required\n\n## Configuration Files\n\n- [next.config.ts](next.config.ts) — Next.js configuration (image optimization, remote patterns)\n- [tsconfig.json](tsconfig.json) — TypeScript settings with path alias `@/*` pointing to root\n- [tailwind.config.ts](tailwind.config.ts) — Tailwind CSS customization\n- [eslint.config.mjs](eslint.config.mjs) — ESLint rules\n\n## Contributing\n\nWhen contributing, follow these guidelines:\n\n- Maintain TypeScript strict mode compliance\n- Keep components focused and reusable\n- Use Tailwind CSS utility classes for styling\n- Follow the existing folder structure\n- Test responsive design across breakpoints\n- Run `npm run lint` before committing\n\n## Support \u0026 Documentation\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [React Documentation](https://react.dev)\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n- [Motion Documentation](https://motion.dev)\n- [Lucide React Icons](https://lucide.dev)\n\n## License\n\nRefer to the LICENSE file in the repository for licensing details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzidvsd%2Flumina-dental","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzidvsd%2Flumina-dental","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzidvsd%2Flumina-dental/lists"}