Hugging Face's logo

Spaces:
johnfmarti
/
air-cargo-map
Running

App Files Community
johnfmarti commited on
Commit
3365b4f
·
verified ·
1 Parent(s): 8ddec07

Please create an infographic suitable for print with these requirements. Print suitable means it will be included in a print publication and legible and correctly spelled text is vital. Please create an infographic suitable for print with these requirements. Print suitable means it will be included in a print publication and legible and correctly spelled text is vital. [SUGGESTED VISUAL: Trailer Selection Guide] To complement the table below, create a visual guide showing silhouettes of the main trailer types (Dry Van, Reefer, Flatbed, Step Deck). For each silhouette, include icons and brief text callouts highlighting its key features (e.g., for Reefer: "Temp Control," "Insulated Walls"; for Flatbed: "Open Deck," "Side Loading Access"). - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +232 -208
index.html CHANGED
@@ -3,244 +3,268 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Truckload Market Size Infographic</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <style>
9
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
10
-
11
- body {
12
- font-family: 'Roboto', sans-serif;
13
- background-color: #f8fafc;
14
- }
15
-
16
- .infographic-container {
17
- max-width: 1200px;
18
- margin: 0 auto;
19
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
20
- }
21
-
22
- .stat-card {
23
- transition: transform 0.3s ease;
24
- }
25
-
26
- .stat-card:hover {
27
- transform: translateY(-5px);
28
- }
29
-
30
- .truck-icon {
31
- animation: moveTruck 4s infinite alternate;
32
- }
33
-
34
- @keyframes moveTruck {
35
- 0% { transform: translateX(0); }
36
- 100% { transform: translateX(10px); }
37
  }
38
-
39
  @media print {
40
  body {
41
- background-color: white !important;
 
42
  }
43
-
44
  .infographic-container {
45
- box-shadow: none !important;
46
- }
47
-
48
- .no-print {
49
- display: none !important;
50
  }
51
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
53
  </head>
54
- <body class="bg-gray-50 py-8 px-4 print:py-0 print:px-0">
55
- <div class="infographic-container bg-white rounded-xl overflow-hidden print:rounded-none">
56
- <!-- Header -->
57
- <div class="bg-blue-800 text-white p-6 md:p-8 text-center">
58
- <h1 class="text-3xl md:text-4xl font-bold mb-2">The Massive Scale of the U.S. Truckload Market</h1>
59
- <p class="text-lg md:text-xl opacity-90">Key Statistics & Economic Impact</p>
60
  </div>
61
-
62
- <!-- Main Content -->
63
- <div class="p-6 md:p-8">
64
- <!-- Hero Section -->
65
- <div class="flex flex-col lg:flex-row items-center mb-10 gap-8">
66
- <div class="lg:w-1/2">
67
- <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
68
- <h2 class="text-2xl font-bold text-blue-900 mb-4">Trucking Moves America</h2>
69
- <p class="text-gray-700 mb-4">
70
- The truckload sector represents the backbone of American commerce, transporting
71
- the majority of freight tonnage across the nation's highways.
72
- </p>
73
- <div class="truck-icon inline-block">
74
- <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
75
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
76
- </svg>
 
77
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  </div>
79
  </div>
80
- <div class="lg:w-1/2">
81
- <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Truck on highway" class="w-full h-auto rounded-lg shadow-md">
82
- </div>
83
- </div>
84
-
85
- <!-- Key Stats Section -->
86
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
87
- <div class="stat-card bg-white p-6 rounded-lg border border-gray-200 shadow-sm hover:shadow-md">
88
- <div class="text-4xl font-bold text-blue-700 mb-2">$732.3B</div>
89
- <div class="text-gray-600">2022 U.S. Truckload Market Size</div>
90
- <div class="text-xs text-gray-500 mt-2">Source: American Trucking Associations</div>
91
- </div>
92
-
93
- <div class="stat-card bg-white p-6 rounded-lg border border-gray-200 shadow-sm hover:shadow-md">
94
- <div class="text-4xl font-bold text-blue-700 mb-2">72.5%</div>
95
- <div class="text-gray-600">of U.S. Freight Tonnage</div>
96
- <div class="text-xs text-gray-500 mt-2">Source: Bureau of Transportation Statistics</div>
97
- </div>
98
-
99
- <div class="stat-card bg-white p-6 rounded-lg border border-gray-200 shadow-sm hover:shadow-md">
100
- <div class="text-4xl font-bold text-blue-700 mb-2">3.6M+</div>
101
- <div class="text-gray-600">Truck Drivers in the U.S.</div>
102
- <div class="text-xs text-gray-500 mt-2">Source: U.S. Department of Labor</div>
103
- </div>
104
-
105
- <div class="stat-card bg-white p-6 rounded-lg border border-gray-200 shadow-sm hover:shadow-md">
106
- <div class="text-4xl font-bold text-blue-700 mb-2">1 in 16</div>
107
- <div class="text-gray-600">Americans Employed in Trucking</div>
108
- <div class="text-xs text-gray-500 mt-2">Source: American Trucking Associations</div>
109
- </div>
110
- </div>
111
-
112
- <!-- Market Breakdown -->
113
- <div class="mb-10">
114
- <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-2">Truckload Market Segments</h2>
115
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
116
- <div class="bg-orange-50 p-6 rounded-lg border border-orange-100">
117
- <h3 class="text-xl font-bold text-orange-800 mb-3">Dry Van</h3>
118
- <p class="text-gray-700 mb-4">The largest segment, transporting non-perishable, packaged goods in enclosed trailers.</p>
119
- <div class="text-2xl font-bold text-orange-700">58% of market</div>
120
- </div>
121
-
122
- <div class="bg-green-50 p-6 rounded-lg border border-green-100">
123
- <h3 class="text-xl font-bold text-green-800 mb-3">Refrigerated</h3>
124
- <p class="text-gray-700 mb-4">Temperature-controlled transport for perishable goods like food and pharmaceuticals.</p>
125
- <div class="text-2xl font-bold text-green-700">23% of market</div>
126
- </div>
127
-
128
- <div class="bg-purple-50 p-6 rounded-lg border border-purple-100">
129
- <h3 class="text-xl font-bold text-purple-800 mb-3">Flatbed</h3>
130
- <p class="text-gray-700 mb-4">Open trailers for oversized or irregularly shaped loads like construction materials.</p>
131
- <div class="text-2xl font-bold text-purple-700">19% of market</div>
132
- </div>
133
- </div>
134
- </div>
135
-
136
- <!-- Economic Impact -->
137
- <div class="bg-gray-50 p-6 md:p-8 rounded-lg border border-gray-200 mb-10">
138
- <h2 class="text-2xl font-bold text-gray-800 mb-6">Economic Impact of Trucking</h2>
139
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
140
- <div>
141
- <div class="flex items-start mb-4">
142
- <div class="bg-blue-100 p-2 rounded-full mr-4">
143
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
144
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
145
- </svg>
146
- </div>
147
- <div>
148
- <h3 class="text-lg font-bold text-gray-800">Contribution to GDP</h3>
149
- <p class="text-gray-700">The trucking industry contributed $791.7 billion to U.S. GDP in 2021, representing 3.4% of total GDP.</p>
150
- </div>
151
- </div>
152
-
153
- <div class="flex items-start mb-4">
154
- <div class="bg-green-100 p-2 rounded-full mr-4">
155
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
156
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
157
- </svg>
158
- </div>
159
- <div>
160
- <h3 class="text-lg font-bold text-gray-800">Revenue Generation</h3>
161
- <p class="text-gray-700">Trucking companies generated $875.5 billion in revenue in 2021, with truckload carriers accounting for the largest share.</p>
162
  </div>
163
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  </div>
165
-
166
- <div>
167
- <div class="flex items-start mb-4">
168
- <div class="bg-purple-100 p-2 rounded-full mr-4">
169
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
170
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
171
- </svg>
172
- </div>
173
- <div>
174
- <h3 class="text-lg font-bold text-gray-800">Employment</h3>
175
- <p class="text-gray-700">The industry employs nearly 8 million people, including 3.6 million truck drivers, making it one of the largest employment sectors.</p>
176
- </div>
177
- </div>
178
-
179
- <div class="flex items-start">
180
- <div class="bg-red-100 p-2 rounded-full mr-4">
181
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
182
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
183
- </svg>
184
- </div>
185
- <div>
186
- <h3 class="text-lg font-bold text-gray-800">Fuel Consumption</h3>
187
- <p class="text-gray-700">Trucks consume about 45 billion gallons of fuel annually, representing 17% of all U.S. petroleum consumption.</p>
188
  </div>
189
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
190
  </div>
191
  </div>
192
- </div>
193
-
194
- <!-- Growth Projections -->
195
- <div class="mb-10">
196
- <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-2">Market Growth Projections</h2>
197
- <div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
198
- <div class="flex flex-col md:flex-row items-center gap-6">
199
- <div class="md:w-1/3">
200
- <div class="text-5xl font-bold text-blue-700 mb-2">4.5%</div>
201
- <div class="text-xl text-gray-700">CAGR (2023-2028)</div>
202
- </div>
203
- <div class="md:w-2/3">
204
- <p class="text-gray-700 mb-4">
205
- The U.S. truckload market is projected to grow at a compound annual growth rate (CAGR) of 4.5% from 2023 to 2028,
206
- driven by e-commerce expansion, manufacturing growth, and infrastructure investments.
207
- </p>
208
- <div class="bg-blue-50 p-3 rounded border border-blue-100">
209
- <p class="text-sm text-blue-800">
210
- <span class="font-bold">Key Growth Drivers:</span> E-commerce fulfillment, just-in-time manufacturing,
211
- reshoring of production, and increased demand for refrigerated transport.
212
- </p>
213
  </div>
214
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  </div>
216
  </div>
217
  </div>
218
-
219
- <!-- Sources -->
220
- <div class="bg-gray-100 p-6 rounded-lg">
221
- <h3 class="text-lg font-bold text-gray-800 mb-3">Sources</h3>
222
- <ul class="text-sm text-gray-700 space-y-1">
223
- <li>American Trucking Associations (ATA) - 2022 Trucking Trends Report</li>
224
- <li>U.S. Bureau of Transportation Statistics - Freight Facts and Figures</li>
225
- <li>U.S. Department of Labor - Occupational Employment Statistics</li>
226
- <li>IBISWorld - Truckload Freight Transportation in the US Industry Report</li>
227
- <li>Statista - Commercial Vehicle Market Data</li>
228
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
229
  </div>
230
  </div>
231
-
232
- <!-- Footer -->
233
- <div class="bg-blue-900 text-white p-6 text-center text-sm">
234
- <p>© 2023 Transportation Insights | Data accurate as of Q2 2023</p>
235
- <p class="text-blue-200 mt-1 no-print">For optimal print results, use Chrome or Edge browser and select "Background graphics" in print settings.</p>
236
  </div>
237
  </div>
238
-
239
- <!-- Print Button (hidden when printing) -->
240
- <div class="text-center mt-6 no-print">
241
- <button onclick="window.print()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg shadow-md transition duration-300">
242
- Print Infographic
243
- </button>
244
- </div>
 
 
 
 
 
 
 
 
 
245
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=johnfmarti/air-cargo-map" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
246
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Trailer Selection Guide Infographic</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @page {
11
+ size: A4;
12
+ margin: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  }
 
14
  @media print {
15
  body {
16
+ width: 210mm;
17
+ height: 297mm;
18
  }
 
19
  .infographic-container {
20
+ page-break-inside: avoid;
 
 
 
 
21
  }
22
  }
23
+ .trailer-card {
24
+ transition: all 0.3s ease;
25
+ }
26
+ .trailer-card:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
29
+ }
30
+ .feature-icon {
31
+ width: 24px;
32
+ height: 24px;
33
+ display: inline-flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ margin-right: 8px;
37
+ }
38
  </style>
39
  </head>
40
+ <body class="bg-gray-50 font-sans">
41
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
42
+ <div class="text-center mb-12">
43
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Trailer Selection Guide</h1>
44
+ <p class="text-xl text-gray-600">Choose the right trailer for your shipping needs</p>
 
45
  </div>
46
+
47
+ <div class="infographic-container bg-white rounded-xl shadow-lg p-8 mb-8">
48
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
49
+ <!-- Dry Van Trailer -->
50
+ <div class="trailer-card bg-white rounded-lg border border-gray-200 overflow-hidden">
51
+ <div class="p-6">
52
+ <div class="flex justify-center mb-6">
53
+ <div class="relative w-full h-40">
54
+ <!-- Dry Van Silhouette -->
55
+ <div class="absolute inset-0 bg-blue-50 rounded-lg">
56
+ <div class="absolute bottom-0 left-0 right-0 h-32 bg-blue-100 rounded-b-lg">
57
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-8 bg-blue-200 rounded-full"></div>
58
+ <div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-3/4 h-16 bg-blue-300 rounded-t-lg"></div>
59
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 w-4/5 h-16 bg-blue-400 rounded-lg"></div>
60
+ </div>
61
+ </div>
62
+ </div>
63
  </div>
64
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Dry Van</h3>
65
+ <ul class="space-y-2">
66
+ <li class="flex items-start">
67
+ <span class="feature-icon text-blue-500"><i class="fas fa-box"></i></span>
68
+ <span class="text-gray-700">Fully enclosed</span>
69
+ </li>
70
+ <li class="flex items-start">
71
+ <span class="feature-icon text-blue-500"><i class="fas fa-shield-alt"></i></span>
72
+ <span class="text-gray-700">Weather protection</span>
73
+ </li>
74
+ <li class="flex items-start">
75
+ <span class="feature-icon text-blue-500"><i class="fas fa-warehouse"></i></span>
76
+ <span class="text-gray-700">General freight</span>
77
+ </li>
78
+ <li class="flex items-start">
79
+ <span class="feature-icon text-blue-500"><i class="fas fa-lock"></i></span>
80
+ <span class="text-gray-700">Secure cargo</span>
81
+ </li>
82
+ </ul>
83
  </div>
84
  </div>
85
+
86
+ <!-- Reefer Trailer -->
87
+ <div class="trailer-card bg-white rounded-lg border border-gray-200 overflow-hidden">
88
+ <div class="p-6">
89
+ <div class="flex justify-center mb-6">
90
+ <div class="relative w-full h-40">
91
+ <!-- Reefer Silhouette -->
92
+ <div class="absolute inset-0 bg-green-50 rounded-lg">
93
+ <div class="absolute bottom-0 left-0 right-0 h-32 bg-green-100 rounded-b-lg">
94
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-8 bg-green-200 rounded-full"></div>
95
+ <div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-3/4 h-16 bg-green-300 rounded-t-lg">
96
+ <div class="absolute top-2 right-2 w-6 h-6 bg-green-400 rounded-full"></div>
97
+ </div>
98
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 w-4/5 h-16 bg-green-400 rounded-lg"></div>
99
+ </div>
100
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
101
  </div>
102
  </div>
103
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Reefer</h3>
104
+ <ul class="space-y-2">
105
+ <li class="flex items-start">
106
+ <span class="feature-icon text-green-500"><i class="fas fa-snowflake"></i></span>
107
+ <span class="text-gray-700">Temperature control</span>
108
+ </li>
109
+ <li class="flex items-start">
110
+ <span class="feature-icon text-green-500"><i class="fas fa-layer-group"></i></span>
111
+ <span class="text-gray-700">Insulated walls</span>
112
+ </li>
113
+ <li class="flex items-start">
114
+ <span class="feature-icon text-green-500"><i class="fas fa-utensils"></i></span>
115
+ <span class="text-gray-700">Perishable goods</span>
116
+ </li>
117
+ <li class="flex items-start">
118
+ <span class="feature-icon text-green-500"><i class="fas fa-prescription-bottle-alt"></i></span>
119
+ <span class="text-gray-700">Pharmaceuticals</span>
120
+ </li>
121
+ </ul>
122
  </div>
123
+ </div>
124
+
125
+ <!-- Flatbed Trailer -->
126
+ <div class="trailer-card bg-white rounded-lg border border-gray-200 overflow-hidden">
127
+ <div class="p-6">
128
+ <div class="flex justify-center mb-6">
129
+ <div class="relative w-full h-40">
130
+ <!-- Flatbed Silhouette -->
131
+ <div class="absolute inset-0 bg-orange-50 rounded-lg">
132
+ <div class="absolute bottom-0 left-0 right-0 h-32 bg-orange-100 rounded-b-lg">
133
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-8 bg-orange-200 rounded-full"></div>
134
+ <div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-3/4 h-16 bg-orange-300 rounded-t-lg"></div>
135
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 w-4/5 h-1 bg-orange-400"></div>
136
+ </div>
137
+ </div>
 
 
 
 
 
 
 
 
138
  </div>
139
  </div>
140
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Flatbed</h3>
141
+ <ul class="space-y-2">
142
+ <li class="flex items-start">
143
+ <span class="feature-icon text-orange-500"><i class="fas fa-external-link-alt"></i></span>
144
+ <span class="text-gray-700">Open deck</span>
145
+ </li>
146
+ <li class="flex items-start">
147
+ <span class="feature-icon text-orange-500"><i class="fas fa-arrows-alt-h"></i></span>
148
+ <span class="text-gray-700">Side loading access</span>
149
+ </li>
150
+ <li class="flex items-start">
151
+ <span class="feature-icon text-orange-500"><i class="fas fa-weight-hanging"></i></span>
152
+ <span class="text-gray-700">Oversized loads</span>
153
+ </li>
154
+ <li class="flex items-start">
155
+ <span class="feature-icon text-orange-500"><i class="fas fa-crane"></i></span>
156
+ <span class="text-gray-700">Heavy equipment</span>
157
+ </li>
158
+ </ul>
159
  </div>
160
  </div>
161
+
162
+ <!-- Step Deck Trailer -->
163
+ <div class="trailer-card bg-white rounded-lg border border-gray-200 overflow-hidden">
164
+ <div class="p-6">
165
+ <div class="flex justify-center mb-6">
166
+ <div class="relative w-full h-40">
167
+ <!-- Step Deck Silhouette -->
168
+ <div class="absolute inset-0 bg-purple-50 rounded-lg">
169
+ <div class="absolute bottom-0 left-0 right-0 h-32 bg-purple-100 rounded-b-lg">
170
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-8 bg-purple-200 rounded-full"></div>
171
+ <div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-3/4 h-8 bg-purple-300 rounded-t-lg"></div>
172
+ <div class="absolute top-1/3 left-1/2 transform -translate-x-1/2 w-4/5 h-12 bg-purple-400 rounded-lg"></div>
173
+ <div class="absolute top-2/3 left-1/2 transform -translate-x-1/2 w-full h-1 bg-purple-500"></div>
174
+ </div>
175
+ </div>
 
 
 
 
 
 
176
  </div>
177
  </div>
178
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Step Deck</h3>
179
+ <ul class="space-y-2">
180
+ <li class="flex items-start">
181
+ <span class="feature-icon text-purple-500"><i class="fas fa-stairs"></i></span>
182
+ <span class="text-gray-700">Lower deck height</span>
183
+ </li>
184
+ <li class="flex items-start">
185
+ <span class="feature-icon text-purple-500"><i class="fas fa-ruler-vertical"></i></span>
186
+ <span class="text-gray-700">Taller cargo capacity</span>
187
+ </li>
188
+ <li class="flex items-start">
189
+ <span class="feature-icon text-purple-500"><i class="fas fa-truck-loading"></i></span>
190
+ <span class="text-gray-700">Easier loading</span>
191
+ </li>
192
+ <li class="flex items-start">
193
+ <span class="feature-icon text-purple-500"><i class="fas fa-tools"></i></span>
194
+ <span class="text-gray-700">Machinery transport</span>
195
+ </li>
196
+ </ul>
197
  </div>
198
  </div>
199
  </div>
200
+ </div>
201
+
202
+ <div class="bg-white rounded-xl shadow-lg p-8">
203
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Trailer Comparison</h2>
204
+ <div class="overflow-x-auto">
205
+ <table class="min-w-full divide-y divide-gray-200">
206
+ <thead class="bg-gray-50">
207
+ <tr>
208
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trailer Type</th>
209
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Best For</th>
210
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dimensions</th>
211
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capacity</th>
212
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Special Features</th>
213
+ </tr>
214
+ </thead>
215
+ <tbody class="bg-white divide-y divide-gray-200">
216
+ <tr>
217
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">Dry Van</td>
218
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">General freight, packaged goods</td>
219
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">53' L × 8'6" W × 9' H</td>
220
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45,000 lbs</td>
221
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Weatherproof, secure</td>
222
+ </tr>
223
+ <tr>
224
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">Reefer</td>
225
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Perishables, pharmaceuticals</td>
226
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">53' L × 8'6" W × 9' H</td>
227
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42,000 lbs</td>
228
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Temperature controlled</td>
229
+ </tr>
230
+ <tr>
231
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-orange-600">Flatbed</td>
232
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oversized, heavy equipment</td>
233
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">48' L × 8'6" W</td>
234
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">48,000 lbs</td>
235
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Open access, versatile</td>
236
+ </tr>
237
+ <tr>
238
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-purple-600">Step Deck</td>
239
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Tall machinery, industrial</td>
240
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">48' L × 8'6" W (main deck)</td>
241
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">40,000 lbs</td>
242
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lower deck height</td>
243
+ </tr>
244
+ </tbody>
245
+ </table>
246
  </div>
247
  </div>
248
+
249
+ <div class="mt-8 text-center text-gray-500 text-sm">
250
+ <p>© 2023 Transportation Solutions Inc. | For more information contact: info@transportguide.com</p>
 
 
251
  </div>
252
  </div>
253
+
254
+ <script>
255
+ // Print button functionality (optional)
256
+ function printInfographic() {
257
+ window.print();
258
+ }
259
+
260
+ // You could add a print button if needed
261
+ // document.addEventListener('DOMContentLoaded', function() {
262
+ // const printBtn = document.createElement('button');
263
+ // printBtn.textContent = 'Print Infographic';
264
+ // printBtn.className = 'fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg';
265
+ // printBtn.onclick = printInfographic;
266
+ // document.body.appendChild(printBtn);
267
+ // });
268
+ </script>
269
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=johnfmarti/air-cargo-map" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
270
  </html>