Movers & Packers in UAE – Professional Website

A modern, responsive website design and maintenance by Mashal Huraira for a professional moving and packing company operating across the United Arab Emirates. Built with Next.js 16, React 19, TypeScript, and Tailwind CSS.

🌐 Live URL • 📧 Contact Us

✨ Features

🏠 Comprehensive Service Coverage

Residential Moving: House, villa, apartment, and flat shifting
Commercial Moving: Office relocation, warehouse, retail space moves
Specialty Services: Furniture moving, packing, storage, single item delivery
Location-Based Pages: Dedicated service pages for all major UAE emirates

🎯 Business-Ready Features

✅ Dynamic Quote System - Real-time quotation requests with email notifications
✅ Email Integration - Resend-powered email templates for customer inquiries
✅ SEO Optimized - Meta tags, structured data, and performance optimizations
✅ Responsive Design - Perfect on mobile, tablet, and desktop
✅ FAQ Section - Comprehensive Q&A for customer support
✅ Customer Reviews - Showcase testimonials and ratings
✅ Contact Integration - Twilio-ready for SMS/call notifications

🎨 Modern UI/UX

Beautiful, professional design with smooth animations
Dark mode support with next-themes
Component-based architecture with shadcn/ui
Custom carousel functionality (Embla Carousel)
Toast notifications with Sonner
Accessible form inputs and interactive elements

🛠️ Tech Stack

Frontend

Next.js 16 - React framework with App Router
React 19 - UI library
TypeScript - Type safety
Tailwind CSS 4 - Utility-first CSS framework
shadcn/ui - Reusable component library
Lucide React - Icon library
Embla Carousel - Touch-enabled carousel

Backend & Services

Resend - Email service for quote requests
React Email - HTML email templates
Twilio - SMS/telephony integration (optional)
Sonner - Toast notifications

Development Tools

ESLint - Code linting
Next.js ESLint Config - Next.js-specific linting rules
PostCSS - CSS processing

📦 Installation & Setup

Prerequisites

Node.js 18.17 or later
pnpm (recommended) or npm/yarn

1. Clone the Repository

git clone https://github.com/yourusername/movers-and-packers-uae.git
cd movers-and-packers-uae

2. Install Dependencies

pnpm install
# or
npm install

3. Environment Variables

Create a .env.local file in the root directory:

# Email Service (Resend)
RESEND_API_KEY=your_resend_api_key_here

# Twilio (Optional - for SMS/calls)
TWILIO_ACCOUNT_SID=your_twilio_sid
TWILIO_AUTH_TOKEN=your_twilio_token
TWILIO_PHONE_NUMBER=+1234567890

Get your API keys:

Resend API Key: https://resend.com/
Twilio Credentials: https://www.twilio.com/

4. Run Development Server

pnpm dev
# or
npm run dev

Open http://localhost:3000 in your browser.

🚀 Available Scripts

# Development server with hot reload
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run ESLint
pnpm lint

📁 Project Structure

