Prettier added and remake identation os project

2026-03-23 20:21:37 -03:00
parent 19a1c76be1
commit 946e7b51fe
11 changed files with 769 additions and 569 deletions
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
@@ -0,0 +1 @@
+{}
@@ -1,13 +1,13 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig, globalIgnores } from "eslint/config";

 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
  {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
@@ -17,13 +17,13 @@ export default defineConfig([
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
      },
    },
    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
    },
  },
-])
+]);
@@ -22,6 +22,7 @@
        "eslint-plugin-react-refresh": "^0.5.2",
        "globals": "^17.4.0",
        "postcss": "^8.5.8",
+        "prettier": "3.8.1",
        "tailwindcss": "^3.4.1",
        "vite": "^8.0.1",
        "vite-plugin-eslint": "^1.8.1"
@@ -2903,6 +2904,22 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -24,6 +24,7 @@
    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^17.4.0",
    "postcss": "^8.5.8",
+    "prettier": "3.8.1",
    "tailwindcss": "^3.4.1",
    "vite": "^8.0.1",
    "vite-plugin-eslint": "^1.8.1"
@@ -3,4 +3,4 @@ export default {
    tailwindcss: {},
    autoprefixer: {},
  },
-}
+};
@@ -10,19 +10,34 @@ function App() {
                <i class="fas fa-exchange-alt mx-2 text-gray-400"></i>
                <span class="text-secondary font-bold text-2xl">Canada</span>
              </div>
-                      <span class="text-sm font-medium bg-accent px-2 py-1 rounded">TRANSPORT</span>
+              <span class="text-sm font-medium bg-accent px-2 py-1 rounded">
+                TRANSPORT
+              </span>
            </div>

            <nav class="hidden md:flex space-x-4">
-                      <a href="#home" class="nav-link active">Home</a>
-                      <a href="#services" class="nav-link">Services</a>
-                      <a href="#pricing" class="nav-link">Pricing</a>
-                      <a href="#about" class="nav-link">About Us</a>
-                      <a href="#contact" class="nav-link">Contact</a>
+              <a href="#home" class="nav-link active">
+                Home
+              </a>
+              <a href="#services" class="nav-link">
+                Services
+              </a>
+              <a href="#pricing" class="nav-link">
+                Pricing
+              </a>
+              <a href="#about" class="nav-link">
+                About Us
+              </a>
+              <a href="#contact" class="nav-link">
+                Contact
+              </a>
            </nav>

            <div class="flex items-center space-x-4">
-                      <a href="tel:+250788123456" class="hidden md:flex items-center text-gray-600 hover:text-primary">
+              <a
+                href="tel:+250788123456"
+                class="hidden md:flex items-center text-gray-600 hover:text-primary"
+              >
                <i class="fas fa-phone-alt mr-2"></i>
                <span>+250 796132866</span>
              </a>
@@ -35,19 +50,34 @@ function App() {
        </div>
      </header>

-      <section id="home" class="bg-gradient-to-r from-primary to-secondary text-white py-20">
+      <section
+        id="home"
+        class="bg-gradient-to-r from-primary to-secondary text-white py-20"
+      >
        <div class="container mx-auto px-4">
          <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
-                      <h1 class="text-4xl md:text-5xl font-bold mb-6">Reliable Transport Services from Rwanda to Canada</h1>
-                      <p class="text-xl mb-8">We provide safe, efficient, and affordable shipping solutions for your personal and commercial goods between Rwanda and Canada.</p>
+              <h1 class="text-4xl md:text-5xl font-bold mb-6">
+                Reliable Transport Services from Rwanda to Canada
+              </h1>
+              <p class="text-xl mb-8">
+                We provide safe, efficient, and affordable shipping solutions
+                for your personal and commercial goods between Rwanda and
+                Canada.
+              </p>
              <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                          <button class="btn-primary bg-white text-primary hover:bg-gray-100">Get Free Quote</button>
+                <button class="btn-primary bg-white text-primary hover:bg-gray-100">
+                  Get Free Quote
+                </button>
                <button class="btn-secondary">Track Shipment</button>
              </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
-                      <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Cargo transport" class="rounded-lg shadow-xl max-w-full h-auto"/>
+              <img
+                src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                alt="Cargo transport"
+                class="rounded-lg shadow-xl max-w-full h-auto"
+              />
            </div>
          </div>
        </div>
@@ -79,12 +109,19 @@ function App() {
      <section id="services" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
          <h2 class="section-title">Our Transport Services</h2>
-              <p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">We offer comprehensive shipping solutions tailored to meet your specific needs between Rwanda and Canada.</p>
+          <p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">
+            We offer comprehensive shipping solutions tailored to meet your
+            specific needs between Rwanda and Canada.
+          </p>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="service-card">
              <div class="h-48 overflow-hidden">
-                          <img src="https://images.unsplash.com/photo-1600679472829-3044539ce8ed?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Air Freight" class="w-full h-full object-cover"/>
+                <img
+                  src="https://images.unsplash.com/photo-1600679472829-3044539ce8ed?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                  alt="Air Freight"
+                  class="w-full h-full object-cover"
+                />
              </div>
              <div class="p-6">
                <div class="flex items-center mb-3">
@@ -93,7 +130,10 @@ function App() {
                  </div>
                  <h3 class="text-xl font-bold text-gray-800">Air Freight</h3>
                </div>
-                          <p class="text-gray-600 mb-4">Fast and secure air shipping for time-sensitive shipments. Delivery in 3-7 business days.</p>
+                <p class="text-gray-600 mb-4">
+                  Fast and secure air shipping for time-sensitive shipments.
+                  Delivery in 3-7 business days.
+                </p>
                <ul class="space-y-2 mb-4">
                  <li class="flex items-center">
                    <i class="fas fa-check-circle text-primary mr-2"></i>
@@ -116,7 +156,11 @@ function App() {

            <div class="service-card">
              <div class="h-48 overflow-hidden">
-                          <img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Sea Freight" class="w-full h-full object-cover"/>
+                <img
+                  src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                  alt="Sea Freight"
+                  class="w-full h-full object-cover"
+                />
              </div>
              <div class="p-6">
                <div class="flex items-center mb-3">
@@ -125,11 +169,16 @@ function App() {
                  </div>
                  <h3 class="text-xl font-bold text-gray-800">Sea Freight</h3>
                </div>
-                          <p class="text-gray-600 mb-4">Cost-effective ocean shipping for larger shipments. Delivery in 4-6 weeks.</p>
+                <p class="text-gray-600 mb-4">
+                  Cost-effective ocean shipping for larger shipments. Delivery
+                  in 4-6 weeks.
+                </p>
                <ul class="space-y-2 mb-4">
                  <li class="flex items-center">
                    <i class="fas fa-check-circle text-primary mr-2"></i>
-                                  <span>Full container (FCL) and less than container (LCL)</span>
+                    <span>
+                      Full container (FCL) and less than container (LCL)
+                    </span>
                  </li>
                  <li class="flex items-center">
                    <i class="fas fa-check-circle text-primary mr-2"></i>
@@ -148,16 +197,25 @@ function App() {

            <div class="service-card">
              <div class="h-48 overflow-hidden">
-                          <img src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Personal Belongings" class="w-full h-full object-cover"/>
+                <img
+                  src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                  alt="Personal Belongings"
+                  class="w-full h-full object-cover"
+                />
              </div>
              <div class="p-6">
                <div class="flex items-center mb-3">
                  <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-3">
                    <i class="fas fa-box-open text-primary text-xl"></i>
                  </div>
-                              <h3 class="text-xl font-bold text-gray-800">Personal Belongings</h3>
+                  <h3 class="text-xl font-bold text-gray-800">
+                    Personal Belongings
+                  </h3>
                </div>
-                          <p class="text-gray-600 mb-4">Specialized service for individuals relocating between Rwanda and Canada.</p>
+                <p class="text-gray-600 mb-4">
+                  Specialized service for individuals relocating between Rwanda
+                  and Canada.
+                </p>
                <ul class="space-y-2 mb-4">
                  <li class="flex items-center">
                    <i class="fas fa-check-circle text-primary mr-2"></i>
@@ -184,39 +242,69 @@ function App() {
      <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <h2 class="section-title">How Our Transport Service Works</h2>
-              <p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">Simple steps to get your goods from Rwanda to Canada safely and efficiently.</p>
+          <p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">
+            Simple steps to get your goods from Rwanda to Canada safely and
+            efficiently.
+          </p>

          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="text-center">
              <div class="bg-primary bg-opacity-10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
-                          <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">1</div>
+                <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">
+                  1
                </div>
-                      <h3 class="text-xl font-bold text-gray-800 mb-2">Request a Quote</h3>
-                      <p class="text-gray-600">Fill out our online form or contact us directly to get a customized shipping quote.</p>
+              </div>
+              <h3 class="text-xl font-bold text-gray-800 mb-2">
+                Request a Quote
+              </h3>
+              <p class="text-gray-600">
+                Fill out our online form or contact us directly to get a
+                customized shipping quote.
+              </p>
            </div>

            <div class="text-center">
              <div class="bg-primary bg-opacity-10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
-                          <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">2</div>
+                <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">
+                  2
                </div>
-                      <h3 class="text-xl font-bold text-gray-800 mb-2">Prepare Your Shipment</h3>
-                      <p class="text-gray-600">Pack your items securely or use our professional packing services.</p>
+              </div>
+              <h3 class="text-xl font-bold text-gray-800 mb-2">
+                Prepare Your Shipment
+              </h3>
+              <p class="text-gray-600">
+                Pack your items securely or use our professional packing
+                services.
+              </p>
            </div>

            <div class="text-center">
              <div class="bg-primary bg-opacity-10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
-                          <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">3</div>
+                <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">
+                  3
                </div>
-                      <h3 class="text-xl font-bold text-gray-800 mb-2">We Handle Transport</h3>
-                      <p class="text-gray-600">We collect your shipment and manage all transport and customs procedures.</p>
+              </div>
+              <h3 class="text-xl font-bold text-gray-800 mb-2">
+                We Handle Transport
+              </h3>
+              <p class="text-gray-600">
+                We collect your shipment and manage all transport and customs
+                procedures.
+              </p>
            </div>

            <div class="text-center">
              <div class="bg-primary bg-opacity-10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
-                          <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">4</div>
+                <div class="bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold">
+                  4
                </div>
-                      <h3 class="text-xl font-bold text-gray-800 mb-2">Delivery to Destination</h3>
-                      <p class="text-gray-600">Your shipment arrives safely at its destination in Canada.</p>
+              </div>
+              <h3 class="text-xl font-bold text-gray-800 mb-2">
+                Delivery to Destination
+              </h3>
+              <p class="text-gray-600">
+                Your shipment arrives safely at its destination in Canada.
+              </p>
            </div>
          </div>
        </div>
@@ -225,7 +313,9 @@ function App() {
      <section id="pricing" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
          <h2 class="section-title">Transport Pricing</h2>
-              <p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">Competitive rates for shipping between Rwanda and Canada.</p>
+          <p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">
+            Competitive rates for shipping between Rwanda and Canada.
+          </p>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
@@ -234,7 +324,9 @@ function App() {
                <p class="opacity-80">Fastest delivery option</p>
              </div>
              <div class="p-6">
-                          <div class="text-3xl font-bold text-gray-800 mb-4">From $8/kg</div>
+                <div class="text-3xl font-bold text-gray-800 mb-4">
+                  From $8/kg
+                </div>
                <ul class="space-y-3 mb-6">
                  <li class="flex items-start">
                    <i class="fas fa-check text-primary mt-1 mr-2"></i>
@@ -266,7 +358,9 @@ function App() {
                <p class="opacity-80">Cost-effective for large shipments</p>
              </div>
              <div class="p-6">
-                          <div class="text-3xl font-bold text-gray-800 mb-4">From $1,200/m³</div>
+                <div class="text-3xl font-bold text-gray-800 mb-4">
+                  From $1,200/m³
+                </div>
                <ul class="space-y-3 mb-6">
                  <li class="flex items-start">
                    <i class="fas fa-check text-primary mt-1 mr-2"></i>
@@ -295,7 +389,9 @@ function App() {
                <p class="opacity-80">Relocation packages</p>
              </div>
              <div class="p-6">
-                          <div class="text-3xl font-bold text-gray-800 mb-4">Custom Pricing</div>
+                <div class="text-3xl font-bold text-gray-800 mb-4">
+                  Custom Pricing
+                </div>
                <ul class="space-y-3 mb-6">
                  <li class="flex items-start">
                    <i class="fas fa-check text-primary mt-1 mr-2"></i>
@@ -320,7 +416,9 @@ function App() {
          </div>

          <div class="mt-12 bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto">
-                  <h3 class="text-xl font-bold text-center mb-6">Factors Affecting Shipping Costs</h3>
+            <h3 class="text-xl font-bold text-center mb-6">
+              Factors Affecting Shipping Costs
+            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="flex items-start">
                <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-4">
@@ -328,7 +426,9 @@ function App() {
                </div>
                <div>
                  <h4 class="font-bold text-gray-800 mb-1">Weight & Volume</h4>
-                              <p class="text-gray-600">Heavier and larger shipments cost more to transport.</p>
+                  <p class="text-gray-600">
+                    Heavier and larger shipments cost more to transport.
+                  </p>
                </div>
              </div>
              <div class="flex items-start">
@@ -337,7 +437,9 @@ function App() {
                </div>
                <div>
                  <h4 class="font-bold text-gray-800 mb-1">Transit Time</h4>
-                              <p class="text-gray-600">Faster shipping methods like air freight cost more.</p>
+                  <p class="text-gray-600">
+                    Faster shipping methods like air freight cost more.
+                  </p>
                </div>
              </div>
              <div class="flex items-start">
@@ -346,7 +448,10 @@ function App() {
                </div>
                <div>
                  <h4 class="font-bold text-gray-800 mb-1">Special Handling</h4>
-                              <p class="text-gray-600">Fragile, perishable, or high-value items may require special care.</p>
+                  <p class="text-gray-600">
+                    Fragile, perishable, or high-value items may require special
+                    care.
+                  </p>
                </div>
              </div>
              <div class="flex items-start">
@@ -355,7 +460,9 @@ function App() {
                </div>
                <div>
                  <h4 class="font-bold text-gray-800 mb-1">Customs Fees</h4>
-                              <p class="text-gray-600">Duties and taxes vary depending on the goods being shipped.</p>
+                  <p class="text-gray-600">
+                    Duties and taxes vary depending on the goods being shipped.
+                  </p>
                </div>
              </div>
            </div>
@@ -366,13 +473,19 @@ function App() {
      <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <h2 class="section-title">What Our Customers Say</h2>
-              <p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">Hear from people who have used our Rwanda-Canada transport services.</p>
+          <p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">
+            Hear from people who have used our Rwanda-Canada transport services.
+          </p>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="testimonial-card">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
-                              <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Alice U." class="w-full h-full object-cover"/>
+                  <img
+                    src="https://randomuser.me/api/portraits/women/32.jpg"
+                    alt="Alice U."
+                    class="w-full h-full object-cover"
+                  />
                </div>
                <div>
                  <h4 class="font-bold">Alice U.</h4>
@@ -385,14 +498,22 @@ function App() {
                  </div>
                </div>
              </div>
-                      <p class="text-gray-600 italic mb-4">"I shipped my household goods from Kigali to Toronto and everything arrived perfectly. The team handled all the paperwork and customs clearance, making my relocation stress-free."</p>
+              <p class="text-gray-600 italic mb-4">
+                "I shipped my household goods from Kigali to Toronto and
+                everything arrived perfectly. The team handled all the paperwork
+                and customs clearance, making my relocation stress-free."
+              </p>
              <div class="text-sm text-gray-500">May 15, 2023</div>
            </div>

            <div class="testimonial-card">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
-                              <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Jean P." class="w-full h-full object-cover"/>
+                  <img
+                    src="https://randomuser.me/api/portraits/men/45.jpg"
+                    alt="Jean P."
+                    class="w-full h-full object-cover"
+                  />
                </div>
                <div>
                  <h4 class="font-bold">Jean P.</h4>
@@ -405,14 +526,22 @@ function App() {
                  </div>
                </div>
              </div>
-                      <p class="text-gray-600 italic mb-4">"As a business owner importing Rwandan coffee to Montreal, I rely on their sea freight service. Consistent, reliable, and excellent communication throughout the process."</p>
+              <p class="text-gray-600 italic mb-4">
+                "As a business owner importing Rwandan coffee to Montreal, I
+                rely on their sea freight service. Consistent, reliable, and
+                excellent communication throughout the process."
+              </p>
              <div class="text-sm text-gray-500">March 2, 2023</div>
            </div>

            <div class="testimonial-card">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
-                              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Grace K." class="w-full h-full object-cover"/>
+                  <img
+                    src="https://randomuser.me/api/portraits/women/68.jpg"
+                    alt="Grace K."
+                    class="w-full h-full object-cover"
+                  />
                </div>
                <div>
                  <h4 class="font-bold">Grace K.</h4>
@@ -425,7 +554,11 @@ function App() {
                  </div>
                </div>
              </div>
-                      <p class="text-gray-600 italic mb-4">"Sent important documents to my family in Vancouver via their air freight service. Arrived in 4 days with tracking updates every step of the way. Highly recommended!"</p>
+              <p class="text-gray-600 italic mb-4">
+                "Sent important documents to my family in Vancouver via their
+                air freight service. Arrived in 4 days with tracking updates
+                every step of the way. Highly recommended!"
+              </p>
              <div class="text-sm text-gray-500">January 28, 2023</div>
            </div>
          </div>
@@ -436,9 +569,23 @@ function App() {
        <div class="container mx-auto px-4">
          <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
-                      <h2 class="section-title text-left">About Our Transport Company</h2>
-                      <p class="text-gray-600 mb-6">With over 10 years of experience in international shipping, we specialize in transport services between Rwanda and Canada. Our team understands the unique challenges of this route and has developed efficient solutions to ensure your goods arrive safely and on time.</p>
-                      <p class="text-gray-600 mb-6">We pride ourselves on our Rwandan roots and Canadian connections, offering culturally sensitive service with international standards. Whether you're an individual relocating or a business expanding across continents, we've got you covered.</p>
+              <h2 class="section-title text-left">
+                About Our Transport Company
+              </h2>
+              <p class="text-gray-600 mb-6">
+                With over 10 years of experience in international shipping, we
+                specialize in transport services between Rwanda and Canada. Our
+                team understands the unique challenges of this route and has
+                developed efficient solutions to ensure your goods arrive safely
+                and on time.
+              </p>
+              <p class="text-gray-600 mb-6">
+                We pride ourselves on our Rwandan roots and Canadian
+                connections, offering culturally sensitive service with
+                international standards. Whether you're an individual relocating
+                or a business expanding across continents, we've got you
+                covered.
+              </p>
              <div class="space-y-4">
                <div class="flex items-center">
                  <div class="bg-primary text-white p-2 rounded-full mr-4">
@@ -456,23 +603,41 @@ function App() {
                  <div class="bg-primary text-white p-2 rounded-full mr-4">
                    <i class="fas fa-check"></i>
                  </div>
-                              <span class="font-medium">Bilingual support (English/French/Kinyarwanda)</span>
+                  <span class="font-medium">
+                    Bilingual support (English/French/Kinyarwanda)
+                  </span>
                </div>
              </div>
            </div>
            <div class="md:w-1/2">
              <div class="grid grid-cols-2 gap-4">
                <div class="rounded-lg overflow-hidden">
-                              <img src="https://images.unsplash.com/photo-1581093450021-4a7360e9a6d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Warehouse" class="w-full h-full object-cover"/>
+                  <img
+                    src="https://images.unsplash.com/photo-1581093450021-4a7360e9a6d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                    alt="Warehouse"
+                    class="w-full h-full object-cover"
+                  />
                </div>
                <div class="rounded-lg overflow-hidden">
-                              <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Shipping containers" class="w-full h-full object-cover"/>
+                  <img
+                    src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                    alt="Shipping containers"
+                    class="w-full h-full object-cover"
+                  />
                </div>
                <div class="rounded-lg overflow-hidden">
-                              <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Cargo plane" class="w-full h-full object-cover"/>
+                  <img
+                    src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                    alt="Cargo plane"
+                    class="w-full h-full object-cover"
+                  />
                </div>
                <div class="rounded-lg overflow-hidden">
-                              <img src="https://images.unsplash.com/photo-1518455027359-f3f8164ba6bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Delivery truck" class="w-full h-full object-cover"/>
+                  <img
+                    src="https://images.unsplash.com/photo-1518455027359-f3f8164ba6bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
+                    alt="Delivery truck"
+                    class="w-full h-full object-cover"
+                  />
                </div>
              </div>
            </div>
@@ -497,7 +662,10 @@ function App() {
                  <li>Sea freight: 4-6 weeks</li>
                  <li>Express courier: 2-5 business days</li>
                </ul>
-                          <p class="mt-2">Exact transit times depend on customs clearance, which we handle for you.</p>
+                <p class="mt-2">
+                  Exact transit times depend on customs clearance, which we
+                  handle for you.
+                </p>
              </div>
            </div>

@@ -515,7 +683,10 @@ function App() {
                  <li>Import/export permits if applicable</li>
                  <li>Your identification documents</li>
                </ul>
-                          <p class="mt-2">We'll provide you with a complete checklist based on your specific shipment.</p>
+                <p class="mt-2">
+                  We'll provide you with a complete checklist based on your
+                  specific shipment.
+                </p>
              </div>
            </div>

@@ -534,7 +705,9 @@ function App() {
                  <li>Counterfeit goods</li>
                  <li>Certain agricultural products</li>
                </ul>
-                          <p class="mt-2">Contact us if you're unsure about a specific item.</p>
+                <p class="mt-2">
+                  Contact us if you're unsure about a specific item.
+                </p>
              </div>
            </div>

@@ -551,7 +724,10 @@ function App() {
                  <li>Country of origin</li>
                  <li>Whether they're for personal or commercial use</li>
                </ul>
-                          <p class="mt-2">We can provide estimates for your specific shipment and help minimize these costs where possible.</p>
+                <p class="mt-2">
+                  We can provide estimates for your specific shipment and help
+                  minimize these costs where possible.
+                </p>
              </div>
            </div>

@@ -561,21 +737,27 @@ function App() {
                <i class="fas fa-chevron-down transition-transform duration-300"></i>
              </button>
              <div class="faq-content hidden px-4 pb-4 text-gray-600">
-                          <p>Yes, we offer professional packing services in Rwanda to ensure your items are properly protected for international shipping. Our services include:</p>
+                <p>
+                  Yes, we offer professional packing services in Rwanda to
+                  ensure your items are properly protected for international
+                  shipping. Our services include:
+                </p>
                <ul class="list-disc pl-5 mt-2 space-y-1">
                  <li>Professional packing of fragile items</li>
                  <li>Custom crating for valuable or odd-shaped items</li>
                  <li>Furniture disassembly and wrapping</li>
                  <li>Inventory listing</li>
                </ul>
-                          <p class="mt-2">Packing services can be added when you request your quote.</p>
+                <p class="mt-2">
+                  Packing services can be added when you request your quote.
+                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
-  )
+  );
 }

-export default App
+export default App;
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-import './index.css'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";

-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>,
-)
+);
@@ -1,21 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
-        'rwanda-blue': '#20603d',
-        'rwanda-yellow': '#fad201',
-        'canada-red': '#d52b1e',
-        'primary': '#20603d',
-        'secondary': '#d52b1e',
-        'accent': '#fad201',
-      }
-    }
+        "rwanda-blue": "#20603d",
+        "rwanda-yellow": "#fad201",
+        "canada-red": "#d52b1e",
+        primary: "#20603d",
+        secondary: "#d52b1e",
+        accent: "#fad201",
+      },
+    },
  },
  plugins: [],
-}
-
+};
@@ -1,12 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import eslint from 'vite-plugin-eslint'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import eslint from "vite-plugin-eslint";

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(),eslint(),],
+  plugins: [react(), eslint()],
  build: {
-    outDir: '../Sites/AssadProd',
+    outDir: "../Sites/AssadProd",
    emptyOutDir: true,
-  }
-})
+  },
+});