A modern, responsive web application for global ocean logistics and shipping solutions. Navigate global trade with trusted ocean logistics, professional shipping services, real-time tracking,and reliable worldwide delivery solutions.

Production: https://uthao-7o3c.vercel.app/

• Ocean Contract Logistics - Comprehensive freight forwarding services
• Real-time Shipment Tracking - Monitor cargo worldwide with live updates
• Global Port Coverage - Extensive network across major shipping routes
• Supply Chain Management - End-to-end logistics optimization
• Container Shipping - Full and LCL container services

• Responsive Design - Optimized for desktop, tablet, and mobile
• Fast Performance - Built with Next.js 15 and Turbopack for optimal speed
• SEO Optimized - Complete meta tags, structured data, and sitemap
• Secure Authentication - Local authentication with email/password
• Modern Animations - Smooth Framer Motion transitions
• Progressive Web App - PWA capabilities with offline support

• Interactive Forms - Multi-step shipping quote calculator
• Partner Showcase - Trusted global logistics partners
• Success Stories - Client testimonials and case studies
• FAQ Section - Comprehensive help and support
• Contact Integration - Multiple communication channels

• Next.js 15.5.4 - React framework with App Router
• React 19.1.0 - Latest React with concurrent features
• TypeScript 5.x - Type-safe development

• Tailwind CSS 4.x - Utility-first CSS framework
• Framer Motion 12.x - Production-ready motion library
• Lucide React - Beautiful & consistent icons
• Custom Fonts - Geist Sans, Geist Mono, Playfair Display

• Local Authentication - Email/password based authentication
• Security Headers - XSS protection, content security

• Turbopack - Ultra-fast bundler for development
• ESLint 9 - Code linting and formatting
• Jest - Unit testing framework
• PostCSS - CSS processing and optimization

Ensure you have the following installed:

• Node.js 18+ (LTS recommended)
• npm, yarn, pnpm, or bun
• Git for version control

1. Clone the repository

git clone https://github.com/mohamed-samir-dev/uthao.git
cd uthao

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

4. Start development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

5. Open your browser Navigate to http://localhost:3000

src/
│   ├── login/             # Authentication pages
│   ├── page/              # Additional pages
│   │   ├── services/      # Services showcase
│   │   ├── career/        # Career opportunities
│   │   ├── Steps/         # Process workflow
│   │   └── Stories/       # Success stories
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Homepage
│   ├── robots.ts          # SEO robots.txt
│   └── sitemap.ts         # XML sitemap
├── components/            # Reusable components
│   ├── Benefits/          # Benefits showcase
│   ├── FAQ/               # Frequently asked questions
│   ├── Footer/            # Footer components
│   ├── forms/             # Form components
│   ├── layout/            # Layout components
│   ├── partners/          # Partner logos
│   ├── providers/         # Context providers
│   ├── seo/               # SEO components
│   ├── services/          # Service sections
│   ├── Steps/             # Process steps
│   ├── Stories/           # Testimonials
│   └── ui/                # UI components
├── constants/             # Application constants
├── data/                  # Static data
├── hooks/                 # Custom React hooks
├── lib/                   # Utility libraries
├── types/                 # TypeScript definitions
└── utils/                 # Helper functions

1. Connect to Vercel

   • Push code to GitHub
   • Import project in Vercel Dashboard
   • Configure environment variables
   • Deploy automatically

2. Environment Variables

   # No external authentication variables needed
   # Local authentication uses localStorage
   

• Netlify: Use Next.js build adapter
• AWS Amplify: Deploy with SSR support
• Docker: Containerized deployment
• Railway: Simple deployment platform

• Content Security Policy - XSS protection
• Security Headers - OWASP recommended headers
• Authentication - Secure local authentication
• Input Validation - Form data sanitization
• HTTPS Enforcement - Secure data transmission

• Image Optimization - Next.js automatic image optimization
• Code Splitting - Automatic bundle splitting
• Lazy Loading - Component-level lazy loading
• Caching Strategy - Optimized caching headers
• Turbopack - Ultra-fast development builds

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create feature branch

   git checkout -b feature/amazing-feature

3. Commit changes

   git commit -m 'Add amazing feature'

4. Push to branch

   git push origin feature/amazing-feature

5. Open Pull Request

• Follow TypeScript best practices
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Ensure responsive design compatibility

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

• Website: https://uthao-7o3c.vercel.app/
• Email: mohammedsamiermouawad@gmail.com
• LinkedIn: Mohammed Samier Mouawad
• Portfolio: Frontend Portfolio

• Next.js Team - Amazing React framework
• Vercel - Seamless deployment platform
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Production-ready animations
• Lucide - Beautiful icon library

• Performance Score: 99 (Lighthouse)
• Accessibility Score: 100 (Lighthouse)
• Best Practices: 100 (Lighthouse)
• SEO Score: 100 (Lighthouse)

📊 View Full Lighthouse Report