├── app/
│   ├── (locations)/              # Location-specific pages (Sharjah, Abu Dhabi, etc.)
│   ├── (services)/               # Service-specific pages (Office, Villa, etc.)
│   ├── about-us/                 # About page
│   ├── get-quote/                # Quote request page
│   ├── layout.tsx                # Root layout
│   ├── page.tsx                  # Homepage
│   └── globals.css               # Global styles
│
├── components/
│   ├── ui/                       # shadcn/ui components (button, carousel, etc.)
│   ├── layout/
│   │   ├── Header.tsx            # Navigation header
│   │   └── Footer.tsx            # Footer component
│   ├── Commerical.tsx            # Commercial services section
│   ├── CTA.tsx                   # Call-to-action component
│   ├── EmailTemplate.tsx         # Email template for quotes
│   ├── FaqsSection.tsx           # FAQ section
│   ├── LocHeroSection.tsx        # Hero section for location pages
│   ├── MovingProcess.tsx         # Process flow component
│   ├── QuotationSection.tsx      # Quotation CTA section
│   ├── QuoteForm.tsx             # Quote request form
│   ├── ReviewSection.tsx         # Customer testimonials
│   └── ServiceHero.tsx           # Hero for service pages
│
├── lib/
│   ├── data.ts                   # Services, locations, features data
│   ├── FaqsData.tsx              # FAQ content
│   ├── sendMail.ts               # Email sending logic (Server Action)
│   ├── utils.ts                  # Utility functions
│   └── MetaDataTemplate.ts       # SEO metadata generator
│
├── public/
│   ├── logo.svg                  # Brand logo
│   ├── ava/                      # Avatar images
│   ├── loc/                      # Location-based images
│   └── ser/                      # Service images
│
├── next.config.ts               # Next.js configuration
├── tsconfig.json                # TypeScript configuration
├── tailwind.config.ts           # Tailwind CSS configuration
├── postcss.config.mjs           # PostCSS configuration
└── package.json                 # Dependencies & scripts

🎯 Key Components

QuoteForm (Interactive)

Form validation and error handling
Real-time field updates
Email submission via Server Action
Toast notifications for success/error

EmailTemplate

Professional HTML email design
Responsive layout (mobile-optimized)
Brand-consistent styling
Direct call button for customer contact

MovingProcess

Visual representation of 4-step moving process
Smooth animations and transitions
Mobile-responsive grid layout

ReviewSection

Customer testimonial carousel
Auto-playing with manual controls
Star ratings display
Avatar images

📧 Email Integration (Resend)

The SendMail Server Action handles quote requests:

// Usage in components
const response = await SendMail({ data: formData });

if (response.success) {
  // Show success toast
} else {
  // Show error toast
}

Email Template Features:

Brand header with logo
Customer contact details
Moving route visualization
Conditional message display
Direct call button (tel: link)
Professional footer

🎨 Design System

Colors

Primary: #c10007 (Brand red)
Secondary: #222a35 (Dark grey)
Text: #666666 (Medium grey)
Background: #f5f5f5 (Light grey)
White: #ffffff

Typography

Heading Font: System fonts (font-weight: 600-700)
Body Font: Helvetica Neue, Arial (font-size: 14-15px)

Spacing

Mobile: 24px padding
Desktop: 40px padding
Consistent gap sizes: 8px, 16px, 24px, 32px

🌐 SEO & Performance

✅ Dynamic meta tags for each page
✅ Open Graph and Twitter cards
✅ Structured data for services and locations
✅ Image optimization with Next.js Image component
✅ Lazy loading for below-the-fold content
✅ Mobile-first responsive design
✅ Fast page load times (Vercel optimized)

🔧 Configuration

Tailwind CSS

Custom configuration with:

Responsive breakpoints
Extended color palette
Animation utilities
Custom spacing scale

Next.js

App Router for modern routing
Server Components by default
Optimized font loading
Image optimization

📱 Responsive Breakpoints

Mobile: < 640px
Tablet: 640px - 1024px
Desktop: > 1024px

All components tested and optimized for all screen sizes.

🤝 Contributing

Contributions are welcome! Here's how to get started:

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

Code Standards

Follow the existing code style
Use TypeScript for type safety
Write meaningful commit messages
Test responsive design on multiple devices

📄 License

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

📞 Contact & Support

Email: movers.and.packers.uae91@gmail.com

Website: https://moversandpackersinuae.vercel.app

Issues & Feedback: GitHub Issues

🙏 Acknowledgments

Built with Next.js
UI Components from shadcn/ui
Icons by Lucide React
Email service by Resend
Deployed on Vercel

Made with ❤️ for seamless moving experiences across the UAE

⭐ If you find this project helpful, please consider giving it a star!

Name		Name	Last commit message	Last commit date
Latest commit History 73 Commits
app		app
components		components
lib		lib
public		public
types		types
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CLAUDE.md		CLAUDE.md
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation