Sky-Freight 🚚✈️

Responsive Air Cargo Transport Website

Sky-Freight is a modern, responsive single-page website designed for an air cargo transport company. Built with React and Tailwind CSS, it provides seamless navigation, tracking functionality, industry-relevant information, and user-friendly UI/UX optimized for performance and SEO.

🚀 Live Demo

Visit the Site

📋 Project Structure

/client
│
├── /public
│   ├── about.webp
│   ├── features.json
│   ├── heroVideo.mp4
│   ├── services.json
│   └── testimonials.json
│
├── /src
│   ├── /assets
│   │   ├── /services
│   │   └── /testimonials
│   │       └── about.avif
│   │
│   ├── /components
│   │   ├── Footer.jsx
│   │   └── Navbar.jsx
│   │
│   ├── /pages/home
│   │   ├── About.jsx
│   │   ├── ContactUs.jsx
│   │   ├── CTA.jsx
│   │   ├── FAQ.jsx
│   │   ├── Features.jsx
│   │   ├── Hero.jsx
│   │   ├── Home.jsx
│   │   ├── IndustriesWeServe.jsx
│   │   ├── PartnerWithUs.jsx
│   │   ├── Services.jsx
│   │   ├── Testimonials.jsx
│   │   └── Tracking.jsx
│   │
│   ├── /utils
│   │   └── getImgUrl.js
│   │
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   ├── main.jsx
│   └── index.html
│
├── package.json
├── tailwind.config.js
└── vite.config.js

🛠️ Tech Stack

• Frontend: React.js, Tailwind CSS
• UI/UX: Responsive Design Principles, React Swiper.js
• Animation: CSS transitions, Swiper.js carousel
• Build Tool: Vite
• Hosting: Vercel

🌟 Key Features

1. Hero Section

   • Video background with a responsive CTA (Call to Action).

2. About Us Section

   • A concise overview of Sky-Freight's mission and services.

3. Tracking Section

   • Allows users to input their Tracking ID and track shipments.

4. Services Section

   • Lists various services with dynamic data fetched from services.json.

5. Industries We Serve

   • Highlights industries served with SEO-friendly headings.

6. Testimonials

   • Showcases customer reviews using Swiper.js carousel for smooth sliding.

7. FAQ Section

   • A comprehensive list of frequently asked questions with collapsible answers.
   • Includes embedded CTAs.

8. Partner With Us

   • A section encouraging collaboration.

9. Contact Us Page

   • Contact form with input validation for user inquiries.

10. Footer

• Social media links, Privacy Policy, and a Newsletter subscription form.

📊 Quantitative Analysis

Performance Metrics

• Optimized images, lazy loading, and React's efficient rendering ensure fast performance.
• Meta tags, headings, and schema markup make the site SEO-friendly.
• Tailwind CSS ensures smooth responsiveness across devices (mobile, tablet, desktop).

🖥️ How to Run Locally

1. Clone the repository:

   git clone https://github.com/your-username/sky-freight.git
   cd sky-freight
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open the project in your browser:

   http://localhost:5173
   

Let me know in the Issues if you'd like any changes! 😊