Luxury Nails - Professional Nail Technician Website

A stunning, professional website for a South African nail technician business, featuring a sophisticated black, hot pink, and gold color scheme inspired by high-end nail salons.

🎨 Design Features

• Color Scheme: Black (#000000), Hot Pink (#FF1493), Gold (#FFD700)
• Typography: Playfair Display (serif) and Inter (sans-serif) for a luxury feel
• Responsive Design: Mobile-first approach with seamless tablet and desktop experiences
• Smooth Animations: Framer Motion for elegant transitions and scroll effects
• Modern UI: Clean, minimalist aesthetic with ample white space

🚀 Key Sections

1. Hero Section - Bold headline with striking imagery and prominent booking CTA
2. Services Menu - Comprehensive service listings with pricing and durations
3. Portfolio Gallery - Filterable grid showcasing nail designs and work
4. About Section - Professional bio, certifications, and expertise
5. Testimonials - Client reviews in elegant card format
6. Contact/Booking - Contact form, WhatsApp integration, and location details
7. Footer - Business hours, contact information, and social links

🛠️ Tech Stack

• Framework: Next.js 14 (React 18)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Language: TypeScript
• Fonts: Google Fonts (Playfair Display, Inter)

📦 Installation

1. Install Dependencies:

   npm install

2. Run Development Server:

   npm run dev

3. Open Browser: Navigate to http://localhost:3000

🏗️ Build for Production

npm run build
npm start

📱 Features

• ✅ Fully responsive design (mobile, tablet, desktop)
• ✅ Smooth scroll navigation
• ✅ Interactive portfolio gallery with category filtering
• ✅ WhatsApp integration for South African market
• ✅ Contact form with service selection
• ✅ Social media integration (Instagram, Facebook)
• ✅ Google Maps integration
• ✅ Animated components and transitions
• ✅ SEO-optimized metadata
• ✅ Accessibility features

🎯 Customization

Update Contact Information

Edit the following files:

• components/Contact.tsx - Phone, email, location
• components/Footer.tsx - Business hours, contact details
• components/Navigation.tsx - Brand name

Modify Services & Pricing

Edit components/Services.tsx to update:

• Service names and descriptions
• Pricing
• Duration
• Icons

Change Images

Replace Unsplash URLs in:

• components/Hero.tsx
• components/Portfolio.tsx
• components/About.tsx
• components/Testimonials.tsx

Update Colors

Modify tailwind.config.ts:

colors: {
  primary: '#000000',    // Black
  secondary: '#FF1493',  // Hot Pink
  accent: '#FFD700',     // Gold
}

📧 Form Integration

The contact form in components/Contact.tsx currently logs submissions to the console. To integrate with a backend:

1. Email Service: Use services like SendGrid, Mailgun, or Resend
2. Form Backend: Integrate with Formspree, Netlify Forms, or custom API
3. CRM Integration: Connect to HubSpot, Salesforce, or similar

Example with API route:

const response = await fetch('/api/contact', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(formData),
})

🌐 Deployment

Vercel (Recommended)

npm install -g vercel
vercel

Netlify

npm run build
# Deploy the .next folder

Other Platforms

Build the project and deploy the .next folder to any Node.js hosting platform.

📱 WhatsApp Integration

Update the WhatsApp number in components/Contact.tsx:

href="https://wa.me/27821234567"  // Replace with actual number

🎨 Stock Images

The website uses Unsplash for high-quality stock photography. For production:

1. Download and host images locally for better performance
2. Use Next.js Image optimization
3. Consider using a CDN for image delivery

📊 Analytics

Add analytics by including tracking scripts in app/layout.tsx:

• Google Analytics
• Facebook Pixel
• Hotjar for heatmaps

🔒 Security

• Form validation implemented
• HTTPS recommended for production
• Environment variables for sensitive data
• CORS configuration for API routes

🎯 SEO Optimization

• Semantic HTML structure
• Meta tags configured in app/layout.tsx
• Alt text for all images
• Structured data for local business
• Sitemap generation

📝 License

This project is created for a professional nail technician business. Customize as needed for your specific use case.

🤝 Support

For questions or customization requests, please contact the development team.

---

Built with ❤️ for South African nail technicians