Hugging Face's logo

Spaces:
Ver8826
/
vertex-dimensions
Running

App Files Community
Ver8826 commited on
Commit
d4c30e4
·
verified ·
1 Parent(s): a919d98

Create for me a website for vertex dimensions and I put this logo that I will be attaching to this message. The website has 3 different pages the first is the overview about the seller permit and the next talks about the plan and packages 6 months $85, 1 year $125, 2 years $245 and 3 years $305. Then create a form that will require the following details. Store owners name, store URL, country of Operation, active email address and date of store launch. Now the form will be linked to my email officialvertexdimension@gmail.com and once they fill the form the details auto magically reflect in my email. The colour used should be Shopify green and royal blue. Let it look like original Shopify partner page and the name should be Vertex Dimension - Initial Deployment

Browse files
Files changed (5) hide show
  1. README.md +7 -5
  2. apply.html +340 -0
  3. index.html +224 -18
  4. plans.html +469 -0
  5. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vertex Dimensions
3
- emoji: 📊
4
- colorFrom: red
5
- colorTo: purple
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: vertex-dimensions
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
apply.html ADDED
@@ -0,0 +1,340 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Vertex Dimension - Apply</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .shopify-green {
14
+ background-color: #96bf48;
15
+ }
16
+ .shopify-green-text {
17
+ color: #96bf48;
18
+ }
19
+ .royal-blue {
20
+ background-color: #2a4e96;
21
+ }
22
+ .royal-blue-text {
23
+ color: #2a4e96;
24
+ }
25
+ .form-input:focus {
26
+ border-color: #96bf48;
27
+ box-shadow: 0 0 0 1px #96bf48;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="font-sans">
32
+ <!-- Navigation -->
33
+ <nav class="bg-white shadow-md">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between h-16">
36
+ <div class="flex items-center">
37
+ <div class="flex-shrink-0 flex items-center">
38
+ <img class="h-8 w-auto" src="https://via.placeholder.com/150x50?text=Vertex+Dimension" alt="Vertex Dimension Logo">
39
+ </div>
40
+ </div>
41
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
42
+ <a href="index.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
43
+ <a href="plans.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Plans</a>
44
+ <a href="apply.html" class="royal-blue-text px-3 py-2 rounded-md text-sm font-medium">Apply Now</a>
45
+ </div>
46
+ <div class="-mr-2 flex items-center md:hidden">
47
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
48
+ <span class="sr-only">Open main menu</span>
49
+ <i data-feather="menu"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </div>
54
+
55
+ <!-- Mobile menu -->
56
+ <div class="md:hidden hidden" id="mobile-menu">
57
+ <div class="pt-2 pb-3 space-y-1">
58
+ <a href="index.html" class="text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
59
+ <a href="plans.html" class="text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Plans</a>
60
+ <a href="apply.html" class="royal-blue-text block px-3 py-2 rounded-md text-base font-medium">Apply Now</a>
61
+ </div>
62
+ </div>
63
+ </nav>
64
+
65
+ <!-- Application Form -->
66
+ <div class="bg-gray-50 py-12">
67
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
68
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
69
+ <div class="mb-8 lg:mb-0" data-aos="fade-right">
70
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
71
+ Apply for your Shopify seller permit
72
+ </h2>
73
+ <p class="mt-3 text-xl text-gray-600">
74
+ Fill out the form and we'll handle the rest. Our team will contact you within 24 hours to confirm your details.
75
+ </p>
76
+ <div class="mt-8">
77
+ <div class="flex items-center">
78
+ <div class="flex-shrink-0 bg-green-100 rounded-full p-2">
79
+ <i data-feather="check" class="h-6 w-6 text-green-600"></i>
80
+ </div>
81
+ <div class="ml-3">
82
+ <p class="text-lg font-medium text-gray-700">Simple application</p>
83
+ <p class="mt-1 text-gray-500">Only takes a few minutes to complete</p>
84
+ </div>
85
+ </div>
86
+ <div class="flex items-center mt-6">
87
+ <div class="flex-shrink-0 bg-green-100 rounded-full p-2">
88
+ <i data-feather="check" class="h-6 w-6 text-green-600"></i>
89
+ </div>
90
+ <div class="ml-3">
91
+ <p class="text-lg font-medium text-gray-700">No upfront payment</p>
92
+ <p class="mt-1 text-gray-500">We'll confirm your plan before payment</p>
93
+ </div>
94
+ </div>
95
+ <div class="flex items-center mt-6">
96
+ <div class="flex-shrink-0 bg-green-100 rounded-full p-2">
97
+ <i data-feather="check" class="h-6 w-6 text-green-600"></i>
98
+ </div>
99
+ <div class="ml-3">
100
+ <p class="text-lg font-medium text-gray-700">Expert support</p>
101
+ <p class="mt-1 text-gray-500">Our team is here to help at every step</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div class="bg-white shadow-md rounded-lg p-6" data-aos="fade-left">
107
+ <form id="applicationForm" class="space-y-6">
108
+ <div>
109
+ <label for="name" class="block text-sm font-medium text-gray-700">Store Owner's Name</label>
110
+ <div class="mt-1">
111
+ <input type="text" name="name" id="name" required class="form-input py-3 px-4 block w-full shadow-sm focus:ring-green-500 focus:border-green-500 border-gray-300 rounded-md">
112
+ </div>
113
+ </div>
114
+
115
+ <div>
116
+ <label for="storeUrl" class="block text-sm font-medium text-gray-700">Store URL</label>
117
+ <div class="mt-1">
118
+ <input type="url" name="storeUrl" id="storeUrl" required class="form-input py-3 px-4 block w-full shadow-sm focus:ring-green-500 focus:border-green-500 border-gray-300 rounded-md" placeholder="https://yourstore.myshopify.com">
119
+ </div>
120
+ </div>
121
+
122
+ <div>
123
+ <label for="country" class="block text-sm font-medium text-gray-700">Country of Operation</label>
124
+ <div class="mt-1">
125
+ <select id="country" name="country" required class="form-select py-3 px-4 block w-full shadow-sm focus:ring-green-500 focus:border-green-500 border-gray-300 rounded-md">
126
+ <option value="">Select a country</option>
127
+ <option value="US">United States</option>
128
+ <option value="CA">Canada</option>
129
+ <option value="UK">United Kingdom</option>
130
+ <option value="AU">Australia</option>
131
+ <option value="DE">Germany</option>
132
+ <option value="FR">France</option>
133
+ <option value="JP">Japan</option>
134
+ <option value="other">Other</option>
135
+ </select>
136
+ </div>
137
+ </div>
138
+
139
+ <div>
140
+ <label for="email" class="block text-sm font-medium text-gray-700">Active Email Address</label>
141
+ <div class="mt-1">
142
+ <input type="email" name="email" id="email" required class="form-input py-3 px-4 block w-full shadow-sm focus:ring-green-500 focus:border-green-500 border-gray-300 rounded-md">
143
+ </div>
144
+ </div>
145
+
146
+ <div>
147
+ <label for="launchDate" class="block text-sm font-medium text-gray-700">Date of Store Launch</label>
148
+ <div class="mt-1">
149
+ <input type="date" name="launchDate" id="launchDate" required class="form-input py-3 px-4 block w-full shadow-sm focus:ring-green-500 focus:border-green-500 border-gray-300 rounded-md">
150
+ </div>
151
+ </div>
152
+
153
+ <div>
154
+ <label for="plan" class="block text-sm font-medium text-gray-700">Select Plan</label>
155
+ <div class="mt-1">
156
+ <select id="plan" name="plan" required class="form-select py-3 px-4 block w-full shadow-sm focus:ring-green-500 focus:border-green-500 border-gray-300 rounded-md">
157
+ <option value="">Select a plan</option>
158
+ <option value="6_months">6 Months - $85</option>
159
+ <option value="1_year">1 Year - $125</option>
160
+ <option value="2_years">2 Years - $245</option>
161
+ <option value="3_years">3 Years - $305</option>
162
+ </select>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="flex items-start">
167
+ <div class="flex items-center h-5">
168
+ <input id="terms" name="terms" type="checkbox" required class="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300 rounded">
169
+ </div>
170
+ <div class="ml-3 text-sm">
171
+ <label for="terms" class="font-medium text-gray-700">I agree to the <a href="#" class="royal-blue-text hover:text-blue-500">terms and conditions</a></label>
172
+ <p class="text-gray-500">By submitting this form, you agree to our privacy policy.</p>
173
+ </div>
174
+ </div>
175
+
176
+ <div>
177
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white shopify-green hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
178
+ Submit Application
179
+ </button>
180
+ </div>
181
+ </form>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Success Modal -->
188
+ <div id="successModal" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
189
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
190
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
191
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
192
+ <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
193
+ <div>
194
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
195
+ <i data-feather="check" class="h-6 w-6 text-green-600"></i>
196
+ </div>
197
+ <div class="mt-3 text-center sm:mt-5">
198
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
199
+ Application Submitted!
200
+ </h3>
201
+ <div class="mt-2">
202
+ <p class="text-sm text-gray-500">
203
+ Thank you for your application. Our team will review your details and contact you within 24 hours to confirm your plan and next steps.
204
+ </p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ <div class="mt-5 sm:mt-6">
209
+ <button type="button" onclick="closeModal()" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 shopify-green text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:text-sm">
210
+ Close
211
+ </button>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Footer -->
218
+ <footer class="bg-gray-800">
219
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
220
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
221
+ <div class="space-y-8 xl:col-span-1">
222
+ <img class="h-10" src="https://via.placeholder.com/150x50?text=Vertex+Dimension" alt="Vertex Dimension Logo">
223
+ <p class="text-gray-300 text-base">
224
+ Helping Shopify merchants with seller permits since 2015.
225
+ </p>
226
+ </div>
227
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
228
+ <div class="md:grid md:grid-cols-2 md:gap-8">
229
+ <div>
230
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
231
+ Solutions
232
+ </h3>
233
+ <ul class="mt-4 space-y-4">
234
+ <li>
235
+ <a href="index.html" class="text-base text-gray-400 hover:text-white">
236
+ Seller Permits
237
+ </a>
238
+ </li>
239
+ <li>
240
+ <a href="plans.html" class="text-base text-gray-400 hover:text-white">
241
+ Pricing Plans
242
+ </a>
243
+ </li>
244
+ </ul>
245
+ </div>
246
+ <div class="mt-12 md:mt-0">
247
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
248
+ Support
249
+ </h3>
250
+ <ul class="mt-4 space-y-4">
251
+ <li>
252
+ <a href="#" class="text-base text-gray-400 hover:text-white">
253
+ Contact Us
254
+ </a>
255
+ </li>
256
+ <li>
257
+ <a href="#" class="text-base text-gray-400 hover:text-white">
258
+ FAQ
259
+ </a>
260
+ </li>
261
+ </ul>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div class="mt-12 border-t border-gray-700 pt-8">
267
+ <p class="text-base text-gray-400 text-center">
268
+ &copy; 2023 Vertex Dimension. All rights reserved.
269
+ </p>
270
+ </div>
271
+ </div>
272
+ </footer>
273
+
274
+ <script>
275
+ AOS.init();
276
+ feather.replace();
277
+
278
+ // Mobile menu toggle
279
+ const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
280
+ const mobileMenu = document.getElementById('mobile-menu');
281
+
282
+ mobileMenuButton.addEventListener('click', function() {
283
+ const expanded = this.getAttribute('aria-expanded') === 'true' || false;
284
+ this.setAttribute('aria-expanded', !expanded);
285
+ mobileMenu.classList.toggle('hidden');
286
+ });
287
+
288
+ // Form submission
289
+ document.getElementById('applicationForm').addEventListener('submit', function(e) {
290
+ e.preventDefault();
291
+
292
+ // Get form data
293
+ const formData = new FormData(this);
294
+ const data = {};
295
+ formData.forEach((value, key) => {
296
+ data[key] = value;
297
+ });
298
+
299
+ // Here you would typically send the data to your server
300
+ // For demo purposes, we'll just show the success modal
301
+ console.log('Form data:', data);
302
+
303
+ // Send email (this would be replaced with your actual email sending logic)
304
+ sendEmail(data);
305
+
306
+ // Show success modal
307
+ document.getElementById('successModal').classList.remove('hidden');
308
+
309
+ // Reset form
310
+ this.reset();
311
+ });
312
+
313
+ function closeModal() {
314
+ document.getElementById('successModal').classList.add('hidden');
315
+ }
316
+
317
+ function sendEmail(data) {
318
+ // This is a placeholder for your email sending functionality
319
+ // In a real implementation, you would use a server-side script or email service
320
+ const emailBody = `
321
+ New Application from Vertex Dimension Website:
322
+
323
+ Store Owner: ${data.name}
324
+ Store URL: ${data.storeUrl}
325
+ Country: ${data.country}
326
+ Email: ${data.email}
327
+ Launch Date: ${data.launchDate}
328
+ Selected Plan: ${data.plan}
329
+ `;
330
+
331
+ console.log('Email would be sent to officialvertexdimension@gmail.com with content:', emailBody);
332
+
333
+ // In a real implementation, you might use:
334
+ // - A server-side script (PHP, Node.js, etc.)
335
+ // - An email service like Formspree, EmailJS, or similar
336
+ // - A backend API to handle the email sending
337
+ }
338
+ </script>
339
+ </body>
340
+ </html>
index.html CHANGED
@@ -1,19 +1,225 @@
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>Vertex Dimension - Shopify Partner</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .shopify-green {
14
+ background-color: #96bf48;
15
+ }
16
+ .shopify-green-text {
17
+ color: #96bf48;
18
+ }
19
+ .royal-blue {
20
+ background-color: #2a4e96;
21
+ }
22
+ .royal-blue-text {
23
+ color: #2a4e96;
24
+ }
25
+ .hero-gradient {
26
+ background: linear-gradient(135deg, #2a4e96 0%, #96bf48 100%);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="font-sans">
31
+ <!-- Navigation -->
32
+ <nav class="bg-white shadow-md">
33
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
34
+ <div class="flex justify-between h-16">
35
+ <div class="flex items-center">
36
+ <div class="flex-shrink-0 flex items-center">
37
+ <img class="h-8 w-auto" src="https://via.placeholder.com/150x50?text=Vertex+Dimension" alt="Vertex Dimension Logo">
38
+ </div>
39
+ </div>
40
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
41
+ <a href="index.html" class="royal-blue-text px-3 py-2 rounded-md text-sm font-medium">Home</a>
42
+ <a href="plans.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Plans</a>
43
+ <a href="apply.html" class="shopify-green-text px-3 py-2 rounded-md text-sm font-medium">Apply Now</a>
44
+ </div>
45
+ <div class="-mr-2 flex items-center md:hidden">
46
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
47
+ <span class="sr-only">Open main menu</span>
48
+ <i data-feather="menu"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <!-- Mobile menu -->
55
+ <div class="md:hidden hidden" id="mobile-menu">
56
+ <div class="pt-2 pb-3 space-y-1">
57
+ <a href="index.html" class="royal-blue-text block px-3 py-2 rounded-md text-base font-medium">Home</a>
58
+ <a href="plans.html" class="text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Plans</a>
59
+ <a href="apply.html" class="shopify-green-text block px-3 py-2 rounded-md text-base font-medium">Apply Now</a>
60
+ </div>
61
+ </div>
62
+ </nav>
63
+
64
+ <!-- Hero Section -->
65
+ <div class="hero-gradient text-white">
66
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
67
+ <div class="text-center">
68
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
69
+ Shopify Seller Permit Solutions
70
+ </h1>
71
+ <p class="mt-6 max-w-2xl mx-auto text-xl">
72
+ Trusted by thousands of Shopify merchants to handle their seller permits quickly and efficiently.
73
+ </p>
74
+ <div class="mt-10">
75
+ <a href="plans.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-black hover:bg-gray-800">
76
+ View Plans
77
+ <i data-feather="arrow-right" class="ml-2"></i>
78
+ </a>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Features Section -->
85
+ <div class="py-12 bg-white">
86
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
87
+ <div class="lg:text-center">
88
+ <h2 class="text-base royal-blue-text font-semibold tracking-wide uppercase">Why Choose Us</h2>
89
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
90
+ Simple, Fast, and Reliable
91
+ </p>
92
+ </div>
93
+
94
+ <div class="mt-10">
95
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
96
+ <div class="relative" data-aos="fade-up">
97
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
98
+ <i data-feather="check-circle"></i>
99
+ </div>
100
+ <div class="ml-16">
101
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Expert Assistance</h3>
102
+ <p class="mt-2 text-base text-gray-500">
103
+ Our team specializes in Shopify seller permits with years of experience.
104
+ </p>
105
+ </div>
106
+ </div>
107
+
108
+ <div class="relative" data-aos="fade-up" data-aos-delay="100">
109
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
110
+ <i data-feather="clock"></i>
111
+ </div>
112
+ <div class="ml-16">
113
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Quick Processing</h3>
114
+ <p class="mt-2 text-base text-gray-500">
115
+ Get your seller permit processed in record time without the hassle.
116
+ </p>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="relative" data-aos="fade-up" data-aos-delay="200">
121
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
122
+ <i data-feather="shield"></i>
123
+ </div>
124
+ <div class="ml-16">
125
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Compliance Guarantee</h3>
126
+ <p class="mt-2 text-base text-gray-500">
127
+ We ensure your business stays compliant with all regulations.
128
+ </p>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- CTA Section -->
137
+ <div class="bg-gray-50">
138
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
139
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
140
+ <span class="block">Ready to get started?</span>
141
+ <span class="block royal-blue-text">Get your Shopify seller permit today.</span>
142
+ </h2>
143
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
144
+ <div class="inline-flex rounded-md shadow">
145
+ <a href="apply.html" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white shopify-green hover:bg-green-700">
146
+ Apply Now
147
+ </a>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Footer -->
154
+ <footer class="bg-gray-800">
155
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
156
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
157
+ <div class="space-y-8 xl:col-span-1">
158
+ <img class="h-10" src="https://via.placeholder.com/150x50?text=Vertex+Dimension" alt="Vertex Dimension Logo">
159
+ <p class="text-gray-300 text-base">
160
+ Helping Shopify merchants with seller permits since 2015.
161
+ </p>
162
+ </div>
163
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
164
+ <div class="md:grid md:grid-cols-2 md:gap-8">
165
+ <div>
166
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
167
+ Solutions
168
+ </h3>
169
+ <ul class="mt-4 space-y-4">
170
+ <li>
171
+ <a href="index.html" class="text-base text-gray-400 hover:text-white">
172
+ Seller Permits
173
+ </a>
174
+ </li>
175
+ <li>
176
+ <a href="plans.html" class="text-base text-gray-400 hover:text-white">
177
+ Pricing Plans
178
+ </a>
179
+ </li>
180
+ </ul>
181
+ </div>
182
+ <div class="mt-12 md:mt-0">
183
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
184
+ Support
185
+ </h3>
186
+ <ul class="mt-4 space-y-4">
187
+ <li>
188
+ <a href="#" class="text-base text-gray-400 hover:text-white">
189
+ Contact Us
190
+ </a>
191
+ </li>
192
+ <li>
193
+ <a href="#" class="text-base text-gray-400 hover:text-white">
194
+ FAQ
195
+ </a>
196
+ </li>
197
+ </ul>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ <div class="mt-12 border-t border-gray-700 pt-8">
203
+ <p class="text-base text-gray-400 text-center">
204
+ &copy; 2023 Vertex Dimension. All rights reserved.
205
+ </p>
206
+ </div>
207
+ </div>
208
+ </footer>
209
+
210
+ <script>
211
+ AOS.init();
212
+ feather.replace();
213
+
214
+ // Mobile menu toggle
215
+ const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
216
+ const mobileMenu = document.getElementById('mobile-menu');
217
+
218
+ mobileMenuButton.addEventListener('click', function() {
219
+ const expanded = this.getAttribute('aria-expanded') === 'true' || false;
220
+ this.setAttribute('aria-expanded', !expanded);
221
+ mobileMenu.classList.toggle('hidden');
222
+ });
223
+ </script>
224
+ </body>
225
  </html>
plans.html ADDED
@@ -0,0 +1,469 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Vertex Dimension - Plans</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .shopify-green {
14
+ background-color: #96bf48;
15
+ }
16
+ .shopify-green-text {
17
+ color: #96bf48;
18
+ }
19
+ .royal-blue {
20
+ background-color: #2a4e96;
21
+ }
22
+ .royal-blue-text {
23
+ color: #2a4e96;
24
+ }
25
+ .popular-plan {
26
+ border: 2px solid #96bf48;
27
+ position: relative;
28
+ }
29
+ .popular-badge {
30
+ position: absolute;
31
+ top: -12px;
32
+ right: 20px;
33
+ background-color: #96bf48;
34
+ color: white;
35
+ padding: 4px 12px;
36
+ border-radius: 20px;
37
+ font-size: 12px;
38
+ font-weight: bold;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="font-sans">
43
+ <!-- Navigation -->
44
+ <nav class="bg-white shadow-md">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <img class="h-8 w-auto" src="https://via.placeholder.com/150x50?text=Vertex+Dimension" alt="Vertex Dimension Logo">
50
+ </div>
51
+ </div>
52
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
53
+ <a href="index.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
54
+ <a href="plans.html" class="royal-blue-text px-3 py-2 rounded-md text-sm font-medium">Plans</a>
55
+ <a href="apply.html" class="shopify-green-text px-3 py-2 rounded-md text-sm font-medium">Apply Now</a>
56
+ </div>
57
+ <div class="-mr-2 flex items-center md:hidden">
58
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
59
+ <span class="sr-only">Open main menu</span>
60
+ <i data-feather="menu"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- Mobile menu -->
67
+ <div class="md:hidden hidden" id="mobile-menu">
68
+ <div class="pt-2 pb-3 space-y-1">
69
+ <a href="index.html" class="text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Home</a>
70
+ <a href="plans.html" class="royal-blue-text block px-3 py-2 rounded-md text-base font-medium">Plans</a>
71
+ <a href="apply.html" class="shopify-green-text block px-3 py-2 rounded-md text-base font-medium">Apply Now</a>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <!-- Pricing Section -->
77
+ <div class="bg-gray-50 py-12">
78
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
79
+ <div class="text-center">
80
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
81
+ Simple, transparent pricing
82
+ </h2>
83
+ <p class="mt-4 text-xl text-gray-600">
84
+ Choose the plan that works best for your Shopify store
85
+ </p>
86
+ </div>
87
+
88
+ <div class="mt-16 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
89
+ <!-- 6 Month Plan -->
90
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200" data-aos="fade-up">
91
+ <div class="p-6">
92
+ <h3 class="text-lg leading-6 font-medium text-gray-900">6 Month Plan</h3>
93
+ <div class="mt-4">
94
+ <span class="text-4xl font-extrabold text-gray-900">$85</span>
95
+ <span class="text-base font-medium text-gray-500">/6 months</span>
96
+ </div>
97
+ <p class="mt-4 text-sm text-gray-500">
98
+ Perfect for new stores testing the waters
99
+ </p>
100
+ </div>
101
+ <div class="pt-6 pb-8 px-6">
102
+ <ul class="space-y-4">
103
+ <li class="flex items-start">
104
+ <div class="flex-shrink-0">
105
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
106
+ </div>
107
+ <p class="ml-3 text-base text-gray-700">
108
+ Seller permit processing
109
+ </p>
110
+ </li>
111
+ <li class="flex items-start">
112
+ <div class="flex-shrink-0">
113
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
114
+ </div>
115
+ <p class="ml-3 text-base text-gray-700">
116
+ Basic compliance support
117
+ </p>
118
+ </li>
119
+ <li class="flex items-start">
120
+ <div class="flex-shrink-0">
121
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
122
+ </div>
123
+ <p class="ml-3 text-base text-gray-700">
124
+ Email support
125
+ </p>
126
+ </li>
127
+ </ul>
128
+ <div class="mt-8">
129
+ <a href="apply.html" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-gray-900">
130
+ Get started
131
+ </a>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- 1 Year Plan (Popular) -->
137
+ <div class="bg-white border-2 border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200 popular-plan" data-aos="fade-up" data-aos-delay="100">
138
+ <div class="popular-badge">Most Popular</div>
139
+ <div class="p-6">
140
+ <h3 class="text-lg leading-6 font-medium text-gray-900">1 Year Plan</h3>
141
+ <div class="mt-4">
142
+ <span class="text-4xl font-extrabold text-gray-900">$125</span>
143
+ <span class="text-base font-medium text-gray-500">/year</span>
144
+ </div>
145
+ <p class="mt-4 text-sm text-gray-500">
146
+ Best value for established stores
147
+ </p>
148
+ </div>
149
+ <div class="pt-6 pb-8 px-6">
150
+ <ul class="space-y-4">
151
+ <li class="flex items-start">
152
+ <div class="flex-shrink-0">
153
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
154
+ </div>
155
+ <p class="ml-3 text-base text-gray-700">
156
+ Seller permit processing
157
+ </p>
158
+ </li>
159
+ <li class="flex items-start">
160
+ <div class="flex-shrink-0">
161
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
162
+ </div>
163
+ <p class="ml-3 text-base text-gray-700">
164
+ Priority compliance support
165
+ </p>
166
+ </li>
167
+ <li class="flex items-start">
168
+ <div class="flex-shrink-0">
169
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
170
+ </div>
171
+ <p class="ml-3 text-base text-gray-700">
172
+ Email and chat support
173
+ </p>
174
+ </li>
175
+ <li class="flex items-start">
176
+ <div class="flex-shrink-0">
177
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
178
+ </div>
179
+ <p class="ml-3 text-base text-gray-700">
180
+ Renewal reminders
181
+ </p>
182
+ </li>
183
+ </ul>
184
+ <div class="mt-8">
185
+ <a href="apply.html" class="block w-full shopify-green border border-transparent rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-green-700">
186
+ Get started
187
+ </a>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- 2 Year Plan -->
193
+ <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200" data-aos="fade-up" data-aos-delay="200">
194
+ <div class="p-6">
195
+ <h3 class="text-lg leading-6 font-medium text-gray-900">2 Year Plan</h3>
196
+ <div class="mt-4">
197
+ <span class="text-4xl font-extrabold text-gray-900">$245</span>
198
+ <span class="text-base font-medium text-gray-500">/2 years</span>
199
+ </div>
200
+ <p class="mt-4 text-sm text-gray-500">
201
+ For stores planning long-term growth
202
+ </p>
203
+ </div>
204
+ <div class="pt-6 pb-8 px-6">
205
+ <ul class="space-y-4">
206
+ <li class="flex items-start">
207
+ <div class="flex-shrink-0">
208
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
209
+ </div>
210
+ <p class="ml-3 text-base text-gray-700">
211
+ Seller permit processing
212
+ </p>
213
+ </li>
214
+ <li class="flex items-start">
215
+ <div class="flex-shrink-0">
216
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
217
+ </div>
218
+ <p class="ml-3 text-base text-gray-700">
219
+ Premium compliance support
220
+ </p>
221
+ </li>
222
+ <li class="flex items-start">
223
+ <div class="flex-shrink-0">
224
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
225
+ </div>
226
+ <p class="ml-3 text-base text-gray-700">
227
+ Email, chat, and phone support
228
+ </p>
229
+ </li>
230
+ <li class="flex items-start">
231
+ <div class="flex-shrink-0">
232
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
233
+ </div>
234
+ <p class="ml-3 text-base text-gray-700">
235
+ Renewal reminders
236
+ </p>
237
+ </li>
238
+ <li class="flex items-start">
239
+ <div class="flex-shrink-0">
240
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
241
+ </div>
242
+ <p class="ml-3 text-base text-gray-700">
243
+ Compliance audit
244
+ </p>
245
+ </li>
246
+ </ul>
247
+ <div class="mt-8">
248
+ <a href="apply.html" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-gray-900">
249
+ Get started
250
+ </a>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- 3 Year Plan (Full Width) -->
257
+ <div class="mt-8 bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200" data-aos="fade-up">
258
+ <div class="p-6">
259
+ <h3 class="text-lg leading-6 font-medium text-gray-900">3 Year Plan</h3>
260
+ <div class="mt-4">
261
+ <span class="text-4xl font-extrabold text-gray-900">$305</span>
262
+ <span class="text-base font-medium text-gray-500">/3 years</span>
263
+ </div>
264
+ <p class="mt-4 text-sm text-gray-500">
265
+ Maximum savings for established businesses
266
+ </p>
267
+ </div>
268
+ <div class="pt-6 pb-8 px-6">
269
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
270
+ <div>
271
+ <ul class="space-y-4">
272
+ <li class="flex items-start">
273
+ <div class="flex-shrink-0">
274
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
275
+ </div>
276
+ <p class="ml-3 text-base text-gray-700">
277
+ Seller permit processing
278
+ </p>
279
+ </li>
280
+ <li class="flex items-start">
281
+ <div class="flex-shrink-0">
282
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
283
+ </div>
284
+ <p class="ml-3 text-base text-gray-700">
285
+ Premium compliance support
286
+ </p>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <div class="flex-shrink-0">
290
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
291
+ </div>
292
+ <p class="ml-3 text-base text-gray-700">
293
+ Dedicated account manager
294
+ </p>
295
+ </li>
296
+ </ul>
297
+ </div>
298
+ <div>
299
+ <ul class="space-y-4">
300
+ <li class="flex items-start">
301
+ <div class="flex-shrink-0">
302
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
303
+ </div>
304
+ <p class="ml-3 text-base text-gray-700">
305
+ Email, chat, and phone support
306
+ </p>
307
+ </li>
308
+ <li class="flex items-start">
309
+ <div class="flex-shrink-0">
310
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
311
+ </div>
312
+ <p class="ml-3 text-base text-gray-700">
313
+ Compliance audit every 6 months
314
+ </p>
315
+ </li>
316
+ <li class="flex items-start">
317
+ <div class="flex-shrink-0">
318
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
319
+ </div>
320
+ <p class="ml-3 text-base text-gray-700">
321
+ Priority renewal processing
322
+ </p>
323
+ </li>
324
+ </ul>
325
+ </div>
326
+ </div>
327
+ <div class="mt-8">
328
+ <a href="apply.html" class="block w-full royal-blue border border-transparent rounded-md py-3 text-sm font-semibold text-white text-center hover:bg-blue-700">
329
+ Get started
330
+ </a>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- FAQ Section -->
338
+ <div class="bg-white py-12">
339
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
340
+ <div class="lg:text-center">
341
+ <h2 class="text-base royal-blue-text font-semibold tracking-wide uppercase">Questions</h2>
342
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
343
+ Frequently asked questions
344
+ </p>
345
+ </div>
346
+
347
+ <div class="mt-10">
348
+ <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
349
+ <div class="relative">
350
+ <dt>
351
+ <p class="text-lg leading-6 font-medium text-gray-900">
352
+ What's included in the seller permit processing?
353
+ </p>
354
+ </dt>
355
+ <dd class="mt-2 text-base text-gray-500">
356
+ We handle all the paperwork, filings, and communications with the relevant authorities to get your seller permit approved quickly and efficiently.
357
+ </dd>
358
+ </div>
359
+
360
+ <div class="relative">
361
+ <dt>
362
+ <p class="text-lg leading-6 font-medium text-gray-900">
363
+ How long does the process take?
364
+ </p>
365
+ </dt>
366
+ <dd class="mt-2 text-base text-gray-500">
367
+ Processing times vary by location, but typically range from 2-6 weeks. We expedite the process as much as possible.
368
+ </dd>
369
+ </div>
370
+
371
+ <div class="relative">
372
+ <dt>
373
+ <p class="text-lg leading-6 font-medium text-gray-900">
374
+ Can I upgrade my plan later?
375
+ </p>
376
+ </dt>
377
+ <dd class="mt-2 text-base text-gray-500">
378
+ Yes, you can upgrade at any time. We'll prorate the difference based on your remaining term.
379
+ </dd>
380
+ </div>
381
+
382
+ <div class="relative">
383
+ <dt>
384
+ <p class="text-lg leading-6 font-medium text-gray-900">
385
+ What payment methods do you accept?
386
+ </p>
387
+ </dt>
388
+ <dd class="mt-2 text-base text-gray-500">
389
+ We accept all major credit cards, PayPal, and bank transfers for annual plans.
390
+ </dd>
391
+ </div>
392
+ </dl>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Footer -->
398
+ <footer class="bg-gray-800">
399
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
400
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
401
+ <div class="space-y-8 xl:col-span-1">
402
+ <img class="h-10" src="https://via.placeholder.com/150x50?text=Vertex+Dimension" alt="Vertex Dimension Logo">
403
+ <p class="text-gray-300 text-base">
404
+ Helping Shopify merchants with seller permits since 2015.
405
+ </p>
406
+ </div>
407
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
408
+ <div class="md:grid md:grid-cols-2 md:gap-8">
409
+ <div>
410
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
411
+ Solutions
412
+ </h3>
413
+ <ul class="mt-4 space-y-4">
414
+ <li>
415
+ <a href="index.html" class="text-base text-gray-400 hover:text-white">
416
+ Seller Permits
417
+ </a>
418
+ </li>
419
+ <li>
420
+ <a href="plans.html" class="text-base text-gray-400 hover:text-white">
421
+ Pricing Plans
422
+ </a>
423
+ </li>
424
+ </ul>
425
+ </div>
426
+ <div class="mt-12 md:mt-0">
427
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
428
+ Support
429
+ </h3>
430
+ <ul class="mt-4 space-y-4">
431
+ <li>
432
+ <a href="#" class="text-base text-gray-400 hover:text-white">
433
+ Contact Us
434
+ </a>
435
+ </li>
436
+ <li>
437
+ <a href="#" class="text-base text-gray-400 hover:text-white">
438
+ FAQ
439
+ </a>
440
+ </li>
441
+ </ul>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ <div class="mt-12 border-t border-gray-700 pt-8">
447
+ <p class="text-base text-gray-400 text-center">
448
+ &copy; 2023 Vertex Dimension. All rights reserved.
449
+ </p>
450
+ </div>
451
+ </div>
452
+ </footer>
453
+
454
+ <script>
455
+ AOS.init();
456
+ feather.replace();
457
+
458
+ // Mobile menu toggle
459
+ const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
460
+ const mobileMenu = document.getElementById('mobile-menu');
461
+
462
+ mobileMenuButton.addEventListener('click', function() {
463
+ const expanded = this.getAttribute('aria-expanded') === 'true' || false;
464
+ this.setAttribute('aria-expanded', !expanded);
465
+ mobileMenu.classList.toggle('hidden');
466
+ });
467
+ </script>
468
+ </body>
469
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create for me a website for vertex dimensions and I put this logo that I will be attaching to this message. The website has 3 different pages the first is the overview about the seller permit and the next talks about the plan and packages 6 months $85, 1 year $125, 2 years $245 and 3 years $305. Then create a form that will require the following details. Store owners name, store URL, country of Operation, active email address and date of store launch. Now the form will be linked to my email officialvertexdimension@gmail.com and once they fill the form the details auto magically reflect in my email. The colour used should be Shopify green and royal blue. Let it look like original Shopify partner page and the name should be Vertex Dimension