- TypeScript 91.3%
- CSS 8.1%
- JavaScript 0.6%
675cb98f0a
- Fix misspelled component name (SectionCataglog → SectionCatalog) - Fix input type attributes in contact form (name → text) - Add sr-only labels and autoComplete for form accessibility - Add meaningful alt text to all images - Replace custom classNames with cn utility - Fix React key using index → use unique path - Remove unused __dirname in eslint config - Update metadata with proper SEO tags - Add scroll throttling with requestAnimationFrame - Create custom 404 page - Fix mobile nav auto-close on link click - Regenerate package-lock and fix vulnerabilities Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> |
||
|---|---|---|
| app | ||
| components | ||
| hooks | ||
| lib | ||
| public | ||
| utils | ||
| .gitignore | ||
| components.json | ||
| eslint.config.mjs | ||
| LICENSE | ||
| next.config.ts | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| prd.md | ||
| README.md | ||
| setting-up.md | ||
| tsconfig.json | ||
Project Objective
The main objective of this project is to practice and enhance web development skills by building a modern website using the latest technologies in the tech stack, including Next.js, Tailwind CSS, Headless UI, and Framer Motion. This project serves as a hands-on exercise to explore best practices and new features in these frameworks and libraries.
Tailwind CSS v4 Highlights
This project uses Tailwind CSS v4, which introduces several improvements and changes:
- Smaller and faster builds: Tailwind v4 uses the new Oxide engine for faster compilation and smaller CSS output.
- Updated default color palette: The default color palette has been refreshed for better accessibility and modern aesthetics.
- Simplified configuration: The configuration file is now cleaner and easier to manage.
- Improved dark mode: Dark mode support is more flexible and easier to implement.
- New utilities and features: Includes new utility classes and improved support for CSS variables.
For more details, see the Tailwind CSS v4 release notes.
This is a Next.js project bootstrapped with create-next-app.
Built With
- React
- React DOM
- Next.js
- Tailwind CSS
- Headless UI
- Framer Motion
- Next Themes
- Heroicons
- Lucide React
- Radix UI
- React Icons
- Swiper
- Class Variance Authority
- clsx
- tailwind-merge
- tailwindcss-animatecss
- tw-animate-css
- React CountUp
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
License
This project is licensed under the MIT License - see the LICENSE file for details.