NewEraNails

A modern, responsive website for a nail technician and spa business built with React, Vite, and Tailwind CSS.

Overview

NewEraNails is a comprehensive website solution for nail salons and spas, featuring a clean, professional design with all essential sections for a beauty business website. The project is built using modern web technologies and follows best practices for performance, accessibility, and maintainability.

Features

Responsive Design: Fully responsive layout that works on all device sizes
Modern UI Components: Built with Radix UI primitives and Tailwind CSS
Interactive Elements: Smooth animations, hover effects, and interactive components
Service Showcase: Detailed presentation of nail and spa services
Gallery Section: Image gallery to showcase work and salon environment
Team Profiles: Introduce your nail technicians and staff
Appointment System: Integrated appointment booking functionality
Blog Section: Share tips, trends, and news about nail care
FAQ Section: Address common customer questions
Contact Form: Easy way for customers to get in touch
WhatsApp Integration: Direct communication button for quick inquiries
Accessibility: Built with accessibility best practices in mind
SEO Friendly: Proper semantic HTML structure

Technology Stack

Frontend Framework

React 18 - Modern React with hooks and functional components
Vite 6 - Next-generation frontend tooling for fast development builds
TypeScript - Static typing for enhanced developer experience and code quality

Styling & UI

Tailwind CSS 4 - Utility-first CSS framework for rapid UI development
Radix UI - Accessible, unstyled UI primitives
Headless UI - Completely accessible, unstyled UI components
Framer Motion - Animation library for smooth transitions and effects

Key Dependencies

React Router DOM 7 - Declarative routing for React applications
React Hook Form 7 - Performant form validation and management
Emotion - CSS-in-JS solution for styling
Recharts - Charting library for data visualization
Embla Carousel - Touch-enabled carousel/slider component
Lucide React - Beautiful, consistent icon set
Sonner - Toast notification system
Date-fns - Modern date utility library
Next-themes - Dark/light theme switching

Development Tools

ESLint - Code linting for quality and consistency
Prettier - Code formatting
PostCSS - CSS processing with Tailwind
Vite Plugins - Optimized build and development experience

Project Structure

NewEraNails/
├── src/
│   ├── main.tsx              # Application entry point
│   ├── app/
│   │   ├── App.tsx           # Main application component
│   │   ├── components/       # All UI components
│   │   │   ├── layout/       # Header, footer, etc.
│   │   │   ├── sections/     # Main page sections (Hero, Services, etc.)
│   │   │   ├── ui/           # Reusable UI components (buttons, forms, etc.)
│   │   │   └── data/         # Data files for components
│   │   └── Attributions.md   # Third-party attributions
│   ├── assets/               # Static assets (images, icons)
│   └── styles/               # Global styles and theme configuration
├── public/                   # Static public assets
├── vite.config.ts            # Vite configuration
├── package.json              # Project dependencies and scripts
├── postcss.config.mjs        # PostCSS configuration
├── .gitignore                # Git ignore rules
└── README.md                 # This file

Component Architecture

Layout Components

Header - Navigation bar with logo and menu
Footer - Footer with contact info, social links, and legal information
WhatsAppButton - Floating WhatsApp contact button

Page Sections

Hero - Main banner with call-to-action
About - Business introduction and story
Services - Detailed service offerings with pricing
Gallery - Portfolio of work and salon images
Blog - Articles and news about nail care
Team - Staff profiles and bios
FAQ - Frequently asked questions
Contact - Contact form and information
Appointments - Booking system interface

UI Components (src/app/components/ui/)

All UI components are built using Radix UI primitives and styled with Tailwind CSS for maximum accessibility and customization:

Form elements (Input, Select, Checkbox, Radio, etc.)
Navigation elements (Breadcrumb, Pagination, Tabs, etc.)
Overlay elements (Dialog, Dropdown-menu, Popover, etc.)
Data display elements (Accordion, Collapsible, Table, etc.)
Feedback elements (Alert, Toast, Progress, etc.)
Layout elements (Card, Avatar, Badge, etc.)

Getting Started

Prerequisites

Node.js (v18 or higher)
npm or pnpm package manager
Git (for version control)

Installation

Clone the repository:

git clone https://github.com/JacobTechLabs/NewEraNails.git
cd NewEraNails

Install dependencies:
```
npm install
# or
pnpm install
```
Start the development server:
```
npm run dev
# or
pnpm dev
```
Open your browser and visit http://localhost:5173

Building for Production

To create a production build:

npm run build
# or
pnpm build

The built files will be in the dist/ directory.

To preview the production build:

npm run preview
# or
pnpm preview

Environment Variables

Create a .env file in the root directory with the following variables:

VITE_API_URL=your_api_endpoint_here
VITE_MAPBOX_TOKEN=your_mapbox_token_if_using_maps

Customization

Theme Customization

The project uses Tailwind CSS with a customizable theme. Modify tailwind.config.js (if present) or adjust the Tailwind configuration in vite.config.ts to change colors, fonts, spacing, etc.

Content Updates

Most content can be updated by modifying the data files in src/app/components/data/:

about-data.ts - About section content
services-data.ts - Services offerings and pricing
gallery-data.ts - Gallery images and descriptions
team-data.ts - Team member information
blog-data.ts - Blog posts and articles
faq-data.ts - Frequently asked questions
contact-data.ts - Contact information
appointment-data.ts - Appointment form fields

Styling

Global styles are located in:

src/styles/globals.css - Base styles and Tailwind directives
src/styles/default_theme.css - Theme variables and custom properties
src/styles/index.css - Main stylesheet import

Deployment

Vercel (Recommended)

Push your code to GitHub
Import the project in Vercel
Vercel will automatically detect the Vite configuration and deploy

Netlify

Push your code to GitHub
Connect your repository to Netlify
Set build command: npm run build
Set publish directory: dist

Firebase Hosting

Install Firebase CLI: npm install -g firebase-tools
Login: firebase login
Initialize: firebase init (choose Hosting)
Build: npm run build
Deploy: firebase deploy

GitHub Pages

Update vite.config.ts with appropriate base path
Build: npm run build
Deploy using gh-pages package or similar

Development Guidelines

Code Style

Follow TypeScript best practices
Use functional components with hooks
Keep components small and focused
Use meaningful variable and function names
Comment complex logic when necessary

Component Creation

When creating new components:

Place in appropriate directory under src/app/components/
Use TypeScript interfaces for props
Style with Tailwind CSS classes
Export as default or named export as appropriate
Add to data files if content-driven

State Management

Use React hooks (useState, useEffect, useContext) for local state
Consider React Query or Zustand for complex state management
Keep API calls in custom hooks when possible

Performance Optimization

Use React.memo() for expensive components
Implement code splitting with dynamic imports
Optimize images and use appropriate formats
Leverage browser caching for assets

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers (iOS Safari, Android Chrome)

Accessibility

The project follows WCAG 2.1 AA guidelines:

Semantic HTML structure
Proper ARIA labels and roles
Keyboard navigable interface
Sufficient color contrast
Focus visible indicators
Screen reader friendly

Contributing

Fork the repository
Create your feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add some amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Please make sure to update tests as appropriate and follow the existing code style.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Figma Community for the original design inspiration
Radix UI team for accessible primitives
Tailwind CSS team for the utility-first framework
All open-source contributors whose packages make this project possible

Contact

For questions or support, please open an issue on the GitHub repository or contact the maintainers directly.

Built with ❤️ for nail technicians and spa professionals

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation