Hugging Face's logo

Spaces:
sdurdiyev
/
ratedispatch2
Running

App Files Community
sdurdiyev commited on
Commit
cf7922e
·
verified ·
1 Parent(s): 1a1a177

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +290 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ratedispatch2
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ratedispatch2
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,290 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HaulMatch - Connect Dispatchers & Carriers</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
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Space Grotesk', sans-serif;
14
+ background-color: #f0f0f0;
15
+ }
16
+
17
+ .brutal-border {
18
+ border: 4px solid #000;
19
+ box-shadow: 8px 8px 0 #000;
20
+ }
21
+
22
+ .brutal-btn {
23
+ border: 3px solid #000;
24
+ box-shadow: 4px 4px 0 #000;
25
+ transition: all 0.2s;
26
+ }
27
+
28
+ .brutal-btn:hover {
29
+ transform: translate(2px, 2px);
30
+ box-shadow: 2px 2px 0 #000;
31
+ }
32
+
33
+ .brutal-card {
34
+ border: 3px solid #000;
35
+ box-shadow: 6px 6px 0 #000;
36
+ }
37
+
38
+ .nav-link:hover {
39
+ text-decoration: underline;
40
+ text-decoration-thickness: 3px;
41
+ text-underline-offset: 6px;
42
+ }
43
+
44
+ .stats-card {
45
+ border-right: 4px solid #000;
46
+ border-bottom: 4px solid #000;
47
+ }
48
+
49
+ input, select, textarea {
50
+ border: 3px solid #000 !important;
51
+ }
52
+
53
+ input:focus, select:focus, textarea:focus {
54
+ outline: none;
55
+ box-shadow: 4px 4px 0 #000;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-100">
60
+ <!-- Navigation -->
61
+ <nav class="bg-white py-4 px-6 brutal-border mb-8 sticky top-0 z-50">
62
+ <div class="container mx-auto flex justify-between items-center">
63
+ <div class="flex items-center space-x-2">
64
+ <i class="fas fa-truck-moving text-3xl"></i>
65
+ <h1 class="text-2xl font-bold">HAULMATCH</h1>
66
+ </div>
67
+ <div class="hidden md:flex space-x-8">
68
+ <a href="#" class="nav-link font-medium">For Dispatchers</a>
69
+ <a href="#" class="nav-link font-medium">For Carriers</a>
70
+ <a href="#" class="nav-link font-medium">How It Works</a>
71
+ <a href="#" class="nav-link font-medium">Pricing</a>
72
+ </div>
73
+ <div class="flex items-center space-x-4">
74
+ <a href="#" class="px-4 py-2 font-medium">Log In</a>
75
+ <a href="#" class="bg-black text-white px-6 py-2 font-bold brutal-btn">Sign Up</a>
76
+ <button class="md:hidden">
77
+ <i class="fas fa-bars text-2xl"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </nav>
82
+
83
+ <!-- Hero Section -->
84
+ <section class="container mx-auto px-4 mb-16">
85
+ <div class="bg-yellow-400 p-8 md:p-12 brutal-border">
86
+ <div class="md:flex items-center">
87
+ <div class="md:w-1/2 mb-8 md:mb-0">
88
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">MATCHING FREIGHT DISPATCHERS WITH TRUCKING COMPANIES</h2>
89
+ <p class="text-xl mb-8">The brutalist platform that cuts through the bullshit and gets you connected.</p>
90
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
91
+ <a href="#" class="bg-black text-white px-8 py-3 font-bold text-center brutal-btn">I Need a Dispatcher</a>
92
+ <a href="#" class="bg-white text-black px-8 py-3 font-bold text-center brutal-btn">I Need Loads</a>
93
+ </div>
94
+ </div>
95
+ <div class="md:w-1/2 flex justify-center">
96
+ <img src="https://images.unsplash.com/photo-1602722053026-5c1693ba0c4a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Truck on highway" class="w-full max-w-md brutal-border">
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </section>
101
+
102
+ <!-- Stats Section -->
103
+ <section class="container mx-auto px-4 mb-16">
104
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
105
+ <div class="bg-white p-6 stats-card">
106
+ <h3 class="text-4xl font-bold mb-2">5,000+</h3>
107
+ <p class="font-medium">ACTIVE DISPATCHERS</p>
108
+ </div>
109
+ <div class="bg-white p-6 stats-card">
110
+ <h3 class="text-4xl font-bold mb-2">12K+</h3>
111
+ <p class="font-medium">TRUCKING COMPANIES</p>
112
+ </div>
113
+ <div class="bg-white p-6 stats-card">
114
+ <h3 class="text-4xl font-bold mb-2">$2.5M+</h3>
115
+ <p class="font-medium">IN FREIGHT MOVED</p>
116
+ </div>
117
+ <div class="bg-white p-6">
118
+ <h3 class="text-4xl font-bold mb-2">24/7</h3>
119
+ <p class="font-medium">SUPPORT</p>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- How It Works -->
125
+ <section class="container mx-auto px-4 mb-16">
126
+ <h2 class="text-3xl font-bold mb-12 text-center">HOW IT WORKS</h2>
127
+ <div class="grid md:grid-cols-3 gap-8">
128
+ <div class="bg-white p-6 brutal-card">
129
+ <div class="bg-black text-white w-12 h-12 flex items-center justify-center text-2xl font-bold mb-4">1</div>
130
+ <h3 class="text-xl font-bold mb-4">Create Your Profile</h3>
131
+ <p>Whether you're a dispatcher or carrier, set up your profile with all the essential details.</p>
132
+ </div>
133
+ <div class="bg-white p-6 brutal-card">
134
+ <div class="bg-black text-white w-12 h-12 flex items-center justify-center text-2xl font-bold mb-4">2</div>
135
+ <h3 class="text-xl font-bold mb-4">Find Matches</h3>
136
+ <p>Our algorithm connects you with the most compatible partners based on your needs and specialties.</p>
137
+ </div>
138
+ <div class="bg-white p-6 brutal-card">
139
+ <div class="bg-black text-white w-12 h-12 flex items-center justify-center text-2xl font-bold mb-4">3</div>
140
+ <h3 class="text-xl font-bold mb-4">Start Working</h3>
141
+ <p>Communicate through our secure platform and get those loads moving.</p>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Testimonials -->
147
+ <section class="container mx-auto px-4 mb-16">
148
+ <h2 class="text-3xl font-bold mb-12 text-center">WHAT OUR USERS SAY</h2>
149
+ <div class="grid md:grid-cols-2 gap-8">
150
+ <div class="bg-white p-6 brutal-card">
151
+ <div class="flex items-center mb-4">
152
+ <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
153
+ <div>
154
+ <h4 class="font-bold">Sarah Johnson</h4>
155
+ <p class="text-gray-600">Freight Dispatcher</p>
156
+ </div>
157
+ </div>
158
+ <p class="text-lg">"HaulMatch connected me with three reliable carriers in my first week. The platform is straightforward and gets results."</p>
159
+ <div class="flex mt-4">
160
+ <i class="fas fa-star text-yellow-400"></i>
161
+ <i class="fas fa-star text-yellow-400"></i>
162
+ <i class="fas fa-star text-yellow-400"></i>
163
+ <i class="fas fa-star text-yellow-400"></i>
164
+ <i class="fas fa-star text-yellow-400"></i>
165
+ </div>
166
+ </div>
167
+ <div class="bg-white p-6 brutal-card">
168
+ <div class="flex items-center mb-4">
169
+ <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
170
+ <div>
171
+ <h4 class="font-bold">Mike Rodriguez</h4>
172
+ <p class="text-gray-600">Trucking Company Owner</p>
173
+ </div>
174
+ </div>
175
+ <p class="text-lg">"Found an amazing dispatcher who understands my business. We've increased our loads by 40% since connecting."</p>
176
+ <div class="flex mt-4">
177
+ <i class="fas fa-star text-yellow-400"></i>
178
+ <i class="fas fa-star text-yellow-400"></i>
179
+ <i class="fas fa-star text-yellow-400"></i>
180
+ <i class="fas fa-star text-yellow-400"></i>
181
+ <i class="fas fa-star text-yellow-400"></i>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- CTA Section -->
188
+ <section class="container mx-auto px-4 mb-16">
189
+ <div class="bg-black text-white p-8 md:p-12 brutal-border">
190
+ <div class="md:flex items-center justify-between">
191
+ <div class="md:w-2/3 mb-8 md:mb-0">
192
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">READY TO TRANSFORM YOUR FREIGHT BUSINESS?</h2>
193
+ <p class="text-xl">Join thousands of dispatchers and carriers making more money with less hassle.</p>
194
+ </div>
195
+ <div class="md:w-1/3 flex justify-center">
196
+ <a href="#" class="bg-white text-black px-8 py-3 font-bold text-center brutal-btn">GET STARTED NOW</a>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Footer -->
203
+ <footer class="bg-white py-8 px-6 brutal-border-t">
204
+ <div class="container mx-auto">
205
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
206
+ <div>
207
+ <div class="flex items-center space-x-2 mb-4">
208
+ <i class="fas fa-truck-moving text-2xl"></i>
209
+ <h3 class="text-xl font-bold">HAULMATCH</h3>
210
+ </div>
211
+ <p class="mb-4">The no-nonsense platform connecting freight dispatchers and trucking companies.</p>
212
+ <div class="flex space-x-4">
213
+ <a href="#" class="text-2xl"><i class="fab fa-twitter"></i></a>
214
+ <a href="#" class="text-2xl"><i class="fab fa-linkedin"></i></a>
215
+ <a href="#" class="text-2xl"><i class="fab fa-facebook"></i></a>
216
+ </div>
217
+ </div>
218
+ <div>
219
+ <h4 class="font-bold mb-4 text-lg">For Dispatchers</h4>
220
+ <ul class="space-y-2">
221
+ <li><a href="#" class="hover:underline">Find Carriers</a></li>
222
+ <li><a href="#" class="hover:underline">Pricing</a></li>
223
+ <li><a href="#" class="hover:underline">Success Stories</a></li>
224
+ <li><a href="#" class="hover:underline">Resources</a></li>
225
+ </ul>
226
+ </div>
227
+ <div>
228
+ <h4 class="font-bold mb-4 text-lg">For Carriers</h4>
229
+ <ul class="space-y-2">
230
+ <li><a href="#" class="hover:underline">Find Dispatchers</a></li>
231
+ <li><a href="#" class="hover:underline">Pricing</a></li>
232
+ <li><a href="#" class="hover:underline">Success Stories</a></li>
233
+ <li><a href="#" class="hover:underline">Resources</a></li>
234
+ </ul>
235
+ </div>
236
+ <div>
237
+ <h4 class="font-bold mb-4 text-lg">Company</h4>
238
+ <ul class="space-y-2">
239
+ <li><a href="#" class="hover:underline">About Us</a></li>
240
+ <li><a href="#" class="hover:underline">Careers</a></li>
241
+ <li><a href="#" class="hover:underline">Contact</a></li>
242
+ <li><a href="#" class="hover:underline">Blog</a></li>
243
+ </ul>
244
+ </div>
245
+ </div>
246
+ <div class="pt-6 border-t-2 border-black flex flex-col md:flex-row justify-between items-center">
247
+ <p>© 2023 HaulMatch. All rights reserved.</p>
248
+ <div class="flex space-x-6 mt-4 md:mt-0">
249
+ <a href="#" class="hover:underline">Terms</a>
250
+ <a href="#" class="hover:underline">Privacy</a>
251
+ <a href="#" class="hover:underline">Cookies</a>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </footer>
256
+
257
+ <script>
258
+ // Mobile menu toggle functionality
259
+ document.addEventListener('DOMContentLoaded', function() {
260
+ const mobileMenuButton = document.querySelector('button.md\\:hidden');
261
+ const mobileMenu = document.querySelector('.hidden.md\\:flex');
262
+
263
+ mobileMenuButton.addEventListener('click', function() {
264
+ mobileMenu.classList.toggle('hidden');
265
+ mobileMenu.classList.toggle('flex');
266
+ mobileMenu.classList.toggle('flex-col');
267
+ mobileMenu.classList.toggle('absolute');
268
+ mobileMenu.classList.toggle('top-16');
269
+ mobileMenu.classList.toggle('left-0');
270
+ mobileMenu.classList.toggle('right-0');
271
+ mobileMenu.classList.toggle('bg-white');
272
+ mobileMenu.classList.toggle('p-4');
273
+ mobileMenu.classList.toggle('space-y-4');
274
+ mobileMenu.classList.toggle('space-x-8');
275
+ mobileMenu.classList.toggle('border-b-4');
276
+ mobileMenu.classList.toggle('border-black');
277
+ });
278
+
279
+ // Form submission example
280
+ const signupForms = document.querySelectorAll('a[href="#"]');
281
+ signupForms.forEach(form => {
282
+ form.addEventListener('click', function(e) {
283
+ e.preventDefault();
284
+ alert('Sign up functionality would go here!');
285
+ });
286
+ });
287
+ });
288
+ </script>
289
+ <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=sdurdiyev/ratedispatch2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
290
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Platform that connect freight dispacthers ( who look to find carrier to work with) and trucking companies ( who look for good dispatcher), like upwork, flat UI design, Brutalism)